As we've said, people's mental model of how the Web works is predicated on their previous Web experiences. When they come up against elements that don't work as expected, they have to guess why this is so. For example, if users select a Play button to begin a video and nothing happens, they may conclude that the site is broken or that Play buttons on other sites won't work either. The site designer, on the other hand, may have a different explanation for why the video didn't work on the users' systemstheir Internet connections were too slow, their players incompatible, users just need to be more patient. In the end, the reason doesn't really matter. Don't defend your interface. Fix it.
Designers have different explanations for why something doesn't work on their users' systems. In the end, the reason doesn't really matter. Don't defend your interface. Fix it.
This real estate Web site uses a "virtual tour" to show the details of its properties. Unfortunately, many users don't know to click on the small symbol at the door, and so they will never "enter" the house and see the many pictures of its interior. Yes, you can pan the photos and see more of the rooms, but it's painfully slow to do so, and users quickly get lost in the houseif they ever do enter.
Don't let technology get in the way of your users' experience. Technically savvy designers are often tempted to create more sophisticated and interactive Web sites by experimenting with unusual designs and interactions. But ironically, sites that use cutting-edge technology intended to capture audiences run a high risk of alienating them when the technology doesn't work seamlessly.
If you have the urge to demonstrate your talent by creating something revolutionary, ask yourself, "If customers prefer simple tools, why not use them to the fullest instead of imposing new tools?"
People resist learning new interactions because, understandably, they don't like working harder than they have to. Stick to what people already know and are comfortable with. The more cutting-edge the technology, the more unfamiliar the interaction conventions will be to the average user, and the more you have to simplify the design.
This property listing shows a simpler way of exposing users to photos of a house: Show thumbnails and allow people to click on the photos they want to have enlarged. It would be better to show bigger photos that would allow users to see more details, but at least this user interface follows conventions for how to interact with photos on the Web. Underlining the labels for each thumbnail further enhances the perceived affordance of clickability. (See Chapter 6 for more on clickability.)
Atlantis.com homepage: The global navigational panel isn't apparent. It's hidden under the vague term Atlantis Navigator and tucked away in the upper left side of the screen. Once people click it, the navigational menu literally scrolls out, which is clever and matches the theme of the site. However, for something as important as global navigation, it's best to stick with a standard paradigm that people are accustomed to. Otherwise, they might not notice it.
These are examples of good scrollbar designs. They look like scroll bars, so users easily recognize them.
Users of Haribon's map of the Philippines didn't notice the scrollbar because it looked like a North/South indicator for the map. There were several nonstandard elements in the design: The scrollbar was outside the area it controls, the top and bottom arrows looked as if they were part of the map as compass pointers, and there was no slider indicator.
A user couldn't create her virtual character because she didn't realize that the triangular arrows on the side of each boxed picture were scroll arrows.
Whenever you modify a standard GUI component, consider the usability implications of that modification because users may have difficulties interacting with nonstandard designs unless they are truly easy and intuitive. Being the first to showoff a slick design concept runs a high risk that people won't know how to interpret your design. The further you veer away from the norm, the higher chance you have of confusing or, even worse, losing your audience. If your design slows people down, causes them to make mistakes, and undermines their assumptions, it's the kiss of death. If you must do something unconventional, make sure you have a good reason for it, and user-test your system to make sure people understand it.
Excessive use of multimedia is more damaging than beneficial. The Burger King site uses animation to present menu items. Users must catch moving targets that fade in and out to get detailed information. Such interaction frustrates people because it requires precision and excessive effort. One user commented:
"Something that is lame they're flying around and you can't catch them with the cursor, or if you can, they move. That's just a pain. Just have it all up there so I can click on it."
Since the screen shot in the previous figure was tested, Burger King's site has been modified to be in line with people's expectations. The site now lists menu items in a more traditional navigational style. From a user standpoint, this is an improvement; static items are easier to click on than moving ones.
(Facing page, top) This is a historical timeline of the Nestlé Company. This esoteric representation of the timeline confused people. They didn't know what the graphical representation meant or how to interact with the interface. While fancy and slick timelines might seem initially appealing, they're often cumbersome and get in the way of people accomplishing their tasks. People can get the same information quicker from a simple HTML page than with this interactive timeline. Scanning a single page is easier than having to move the cursor over each part of the picture.
(Facing page, bottom) After our study, the Nestlé site replaced the interactive timeline with this one. This version is much easier to use. Nestlé did the right thing by choosing function over cleverness.