Web users are always in a hurry. There are a few important things to keep in mind if you want your design to attract users and help them understand your site.
Use Conventions Whenever Possible
The best way to make anything instantly understandable is to follow habits and conventions, the design patterns that have already been adopted or standardized. For example:
Stop signs
They're very important; drivers need to see and recognize them quickly. Although they vary slightly from country to country, they're basically the same. A stop sign's design includes a distinctive shape, the word for "stop," a bold color (in high contrast with its surroundings), and a standard size, height, and placement
Car controls
Imagine buying a car and finding the brake pedal on the far right. How terrifying would that be?
Over the past 20 years, the web has developed many design conventions.
Where things go on a page
For example, users usually expect the site logo in the top-left corner, and the main navigation across the top of the page or down the left side.
How things work
Almost every shopping site has a cart, and a similar series of forms for details such as payment method and shipping address.
How visual elements look
Many visual elements have standard appearances, such as the search icon, video link icons, and social sharing buttons.
Different kinds of sites have developed different conventions, but most started as someone's flash of inspiration. If the idea was good, other sites copied it. Eventually, enough people saw it in enough places that it became self-evident and turned into a convention.
Web conventions make life easier for users, because even when they visit a new site, they don't have to spend extra effort learning how it works.
Clarity beats consistency
Being consistent across a site or app is usually good. But sometimes breaking consistency makes things clearer. When that happens, choose clarity without hesitation.
Create an Effective Visual Hierarchy
Every page should have a clear visual hierarchy: what's most important, what's similar, and what's part of something else
- The more important something is, the more prominent it should be: larger or bolder type, a distinctive color, or more white space.
- Things that are related logically should also be related visually. Group similar content together or put it under the same heading to show that it belongs together.
- Things that are part of something else should be visually nested inside it
A good visual hierarchy helps users scan faster, without making them think about how to break the page apart.
Break Pages into Clearly Defined Areas
Breaking a page into clearly defined areas is important, because it lets users quickly decide which areas to focus on and which to safely skip. Eye-tracking studies of how people scan web pages show that users quickly figure out which parts of a page contain useful information and barely look at the rest.
Make It Obvious What's Clickable
Much of what people do on the web is look for the next thing to click, so it's important to make it clear what's clickable and what isn't.
As we scan a page, we look for visual cues that tell us what's clickable, such as shapes or colors. Looking at how something appears to figure out how to use it isn't limited to the web. As the classic usability book The Design of Everyday Things explains, we're constantly scanning our environment for clues (Is this a door you pull or push?).
Reduce Visual Noise
- Shouting. When everything on a page clamors for your attention, it backfires. Lots of promotions, exclamation points, slideshows in different font colors, animations, and so on mean that nothing stands out as important.
- Disorganization. Some pages are a mess, which shows the designer didn't understand the importance of using a grid to arrange page elements.
- Too much density. This lowers the signal-to-noise ratio and buries useful information
When designing a page, start by assuming everything is visual noise (guilty until proven innocent), and remove anything that doesn't help the page.
Format Text for Scanning
When users scan text, good formatting helps them move faster. These techniques may help.
- Use plenty of headings
- Keep paragraphs short
- Use bulleted lists
- Highlight key terms
