How to build a website with Social User Experience integrated?
Social web 2.0 trends have taken over many of our modern static websites. Nowadays it’s difficult to find a company who isn’t on Facebook or Twitter or Foursquare, or any of the other increasingly popular social networks. It’s important to consider this experience and how you can portray social connection in the eyes of your visitors.
I’ve provided a few ideas for sprucing up any web design for a positive social UX layout. You’ll need to consider a number of factors such as interactivity and page elements for user interaction. From what I’ve experienced your visitors will be noticeably more interested in branding than anything else. And this interest always leads to more signups, conversions, and sales.
Form a Community
One of the first tasks you can perform is to surround your visitors with a sense of membership and community support. There are a number of ways you can synthesize this feeling with different web elements. Facebook lets you create a small widget you can embed into your sidebar, and FB users can “Like” your website right within the page. Additionally this widget catalogs the number of Likes as well as recent users & profile pics. Check out the Facebook social plugins menu to see what I’m talking about.
This opportunity grants users a chance to connect with each other and consider the Internet community as a whole. If you run a blog through WordPress or Google Blogger it’s easy to update the comments form with Facebook connection as well. This means users can respond to each-other in real time and hold dynamic conversations.
Allow OAuth Connection
Most websites these days have some type of registration or login process. Members can sign up with their e-mail address and log in for extra functionality. But more web developers are getting into OAuth support for popular sites including Facebook and Twitter. These big players are of course a good option – but even smaller networks such as Instagram and Tumblr have support for Open Authentication.
You may be asking how this can really affect the user experience? Well for one thing it can dramatically cut down on registration time. Additionally users are not storing sensitive data such as passwords or e-mails within your database. OAuth connection verifies the user on the external party’s website and thus requires no personal account information on your end.
This also means your visitors won’t need to update any profile information to leave a comment on blog posts. All their personal data including username, display name, and avatar icon can be pulled from whichever network they use. Try reading a bit more about OAuth in our “Future of Web Design” article published last November.
Threaded User Comments
Threaded comment displays are a bit difficult to implement with your own code. If you have built a website around WordPress or another similar CMS you may be lucky enough to find a workable plugin. A quick Google search for WordPress threaded comments is likely to find at least a few results.
The biggest benefit is that you gain users interacting with one-another in detailed conversation. You’ll find a lot of different opinions about the content you publish, and with different threads you allow users to chain along in a few conversation topics. If you feel more comfortable with a dedicated comment system I recommend Disqus for WordPress.
They have plugins for other CMS engines such as Joomla! and Drupal. However WordPress is easily the most popular of the bunch and I feel this plugin is great for building up social interaction. Users aren’t required to log into your website at all – in fact as long as their Disqus account is logged-in they can comment immediately with their full credentials.
And while we’re considering custom comment systems I might recommend adding a variation of user voting. Digg really hit home with their old comments system, and Reddit threads are most valuable with user participation. In this mass-controlled system spam naturally gets buried while insightful and helpful remarks float towards the top.
Widgets & Badges
We’ve all run into the popular Digg-style voting badges around the web. These type of in-page widgets allow members of such networks to share and vote on your stories. The most popular examples include Reddit, StumbleUpon, Google+, Twitter, and of course a few others.
What social experience could be complete without direct access to social media sharing? Your visitors are likely going to use at least one of these services, if not many! If they enjoy your content these badges(when properly placed) make viral marketing just a few clicks away. But you certainly don’t want to go overboard with this trend.
It’s best to test out the waters and include a few different badges over a couple of weeks. Using this knowledge you can best choose which badges have the most impact based on your visitors. I’d limit to using 3-4 vote badges at most, unless your layout can support more.
Include Your Profile Links
And finally you want to include links back to your own social media profiles wherever convenient. As mentioned earlier you should definitely sign up for a couple of the most popular networks if you haven’t already. Twitter and Facebook are the biggest, and you can choose from other alternatives based on your niche.
Small businesses will likely see no point in a Friendster account or mlkshk. But joining LinkedIn may be a good idea for both networking with friends & possible customers. The mobile check-in serviceFoursquare could also prove helpful in drumming up local business.
These are just a few popular ideas for additional social outlets on your website. The Internet is a constant buzz of attention and information. More people are using the World Wide Web than ever before, and thus we’re more connected globally through alternative media. Your website will stand out among the crowd if you can successfully follow with the trends and keep your visitors connected in new and exciting ways.