Learn from your customers for usable Web apps

Designing Web apps? Don't commit without client input

Usability consultant Paul Englefield takes you on a journey to demonstrate that listening to your customers is the only way to provide the ultimate usability when designing an e-commerce site or Web-based applications. Through examples, the article weaves user-centered design techniques into the steps of designing an effective business site, focusing on gathering data about your customers' (and their customers') usage behaviors, offers two design models, and demonstrates how to integrate customers' input into the testing and evaluation process.

Share:

Paul Englefield (paul_englefield@uk.ibm.com), Senior usability consultant, IBM

Paul Englefield is a senior usability consultant and trainer working with the IBM Ease of Use team in Warwick. Paul consults on User-Centered Design and offers training on the subject to client and IBM teams. Leading a team that develops practitioner tools for the company's user-centered design workbench, his 25 years of IT experience with IBM include such technology topics as software engineering, technical marketing, program product design, and user interface research. Recently, Paul has led engagements to design and evaluate user interfaces for banking, insurance, automotive, and education applications. You can contact Paul at paul_englefield@uk.ibm.com.



10 June 2003

Imagine the following scenario:

You go shopping to buy a loaf of bread. The shops look gorgeous, decked out in vivid colors and stunning artwork. Trouble is, you can't always tell from the window displays what sort of products are on sale inside. Eventually, you find a shop that looks promising and ignore advice that this store's expertise is with a gadget you don't own.

You find the front door and wander in. Before you can look for your loaf, the store insists that you view a movie, review its annual business results, and sign a legal document to absolve them of all responsibility for your shopping experience.

Now you enter a maze of aisles containing products organized in an apparently random manner. You find the tiny labels difficult to read and you're distracted by the garish, flashing signs that say "buy now" and "register." However, you finally figure out that this aisle contains amaretto, anchovies, and apples; you guess that bread might be through the door labeled "B." After half an hour of disoriented wandering you stumble on a familiar looking package labeled "grain-based carbohydrate comestible."

Before paying, you attempt to ascertain that you can use your credit card safely, but the inscrutable small print has more to say about your legal obligations than reassurance about your security. As you leave the store you are shown a pre-signed form authorizing the store and its partners to send you regular junk mail.

This is a Nightmare on Web Street!

Why does this happen?

OK, it's a caricature. But, similar experiences are familiar to anyone who shops on the Web. Many commercial Web sites are visually sophisticated but frustrating to use. Common problems include enigmatic designs, inappropriately classified and labeled content, inefficient and disorienting navigation, gratuitous use of artwork and animation, nosy questions, and intimidating small print.

Online shoppers are less interested in a groovy multimedia experience than in finding, understanding, and buying products quickly and easily. Although products and prices are important, customers typically avoid hassle and prefer to shop on sites that are easy to use and trust.

The customer's perspective

Here are a few comments the IBM Ease of Use team has gathered from customers trying to use a range of real-world Web sites:

  • "This is too stupid for words."
  • "I wouldn't buy it -- I'm just not confident."
  • "I just don't know what to do now."
  • "They're just being nosy."
  • "I'm fed up with going round in circles."
  • "It's too small to read."
  • "It would be easier to just phone someone up."
  • "We're not playing, we're doing work."

Many customers chose not to buy out of frustration, confusion, or distrust.

The analyst's perspective

The following quotes come from published research:

  • Sites run by airline carriers are losing out to Web-based travel firms because of the poor quality of service they offer. Microsoft-owned Expedia, for example, is causing airlines to lose out in terms of profits by delivering service that is superior in terms of clarity and customer service. (Jupiter Communications, 1999.)
  • A study by the New York research group Creative Good tested 10 of the leading Web sites and found that 39 percent of the customers could not figure out how to buy and more than 50 percent of search attempts failed to find something relevant. (Creative Good, 1999.)

With this in mind, I'm ready to discuss the customer-supplied key to better Web application design -- usability.


What is usability?

Simply defined, usability is the art and science of designing interactive systems that are:

  • Easy to learn
  • Efficient to use
  • Flexible
  • Safe

