This is the first in a series of blogs describing User-centered Design Methods. My goal is to summarize my experience, insights and findings across multiple literature and compile them into easy and quick to digest pieces for you to consume. I want to encourage you to comment your own experiences and give me feedback on why your company applies certain methods differently or not at all or something else altogether.
I personally don't like the term Usability too much, it's an empty buzz word. It means SOMETHING to everybody but isn't scientific enough to be taken serious. It's often interpreted wrongly and purely misunderstood by most. It's kinda like Psychology, we know it is important to understand fundamental human behavior, their problems and remedies, but I wouldn't pay a dime to go to a Psychologist. But who knows, just as Psychology got its scientific relevance and acknowledgment - partly maybe through the 'invention' of the IQ - hopefully Usability rises up to similar levels (Jeff Sauro offers interesting metrics via SUM (Single Usability Metric).
That's why I like the term User-centered Design. It works wonders with Project Managers and the-like, probably because Design is such an important term in their daily work. And when asked about Usability testing I can conveniently point out that this is only one tool of many in my UCD toolbox. But the really important sales trick is to know which UCD method is best used at what time in the project management cycle.
The following chart compares the most common user-centered design methods, outlines their cost and shows when to use them:
Overview of user-centered design methods
|Method||Cost||Output||Sample Size||When to Use|
|Competitive Studies||Medium||Stat. & Non-Stat.||5||Requirements|
|Paper Prototyping||Medium||Stat. & Non-Stat.||5||Design|
|User Testing||Medium||Stat. & Non-Stat.||5||Design & Evaluation|
|Surveys||Low||Statistical||20+||Requirements & Evaluation|
|Interviews||High||Non-Statistical||3-5||Requirements & Evaluation|
|Server Traffic Log Analysis||Low||Statistical||n/a||Evaluation|
|Search Log Analysis||Low||Statistical||n/a||Evaluation|
Not long ago, after having completed a full project management cycle (requirements, design, implementation and evaluation) the PM proudly announced to perform a Focus Group with his stakeholders. Showing the ready application, he thought, would surely impress them and lead to valuable feedback for the next milestone. This impulse isn't uncommon but has to be fought before it becomes reality. Does he really want to produce MORE and EXPENSIVE requirements? Because that's the output of Focus Groups. Wouldn't he be better off running 2 iterations of User Testing to reveal usability issues or a Survey to receive input from outside the development environment?
- Competitive Studies
- Field Studies
- Heuristic Evaluation
- Paper Prototyping
- User Testing
- Server Traffic Log Analysis
- Search Log Analysis
- User Testing
- The Usability effort is NOT proportional to the size of the project. Bigger projects spend less percentage on UCD with same effort. Regardless, as a rule of thumb assign 10% of the projects budget for UCD.
- Faster iterations of prototype design require less testers
- Fidgeon, T.; User-centered design (UCD) - 6 methods; Nov. 2005; http://www.webcredible.co.uk/user-friendly-resources/web-usability/user-centered-design.shtml
- IBM; User-Centered Design Principles; https://www-01.ibm.com/software/ucd/
- Nielsen, J.; Field Studies Done Right: Fast and Observational; 01/20/2002; http://www.useit.com/alertbox/20020120.html
- Nielsen, J.; How Big is the Difference Between Websites; 01/19/2004; http://www.useit.com/alertbox/20040119.html
- Usability in Practice: Three-Day Intensive Camp; Nielsen, J. et. al.; April 2006; Proceeding, Usability Week 2006
I just came back from a webcast held by Human Factors International titled "Who Are We Designing For? The Generation Dilemma". It reminded me that even though most designers - me included - belong to the Generation X (or maybe especially because of that) we need to understand and recognize behavioral differences between generations when designing web sites.
Sidenote: This generalization must not prevent us from continuing to identify and define our target audience through personas or applying all the other UCD principles based on representative users. It is solely meant to raise awareness that we as designers need to be aware of these differences.
So, what are these generations?
- 78 Mio (US) / 1.11 Billion (worldwide)
- born between 1943-1960 (age 65-48)
- think of technology as a tool
- computer at work or at home (often not the latest model)
- use computer mainly for email or work-related activities
- use sites that help save time or serve relevant information
- 55 Mio (US) / 1 Billion (worldwide)
- born between 1961-1981 (age 47-27)
- are technology savvy and career-focused
- keep their computer (desktop) in a separate room or office
- start their day with practical activities like reading news or checking stocks
- utilize computer for work but still keep balance of life and work
- use sites for practical tasks like online banking, news, travel preparation
- 80 Mio (US) / 2 Billion (worldwide)
- born between 1982-2000 (age 26-8)
- technology is inherent and part of life
- have their computer (laptop) by the bed
- start their day checking social activity online
- look for and do things that make them laugh, might be silly
- attention span is short, impatient
- use social networking sites like Facebook
How does the knowledge about these generational differences affect our designs?
The same guidelines for accessibility and usability like consistency or efficiency hold true but it is to be emphasized that certain guidelines must be enforced stronger for some generations while others can be loosened up. Here is a rough overview:
- Simple look and feel
- Safe to use, more error-prone than usual
- Navigation in predictable places
- Hierarchies of information
- Step by step instructions
- Provide options to enlarge font sizes
- Things that don't move, flicker, or play automatically
- Focus on quality content
- Provide 'do-it-yourself' tasks
- Give control and allow customization
- Content has to be attractive, innovative, can be quirky
- Design can be highly interactive
- Audio and video is not only accepted, it's expected
- Entertainment is important
- Avoid pictures of elderly people (yes!)
How can a design satisfy all generations?
The answer is (as always): it cannot. Designs have to be focused on and implemented towards your key audience. A university web site needs to satisfy its customers, the students. The press, teachers and parents are without doubt important as well, but without satisfied students the university doesn't even have to think about getting the press to visit the site.
There are ways to generalize your site's content though:
- Identify the user (login) and present a customized UI
- Identify the content (landing page) and predict its likely customer
- Identify user preferences by explicitely asking
A palette is a complete set of colors one should adhere to when designing a website. This includes a color scheme (typically 2, 3 or 4 colors) plus some additional colors to work with. The goal along the design process is to stick to these colors without the need of inventing and introducing new ones.
Here are some tools and knowledge on how to design and create an effective and appealing color palette for you website in just minutes:
Know your primary color
Many times you will be constraint by your clients' need for a primary color, be it because of the logo, corporate identity (CI) or corporate design (CD) guidelines. Consider yourself lucky!
For the other times when you have to come up with a color for yourself, think of what best represents the company's target audience - young, fashion, pop, serious, technocratic, playful. All that will determine your ultimate choice. The best description I've found so far of what different colors actually stand for is in Jason Beaird's book 'The Principles of Beautiful Web Design'. Even though I'm sure you find tons of other sources on the web be aware of easy color-meaning mappings like black=death - in web design black is also a color that conveys power, think of tuxedos, limosines, Batman etc.
Create a Color Scheme
I've found the Red-Yellow-Blue color wheel the closest to traditional color theory and that's what I am using and writing about now. I acknowledge the CMYK (Cyan-Magenta-Yellow-Black) color wheel but found it less useful for my purposes (feel free to convince me otherwise 😉 )
I highly recommend the WellStyled Color Scheme Generator 2 (http://www.wellstyled.com/tools/colorscheme2/index-en.html). It allows you to use your primary color and your knowledge about your target audience to play around and find the most suitable of the five classic color schemes:
- monochromatic (your primary color in different tints or shades)
- analogous (your primary color plus two colors next to it on the wheel)
- complementary (=contrast; your primary color plus the opposite color on the wheel)
- triadic (three colors equally separated on the wheel)
- tetradic (basically two complementary schemes combined)
The Color Scheme Generator will calculate the correct RGB values in hexadecimal notation for you and even offer variations (pastel, contrast, pale) to further experiment. Once done, simply print or note the colors and values computed and you are ready to roll.
Ensure good Contrast
Contrast is not only a good design principle but also an Accessibility requirement for many websites (W3C, Section 508 in the US). So before you make your final choice on the color scheme ensure that your main color provides sufficient contrast to background/foreground colors.
Test your colors using Colour Contrast Check (http://www.snook.ca/technical/colour_contrast/colour.html) making sure the brightness difference is greater 124 and the color difference is not less than 500!
Finalize your Color Palette
To finalize your color palette all you need to determine is which other tints and shades of the existing (as determined above) color scheme you want to use - black and white included.
As a basic rule try not to 'overload' your page with the amount of colors used, but certainly a number of 5 or 6 seems to be about right (remember to count black and white).
Done, wasn't that easy?
Here are some interesting links I recommend together with an excellent book: