creative briefing

In October 2008 I joined a great group of guys over at Daily Challenge to lend some creative firepower to an already blazing group of talented young individuals. At that point, Daily Challenge was merely weeks into its first public beta release of its new socially-conscious-driven social network and sported an undesirable user interface that was begging for some creative attention. But that didn’t matter – as with any new age development team working on a new social media product, the goal was not to release a perfectly designed or developed site, but rather to get an idea out into the market quickly and start listening to the feedback.

Fast forward 5 months and Daily Challenge releases its 2.0 website – the product of many long days and nights of usability sessions, focus groups, research, self-reflections, yoga desk calendars, and lots and lots and lots of attentive listening. We planned, mapped, designed, redesigned, redesigned again (and again and again), developed, tweaked, redeveloped (and again and again… you get the point) and launched a site that we felt was not only leaps and bounds better than its predecessor (in pretty much every aspect), but was also, more importantly, much more usable.

And that’s what this post is about (in case you were wondering where I was going with all of this…).

Usability in Social Networks vs. Regular Websites

Social networks differ from regular websites in 3 fundamental ways:

1. Activities and content are fully (or at least mostly) driven by the users.
2. Users are expected to do things on the website – interact, post, vote, etc.
3. Users are expected to come back to the website periodically and continue to do things.

As a result of this, social networks should – I say should because not every social network does this – put greater emphasis on usability over, say, a corporate website. Don’t get me wrong, usability is important everywhere you go on the web, but the nature of a social network’s operation makes usability especially important.

This perspective guided my thinking during the redesign of the Daily Challenge beta 2.0 website. Many forks in the road were put to rest at the hands of basic usability principles that dictated righter from wronger (sometimes there was no strictly right or wrong answer). These are the principles that I want to share with you in the following case study of how usability can be applied to a social network.

1. Show only relevant information

Typically, in a list of items, many of the items share the same elements. Consider a list of articles on Digg – every article has a Digg button, a title, a description, a comment count, a share link, a bury link and the picture and name of the user who submitted the article. Of these elements, how many are the same from article to article? The share and bury links are definitely always the same, while the comment count and submission credit both follow a similar convention that combines common words (“Comments”, “made popular”, “hr”, “min ago”) with contextual variables (the number of comments, the name of the author, etc).

Let’s set aside the comment count and submission credit for a second and look at the share and bury links, which happen to be exactly the same on every Digg article listed on the homepage. The question to ask is whether it is necessary to show these two links on every single item all the time. Could we unclutter the interface if we were to hide these elements and show them only when it was relevant – i.e. when a user was reading that particular item?

That’s the idea behind this usability principle and the approach we took when designing the look of a list of challenges on Daily Challenge’s site. Since there was already so much information being presented to the user, we didn’t want to overwhelm them with information that was not relevant to them unless they were truly interested in a particular challenge. For us, that meant hiding the challenger’s name, the comment count, and the “Share with Friends” link until the user hovered their mouse over the challenge.

Compare the difference between the “show only relevant information” approach (above) and the “show everything” approach (below).

Much more unnecessary clutter in the latter example.

Why doesn’t Digg do it then?

Well, for a number of reasons (I’m guessing). Firstly, the comment count and author likely has impact on whether a Digg user will read an article. So, at a glance, it’s nice to see the articles that have the most comments. Secondly, Digg users by nature may be better equipped to read – it’s less about visual organization, and more about information consumption. Daily Challenge’s older and less tech-savvy userbase needs to be told what’s most important to them, while Digg users may like to decide that on their own. Obviously, these are just some assumptions I’m making so don’t take my word for it.

2. Emphasize important actions

I wrote about this not too long ago, so I’ll save you the full explanation and significance of emphasizing important actions. With so many different actions to perform around the site, we wanted to make things super clear. The result: we down-played the Cancel button and put more emphasis on the Save button. A small but important detail.

3. Provide visual feedback when actions are performed (and make wait times feel shorter)

Visual feedback is important when a user is performing some kind of action on your website. Whether it’s the subtle loading icon that appears at the top right of Twitter’s site when you tweet, or the fade-out effect you get when you mark a WordPress comment as spam, visual feedback lets the user know that something has been done or is in the process of being done. All in all, this also contributes to making wait times feel shorter since it eliminates any guesswork as to what’s happening.

The Daily Challenge site applies this concept in a number of areas:

Visual effects when a mouse hovers over or clicks on our Take Action buttons:

A “Processing” indicator after Take Action is pressed:

A “Loading…” indicator when data is being loaded into a modal box:

A white background that turns blue when a challenge has been Taken Action on:

Notices and alert boxes that confirm that an action was or was not performed:

4. Effective use of buttons and text links

