1stwebdesigner

Posted by | Posted on 17:18

1stwebdesigner


How to easily integrate Social Media into your website

Posted: 12 Aug 2010 02:00 PM PDT

Social media is all the hype on the internet recently. Facebook and twitter have grown at an alarming rate. Google have tried their hand at it with Buzz, Wave and Orkut. MySpace and Bebo have slowly failed. Digg and Reddit are still trying to keep their foot in the door, and that is just mentioning a few.


For business’s, this is fantastic. We’ve seen viral videos on YouTube, Facebook campaigns, foursquare promotions, and so much more. For you though, the small business, freelancer or so on, the thing’s that the big companies are doing aren’t suited for you. What you need to do is successfully integrate your social media and networks into your site, because nowadays, people will spread what they love on these sites, and you need to be there!

Twitter

Twitter is a fantastic resource. Initially it was used by the web community, spreading useful links amongst the community, and it importantly still is, but it has caught on to the whole world. Now celebrities, companies, and everyday people are using it to keep up-to-date with what’s going on. By integrating twitter with your site, you allow people too much more easily follow what YOU are doing, and what is happening on your site.

TweetMeMe

The TweetMeMe button is everywhere. Some of the biggest tech blogs such as Wired, TechCrunch and Mashable use it, and that’s testament to its usefulness. In essence, it lets your readers tell their friends about your article which they’ve enjoyed reading, or found useful, with one single click. It also keeps track of how many times your article has been retweeted with a counter!

TwitterFeed

While TweetMeMe allows your readers to tweet your article, do you really want to have to be clicking that button every time you publish an article as well? If the answer is no, then that is where TwitterFeed fits in for you. It check’s your blog’s RSS feed, and when a new entry is found, it tweets it automatically for you!

Tweet!

Want to show your latest tweets in your blogs sidebar? There are plenty ways to do so, from widgets to writing your own scripts to display them. Tweet! makes its fantastically easy as a lightweight, customisable jQuery plugin. It even has nifty features such as automatic linking, and converting <3 into ♥.

Twitter Icons

You are of course going to want to encourage user to follow you, and what better way to do so than to make use of a fantastic button to attract the reader’s eye to your twitter page. Here is a fantastic roundup of over 100 twitter icons, but there are plenty out there, so if you don’t find something you like, Google is the place to start looking!

Facebook

Facebook has grown massively in recent years. Nearly every teen and younger adult has an account and regularly checks it, sometimes several times a day. This offers a fantastic market of people to spread your site amongst, and with Facebook’s continuing growth, and branching out into all sorts of markets such as gaming, search and advertisement, it is somewhere you want to be.

FBShare

This is much like TweetMeMe except instead of tweeting, it shows you liking the page on Facebook! When someone does this, you are having your link shown to hundreds of this persons friends, increasing the amount of people likely to read your article. Like TweetMeMe, it keeps track of the amount of shared, and is fairly customisable.

Facebook Fan Widget

This widget is intended for your sidebar, and allows users to like your website on Facebook, without having to search for you on Facebook! It shows a like button for your Facebook page, your latest updates, and some of the people who have already liked your page.

FB Connect Comments

Allows your readers to comment on your site using Facebook! Facebook is up there with the most powerful, most used websites of today, so why not harness what it has to offer and get the conversation flowing on your site via Facebook’s accounts, notifications and so on. This widget is powerful, yet easy to set up.

RSS to Facebook

Unlike Twitter, which has TwitterFeed, Facebook doesn’t have anything easily built-in to show your latest blog posts from rss to your Facebook page. Luckily, it is possible and this tutorial shows you exactly how!

Digg

Digg is a fantastic resource for sites that publish articles and news. In essence the public Digg articles that they like. The more times an article is dugg, the higher in the list it becomes. Articles that make it to the front page can benefit from 10’s of thousands of click-throughs; not something to be missed out on!

Digg Button

Much like TweetMeMe, and FBShare, A Digg button will allow your readers to submit your article to Digg.com, and Digg it to raise its popularity. The more people who Digg your article, the more popular it becomes, and the more new visitors you are likely to receive!

Digg Widget

If you produce articles on a regular basis, you may want to show off your article’s on Digg, in your websites sidebar. Digg make this fantastically easy to do this widget generator that allows you to show things like popular articles, upcoming articles and so on in different categories and tabs. It produces a simple piece of code that you simple copy paste into your sidebar!

Google Buzz

Google Buzz is Google’s latest attempt to break into the social networking/media markets. By integrating it into people’s Google mail inbox, it means that it’s there for people to read easily, and is therefore not something to simply brush aside. Big social news sites such as Mashable have adopted it in their social media buttons, so why shouldn’t you?

Show your latest articles in Buzz

Want to show your articles as you publish them in Google Buzz? I know sites like Mashable do so, and I often see some great discussions taking place in Buzz on these articles. If this is something you want to do, then it’s fairly easy. All you need to do is connect your site with Google, and prove that you are the owner of the site.

WP Google Buzz

Again, this is like FBShare, and TweetMeMe, but for Google Buzz. The same standards apply; your readers click it to show your article in the Google Buzz, and likewise, it will keep a count of how many times this happens. Sadly, this is just a Wordpress plugin.

Google Buzz ER

Want your Google Buzz updates to be displayed on your Wordpress website? No problem! This Wordpress plugin makes it simple and easy to do so, and you aren’t just limited to the sidebar. You can place this wherever you want on your website!

Further Options

These are of course, just a few ideas for each platform to get you started. There are many more out there, some that provide support for all platforms. There are social media plugins for WordPress that will allow you to select a multitude of sites to support. You could choose to use a commenting system such a disqus which allows Facebook, twitter and buzz integration. Just remember, keep it clean. While social media integration is key these days, don’t go overboard to the point where the site isn’t yours any more, it’s just a big mash of different social integrations. Realise what you need, and what you don’t, and things will work well for your site!

Email UI Faceoff: Gmail vs Hotmail vs Yahoo!

Posted: 12 Aug 2010 03:00 AM PDT

I recently wrote about 9 well designed, usable websites, and what makes them great. Gmail, as one of my personal favorites, and a site many people love featured in the list, because I think it really is a truly useful, usable website. I was quite surprised to see in the comments a number of people saying that they simply couldn't agree with Gmail as a pick.

This leads to the issue of finding a subjective method for deciding which webmail system is best. How? Read on to find out.

Making a decision: which is best?

Of course, all of our views are subjective, and it seems the fairest way to decide is to run an impartial test on between some of the most popular webmail services.

The three webmail services that are well ahead of the pack in terms of users are of course Gmail, Hotmail and Yahoo! Mail, and so today we will pit them against each other in a usability battle.

Gmail, Yahoo! and Hotmail UI

UI faceoff - who will win?

Rather than colouring the results with our own biases, this article will be broken into two parts: Round one is the testing process, and getting feedback from users, and round two will be the summary of results and what we think should or could be done differently.

So see below for the testing process, the test itself, and how it all works. Hopefully you can learn a little more about the usability testing and how it can help you too.

Part One: The Testing Process

The testing process is very straight forward. There is a brief test at video.intuitionhq.com/email-face-off which should take around 3 minutes to complete – you can read about the testing process, or just head on over to take the test now.

You will be presented with a series of tasks (17 total in this example), and all you need to do is click where ever you think is the right place. For example, you might be asked with the following image, 'Where do you need to click to sign up':

Click to sign up - choose the big green sign up button

I pick the big green button

This is obviously a very straight forward example, but if you imagine when you have a site or UI with important features that people can't find, or aren't in their expected place things might not be as usable as they should be.

Another example might be 'Click where you'd expect to return to the home page' with a grid to click on:

A grid for testing perceptions and reality

A grid for testing perceptions and reality

This grid can then be overlaid over a design to see if the perception and reality of the design are the same thing:

A grid overlayed over design to compare ideas with reality

The overlayed grid for comparing ideas with reality

In this example, most users would probably click in the top right hand area, either aiming at the logo (which commonly links back to the home page) or the home tab. This is a common convention these days, and it generally pays to follow it.

Not following conventions means people have to relearn. Imagine someone swapped the position of the shift and delete keys – you would be frustrated that after learned the original location (the traditional location of the enter key) that someone changed things around. Consider that when creating your sites and contemplating usability.

Of course, every great site doesn't have to follow conventions, but there should be a good reason for ignoring them. Conventions and expected behaviour generally do help improve usability.

The results:

At the end of the test, a nice heatmap is generated (for the test creator to see) showing where people clicked, and how long it took them (not shown here), so you can judge what is or isn't working properly, as per the example below:

An example of a heatmap with results

The final product - a heatmap with results

In this example, you can see 87% of people clicked the correct button, and a few random clicks as might be expected as this is a demo test page we like to show people, but all in all most people get the exact right place. Of course, if we'd asked people how to preview a test and they clicked publish instead, we might need to make some changes.

So, what next?

Head on over to video.intuitionhq.com/email-face-off and take the test. Help us figure out just which webmail service is the best, most usable among them. Be sure to leave your thoughts in the comments about the different services and testing process too.

We'll be writing about the results shortly, and how we think these sites can improve, and what they've done right, so watch this space.

And if there are any other categories of sites you'd like us to see in a usability face off, be sure to let us know in the comments.

Comments (0)

Post a Comment