Flog: The Official Fluid Blog

The Get Elastic blog had an interesting post last week on American Eagle’s (http://www.ae.com) incorporation of product merchandising elements within the drop down layer of its product catalog navigation (http://www.getelastic.com/merchandising-in-navigation). As the Elastic Path folks point out, it’s an effective technique for surfacing more product content without a click or a separate page view. It also obscures a lot of content and can impair overall site usability.

The technique inspired a lot of discussion at Fluid. Our typically crotchety CTO had this to say:

“I find it mildly interesting, but more of a distraction than a benefit. When I use navigation, I typically know where I want to go or quickly want to scan the options. It’s like going into a Macy’s and seeing a big ad for something random on the floor index when I’m looking for shoes. Really? Do you really need to distract me there as well? Maybe I’ll forget about buying the shoes altogether…”

While our Director of Information Design countered with his own take on balancing the needs of the retailer with those of the audience:

“I think that American Eagle’s implementation could be improved, and I agree that the size of the banner distracts, but I also think there is great value in merchandising like this. It’s definitely possible to do something less obtrusive and more integrated - a more natural extension of the navigation rather than an additional banner tacked on. There is a definite business potential here for popular online retailers who can get manufacturers to pay for placement like this, with the benefit of getting their product and brand recommendations in front of more eyes. Taking it one step further the retailers, in turn, could use this incremental revenue to keep shipping costs low or free.”

And finally, from a member of the design team:

“I agree that this is really interesting from a merchandising point of view but the UI is super busy and visually just taxing. It would be interesting to know if people are actually clicking through on any of these and how it’s effecting their overall site conversion rate.”

Personally, I agree - the UI is busy and ultimately distracting. But I am also not the target consumer. That would be teenage boys and girls, for whom I suspect visual clutter and informational density is a plus. Not to mention the “Hey, I wasn’t expecting that! Cool!” factor.

As web sites and web applications become increasingly complex, they are also becoming decreasingly static. Web sites no longer present themselves as passive, static blocks of text and images. They move on their own and in response to user actions in order to:

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.

“That which we will call a…” Hey, just what are we going to call it?

Nomenclature, terminology, labels. What we call things and the names we use are very important, and deciding upon the “perfect label” can often be more difficult than we anticipate. As information designers and architects we are tasked with not only organizing information, but also often with naming it.

Sometimes the exercise is quite straightforward: developing a product catalog for an online toy store may be more an exercise in deciding whether building blocks are categorized as “puzzles” or ” learning toys” than in naming them “building blocks.” In either case, the label for the toy seems obvious. After all, we would not change the name from “building blocks” to “plastic construction units.”

But sometimes the nomenclature exercise is not as easy or straightforward. Sometimes we struggle with what to call something, especially when we are trying to decide upon a site’s navigation and interaction terminology, headers, subheaders, text links, and buttons. For example, should we call a section “Online Learning Center”, “Training Services”, or “Guides and Documentation”? Although each of these options conveys a similar type of content, each creates slightly different expectations about what information will be presented, the format of the information, and the extent and form of the interactions possible.

The labels and terms we use are very important, because they assist, guide, and inform visitors to our site (or users of our applications) and help them work efficiently and accurately. Poor nomenclature:

• is ambiguous, incomplete, or even erroneous.
• causes confusion.
• causes frustration.
• increases abandonment.
• decreases credibility and trust.

Good nomenclature should go unnoticed, because site visitors do not have to stop and think, “What does this mean?”, “Where will this take me?”, or “What is going to happen?”, because it is immediately obvious and meaningful to them. There are a few practices we can put in place to help us develop better labels and more useful (and usable!) nomenclature:

1. Use active language (e.g., “See the Ford Model T Specifications”) and avoid passive language (e.g., “More about the Ford Model T may be found here.”)
2. Use familiar terms that are meaningful to the target audience, and try to avoid internal, (company or product specific) terminology (e.g., “Mental Health” rather than “Psychopathology” on a community health web site.)
3. Use directive language that sets accurate expectations for the reader about what will happen and what will be presented when they follow the link or press the button (e.g., “Download the Update” communicates that the download will begin right away, whereas “Get the Update Here” is somewhat vague and may either start the download or take the visitor to another page.)
4. Be concise. Long labels are more likely to introduce ambiguity, and there is almost always limited screen real estate to work with. Tooltips that show up on mouseover are a nice way to include additional, explanatory information if necessary. Also, eliminate any unnecessary words, for example, use “Read the full article” instead of “Click here to read the full article.” There is no need to write “Click here to…” as long as the link looks like a link to the visitor. If it does not look like a link, then make it look like one - do not fix it by adding “Click here.”
5. Be consistent. The terminology, tone and voice, and grammatical structure should be parallel across the navigation system. If you are using active verbs in the navigation, then all of the navigation options should include them (e.g., “Search for Music”, “Listen to Music”, “Share Music”, and “Buy Music.”)

A recent blog post on MSDN discussing the usability process behind the new Microsoft Office 12 “ribbon” used to present function icons in the interface described how they learned from observation that users could scan the icons more quickly when the icons are not all the same size. But not everyone thinks (based on their intuition) that different sized icons are a good idea.

I (Jensen Harris, the blog author) was reading a blog entry of someone who was kind of critical and dismissive about what we’re doing and our designs. One of his criticisms was “how bad the usability of the Ribbon would be because it’s got icons scattered all over of various sizes.” What we’ve learned is actually the opposite. People can scan disparate patterns more easily than homogenous patterns. When we use more toolbar-like layouts–a bunch of equally-spaced, equally-sized buttons, people scan them less quickly than when each chunk has a memorable layout. So we actually try explicitly to vary the layouts between chunks–it helps people find the thing they’re looking for more quickly.

This is a great example of how we are re-discovering some basic perceptual principles that have been studied psychologists for nearly 100 years: humans (and all insects and animals, for that matter) are designed to perceive change. We notice more quickly when things are different or when they change, and we get perceptually “bored” when things are all the same and never (or rarely) change. We know from software design experience that rows and rows or columns and columns of the same icon in file management UIs offer no scanning advantage, but if just one of those icons differs it seems to literally jump off the page at us. We notice the difference.

It is possible for historical reasons that function icons in toolbars are the same size because is it easier to design and build a toolbar where everything fits together like uniform bricks. It’s more difficult to create a toolbar where all of the pieces are different sizes and must be properly arranged in order to “look right.” Perhaps we have a perceived need for a grid-based system because it is simpler, not because it is better.

Yes, icons do vary in color and content based on the function, so there are differences among the icons already, but a standard icon size introduces a regularity that makes it more difficult to see those differences. Reading researchers have known for a long time that we read LONGER TEXT PASSAGES WRITTEN IN ALL CAPS MORE SLOWLY THAN WE READ PASSAGES WRITTEN WITH BOTH UPPER AND LOWER CASE LETTERS, because the ascenders and descenders provide us with word patterns based on the differences among the letters that we recognize more quickly. All caps letters are uniform rectangles, but a mixture of upper and lower case letters are a sequence of different sizes and shapes. We notice the differences.

Change and difference can occur in more than size, shape, and color; it can also occur over time. Our attention is drawn by things that move. Yes, we can see things when they are stationary, but when something moves it attracts us, it makes us want to look at it. Predatory animals are particularly sensitive to movement, but when the prey remain motionless it is much harder for the hunter to perceive it. Camouflage only works well when you are sitting still. Many animals are equipped with the coloring and instinct to blend in: fawns lay motionless in the dry grasses and stick insects cling motionless to branches. If they move, they become dinner.

We can use these perceptual principles to our advantage: facilitate scanning by using color, shape, and size cues to create memorable patterns, and draw attention with the use of differences, change, and motion. Although it may be easier to build UIs based on a grid pattern, the reality of our perceptual systems (and of the organic world) is that patterns are based on differences not similarities.