But, sometimes it’s unavoidable. If you’re editing your profile on one of your kajillion social networks, for example, it’s acceptable to have a lot of fields on a single page. Nonetheless, you still run into longformitis from time to time (fatigue from filling out long forms). One technique I’ve seen that combats this is to have multiple save buttons throughout the page, evenly dispersed between sections of the form. This is the web form equivalent to having checkpoints in Super Mario, and it’ll allow users to save their changes without having to scroll all the way down to the bottom of the page.

How to do it right…

The WordPress cformsII plugin is a great example of how this technique can help. When editing the settings, cformsII doesn’t hold back on the number of options it makes available. However, all the fields are grouped into distinct sections with an Update Settings button available to the right of each section header. An essential feature of this page is that any Update Settings button on the page will save all the data you’ve entered on the page.

How to do it wrong…

Ah, beloved Brightkite. We were once great friends, until I realized my other friends didn’t like you, so we had to part ways. But aside from Brightkite’s inability to break into the Toronto scene, it also faults in one minor aspect.

On its Sharing options page, the form hosts a similar setup to cformsII with multiple Save buttons. However, one major flaw is that each section seems to be independent of each other. Clicking the Save button under the Twitter section only saves the data updated in that section. If you happen to also update your Facebook information at the same time but clicked the Save button under the Twitter section, the form would only store the updates to your Twitter settings. Wuh ohs.

The Lesson

Multiple save buttons are great to relieve bad karma from long and unfriendly forms. Just remember that the purpose of having multiple save buttons should be to make it convenient for the user to save their changes from anywhere on the page. Having section-specific Save buttons defeats this purpose.

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.

Many web designers use paper prototypes because they have artistic backgrounds and likely got started in this field through their love of a 2B pencil and sketchpad. Others use it simply because it’s the fastest way to give an idea some shape. Everybody’s got a pen and paper within arm’s reach – not everyone can whip open Photoshop every time a new idea sparks.

Still, I’ve been hearing lately that it’s not uncommon for web designers to struggle a bit with translating their paper prototypes to the Photoshop canvas. I think we’ve all been there – a perfectly drawn sketch of the most amazing website (in the whole wide world, mind you) that, once brought to the screen, garners the same reaction that Picasso probably had after every painting: Crap, that’s totally not what I had in mind.

In response to some of these struggles, I’ve decided to share a few pointers that I think have helped me convert a greater percentage of sketches into actual websites. Enjoy!

4 ways to improve the transition from paper to Photoshop

1. Try to visualize it in your head first

While most of the creative concept is developed on paper, I’ve found it incredibly difficult to start from scratch on paper. That is, an empty box (representing the browser window) and nothing else except the end goal of creating the world’s finest website (design-wise, anyway). This probably seems somewhat contradictory at first, but if you think about it, all great ideas typically begin with a vision before it even gets a drop of ink. I know, it sucks to start this list with such an almost-philosophical tip, but truth be told, you need to see it before you create it.

2. Remember proportions

The biggest obstacle for me when I first started was maintaining proper proportions of elements on paper with those on the screen. I’ve found that the smaller the size of your sketch, the greater the tendency to draw elements larger than they really are (navigations, text, buttons, etc). The closer the size of the sketch to the “actual size” on screen, the more accurate you generally are. But that’s not to say that every prototype you draw needs to be a full 8.5×11 – it just means that you need to be mindful of proportions. Over time you’ll get the hang of it, so don’t beat yourself up when certain elements don’t line up the way you thought they would.

3. Don’t worry about the fine details (yet)

Your paper prototype is meant for you to plan out layouts, structures, shapes and forms. Leave the fine details of how a button will be shaded or the pixel structure of an icon to when you get on Photoshop. While you’re working on paper, focus on the bigger picture of how things will fit together. And to add to the previous point – don’t worry about being exact with your proportions either. The more you worry about recreating the web experience pixel-for-pixel on paper, the more you’re missing the point of paper prototyping.

4. Consider technical limitations

You never want to put a cap on your creativity, but if you don’t want to waste too much time designing a unicorn of a website, it’s good to keep certain technical limitations in mind. [Valid] HTML/CSS can only do so much sometimes and occasionally programming languages and database structures can have you thinking twice about whether you can actually pull off what you’re thinking. It’s true that if there’s a will, there’s a way, but chances are, if there’s a client, there’s also a budget. If not, then feel free to go wild!

A few paper prototypes…

While writing this post I started looking back at some of my notebooks to see some of my own paper prototypes. In many cases I see myself making the same mistakes I’m trying to help you avoid. Nonetheless, I wanted to share a few sketches and the final products that resulted. Hope you like them!

LIVE Conference 2008

This was the third year my agency had worked on LIVE Conference’s site, so I had a fairly good idea of the requirements already. It was just a matter of mapping out a structure that would work. My main focus was on how to organize the main and sub navigations, as that had been an issue with the previous year’s site. I got a bit carried away with the doodling on the bottom left sketch, but it illustrates the dark theme that I was going for and that we eventually went with.

Burlington Sports Therapy

