Colour and its relationship to usability

This June I had the priviledge of doing some travelling in Saskatchewan - speaking at both PrairieDevCon and MosoConf. At PrarieDevCon, I was fortunate to have the time to attend a UX session by David Alpert (who will also be presenting at SDEC11 in Winnipeg this fall). I haven't spent a lot of time doing UX research, but his presentation opened my eyes to a few things. One of these is the targetted use of colour to direct the user to what is most important to you (and maybe to them). In the presentation David demonstrated this concept with several examples from live sites where the use of two colours is used to direct the user to certain actions.

As I returned to work the following week, I noticed that a change was made to our internal dashboard at Protegra. A reminders and announcements section was added and highlighted in yellow/green while the rest of the site remained in blue. Everytime I looked at this site and my eyes were drawn to the words highlighted by the use of colour I thought of David's presentation.

 
Here are few other examples that David showed to us to demonstrate how the use of colour could be used to influence user behaviour effectively:

1. Twitter
What are they trying to get you to do?

Sign-Up is highlighted in yellow to attract new users while Search and Sign-in are blue like the rest of the site. Twitter is assuming that if you are already signed up then you are committed to finding the Sign In button on your own.

2. JetBlue
What is important to them?

Fly Now and Find Flights are highlighted in orange and they are using other more subtle UX strategies so that you will know the first bag is free and that they now offer vacation packages.

3. Facebook
What are they trying to influence you to do?

Sign-Up is highlighted in Green for new users, while Log In is smaller and in blue - just like twitter, facebook is assuming if you are already signed up you are committed to finding the Log In button on your own.

David's presentation has peaked my interest and I'll be looking to find other ways to use colour like this on projects (external facing or not) to guide the user to the actions we would like them to take and discourage them from unwanted actions or workflows. Also, as the Dashboard example shows, it isn't just about highlighting buttons - it can also be about highlighting sections of the site.

Thanks David.

You can find more positive and negative examples and other UX strategies in his presentation found on his site - or join us at SDEC11 to hear him present.

Team Ownership through the UX Design Studio Approach

A few weeks ago I was added to a new team that had already spent some time working on the technical challenges for the project but had yet to do much UX work. One of the first things the team asked me to help with was to create the User Interface design. I think what they expected was for me to ask some probing questions, go draw some pretty pictures in Visio or some other tool and then present (and dictate) the results. I've certainly taken this approach on previous projects. However, in this case I went to my agile improvement backlog and decided to try the Design Studio approach I had learned at Agile 2010 in a session by Todd Zaki Warfel.

The Design Studio approach is a team approach to UX design. When I first asked the team if they would consider doing the UX design as a team, they were surprised and delighted to be asked (cool!). I had high hopes for this approach because I was excited to see the results of using the collective imagination of the team to create a cohesive and well thought out design. Before I share the results, here are the details of this technique:

Prerequisites: You should have already created your initial backlog of user stories. Creating other artifacts like personas and user scenarios first would also be useful. In our case we had the stories and some scenarios, but no personas yet. You will also need to print out several 8up sheets like the one in the image below and bring along several pencils. You can download the 8Up here or create your own in Excel. 

Steps:

1. Gather team members for the exercise. Not everyone needs to participate, but you should have willing participants from each role including developers and client.
2. Decide on a focus for your UX design. This could be a specific release, user scenario, or some grouping of user stories.
3. Hand out 8up papers and pencils to everyone on the team.
4. Ask everyone to create 6-8 sketches of the different pages/screens in the app (see tips below).
5. Once you start, tell them they only have 5 minutes to complete their 6-8 sketches.
   • You could tell them this before, but it seems to help crystalize their thoughts when they hear this.
6. After 5 minutes, review each set of drawings:
   • Each person has 3 minutes to pitch their drawings to the team.
   • The team then has 2 minutes to identify 3 things that worked and 2 things to change.
7. Repeat steps 3-6 until the team reaches a consensus on the design.
8. Once your design is complete, keep the final sheets as your UI reference model.
   • You won't likely need to transfer this to Visio or any other tool. The model should contain enough information and brief notes so that you can develop straight from the paper and make final adjustments in your development tool while having a conversation.

Some tips:

• Gloss over details in your drawings. You need just enough detail to communicate your design.
• Aim for quantity not quality.
• When doing this for the first time, don't tell your team they only have five minutes until after they start.
• Do steal ideas from each other.
• As always, include your client in these sessions.

Results

Four of us met in a conference room to try out this new approach. For a user scenario that included about 10 stories, we executed three rounds. As a team, we were very pleased with the results and how quickly the final design emerged. Despite starting with very different ideas, we discovered that by the third round our drawings were nearly identical and represented the best work of the team. Using this approach helped generate ideas none of us would have thought of individually and resulted in team ownership of the design. We also found that we identified a few new 'excitement' user stories to add to and enhance our existing backlog. Additionally, as we walked through each other's drawings we discovered one or two basic stories that we had missed while generating our initial backlog. Time will tell if the resulting UX design will be successful, but as a whole the team is confident in both the approach and the result.

In summary, this approach was fast, promoted team ownership, and produced a great result. You can learn more about the Design Studio approach here: http://unify.eightshapes.com/page-pattern/sketching-design-studio-page-patterns/

I thought the success of this team approach was appropriate to write about on a day where this quote was found in @ThisIsSethsBlog - "I'm not going to believe that only a few people are permitted to be gatekeepers or creators or generous leaders". Indeed.

Update April 1, 2011: I introduced this approach to a larger group of my fellow employees this week. Someone asked "why we should continue with round 2, 3 etc - why not just have the group consolidate the good ideas and produce one design together after round 1?" 

My answer: If you consolidate your ideas after round one then you are risking two things: 1) That the 'loud' voices will be the one driving the ideas and design. The practice of having everyone re-drawing the design allows each person's ideas to be incorporated. 2) As you repeat the process of re-drawing your design, the ideas from your team members will seep into your ideas and birth new ones. If you consolidate your design too early, you risk losing those new ideas that can only form in the act of putting your ideas down with paper and pencil.