Summary: Ten design elements that would increase the usability of virtually all websites if only they were employed more widely.
When analyzing Web design, it is easy to identify a large number of mistakes that reduce usability:
- the original top-ten mistakes of Web design
- the top-ten new mistakes of Web design
- the top-ten mistakes of Web project management
It is much harder to say what good things to do since I have never seen a website that was truly stellar with respect to usability. The best major site was probably amazon.com as of late 1998, but during 1999 Amazon declined in usability due to the strategy of blurring the site's focus.
Of course, articles that list 30 mistakes can be seen as constructive criticism and a prescription for 30 things to do in a Web project: design to avoid each of the mistakes!
Here's a list of ten additional design elements that will increase the usability of virtually all sites:
- Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page).
- Provide search if the site has more than 100 pages.
- Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.
- Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units.
- Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them.
- Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.
- Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
- Use link titles to provide users with a preview of where each link will take them, before they have clicked on it.
- Ensure that all important pages are accessible for users with disabilities, especially blind users.
- Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works.
Finally, always test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.
Other Top-10 Lists
- The ten very worst design mistakes of all time
Summary based on the main elements of the other lists.
- High-Profit Redesign Priorities
- Usability in the Movies — Top 10 Bloopers
- Most violated homepage guidelines
- Top homepage usability guidelines
- Web design mistakes (2005)
- Web design mistakes (2003)
- Web design mistakes (2002)
- Web design mistakes (1999)
- Web design mistakes (1996)
My first list. Luckily, many of these mistakes have been fixed by now.
- Application design mistakes
- Information Architecture (IA) mistake
The conference also has a full-day seminar on Emerging Patterns for Web Design.