Free White Paper
Web Design Mistakes of 2007-2008
1. Legibility Problems
About two-thirds of the users surveyed complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.
CSS style sheets unfortunately give Web sites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40. Respect users' preferences and let them resize text as needed. Also, specify font sizes in relative terms — not as an absolute number of pixels.
2. Non-Standard Links
Following are the five main guidelines for links:
- Make obvious what's clickable: for text links, use colored, underlined text
(and don't underline non-link text).
- Differentiate visited and unvisited links.
- Explain what users will find at the other end of the link, and include some of scannability and search engine optimization (SEO). Don't use "click here" or other non-descriptive link text.
- Avoid JavaScript or other fancy techniques that break standard interaction
techniques for dealing with links.
- In particular, don't open pages in new windows (except for PDF files and
such).
Links are the Web's number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site — or wanting to.
3. Flash
Despite good intentions, most of the Flash that Web users encounter each day is bad Flash with no purpose beyond annoying people. The one bright point is that splash screens and Flash intros are almost extinct. They are so bad that even the most clueless Web designers won't recommend them, even though a few (even more clueless) clients continue to request them.
Flash is a programming environment and should be used to offer users additional power and features that are unavailable from a static page. Flash should not be used to jazz up a page. If your content is boring, rewrite text to make it more compelling and hire a professional photographer to shoot better photos. Don't make your pages move. It doesn't increase users' attention, it drives them away -- most people equate animated content with useless content.
Using Flash for navigation is almost as bad. People prefer predictable navigation and static menus.
4. Content That's Not Written for the Web
Writing for the Web means
- making content short,
- scannable and
- to the point (rather than full of fluffy marketese).
- answer users' questions and
- use common language rather than made-up terms (this also improves search engine visibility, since users search using their own words, not yours).
5. Browser Incompatibility
As recently as 2004, most users used Internet Explorer and the business case for supporting other browsers was pretty tough to defend on an ROI basis. Today, however, enough people use Firefox (and various other minority browsers, like Opera and Safari) that the business case is back: don't turn away customers just because they prefer a different platform.
6. Cumbersome Forms
People complained about numerous form-related problems. The basic issue? Forms are used too often on the Web and tend to be too big, featuring too many unnecessary questions and options. In the long run, we need more of an applications metaphor for Internet interaction design. For now, users are confronted by numerous forms and we must make each encounter as smooth as possible. There are five basic guidelines to this end:
- Cut any questions that are not needed. For example, do you really need a
salutation (Mr/Ms/Mrs/Miss/etc.)?
- Don't make fields mandatory unless they truly are.
- Support autofill to the max by avoiding unusual field labels (just use Name,
Address, etc.).
- Set the keyboard focus to the first field when the form is displayed. This
saves a click.
- Allow flexible input of phone numbers, credit card numbers and the like.
It's easy to have the computer eliminate characters like parentheses, hyphens
and extra spaces. This is particularly important for elderly users, who tend to
suffer when sites require data entry in unfamiliar formats. Why lose orders
because a user prefers to enter a credit card number in nicely chunked, four-
digit groups rather than an undifferentiated, error-prone blob of 16
digits?
Forms that violate guidelines for internationalization got dinged by many overseas users. If entering a Canadian postal code generates an error message, you shouldn't be surprised if you get very little business from Canada.
7. No Contact Information or Other Company Info
Even though phone numbers and email addresses are the most requested forms of contact info, having a physical mailing address on the site might be more important because it's one of the key credibility markers. A company with no address is not one you want to give money to.
8. Frozen Layouts with Fixed Page Widths
Complaints here fall into two categories:
- On big monitors, Web sites are difficult to use if they don't resize with the
window. Conversely, if users have a small window and a page doesn't use a
liquid layout, it triggers insufferable horizontal scrolling.
- The right most part of a page is cut off when printing a frozen page. This is
especially true for Europeans, who use narrower paper (A4) than Americans.
Font sizes are a related issue. Assuming a site doesn't commit mistake #1 and freeze the fonts, users with high-resolution monitors often bump up the font size. However, if they also want to bump up the window size to make the bigger text more readable, a frozen layout thwarts their efforts.
The very worst offenders are sites that freeze both the width and height of the viewport when displaying information in a pop-up window. Pop-ups are a mistake in their own right. If you must use them, don't force users to read in a tiny peephole. At an absolute minimum, let users resize any new windows.
9. Inadequate Photo-Enlargement
One of the long-standing guidelines for e-commerce usability is to offer users the ability to enlarge product photos for a close-up view. Seeing a tiny detail or assessing a texture can give shoppers the confidence they need to place an order online.
It's gratifying that most sites obey this guideline and offer zoom features, often denoted by a magnifying glass icon. But many sites implement the feature wrong.
The worst mistake is when a user clicks the "enlarge photo" button and the site simply displays the same photo. Such do-nothing links and buttons add clutter, waste time and increase user confusion: What happened? Did I do something wrong? (An even more common no-op mistake is to have a link on the homepage that links to the homepage itself. )
Another mistake here that's almost as bad is when sites let users enlarge photos, but only by a fraction. When users ask for a big photo, show them a big photo. It's often best to offer an enlargement that fills up the most common screen size used by your customers (1024x768 for B2C sites, at the time of this writing). Other times, this is insufficient, and it's better to offer a range of close-ups to give users the details they need without requiring them to scroll a too-large photo.
Yes, initial pages should use small photos to avoid looking fluffy. Yes, you want to be aware of download times and watch your page weight budget.
Even in this broadband age, slow response times were #15 on the full list of design mistakes. But when users explicitly ask for larger pictures, they're willing to wait for them to download — unless that wait produces a mid-sized photo that lacks the details they need to make a purchasing decision.
10. Bad Search
Everything else on this list is pretty easy to get right, but unfortunately fixing search requires considerable work and an investment. It's worth doing, though, because search is a fundamental component of the Web user experience and is getting more important every year.
11. Page Titles With Low Search Engine Visibility
Search is the most important way users discover Web sites. Search is also one of the most important ways users find their way around individual Web sites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.
The page title is contained within the HTML title tag and is almost always used as the clickable headline for listings on search engine result pages (SERF). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.
Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."
For pages other than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.
Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.
12. Anything That Looks Like an Advertisement
Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)
Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is. Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:
- banner blindness means that users never fixate their eyes on anything that
looks like a banner ad due to shape or position on the page
- animation avoidance makes users ignore areas with blinking or flashing
text or other aggressive animations
- pop-up purges mean that users close pop-up windows before they have even fully rendered, sometimes with great viciousness (a sort of getting-back-at- GeoCities triumph).
13. Violating Design Conventions
Consistency is one of the most powerful usability principles: When things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.
The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.
Users spend most of their time on other Web sites. This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.
14. Opening New Browser Windows
Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).
Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button, which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.
Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows.
When they want the destination to appear in a new page, they can use their browser's "open in new window" command — assuming, of course, that the link is not a piece of code that interferes with the browser's standard behavior.
15. Not Answering Users Questions
Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish — maybe even buy your product or service. The ultimate failure of a Web site is to fail to provide the information users are looking for.
Sometimes the answer is simply not there, and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.
The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people.
P.S. Pop Ups! Pop Ups! Pop Ups!
According to the survey, the #1 complaint should really be about pop-ups, but that's not news to anybody.
Source: Internet Surveys, Neilsen Alertbot
|