In my team's consultancy work, we get clients to rank these factors.

These factors all contribute to the user experience and affect your customers' attitudes about, as well as their ability to successfully use, your site.

For example, psychology applies a games theory principle known as Minimax which demonstrates that people generally wish to expend the minimum effort for the maximum return. Meaning that when factors such as price are similar, people are likely to prefer a site that requires less effort to learn and use.

Usability provides design principles and methods that are both simple and effective for designing systems ranging from Web sites to flight decks through digital cameras. Although usability is rooted in sciences such as cognitive psychology and software engineering, it is essentially a practical discipline, concerned with users as people and the need to design to support business goals. Usability coalesces into this practical discipline in the framework of User-Centered Design.


What is User-Centered Design?

User-Centered Design (UCD) is the most popular approach to applying the rules of usability. It actively involves real users throughout the design process; in fact, UCD treats design as a dialog between designer and customer.

Learning from psychology and software engineering

Psychology research shows that when you tackle something new, you do so by interpreting it in the light of your previous experience. The closer the new experience is to your existing experience, the more intuitive it feels.

The problem encountered here is that designs are often implicitly based on the experience of the designer -- this experience is typically different from that of the user. For example, software engineers inhabit a world that is far more logical and abstract than that of most customers. Business analysts are strongly influenced by the internal organization of their business and its products. To build a design that feels natural, you need to work with users to understand how they see the world.

Software engineering experience also shows that designers are fallible -- user interface designers are no exception. Recognizing this, one of the key components to effective design is that designers' work needs to be evaluated. A good rule of thumb for designers to follow is:

  1. Get to know and understanding the potential users.
  2. Build an application, applying usability principles to it.
  3. Test those designs by observing typical users employing the applications in a real work setting (both environment and work load).

Or to put it more simply, usability specialists recommend these three interlinked activities:

  • User-research
  • Design
  • Evaluation

Through research, designers aim to create user profiles that deliver insight into the behaviors of users and their activities. Designers need to know users' goals and tasks, attitudes and motivation, and the skills and experience they bring to their work.

Designers also need to find out where users work. For example, a shopper using an Internet connection at home with her family has different needs from someone using a mobile phone in a crowded open office.

During the design process, designers analyze this user profile data to create models of user activity and information. Then the programmers apply recognized principles and a generous amount of creative imagination to create a design that is grounded in the user's expectations.

During the evaluation phase, designers test that the designs work in the real world. They do this by inviting potential users to test the design to attempt a realistic set of tasks. The designers then both observe the users' success and listen to their comments.

In practice, design and evaluation are often intermixed. For example, you might test sketches of early design concepts, initial prototypes, and early working versions. Early evaluation catches design problems before designers become protective of their work and technical rework becomes expensive and risky.

Usability with major vendors

IBM and other major software vendors have integrated usability into their product-development processes. For example, products such as DB2, MQ Series, and WebSphere have all been designed using the usability techniques described in the previous section.

Similarly, ibm.com and other high profile Web sites employ usability specialists to ensure a streamlined and enjoyable customer experience. But remember, usability is not an expensive luxury available only to large development organizations. Many of its methods are sufficiently lightweight to be learned and applied by smaller development teams.


Usability in practice

Now, look at a concrete example of applying usability techniques when designing a Web site for Something Nice, an online delicatessen.

User-research techniques

By creating user profiles, you can ensure that your design meets the user's needs, matches their expectations, and speaks their language. You can use a variety of techniques to create these profiles, including interviews, focus groups, and questionnaires.

Although professional researchers have developed these methods to a fine art, anyone can discover the essential facts by careful planning and attentive listening.

Interviews
Interviews are typically handled on a one-to-one basis. You can do them in person, on the phone, or even by instant messaging. Plan your questions ahead, listen with an open mind, and ask follow-up questions to clarify and explore the issues. Experienced interviewers learn to be sensitive to such non-verbal cues as a pause or an incomplete sentence which can indicate an interesting half-voiced thought.

Focus groups
Focus groups usually have a single facilitator working with a group of customers. In this case, the idea is to introduce a seed question, then sit back and listen carefully to the conversation between the participants. You'll need to manage the time carefully, keep the discussion on topic, and balance the contributions made by both enthusiastic and retiring participants.

Preparations
In either case, the trick is in the preparation. Plan questions carefully to make the best use of time. Spreadsheets work well for designing an interview schedule, allowing you to juggle the order and timing without a lot of mental arithmetic. It's also a good plan to do a dry run to check your timing and practice your routine.

Open questions work best for both interviews and focus groups. For example, "When do you choose gourmet foods?" will generate more discussion than "Do you buy gourmet foods on the weekend?" Many researchers administer a questionnaire after the interview to get answers to the simple closed questions.

Recruitment
You can recruit participants from your existing customer base or through a market research agency. In general, people are keen to get involved and enjoy the experience. In some cases, you can use volunteers from family and friends, but be careful that they really are representative of your audience. It's good practice to keep names confidential and to share this policy with your subjects so that they feel free to speak frankly. It's also common to offer a small reward to say thanks.

Questionnaires
Questionnaires are effective for answering closed questions and establishing preferences among the alternatives. Researchers often start with interviews or focus groups to identify the issues and alternatives and follow up with a questionnaire to a larger audience to get statistically useful answers.

Effective questionnaires are short, understandable, easy to complete, and relevant. Customers are skeptical of any interaction that looks as if it is gathering data for direct marketing programs.

A user-research example

The following example list provides some behaviors you might discover about your users:

  • a. Most of your users have a large disposable income.
  • b. Many are educated to degree level.
  • c. They're experienced Web shoppers.
  • d. Many have or aspire to a generally sophisticated lifestyle.
  • e. They include slightly more women than men.
  • f. They include few shoppers younger than 20 with the majority in the 30-50 range.
  • g. They are highly knowledgeable about food, but keen to learn more.
  • h. They generally recognize product types such as Jarlsberg and Extra Virgin olive oil.
  • i. Some are beginners.
  • j. Many are unconcerned with brand names.
  • k. Many are fond of fine wines.
  • l. They would use an online deli for convenience, choice, and quality.
  • m. They are resistant to impersonal supermarket experience.
  • n. They dislike being lectured or patronized about the right thing to eat.
  • o. They typically use the Internet from a desktop computer at home.

These behavioral findings can suggest that the wants and needs of these possible customers mirror those of your site. The findings also suggest some features (divided into five topic categories) to consider in the design pertaining to:

  • Tone and visual style
  • Presentation
  • Terminology
  • Classifications
  • Privacy

The features form a behavior/design consideration matrix which is displayed in full at the end of this section. For now, look more closely at each group to determine the potential goal match for client and site owner and also for more detailed design considerations.

Support for design vision
Overall, these potential customers are telling you that there's a good match between their goals and yours. They have money to spend, as noted by (a) in the preceding list, are comfortable buying on the Web (c), and would patronize a site built on your design vision (l). Although you would need more data to build a business case, this is good evidence that your overall design proposal makes sense.

Next, examine the design considerations in more detail.

Tone and visual style
You might expect to see the following correlations in this group:

  • Sophisticated, articulate, mature (a, b, d, f)
  • Presentation, language, peripheral content to appeal to both men and women (e)
  • Collaborative, personal (m, n)
  • Informative (g, i)
  • Subtle marketing messages (j, n)

In the matrix, the previous considerations are as shown in Figure 1:

Figure 1. Behavior/Design Consideration Matrix: Tone and Visual Style
Tone and Visual Style table

Presentation
You might expect to see the following correlations in this group:

  • Avoid small typefaces (f)
  • Optimize for full-size color screens (o)

In the matrix, the previous considerations are as shown in Figure 2:

Figure 2. Behavior/Design Consideration Matrix: Presentation
Presentation table

Terminology
You might expect to see the following correlations in this group:

  • Technical terminology is okay (g, h.
  • Optional explanations would be helpful (g, i)

In the matrix, the previous considerations are as shown in Figure 3:

Figure 3. Behavior/Design Consideration Matrix: Terminology
Terminology table

Classifications
You might expect to see the following correlations in this group:

  • Primarily by product type rather than brand (h, j)
  • Interaction style
  • Efficient, concise (c, l)
  • Peripheral content
  • Food related (g)
  • Wine (k)
  • Lifestyle (d)

In the matrix, the previous considerations are as shown in Figure 4:

Figure 4. Behavior/Design Consideration Matrix: Classifications
Classifications table

Privacy
You might expect to see the following correlations in this group:

  • Unlikely to be an issue (o)

In the matrix, the previous consideration are as shown in Figure 5:

Figure 5. Behavior/Design Consideration Matrix: Privacy
Privacy table

You can view or print a full-size, printable version (GIF) of the complete Behavior/Design Consideration Matrix table in color or in grayscale.

Now I'll look at the design process.


The design process

To understand your customers in more detail, you can apply two powerful modeling techniques -- task modeling and information architecture.

Task modeling helps you design menus, navigation, and transactions that match the activities users expect to carry out. Although usability specialists often construct detailed task hierarchies, you can learn the essentials by building a simple list of your customers' tasks described in the way that they themselves think of them.

To find out about the customers' tasks, make the following inquiries and requests:

  • What do you do?
  • What steps do you follow?
  • Tell me a story about when you [perform a task or step].

Information architecture helps you organize content in a way that matches customers' preconceptions. For example, an architecture grounded in the users' world can help you design a content hierarchy and labeling system that ensures that they can rapidly find whatever they need, either by browsing or searching.

A good technique is to invite users to group and label a set of cards containing pictures of products or other items within your content.

Together, these two modeling techniques can help you identify the tasks, concepts, structures, and terminology that make up the user's mental model. A good rule of thumb here is speak the same language as the user.

An example of task modeling

Chatting with potential customers, you might hear the following:

  • a. "I need a way to get special ingredients that I can't buy in a standard grocery store."
  • b. "I love shopping in the deli, but I don't have time."
  • c. "It's great when the shopkeeper really knows her stuff."
  • d. "How can I be sure about the quality if I can't see it?"
  • e. "I like to see what's being offered."
  • f. "I'm a browser."
  • g. "I know what I'm looking for."
  • h. "I'll typically buy the same things every time."
  • i. "I do my shopping from a recipe."
  • j. "I love recipe ideas."
  • k. "I shop to a budget."
  • l. "I like to buy seasonal food."
  • m. "I'm open to new ideas."
  • n. "I often send gift baskets to my friends."

As noted in the preceding list, comments a, b, c, and d suggest that customers want fast, personal, informed access to a wide range of quality products. These are the users' goals.

Other comments describe a wide range of different shopping styles and associated tasks. From this data, you might design the following task model:

1   Why shop at our deli 
1.1 Range (a) 
1.2 Speed (b) 
1.3 Specialist knowledge (c) 
1.4 Quality (d) 
2   Shopping 
2.1 Browse our catalogue (e, f) 
2.2 Find a product (g) (i) 
2.3 Previous orders (h) 
2.4 Send a hamper (n) 
3   Information 
3.1 Recipes (j) (i) 
3.2 Seasonal products (l) 
3.3 Recommendations (m)

Note this is an abstract design: The final design refines the language to meet the needs of the user profile.

You can build task models in more detail than this. For example, you could refine 3.1 to add a sub-task to buy all the products for a specific recipe or develop 2.3 to make it easy as possible for customers to repeat a previous order without preventing them from ordering additional products. While information is an serious component of many sites, it is important to keep it current. Stale content is boring and suggests a lack of commitment.

You can use this task model as the basis of site and menu design. For example, you might add links to 1, 2, and 3 on the home page with a sub-menu behind each page. Alternatively you might fit all the tasks described above onto the home page or even show the top-level product categories such as meat, cheese, and bread under 2.

A useful principle is to get your users from home page to a specific product in three to four clicks. Browsers typically have a low attention span and you can expect to lose about 20 percent of your audience on each page transition.

It is a good idea to consciously consider alternative designs by drawing simple sketches. A sparse design looks calm and sophisticated while a more dense design is generally more efficient. If in doubt, evaluate the alternatives with users.

Together with the user profiles, a task model can also identify important differentiators to distinguish your site from the competition. In this case, customers value range, quality, and product knowledge and your home page should support tasks to emphasize your strengths and resolve their concerns. Incidentally, most users dislike high-pressure marketing rhetoric. It is best to make your claims using moderate, factual language.

An example of information architecture

Information architecture helps you organize your content into a familiar and coherent structure by designing appropriate systems for classification and labeling. Your customers might tell you:

  • a. "I know the names of all the types of cheese."
  • b. "I'm looking for an English cheese."
  • c. "I always look at the cheese counter first, then I inspect the sausages and ham and other meats."
  • d. "I think of fresh foods such as meat, cheese, and bread. Then there's other stuff in packets and jars."
  • e. "I can't remember the shapes of all the different types of pasta."
  • f. "You've got hard cheeses and soft cheeses."
  • g. "Off the top of my head, bread, cheese, meat, pasta, biscuits, pickles, mustards, jams, mushrooms."
  • h. "I'm not so bothered by the brand names or country of origin."

Another good technique is a card sort. Ask a group of customers to write out products on cards and then invite them to sort the products into groups and give each group a label.

Based on your customers' input you might design a classification like this:

1 Fresh products (d) 
1.1 Cheese (c ) 
1.1.1 Hard (f) 
1.1.1.1 English (b) 
1.1.1.1.1 Cheddar (a) 
1.1.1.1.2 Cheshire (a) 
1.1.1.1.3 ... 
1.1.1.2 French 
1.1.2 Soft (f) 
1.1.3 Cream 
1.2 Meat (c ) 
1.2.1 Ham 
1.2.2 Sausages 
1.2.3 Pate 
1.2.4 ... 
1.3 Bread 
1.3.1 Loaves 
1.3.2 Rolls 
1.3.3 ... 
2 Other products (d) 
2.1 Pasta 
2.1.1 Shells (Conciglie) (e) 
2.1.2 Spirals (Fusilli) (e) 
2.1.3 ...

Use creativity

You can design many alternative creative designs from the task model and information architecture. For example:

  • Shop metaphor (cheese counter, meat counter, bread basket)
  • Catalog metaphor
  • Food magazine metaphor
  • Focus on peripheral content (recipes, seasonal products, and recommendations) with shopping available from a compact menu

Each creative alternative is likely to have its advantages and disadvantages. As with task design, it's good to sketch alternatives and consciously list the merits and drawbacks of each. You can think of these sketches as low-fidelity prototypes. Use them to capture, review, and evaluate your current design vision and feel free to discard them as you move forward.

Avoid settling for your first idea and challenge yourself to come up with at least three different concepts. Try using techniques like brainstorming to exploit the creativity of your whole team and try to defer criticism until you have identified a range of options.

Design Space Analysis is a design technique that you can use to evaluate your creative alternatives. Simply write or sketch each design idea and label it with each of the associated advantages and disadvantages. For a more sophisticated approach, list your success criteria and link them to each of the alternatives they support or contradict.

Temper your creativity with a sense of practicality and ensure that your designs truly support the needs and expectations of your users as documented with the user profiles, task model, and information architecture.


Evaluation

UCD also involves users in testing designs. Just as you need to test programs for bugs and oversights, it is important to evaluate designs to ensure that your users understand them and find them pleasant to work with. Even with a carefully considered design, you will discover aspects of your design that users find difficult or frustrating.

You can test early by evaluating sketches or static HTML and you can test later as the design evolves into prototypes. As with system testing, the earlier you evaluate, the easier and cheaper it is to resolve problems.

The basic technique is to write a scenario, recruit some representative users, invite them to use the scenario, and observe what happens. As with user research, recruit with care, plan ahead, and listen attentively.

Although a usability lab is helpful, it is not essential. For example, my team has carried out successful evaluations in labs, hotels, offices, and bars. You can also carry out evaluations remotely using a shared whiteboard

An example of evaluation

Your evaluation scenario might look something like this:

You are about to hold a dinner party for four people and
you have allocated a budget of $60. You have decided to
make spaghetti with a puttanesca sauce but you are still
looking for good ideas for a starter and dessert.

1. Find and buy the ingredients for the main course using 
   the attached recipe. 
2. Find a recipe for dessert and buy the ingredients. 
3. Choose some seasonal ingredients to make a starter.

The evaluation might find the following problems:

  • The site needs to support an additional task to contact the deli for advice.
  • The buttons don't look sufficiently like buttons and are consequently hard to find.
  • The graphic link to recipes is misinterpreted as an advertisement and ignored.
  • The contrast between foreground and background colors is hard to read for some text.
  • The page load time is too slow.
  • Recipes need to suggest alternatives for customers on low-fat diets.
  • Users are reluctant to provide personal details other than those necessary to purchase and deliver.
  • Some users would like more detailed background on products.
  • Organic foods and vegetarian products need to be marked in product lists rather than in details.
  • English cheeses need to be classified as mature and mild rather than as hard and soft.
  • Biscuits and cakes should be classified with bread under bakery.

What's next?

This article has explained the concepts of usability and user-centered design as they pertain to Web businesses and Web-based applications. I've provided an outline and examples for designing sites for the ultimate usability, and hopefully, I've emphasized that your customer is your own best design resource.

To get started, ask yourself these basic questions about an active or previous project you've designed:

  • Who uses this site?
  • What sort of people are they?
  • What are their goals?
  • What is their experience?
  • What languages (colloquial and actual) do they use?
  • What are the things they do and the steps they follow?
  • How would they organize my products into categories?

Don't be afraid to see the world as your customers see it. Discover how usability affects your business and learn these simple, practical techniques for involving users in the design and evaluation of your product.

Resources

  • Interested in a low-cost, low-overhead method to collect valid customer data with an eye to using it for UCD input? Read "Fly on the Wall" by Eyitope St. Matthew-Daniel and Dr. Robert J. Kamper for a demonstration (developerWorks, August 2001).
  • For a multi-part case study in designing a Web application (that used customer feedback as a given), visit the series The Go-ForIt Chronicles: Memoirs of eXtreme DragonSlayers by David Carew, Willy Farrell, Alfredo Gutierrez, and a host of others (developerWorks, June 2001 through September 2002).
  • Get a start on XP, or Extreme Programming, a method of programming applications that relies heavily on "concrete feedback early and often from the customer...and from real end users" in "XP distilled," by Roy Miller and Christopher Collins (developerWorks, March 2001).
  • Explore the IBM Ease of Use site for a good source for design principles and guidelines and downloadable tools, as well as for thought-provoking examples of advanced user-interface technologies. It also has an excellent description of User Engineering, a rigorous new method from IBM for translating business goals into effective designs.
  • Check out the IBM UK Usability Competency Centre which describes the consultancy, services, and training offered by IBM in the UK and Europe.
  • Try Jakob Nielsen's usability site for a collection of short, focused articles on Web design, evaluation, user-interface technology, and trends.
  • Find an excellent index of usability-related Web resources on Keith Instone's usability metasite.
  • As a resource that focuses on the fact that users experience the usability of a Web site before they have committed to using it, read Designing Web Usability by Jakob Nielsen (New Riders, 1999).
  • To learn how to apply principles of architecture and library science to design cohesive Web sites and intranets that are easy to use, manage, and extend, try Information Architecture for the World Wide Web by Louis Rosenfeld and Peter Morville (O'Reilly & Associates, 1998).
  • Read The Design of Everyday Things by Donald Norman (The MIT Press, 1998) -- many call it the "bible on the cognitive aspects of design."
  • Discover a resource for designing usable e-business Web sites with a focus on improving customer satisfaction in the Designing Easy-to-use Websites by Vanessa Donnelly (Addison-Wesley, 2000).
  • Get a concise account of human factors in computing as A Guide to Usability: Human Factors in Computing by Jenny Preece, et al., demonstrates the balance between technical and psychological issues in UI design (Addison-Wesley , 1993).

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=11803
ArticleTitle=Learn from your customers for usable Web apps
publish-date=06102003