One of the fundamental issues we had with Daily Challenge beta 1.0 was that many people didn’t know how to act on challenges. The root of the problem was simple and came down to the difference in the way that most users naturally perceive text links and buttons. Text links are used to navigate between sections of a site, while buttons are commonly thought to process data in some way, shape or form. In our first attempt, we gave users a text link to Accept a challenge, which didn’t resonate well with a lot of users. Not only that, but it was hard to see in the cloud of other links and text.

The new Daily Challenge site welcomes the change from text links to buttons that also happen to provide visual feedback when clicked (see above). This concept aligns well with the user’s perception of what is happening when they Take Action; they are effectively changing the state of (and processing data of) a challenge.

5. Stick with conventions for better recognition

There are some places where being unique and original can harm you. A search box, a shopping cart, or a RSS link are examples where you can benefit from following the common convention as the user will be able to identify them much more quickly. For Daily Challenge, it meant following the conventions for what to label the registration link, where to place the registration link, as well as where to place the search box. It’s harder for us to measure the impact of doing this, but the idea is to allow the user to more easily identify these critical elements by labelling them what they’d expect it to be labelled, and placing them where they’d expect them to be placed.

A great article on sign up form trends once pointed out that 40 of the top 100 social networks used “Sign Up” to label their registration page and also placed the link at the top right of the site. This finding certainly affected our decision to go down that same route.

6. Position form labels effectively

It’s been found through eye-tracking research on web forms that generally the best practice is to place form labels above the input field as it requires the least amount of eye movement to read and compute any one particular field. If you must place the label to the left of the input field (as we chose to do on Daily Challenge for aesthetic balance), it’s best to right-align the text so that the distance between the label and the input field is minimized. The idea here is to situate the label and input field as closely as possible such that the association between the two takes less cognitive power to process.

Again, a subtle detail that likely only saves users a fraction of a second of time when filling out our forms (even though they don’t know it), but still an important one in our quest to provide the most optimal user experience.

7. Use the Five Second Test

The Five Second Test is one of the simple ways to test the effectiveness of your user interface. It involves exposing subjects to your site for a total of 5 seconds and gauging different responses. In its Classic form, the Five Second Test “asks people to list the things they can recall after viewing your interface for five seconds”.

A critical issue we had with our first beta release was the fact that new users had no idea what the site was about when they first arrived. The call-to-action to sign up was not prominent enough and as a result, we lost a lot of users within the first few seconds of their first visit to our homepage.

The takeaway from the Five Second Test for us was that we had to make the homepage communicate what Daily Challenge was all about and convert visitors into new members as fast as possible – preferably within 5 seconds of their first visit. To achieve this, we made sure that the focus on the homepage for a new user was to sell the idea of the site and to lead them to sign up. It’s a bit harder to miss the big orange button now! ;)

The beta 1.0 homepage vs. the beta 2.0 homepage put to the Five Second Test

8. People like faces

We nearly missed this one – in our initial eureka moment of realizing that we could unclutter the interface by hiding some of the meta data (see my first usability principle above), we wanted to include the challenger’s profile photo in the group of elements that gets hidden. The reason for doing this stems from another usability obstacle that we encountered in the first version of the site.

What we found in a lot of user behaviour we studied was that users tended to click the profile photo with the intention of learning more about a challenge. However, the profile photo brought the user to the challenger’s profile page instead. This expectedly caused some confusion with inexperienced users so we wanted to mediate this issue by placing the photo elsewhere.

Our initial near-final design mockups looked like this:

A few nights before our big launch, the entire team attended Facebook Camp 5 in Toronto. (Who better to learn about running a social network from than the big daddies of all social networks themselves?) We picked up a lot of great insight that night, of which one of them declared the finding that people liked seeing faces of their friends around content. The presenter also went on to explain that clickthroughs on items with faces attached to them were much higher than items without any faces.

We thought about it long and hard, and coupled with some other reasons that justified making profile photos more visible again, we decided to make a last minute UI change the next day that placed the profile photos to where you see them now.

We’re still not perfect

We’ve taken a lot more usability principles than those listed here into consideration while we rebuilt the Daily Challenge site from the ground up. But it’s still not perfect. In fact, it’s far from being perfect. One reason is that when it comes to the web, there is still no concrete rule book that separates right from wrong. Everything is contextual and relative to so many other factors. Plus, it’s hard to please everybody (not that that is the goal either).

In any case, ingraining usability into every facet of a website – social network or not – is a leap in the right direction. If everyone could commit to this idea we’d all have a better web.

About Daily Challenge

Daily Challenge is a social network that inspires change by challenging a growing community of Do Gooders to perform small random acts of kindness on a daily basis. Learn more at www.dailychallenge.org.