There were so many ways to approach this site, so more than a dozen different prototypes were created initially. There were 5 different blocks of content/information/goodies that we wanted to fit onto each page, so it was important to create a structure that would allow that to happen without everything looking like a mess. The top two sketches are the concepts we ended up using to produce the PSD mock-ups and inevitably the final site.

Michelle Lu-Do

I woke up at 3 am one night with the vision for this site (ahem… see first tip above!). I got up, grabbed my notebook and started sketching. This happens rarely, but I went with the first sketch, created the mock-up, showed the client, and she loved it! It was my one single-prototype-mockup for the year (everybody gets one). :)

Websites have grown increasingly complex and robust over the last decade. We don’t really think about how much today’s web applications have blurred the lines between the desktop and the web but the transition is surprisingly smooth and seamless. Also interesting to note is the idea that the web isn’t just filled with tech-savvy net junkies anymore – Auntie Connie and Grandma are also daily web dwellers complete with Facebook profiles and personal email accounts.

So, websites are more complex and serving a broader audience than ever. What this results in is a need to be more usable than ever. Part of this is making sure that the things that need to be done on your site (i.e. the actions a user needs to take) are as clear as possible. So how are sites doing this today?

I came across this realization not too long ago while updating my LinkedIn profile. LinkedIn itself doesn’t really stand out as being anything exceptional when it comes to providing a usable interface, but the Edit Profile section did offer one little nugget of insight. Like most forms, there’s usually a Save and a Cancel button at the bottom. What made LinkedIn standout was the fact that it emphasized the Save action (by making it a button) and de-emphasized the Cancel action (by making it a simple text link). It’s a small detail, but an important one to me.

With all the options and clickable areas sites like LinkedIn offer, it’s important to provide clarity to the user by telling them exactly what they need to do. If you make them guess a split second longer than they need to, you’ve lost them. The emphasized Save action is not a make or break feature by any means, but it demonstrates thinking in the right direction. Giving one action priority over another tells the user what’s important, what they’re probably looking for, and what they should probably click.

The same idea applies for other visual cues. Headlines and welcome messages are made larger than body text. Why? To show visual priority and hierarchy in a single glance. Within a few seconds, you know what to read first. In fact, even without thinking about it, you will pay attention to things given greater priority.

So the next time you’re laying out a page full of content and designing a lineup of buttons, consider priority. A bit of extra thinking on your part goes a long way to reducing the amount of thinking your users have to do.

The buttons pre-redesign were actually unstyled (similar to Google’s search buttons, pictured left) – they took the default look of buttons in your OS (grey rounded-corner rectangles for Windows users, grey/glossy pill-like shapes for Mac users). From a usability standpoint, these buttons made the most sense and were most natural and recognizeable to the user (after all, they’re used to seeing them in most of their desktop applications and prompts). You knew by looking at it that it was a button. Plain and simple.

The buttons post-redesign are now a bit sleeker (pictured right) – flattened down with a solid grey border, slightly rounded corners (~1 pixel radius), and a subtle gradient to mimic the button’s convex surface.

For a web-savvy user, the redesign has little effect. If anything, web-savvy users would probably enjoy the new look more. But for more casual users, are the newly-redesigned buttons still obviously buttons? Would less web-savvy users confuse the buttons for tabs?

There are definitely subtleties between buttons, tabs, and text links. Each sort of have their own implied conventions and purpose. Does the redesign blur these differences in any way?

Thoughts?

Brands

Firstly, it seems that marketing a brand name (i.e. ‘UX Digest’) is much easier than marketing just a name on its own (i.e. ‘Verne Ho’). With a name, there is no meaning or favourable associations attached to it (initially). A brand name (for the most part) has at least 1-3 words that help give meaning to your entity. This makes it easier for strangers to your brand to accept and acknowledge what you’re all about.

Information

People love information. This thing we call Web 2.0 is all about information sharing and distritution. What this means is that if you have valuable content that is worth someone’s attention, it will catch on. Content definitely is king.

That’s it. Two thoughts that randomly came to me before passing out last night. Take it for what it’s worth!

Onwards with your day. :)

This site was built with the intention of creating a one-stop-shop for UX best practices – a reference guide for web designers, developers and producers alike.

Head over to http://uxdige.st to catch all the action, subscribe to the RSS feed, and follow us on Twitter (@uxdigest). We’re also looking for more great UX articles and sites to share, so if you come across any, swing by and suggest it.

If you have any feedback or spot anything weird, feel free to leave a comment here or on the launch post. Your support is appreciated! Spread the word! :)

On a sidenote, this blog was recently listed as one of 160+ RSS Feeds For Web Designers and Developers. As a result, my RSS subscription count has risen from the comfy ~380 range it was sitting at for so long, to a healthier 522 (as of writing this post). It’s not often that I’m privileged with so many new sets of eyeballs, so I wanted to welcome all my new readers! Grab a coffee and a bean bag – hope you enjoy your stay!

Okay, back on track. Here’s a skimmable (because nobody wants to read on New Year’s Eve) list of my best posts of 2008.

My Favs

Here are the posts that I personally like the most and had a blast writing.

