paper & pencil

6 Ways to Fix a Confused Information Architecture

In his latest column, Jakob Nielsen writes on the 6 Ways to Fix a Confused Information Architecture. Using the example from a recent usability tests where users confused two sections of content the 6 possible solutions include:

1. Merge the two sections
2. Rename the two existing sections
3. Explain the two choices
4. Restructure the site
5. Add cross-reference links

As always, it depends on the context — your users, your content, etc. — and each has its own set of pros and cons. Choosing the best solution or combination of solutions is best determined through additional testing.

Real Wireframes Get Real Results

Stephen Turbek writes on the need to make wireframes more "real" in the B&A article: Real Wireframes Get Real Results.

Real people don’t understand wireframes
Usability tests are done to get early feedback on content and functionality decisions from people outside the project team. These participants, unfortunately, are not sure how to respond to a wireframe. It is not intuitively clear what they should be doing, which site they are looking at (public site, intranet, client site)—it may not even be clear that they are looking at a web page. This lack of information and context adds a bit of cognitive friction to each step in the process. This level of confusion results in less confident answers and fewer opinions.

The comments that follow the article are more useful in that it provides a good set of pros and cons for testing with low-fi and high-fi wireframes and prototypes. For example, with a high-fi prototype testers may expect the functionality of the prototype to work but on the other hand users don't have as much context available to them when testing with low-fi wireframes. All seem to agree that you need to manage the test participant's expectations and provide context. Use of real text and making links and buttons looks clickable is a must for all types of wireframes and prototypes.

Label Placement in Forms

Matteo Penzo summarizes the results of a usability study on Label Placement in Forms in the July 2006 issue of UXMatters. The tests were based on Luke Wroblewski's guidelines on Web  Application Form Design.

Here are the author's conclusions:

• Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
• Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
• Bold labels—Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
• Drop-down list boxes—Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
• Label placement for drop-down list boxes—To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.

UIE Interview with Luke W

UIE recently interviewed Luke Wroblewski on the relationship of visual design and usability.

Part 1 tidbits

overview:

When properly applied, visual design is all about communication. The better at communicating we are, the easier it is for our users to use and appreciate the web sites we design.

many usability findings only focus on what happened and don't delve into why:

What’s missing in this scenario is the reason why the user overlooked that particular feature and what the designer changed to address that. Odds are the visual contrast between all the elements on the page was too low and everything looked the same to users, so they glossed over the feature. Or, perhaps the visual contrast was too high, so every element was screaming “look at me,” in which case none of them got noticed. Whatever the exact reason, there’s likely a visual organization issue at the heart of the problem.

"ugly design" of Craigslist, MySpace, etc.:

Sites like Craiglist and Del.icio.us remain popular on the merits of their content. But, does their audience enjoy bumping through the site’s awkward graphics and hard to read text? No, but the personality of the content — It could be high quality, funny, worthwhile, and more—makes the rest more than bearable. Would their audience be happier if the personality of the presentation matched the personality of the content? Of course. They like the content, don’t they?

Part 2 tidbits

visual hierarchy:

Too often, everything on a Web page looks the same and users don’t know where to start. Conversely, everything looks very different and users end up bouncing between elements that are competing for their attention. An effective hierarchy employs just enough meaningful differentiation to walk users through the unique content and actions on a page in a purposeful order.

continuous exploration:

You mentioned sites like Craigslist and MySpace [in Part I] and I think you’ll see a lot less visual hierarchy there because the predominate user action is continuous exploration. Little visual hierarchy however would be a very bad thing for a task-specific site. In that case, using hierarchy to communicate how to accomplish a task clearly is indispensable. The fluid, flattened, exploratory nature of MySpace would quickly become aggravating when you are trying to book a flight.

AJAX:

Other rich interactions that technologies like Ajax enable, however, don’t just show up when they are useful. In fact, actions like right-click and drag-and-drop aren’t visible at all and are not expected within the Web browser. In these instances, we’ve increased the need for effective visual communication because through the presentation of the interface, we have to tell users these features are available and how to use them.

Currently, many sites do this through Help text that explains what’s possible. Moving forward though, I think we’ll see more conventions emerge that use visual indicators to better communicate the availability of rich interactions.

Consider the shopping cart icon. No e-commerce sites explain what that indicates with inline Help text anymore. Over time, it becomes part of the vernacular online.

staffing:

I recommend having a full time interface, interaction, or Web designer—call them what you will—who is either capable of developing the visual design for a Web site or versed enough in the principles behind visual design to work with a visual designer. I say this because, in most cases, Web sites have moved beyond the simple navigation of information.

Web applications, instead, enable people to communicate with each other, to get work done, or to create and share content. These interactions require a holistic approach to task flows, information architecture, and more. Your core design talent needs to have the ability to see the big picture and translate it to a series of Web pages and/or UI elements. If that person can represent the big picture visually—all the better. If not, they need to communicate with a visual designer that can.

UI Design is about Compromise

Mike Padilla writes in Digital Web Magazine on User Interface Design - Taking the Good with the Bad. The articles describes the choices and compromises that take place during the UI design process.

Padilla offers this handy chart of example design decisions with their cost and benefits:

Some Contrasting Design Decisions

Costs and Benefits of Design Decisions

Design	Benefit	Cost
Shallow information architecture	Fewer clicks to find info	More clutter
Deep information architecture	Clean, reduced clutter	More clicks to find info
Small font	More information per screen	More difficult to read for some users
Large font	Easier to read	Less information per screen
Drop-down box	Selection amongst many choices using limited space	Hidden choices
Radio buttons	See all selections at all times	Additional space required, clutter
Icons	Quick recognition once learned, aesthetically pleasing	Must be learned
Text links	Always understood	Must be read, do not stand out as actionable items as much from other text
Abbreviations	Save space	Must learn or recognize
Full text	Easily understood	Requires additional space
Keyboard shortcuts	High speed of data entry	Must be learned
Point and click	Intuitive	Additional time required for interaction due to increase motor skills required

Understanding that compromise is part of the process is necessary in order to make more informed design decision and to defend these choices to stakeholders.

Without understanding the true nature of compromise in UI design, you will likely make flawed design suggestions. To effectively evaluate the cost and benefit of each design decision that affects the UI, you need insight across many fields, from cognitive psychology to human factors to graphic design. A large knowledge base centered on an understanding of how users interact with applications is necessary to accurately evaluate a UI. It is often not a simple black-and-white issue, because the respective costs and benefits have to be gauged relative to alternative solutions.

For example, the font on your web page may be small, and consequently a bit more difficult to read for some older users. That’s the cost. But it affords a lot more information on each screen, which means less scrolling. Less scrolling means fewer motor tasks and less cognitive load, because now with more information on a single screen, comparative tasks are more likely to involve information that is currently viewable. Now assume with this example that user demographics show that 90% of your users are between the ages of 21 and 30. So while the font may be more difficult to read than a larger size for some users, the net usability of the design decision is highest, compared with other solutions.

Four factors to use in measuring net usability:

When evaluating the net usability of one design versus another, a logical process should be followed to effectively evaluate the compromises that accompany each. To judge the good with the bad, you need a UI ruler by which to measure. You can assess the quality of a UI with a handful of factors:

• Ease of learning and memorability
• Efficiency of use
• Error frequency, severity, and recovery
• Subjective satisfaction

Depending on the ultimate use of the application, each factor may be of variable importance. For example, efficiency of use would be more important for a highly used application than for a brochure-like marketing website, whereas the reverse may be true when it comes to subjective satisfaction. Each UI design decision that is challenged can be evaluated by judging it against each of these four factors.

One-screen vs. Multi-Step Hotel Reservations

Max Starkov and Jason Price of Hospitality eBusiness Strategies (HeBS) decide in favor of the multi-step form for booking engines. The article lists an extensive set of pros for the multi-step form and cons for the single step. Here are just a few:

User-Friendliness:

• The multi-step booking process 'is easier on the eye' as it presents the information in 'installments', one step at the time.
• The one-screen booking screen is exceptionally busy. The information is presented in one 'concentrated chunk', requiring extra time and focus on behalf of the user to figure out what is what, and where to begin and end.
• Layout of the one-screen is confusing: Do you start top left and go to the right, and then move top to bottom (i.e. the Yahoo model)? Do you read the information column after column as it is in your local newspaper?
• The fonts are too small and difficult to read (think senior citizen, baby boomers that all wear at least reading glasses, etc.).
• The room descriptions are too 'skinny'-you have to scroll down to read more as opposed to having a page describing room descriptions and availability as it is currently on all major brands and intermediaries.
• Rich Media: all of the images are so small and un-appealing.

Faceted Metadata for IA & Search

The web site for the The Flamenco Search Interface Project offers presentations and tutorials on aspects of search and information finding that has informed the Flamenco search project at UC Berkeley. One resource, Faceted Metadata for Information Architecture and Search (pdf), is a CHI course presenting the findings on how the use of facets can improve searching and browsing large information collections.

Advantages of Facets

• Can’t end up with empty results sets
  (except with keyword search)
• Helps avoid feelings of being lost.
• Easier to explore the collection.
  • Helps users infer what kinds of things are in the collection.
  • Evokes a feeling of "browsing the shelves"
• Is preferred over standard search for collection browsing in usability studies.
  (Interface must be designed properly)
• Seamless to add new facets and subcategories
• Seamless to add new items.
• Helps with "categorization wars"
  • Don’t have to agree exactly where to place something
• Interaction can be implemented using a standard relational database.
• May be easier for automatic categorization

The remainder of the presenation focuses on how eBay successfully uses facets for browsing and searching including interface lessons for improving usability. For example, they have found that placing facet controls for filtering and expanding results to be most successful when placed at the top of the screen versus the left side. Another lesson is to provide a truncated list of facet values - users have no trouble accessing the full list when needed.

In regards to "breadcrumbs" the traditional method (Facet > Sub-Facet > Value > Item) doesn't work well. Instead a more robust "panel" displaying facets chosen plus options for narrowing or expanding works much better when searching and browsing through vast amounts of items.

Customer Carewords

In the UIE interview with Gerry McGovern, he mentions a new method to help focus your content on the needs of the customer.

A testing technique I have been developing over the last five years is called Customer Carewords. It’s a voting technique that allows customers to vote for the words that mean most to them. Words are what drive actions on a website and if you identify the exact right customer words you’re going to achieve more success.

F-Shaped Pattern For Reading Web Content

The Neilsen Norman Group's recent eyetracking study found that users tend to read web site content in an F-shaped pattern.

Their findings highlight the difference between writing for the web versus writing for print.

• Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
• The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
• Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

Measuring Performance and Process

HFI's March issue of the UI Design Newsletter summarizes a 2005 study on making interface improvements based on performance data compared to perfomance and process data. Performance data is focused on task completion while process data is more about the user's experience while completing the task.

Recommendations based on performance + process data resulted in increased task efficiency and increased overall satisfaction with the interface.Collecting either direct (think aloud/retrospective verbal analysis) or indirect (eye-tracking) data provides greater insight to the user's expectations and anticipated task flow. Access to the user's mental model allows designers to identify and minimize gaps between the user's model and the site-interaction model.

This work suggests that the various data streams focus designers on different opportunities to improve the user experience. If the goal is to increase both task completion and perceived ease-of-use, then the collection of process data is critical. This data provides direct insight into the users' expectations and mental task model.