|
|
|
|
|
 |
Chapt. 2: First Principles A blueprint is just good thinking written down. You have to do the good thinking part first and the writing down second. One of the many secrets of good thinking is to learn from those who have suffered before you. Over time, design, architecture, software engineering, and usability have all developed many good rules of thumb to help us avoid making the same dumb mistakes our predecessors did. This chapter covers a few that I’ve found relevant to information architecture. As you design and read about design, you’ll add your own to this list. But let’s begin with these eight principles. Principle #1: A few years back, I read an interesting study that showed that women navigate through the world by landmarks (turn right at the Quickie Mart, turn left at the white house) and men navigate by their sense of direction and space (go five miles east, then two miles north). On the web, everyone’s a woman. You cannot use your sense of direction; it’s a physical attribute, and physically you haven’t moved an inch from your monitor, no matter how many web sites you’ve journeyed to. To assure that people can return to items of interest, and also to assure that they can find new ones, Information Architects can borrow from an architecture discipline called wayfinding.
Wayfinding is typically employed in disorienting places such as malls, airports, and subways to help people get from one point to another. The goals of wayfinding are to let people know.
Wayfinding does this using not only signs, but also architectural cues and interior design choices. Think of an airport: Main corridors are wide not only to let masses of people through, but also to let you know that’s where you should go; access to employee areas is provided by small corridors tucked into corners. The design is finished with an “Employees Only” sign; but if the design is good, you will never find yourself facing that sign. On Amazon, the main section of the page is devoted to the bulk of the customers. Down along the bottom is a small link, Associates, which is for those folks who sell items for Amazon. A normal book buyer would not accidentally trip over the sign in Figure 2.1. FIGURE 2.1 www.amazon.com
You want to let visitors to your site know the samethings that the visitor to the airport needs to know… Where They Are FIGURE 2.2 www.pcworld.com
Where the Things They’re
Looking For Are Located A software site, for example, usually needs to offer product information, downloads, and support. It is useful to allow users to always be able to find their way easily to these key places. This can be done a number of ways, although global navigation is the most common. Global navigation is a set of navigation tools that are consistent throughout a web site. Here you see three software companies’ global navigation: Apple, CoffeeCup, and Adobe. CoffeeCup is a tiny software maker, Adobe is a major graphics software maker, and Apple is Microsoft’s only known rival. All sport prominent links to Products—it’s the one thing they all want you to find. It doesn’t matter if you’re a big company or a small one. If you’ve got something to sell, you had better get it in front of your potential customer or you are in trouble. FIGURE 2.3 www.apple.com
FIGURE 2.4 www.coffeecup.com
FIGURE 2.5 www.adobe.com
How to Get to Those Things They
Seek Principle #2: For instance, you can let folks know it hasn’t happened until it’s happened. The Snapfish web site allows user to store, edit, and print their personal photos. The tool for cropping keeps a small image of the original photo in the corner of the page while you edit, to assure you that your original photo is still intact, and you can start over at any time (see Figure 2.6). Photos are precious to people, and this can provide the level of comfort needed to allow people to edit unafraid. You can also remind people where they are in a process. Drugstore.com’s shopping bag is always on the left side of the page, letting you know how much you’ve spent and what you’ve selected to buy (see Figure 2.7). Occasionally, the server has to run a long process that takes some time. To let people know it isn’t their computer that is running along sluggishly, you can display a message letting folks know what’s going on. Animation is key to this— movement gives a sense of activity. A still screen is worrisome…Has my computer died? Have I lost the connection? Is their server down? FIGURE 2.6 www.snapfish.com FIGURE 2.7 www.drugstore.com Expedia animates a series of small dots to let you know they are searching for flights (see Figure 2.8). The users can’t tell how long the search will take, but at least they know everything is working. Flash movies often take a while to load. Egreetings handles potential user anxiety by displaying both a message that the card is coming and a status bar that slowly fills with red as the animation loads (see Figure 2.9). FIGURE 2.8 www.expedia.com
FIGURE 2.9 www.egreetings.com
Principle #3: www.hermanmiller.com Herman Miller designers Bill Stumph and Don Chadwick took the humble chair to a new pinnacle of comfort by designing the Aeron chair—endlessly adjustable for the wide variety of human bodies. But tall and short doesn’t mean much on the web. On the web, the body parts engaged are hands, eyes, and ears. Hands This was an innovation. Almost all web sites have gone to navigation on the top and/or left side of the screen. In user testing, Razorfish discovered that not only did the users not mind the change, but it provided easier access to the scrollbar for faster navigation and made it easier to concentrate on the content. Eyes PeopleSoft might want to ask itself who tends to have a need for financial software? Teenagers with perfect eyesight? Or people in their forties and fifties— those lovely years when reading glasses and bifocals go on the shopping list? A tool that comes built in to the browser enables you to resize the text size. Many with poor eyesight eventually discover it. FIGURE 2.10 www.audi.com However, the person who writes the code for the site can disable it. This means no matter what your users do, they can’t read about your wonderful products. Tool used to resize text. FIGURE 2.11 www.peoplesoft.com
FIGURE 2.12 www.peoplesoft.com
FIGURE 2.13 www.ibm.com FIGURE 2.14 www.ibm.com Ears The body, and the world the body inhabits, matters even in the digital realm. Principle #4: For example, it’s a common web convention that a link to the jobs available area is in the navigation on the bottom of the site. This is where job hunters will look first. You can see that these three companies follow that convention on their web sites. Before designing a site, take a tour of competitors’ sites and related web sites. Look for best practices patterns you can adopt. Do be thoughtful, though. You don’t have to slavishly copy what sites are doing; rather, try to see why they have done what they’ve done. Is it a best practice? A common practice? An idle whim? Your repeat visitors also have expectations. Did you call the help section “Information Support” on the home page? It had better not be called “Help” in the interior pages, or confusion ensues. Consistent labeling and design also gives an air of professionalism; it doesn’t look like you’ve got 30 interns running around building web pages without talking to anyone. FIGURE 2.15 www.emode.com FIGURE 2.16 www.looksmart.com FIGURE 2.17 www.walmart.com As you design, you need to keep track of conventions that have arisen over the previous few years and break them with caution. You also need to keep a running style guide of your own decisions to ensure that your own design is consistent. Principle #5:
FIGURE 2.18 www.live365.com
FIGURE 2.19 www.yahoo.com
FIGURE 2.20 www.expedia.com Principle #6: Unlike humans, computers are pretty terrific at remembering long strings of characters. So why make people remember something if the computer can do so instead? Mapquest takes advantage of this by storing addresses you’ve typed into their search box and then displaying them in the driving directions tool (see Figure 2.21). Not only does that save lazybones from having to type, and reduces errors caused by typos, it saves users from having to drag out their address books to look up the information. Recognition also means that you should be always seeking ways to keep information before the visitors’ eyes. Figure 2.22 shows the control panel for DreamHost, a company that provides hosting for web sites. It’s the place where web site owners should be able to manage their web sites. Let’s say you want to see, by checking the log files, how many people are coming to your site. So where is that link? You look at the log’s previous month…Is it under Domains? Goodies? Users? Nope, it’s under Status (see Figure 2.23). FIGURE 2.21 www.mapquest.com FIGURE 2.22 www.dreamhost.com
FIGURE 2.23 www.dreamhost.com Admittedly, the labels are a big part of the problem. The label Status does not connote Statistics, and it fails as a memory trigger. But rather than struggling to find a label that will work, why not simply display the links? Showing all the links avoids forcing users into this game of hide and seek. Although listing all the links will cause the page to scroll, scrolling is still much faster for users to do than clicking each option, then the Back button, and then another option as they try to find where the log files are hidden. Anytime that you can take the burden off the user’s poor overtaxed memory and place it on the computer, you are making your site just a bit more valuable to your customers. Principle #7: It’s time to consider “the user” as a person in motion, in time, changing and learning all the time. Your design should assist users in moving to a level of accomplishment that is satisfactory. You don’t need them to become experts— just design the interface to help move people to a place where they are happier with their results. The International Herald Tribune is a great example of a site that caters to intermediate users (see Figure 2.24). FIGURE 2.24 www.iht.com The site looks like a typical newspaper site. It is simple to use; you learn the interface as quickly as you learn to read a paper. After reading a few articles, you start to notice the gadgets. You play. Intermediates quickly learn how to adjust font size or column layout. It’s located conveniently next to the Next Page link. Experts eventually find the clipping service. But those experts are few; and the special features never get in the way of the daily reader, which is the role most of us will stay in. Principle #8: Meanwhile the kind of “help” people do think might actually help, such as phone assistance, is expensive for the company and often annoying to the caller. “Press 1 for Spanish, press 2 for Chinese, press 3 for French, press 4 for Laplander…” People doing any kind of vaguely complex task will inevitably require help—and resist asking for it. What you can do as a designer is offer the right help at the right moment in the most unobtrusive way possible. Place information in clearly labeled locations, rather than grouping it all under the generic and menacing “Help.” Figure 2.25 shows a page from the Schwab stock analyzer, with which I’m trying to evaluate IBM. I’m financially clueless, and this page offers me explanations of the mysterious language of the stock market. Schwab teaches how to evaluate stocks while you analyze the stock. Thus learning is far more relevant because it is tied to an important task. Schwab’s Help is relevant and meaningful. Perhaps in the future, the Help section will again seem helpful; for now, don’t just say Help—be helpful. FIGURE 2.25 www.schwab.com “This Chapter Will Self-Destruct
in Five Seconds” An interesting
study Breadcrumbs Razorfish Germany redesigned
the Audi site Visually impaired Research has told us even more
about human memory abilities
|
