Throughout this book, we've been evangelizing simplicity, but ironically, the practice of simplicity is not at all simple. It's easy to build a bulky design by adding layer upon layer of navigation and features; it's much more difficult to create simple, graceful designs. Paring designs to essential elements while maintaining elegance and functionality requires courage and discipline. Take interior decorating, for example. Why are some rooms more inviting than others? An amateur decorator might pack a living room with a jumble of furniture styles, patterns, and textures in a misguided attempt to dazzle. In contrast, skilled designers carefully select items that support their clients' needs, ruthlessly eliminating those elements that do not serve a real purpose. If an element doesn't complement the fundamental plan, it dilutes the impact of the room's decor. The animation on this site interferes with its content. The tumbling man in the upper left distracts people from the content they came to the site to get. One user commented: "I like these icons but they can be a bit too much you get fed up seeing them come up all the time. The images and graphics are fine for a while, but then you want to get on with it, without the interference of the chap tumbling over." www.nestle.com It's the same with Web sites. Good designers get the maximum use out of limited space (both screen space and bandwidth) by paring down the interaction to the essentials. Gratuitous effects, graphics, and pictures take away from the important elements you want to display on your site. When everything is flashing and screaming for attention, nothing gets it. Take a good, critical look at your site. See if you find any extraneous design elements that are cluttering it up. Make every effort to simplify the interactions on your site. Is there a slick or fancy feature that's more difficult to use than a simple static one? Every icon, picture, graphic, and animation should serve a purpose and communicate something meaningful. Before adding design elements to your site, ask yourself:
If the answer is "no," eliminate it. What does this picture of a sunflower have to do with corporate responsibility (not to mention its size and download time)? This useless photograph takes up prime screen real estate. People don't mind waiting a little longer for useful information, but they resent waiting for something meaningless. Use photographs to augment content, not to decorate the page. www.bms.com
Before adding a design element to your site, ask yourself: Does it simplify the user's task? Does it add value to the user? If the answer is "no",eliminate it. Look at the two versions of the navigational menu on the Tiffany & Co. Web site. In the first design, the translucent menu opens on top of the image, making the menu extremely difficult to read. The second design is an improvement because the text is darker and doesn't compete with the background. While the first design appears elegant, it's too difficult to read and alienates customers. The second design balances aesthetics with usability. The menu is more legible yet maintains the site's elegance. An earlier version of the Tiffany & Co. Web site used transparent menus, which looked interesting but were difficult to read. www.tiffany.com Since our study, Tiffany.com improved the navigational menu design without compromising aesthetics. www.tiffany.com
Now let's look at two approaches to map design, the first interactive and the second one not. The interactive map shows the locations of restaurants in the city. Moving the cursor over each orange ball reveals the restaurant name, and clicking it shows the restaurant details. Simple, right? Actually, no. If you were not familiar with the restaurants in this city, you would have to click on each ball to find out about them. Click on a ball, back out, click on another ball, back outwhew! The second map is easier to use. It reveals information about each establishment without forcing people to work harder than they have to. The map gives people the most relevant information at a glance without requiring any clicks. While the first map might seem slicker, it's not as functional as the simpler one.
This interactive map probably required more time and resources to create than a static map would, but it is less useable. http://surfcityusa.com This low-tech design serves its purpose, giving people relevant information quickly and easily. www.flagshipresearch.com Developing fewer features allows you to conserve development resources and spend more time refining those features that users really need. Fewer features mean fewer things to confuse users, less risk of user errors, less description and documentation, and therefore simpler Help content. Removing any one feature automatically increases the usability of the remaining ones. In one study, we asked participants to use the Sydney Opera House Web site to locate a particular restaurant. Most people tried finding the answer using the Virtual Tour because it was the most prominent element on the site. The robust feature allowed people to do advanced things such as:
This Virtual Tour contained a lot of useful information. Most people couldn't figure out how it worked, however, and so they never saw much of the content. In addition, it was slow to load, had progressive disclosure, and the sound effects impeded people's progress. Users want direct answers when seeking information; feature-rich applications often hamper users because the interactions tend to be circuitous. Here are some of the comments from our test users about this instance of fancy design: "This ball shooting up is annoying.…I'm trying to figure out if any one of these balls indicates the Playhouse.…It took me a while to find the Playhouse." "I didn't notice the little arrow. What am I supposed to do with that? I don't get what that is." "I don't really want to do this grand tour. It takes a lot of time. You get all of this stuff coming up: music, introsomething I would rather not go through." "Constructing maps and loading panoramasthis is more information than I would want to have. I don't need the architectural drawings. I just want to see where the restaurant is relative to the Opera House. I wish I had a list on here that showed the entities within the Sydney Opera House, like where I can find a restaurant, but I don't see it. I like the panorama view but I don't need that right now. I wish they had Search, so I could type in 'playhouse' and it would show me the Playhouse rather than bouncing around the entire multilevel Opera House." "It's rather distracting, this 3D thing. It's a little overkill. This is like the USS Enterprise. If you've never been on it, you wouldn't know where to begin. It's pretty and dynamic, but how helpful is it?" When you find users comparing your user interface to that of the Star Trek spaceship, it's usually not a good sign. This virtual tour might be enjoyable for a few people who have a lot of spare time and curiosity, and want a challenge. However, for most visitors who need general information about the Sydney Opera House, this application is excessive. People didn't like having to hover their mouse over yellow balls in order to get basic information such as location names. Many people didn't notice or understand the myriad of icons such as the yellow arrow (shown here in the central corridor on the lower map) and the "i" (here superimposed on the upper photo). www.sydneyoperahouse.com People were more successful at finding locations on a well-labeled static map than on a complex interactive one. The simple sketch has enough detail to give people context and orientation. Having the main areas labeled helps them make associations and understand the layout of the facility. www.sydneyoperahouse.com (Facing page, top) This is the first of two splash pages on the Wynn Las Vegas Web site. Not only is this two-step entry process time consuming, the options on this page are based on the company's priorities, and not on the end users'. The first things people want is to find information about this hotel, not Buy Tickets or Book Now. Asking people to Buy Tickets and Book Now is premature. In addition, these terms are vague and have overlapping meanings in this context. At this stage, viewers might wonder what they are booking and buying tickets are for. www.wynnlasvegas.com (Facing page, bottom) This is the first of two splash pages for the Wynn Las Vegas Web site. Not only is this two-step entry process time-consuming, the options on this page are based on the company's priorities, and not the end users'. The homepage slowly loads with audio of Steve Wynn saying, "Unlike other Web sites, we filled it with surprises. Have fun, go find the surprises, and enjoy." People trying to compare hotels and book reservations don't want to find surprises, the want information quickly. www.wynnlasvegas.com |