• How to use WordPress to build a website with user-generated content
  Started the year off with a post that was unique not only for its exceptionally long title, but for its super easy tutorial on how to re-purpose comments on your WP blog to get user-generated content.
• The making of Creative Briefing
  A detailed post of all the nuances you wanted to know about the redesigned Creative Briefing (but just didn’t know it).
• How to use Photoshop to make notepad sketches
  A lot of mixed responses from my first tutorial; photoshop noobies loved it, photoshop jedis threw stones at me.
• 10 things you can learn from Gordon Ramsay about running a business
  This list does not include how to appropriately use the F bomb when your contractors don’t deliver. It does, however, cover 10 other valuable lessons from everyone’s favourite/most-feared chef.
• 12 ways to make the most of your downtime
  There are productive ways to be bored out of your mind. Here are 12 of them!

Best Comments

Every so often, I ask the right question and get a crap load of wicked comments that put my post to shame. Check out the following posts and then read up on the comments for even more beefy insight.

• 5 downsides to working at home
  Working at home isn’t all it’s cut out to be. Despite the fact that you don’t need to wear pants to work, there are a few downsides to consider.
• 13 ways to liven up your work-at-home routine
  I must have been on a bitter-about-working-at-home rampage or something. I meant well, I swear. Check out this post to see how you can make the most of the experience.
• Faith, Trust and Respect
  A rotten experience with a client begs the question: where do you draw the line to gain the faith, trust and respect of your client?
• Managing Mock-ups
  If you’re a freelance designer, you live and breathe through mock-ups. This post asked: how do you present mock-ups to your clients?

From both a content quality and reader interaction point of view, this blog made leaps and bounds in 2008. I’ve yet to be able to actively grow and market this site properly, so every day I’m shocked at the number that appears at the top of the sidebar. Small steps for real bloggers I’m sure, but definitely massive lunges for a small potato like me.

Here’s a snapshot at the growth of Creative Briefers throughout the year:

• Launched the redesigned Creative Briefing on February 11, 2008 with 44 subsribers
• By March, subscriptions had more than doubled with 100+ tuning in via RSS and email
• In April, subscriptions broke the 200 mark
• In June, subscriptions broke the 300 mark, then plateaued around the 380 range for 6 months
• On December 31 (today!), subscriptions hit an all time high of 522

Again (and as always), thanks for sharing the love. My primary goal for blogging has always been to spread the knowledge and experience I’ve accumulated through my journey to others. Knowing there are at least a few of you reading this makes it all worth it!

Let this mark the end of a great year for this blog! I hope everyone has an amazing new years and a kick ass start to 2009.

</2008>

I’ve been quietly and busily geeking out for the past little while. Rest assured, I’m alive. A lot of exciting stuff going on at Daily Challenge, but that’s a whole other post. This post, on the other hand, is a simple announcement that I finally squeezed a few hours out of my weekend and released my first free Sweetcron theme: teh blog ar (not) dead.

Description

teh blog ar (not) dead is a Sweetcron theme that keeps your blog posts front and center so that they don’t get drowned out by your other geeky internet activities.

Features

• Dedicated area for blog items
• Expandable/collapsible profile section
• Activity items link directly to original source
• Clean customizable single column layout
• Recently included in the list of 25 of the best Sweetcron-powered Lifestreams

Discussion & Download

Discuss: Sweetcron Discussion Group (teh blog ar (not) dead thread)

Download: teh blog are (not) dead

Live Demo: Satish Kanwar / Technology Marketer

What is Sweetcron?

Learn more here: Sweetcron: WordPress for Lifestreamers

Enjoy!

Being Blog Action Day today, this simple equation seems to be a fitting foundation for today’s theme of eliminating poverty through the simple act of blogging. This equation also represents my contribution to improving the world on not only Blog Action Day, but every single day of the year.

Here’s the scoop: I recently joined a great team of people to develop an initiative called Daily Challenge. If you follow me on Twitter you might have seen my announcement of it going into public beta last Friday. The concept is simple: every day, everybody performs a simple act of kindness in hopes of producing positive change in our world. Challenges are submitted by users in the community (like you and me) and by celebrities and public figures supporting the cause. Accept a challenge every day. Perform your act of kindness. Check it off, sit back and enjoy the feeling of being a Do Gooder. It’s that simple.

So what does this have to do with Blog Action Day and poverty? Well, for starters, today’s challenge asks you to help those living in poverty by challenging 2 (or more) friends to a trivia play-off at www.freerice.com. Free Rice is a great initiative that promises to donate 20 grains of rice through the UN World Food Programme for every trivia question you answer correctly. How many can you get? Post your scores in the comments!

Secondly, Daily Challenge offers you a great way to fight poverty (or any cause) any day of the year. Not only that, but by submitting and sharing your own challenges, you’re helping to spread awareness and also helping your friends, family and other members in the community make a real impact on the world.

You shouldn’t need Blog Action Day to get started on fighting poverty, but if you’re going to start, today’s the day. Accept the challenge by visiting www.dailychallenge.org and registering to make a difference!