Restraint: How Designers Have Alleviated Usability Problems
| We've seen gradual improvement in 13 usability problems as a result of Web designers gaining experience and showing restraint. These issues are still potential problems because inexperienced designers who have not had to watch their early sites fail might be tempted to resurrect them. But seasoned designers now know when and how to use technology to create a good user experience.
Thirteen early usability issues are less problematic now because most designers have learned how to design for the Web. The problem areas where we have seen improvements are
As mentioned earlier, we are not able to discuss in detail here many small and focused usability guidelines that may still cause problems for users. In fact, most Web sites still violate a number of specialized guidelines. For example, our research has identified 207 usability guidelines for designing e-commerce sites. It has long been a guideline for those offering a product in multiple colors to label color swatches. But we still find e-commerce sites that violate this obvious guideline. (Of course, usability guidelines are not really "obvious" until they have been pointed out after the fact. That's why we compile them in checklists to minimize the risk that something is overlooked.) Because Hurricane Pass Traders doesn't label color swatches, users don't know what each option in the color drop-down menu refers to. It is conceivable that the swatches and the menu options are sorted in the same order (black certainly seems to be at the bottom in both cases), but users would feel much more confident in their choice of color if the swatches were labeled, especially since some of the color names are rather ambiguous. (What is "asparagus," for example? The asparagus we buy in our supermarkets is a vivid green that doesn't match any of the swatches in the screen shot.) The site violates another guideline for the use of color on product pages: There is no option to see the shorts in any of the alternative colors, so you are left guessing how they might look in, say, "almond." It's not particularly helpful to refer shoppers to telephone number for color information. Colors, of course, are better seen than described over the phone.  www.hurricanepasstraders.com By labeling color swatches, Nordstrom makes it easy to understand the color names, even when they are slightly odd, such as "pink martini." Unfortunately, Nordstrom's site does not enable users to see the product in their preferred colors. The link to "view colors/patterns" sounds promising but results in a lame pop-up showing slightly staggered sweaters in four of the five available colors. While better than nothing, it's weird that one color is missing and it's difficult to visualize the "dreamy blue" sweater when you can only see a corner of it.  www.store.nordstrom.com
Cadillac provides labeled swatches and also changes the photos of the vehicle's exterior and interior as the user experiments with different colors. Here the user has chosen a "crimson pearl" exterior and "shale" interior. Such real-time feedback is particularly important when a customer is coordinating two color choices.  www.cadillac.com Plug-Ins and Bleeding-Edge TechnologyBleeding-edge technology was a curse of the early Web, and sites lost many potential customers who refused to download yet another plug-in or software upgrade to use them. Two things have happened since then. First, designers have come to their senses and recognized that they can't force new technology on users. When people encounter a download dialog, they simply select Cancel. People fear getting viruses, and they don't want to wait for a download and maybe even a reboot to see a Web page. Today most designers rely on proven technology that's a few years old to avoid this issue. Design restraint is the main reason for this change. But improvements in technology have also had an impact. Refinements in bleeding-edge technologies and plug-ins have made it smoother to upgrade and use them. The Firefox browser in particular has a nifty interface for keeping plug-ins up to date. Both of these improvements have helped reduce plug-ins and bleeding-edge technology to a one-skull problem. We still recommend that you stick to technologies that are at least two years old and don't force users to upgrade anything in order to visit your site. Problems still occur, so it's not a zero-skull problem. 3D User InterfaceThree-dimensional user interfaces on the Web are almost always overly difficult to use and rarely worth the effort. The basic problem is that 3D images are displayed on a two-dimensional surface, the screen, and are controlled through a two-dimensional input device, the mouse. Add in zooming and multiple camera angles, and the potential for trouble multiplies. Users find it very difficult to get 3D interfaces to show products at good angles. They spend most of their time struggling with the interface instead of viewing the product. Three-dimensional interfaces have a role in software programs such as medical applications, where it can be critical to visualize tumors, surgical incisions and patients in three dimensions. Similarly, architectural applications are a natural for 3D because real-life structures are built in three dimensions. But most Web applications do not innately require 3D. When shopping for products on e-commerce sites, for example, users seem to have no trouble selecting 3D objects based on 2D pictures. It's better to optimize the user interface for the reality of the flat screen than to overwhelm users with fancy 3D mannequins that are difficult to manipulate.
It's better to optimize the user interface for the reality of the flat screen than to overwhelm users with fancy 3D mannequins that are difficult to manipulate. For the most part, 3D interfaces are history. Most early 3D technologies didn't work, so designers stopped torturing their users with them. Every so often, however, a new 3D technology vendor pops up and talks some poor, unsuspecting e-commerce manager into gussying up his site with 3D, so we still give it a one-skull warning.
Instead of an all-spinning, all-zooming 3D model, J. Crew provides four professional photos of this dress, close up and at well-chosen angles. The site also allows users to view the dress in each of the available colors. Two small quibbles with this design: The current view should be indicated with a boldfaced number instead of underlining because underlined text indicates clickability, and there should be no "next" link when users are on the last image in the series (nor a "prev" link when users are on the first image).
www.jcrew.com Bloated DesignPages that overwhelm users with a profusion of moving elements, blinking lights, and poorly structured links were a curse in the early years of the Web. Designers seemed to believe that the more you threw at users, the better the chance that something would attract their attention. Of course, what really happened was that users gave up on those sites and spent their time on scaled-back ones. Today some sites still have more features than they need, and others have too many big, irrelevant graphics, but overblown design is not nearly as common, so we have downgraded it to one skull. Web sites focus much more on getting straight to business, and that's what customers want to do too. Splash PagesSplash pages were an early sin of abusive Web design because they hindered people from getting to what they came for. We were very close to awarding zero skulls to splash screens because we almost never see them anymore. But there are still a few sites that insist on slowing down users with this abomination of a design technique, so we retain a one-skull warning against them. New small-business sites seem particularly susceptible to the lure of splash pagespossibly because their owners insist on fancy designs at the expense of catering to customers and their needs.
Splash screens must die. They give users the first impression that the site cares more about its image than about solving their problems. Splash screens must die. They give users the first impression that a site cares more about its image than about solving their problems. It is true that a homepage must immediately communicate what the site is about and what a user will get out of visiting it, but it also must communicate respect for the visitor's time or people will simply leave. One of the original, and flawed, arguments for the splash screen was that it functions like a magazine cover, setting the tone for a site with an attractive image. An attractive visual design certainly helps a Web site, as does one that prioritizes information and guides the user's eye toward the most important features. However, a magazine cover doesn't need to communicate ease of use. A Web site homepage that does makes an important contribution to a company's brand reputation. This is not quite a splash screen because it offers users a choice of three places to go. But it's also not really a routing page because all three options should be provided on the homepage, as indeed they are. Thus, it's a waste of time to make the user see this page.  www.wynnlasvegas.com The most important difference between a magazine cover and a Web site homepage is that a magazine cover must pique people's interest enough to make them want to buy the magazine while a homepage is viewed by people who have already chosen to visit the site. Two very different roles, two very different designs. Don't put a splash screen on your Web site. Remember, you have less than two minutes with prospective customers before they decide whether to leave your site. Don't waste any of it on a splash screen. Moving Graphics and Scrolling TextOn the Web, as in life, shouting louder usually backfires because people assume you don't have anything important to say. Users tell us that text that scrolls and images that animate incessantly are likely to be useless, so they ignore them. Web sites have discovered this too. Scrolling text and frivolous animation are not nearly as common as they used to be, so we have downgraded this problem to one skull. Custom GUI WidgetsUsers expect radio buttons to look like radio buttons and behave like radio buttons. The same for any other design element that's standard in graphical user interfaces. Unfortunately, some Web designers feel the urge to introduce their own design for standard dialogue elements like buttons and scrollbars. Scrollbars seem to be the most commonly abused GUI widget. In our user testing, we frequently see failures due to custom scrollbars. Unless your scrollbars look like scrollbars, users might not notice them. Unless your scrollbars behave like scrollbars, users might not know how to bring the content they want into view. In either case, they can only do business with you on the basis of the few items that are visible without scrolling and they might never see the full extent of your offerings. There's no doubt that ensuring scrollbar usability provides an even higher return on investment than most other usability guidelines.
Unless your scrollbars look like scrollbars, users might not notice them. Unless your scrollbars behave like scrollbars, users might not know how to bring the content they want into view. Fortunately, the prevalence of made-up dialogue controls has declined in recent years, so we now deem this a two-skull problem. Comply with GUI standards by using traditional looking widgets. Unique-looking scrollbars such as the yellow sun here run the risk of creating usability problems. People don't use the "homemade" scrolling designs when they deviate too far from the norm because they either don't notice or know how to operate them. Remember, having an obvious scrolling device allows your customers to see the full extent of your offerings. Scrollbars are easy to get right. The less work you do, the better your scrollbar.  www.norahjones.com Not Disclosing Who's Behind InformationIf you order from an e-commerce site, can you trust the company to ship the package? Will they take it back if it arrives in poor condition? If you register on a site, will it sell your personal information to anyone who will pay for it and expose you to endless spam about everything from similar products to offensive porn?
Trust and credibility are major issues on the Web, where even the biggest company exists only as a few words and pictures inside a browser window. Trust and credibility are major issues on the Web, where even the biggest company exists only as a few words and pictures inside a browser window. The most deceitful and unethical company can look as good as one with a long history of community involvement and honest customer relationships. For a Web site to succeed, users need to know who's behind it, how it's funded, and whether it's credible. It is now very common for sites to include a dedicated "About Us" section. Although such areas have their own usability problems, they let users know who's behind the information they see on the site. This issue is now reduced to one skull.
Made-Up WordsDuring the dot-com bubble, it seemed that every Web site had to invent its own vocabulary to describe its services. Such made-up words hurt usability because users didn't know what menu options to click. For example, calling resources "re-sauces" or food "foodile" stumps users because they don't know what the terms mean. The theory might have been to entice users to explore the site, but in practice people got lost and gave up. Made-up words also hurt search engine optimization because users obviously won't search for words they don't use. Conversely, use of everyday language and straightforward terms increases a site's rank in search engines and the likelihood that it will be found by people who use these words as query terms. There are still a few sites that insist on using their very own terminology, but this is getting ever more rare as such sites get less and less business. Made-up words are now only a one-skull problem. Outdated ContentIn one sense, outdated information might be considered a three-skull problem because old information increases monotonically as the Web gets older. The problem is not old information per se, of course. Organized into rich archives and background information, it has an important place on the Web. The problem occurs when users are offered outdated information as if it were new. Typically, this happens on sites that are not being maintained, which is pretty common. But bigger, professionally run sites now take reasonable care to keep their most prominent pages current, so we have downgraded this problem to two skulls. Be wary of using cute metaphors and names that people don't understand. In most instances, people on the Web want information quickly. They rely on clear and concise headings and labels to point them in the right direction. Sites that make people work to decipher "the code" turn them off. For example, the tomato theme of this film site does not communicate basic concepts effectively. Categories such as "Certified Fresh," Critics Tomatometer," and "Cream of the Crop" are unclear to users. At first glance, it's difficult to know what the tomato and green icons mean and what they have to do with movie reviews. While the site designers might have meant the green icon to denote a splat for a bad film, many users won't pick up on this subtlety and will see it instead as an asterisk.  www.rottentomatoes.com Inconsistency Within a Web SiteIn the beginning, it was every page for itself. Each new page was designed for the moment, with little thought to how it would play with other pages on the site. Subsites often looked so different, you couldn't really tell they all belonged to the same company and theoretically were components of a single service. Since at least 2000, most large companies have made a big push to present one face to the customer, and Web sites are now much more consistent than they used to be, at least in terms of main content. But most sites still have areas that were designed by a different team, and it shows. Intranets are another matter: They are still often inconsistent, with widely diverging designs between different departments. Inconsistent design is probably still a three-skull problem for intranets, but for the public Internet, inconsistency is now a two-skull problem. Premature Requests for Personal InformationIf someone walked up to strangers at a cocktail party and asked each for their telephone number, birthdate, social security number, and grandmother's medical history, he would probably find many people walking away. It's the same with Web sites. If they are too nosy too soon, people refuse to answer their questions. Web sites have to build up a bit of a relationship with users before they can start asking them personal questions. Most Web sites used to ignore this common-sense advice. The better sites have now sobered up and deferred personal questions until after the user has decided to do business with them. Obviously, if you are going to ship a purchase to a customer, you need to know their shipping address, and people have no problem giving out this info at the appropriate stage in the relationship. But if they can't enter a site and browse around without giving out personal information, they will typically leave immediately. Premature requests for personal information remains a two-skull problem because there are still too many sites that think it's smart marketing to ask a lot of qualifying questions of their users. But ask too much and your site will be as unpopular as a nosy person at a cocktail party. Multiple SitesCompanies used to launch new Web sites at the drop of a hat, all at different addresses. With a profusion of sites, customers never knew what services they could get from a company, and there was no hope of unified information architecture or helpful Search and navigation. Today, most companies have recognized the need for an integrated Internet strategy, so the problem is not as bad as it used to be. We give it two skulls, however, because microsites are still too common, especially in connection with advertising campaigns. It's OKin fact, it's preferredto have a dedicated landing page for each campaign, but the information should all be part of the same Web site, where all the elements support each other. Orphan PagesOrphan pages are those that have no links to anything. If you land on one, you can't go anywhere else on the site. They were pretty common in the 1990s but are almost never seen any more. This is now a zero-skull problem because virtually all designers have recognized the need to provide users with at least a minimal number of navigation options for connecting to the rest of the site. |
EAN: 2147483647
Pages: 107