The most important web design rules
I just had the pleasure of attending a presentation by usability luminary Steve Krug in which he identified what he thinks are the two key rules of web design for usability:
- Show where you are within the site
- Provide good, prominent titles
You were probably expecting something more earth shattering? So was I, but as he dove into detail and examples, it became clear that these principles are necessary and far too uncommonly practiced. Another key point he makes before I dive into specifics is…
Users miss most design subtleties.
In other words, hit them over the head with sharp contrast, not just slight changes in hue and shading. Designers often love subtleties, but for users, make things obvious, more obvious than you think is necessary. Remember that you know your designs already and thus see and appreciate nuances, but 99.999% of the world will be seeing the site for the first time without any introduction or any desire to decipher ambiguities. You won’t be there looking over their shoulder to help them or answer questions. Be assertive in your design.
Now I’ll get into details, embellished considerably with my own thoughts on what Steve presented.
Show where you are within the site
This means providing design cues that indicate what primary section (main menu item) you are within and — to the extent that it applies — the sub area(s) underneath that. In other words, users should always be able to see the relationship between the page they are viewing with the overall structure of the site. There are plenty of reasons to do this, first and foremost being so that they can see more easily how to find related information. Another vital factor is a level of comfort that such familiarity brings. A site that is more comfortable and easier to use is much more likely to have higher response rates than one that confuses or frustrates visitors.
His key point — illustrated by many examples — was that …
Most websites don’t do a good enough job of communicating the user’s location.
We are certainly guilty of this on our site by not providing feedback on the menu / navigation that says, in effect, “you are here.”
Good designs often use horizontal tabs near the top for main menu items, the tabs clearly indicating through color, contrast, text style, texture, or a combination of these factors which tab is active. (Tabs aren’t the only way, but they work very, very well.) There is also a huge perceptual benefit to having the active tab (and only the active tab) “bleed into” the active area of the page. In other words, if the tabs are blue and the main text is on a white background, make the active tab white (with dark text) and have no border with the content area so that it is “attached” to it. This is a very, very strong visual cue that reinforces “this is where you are.”
He spent a few moments on breadcrumbs, pointing out that they are only capable of showing a linear relationship to parent information and thus aren’t nearly as effective at communicating relative locations. They are very effective for “deep” sites: those having many layers of hierarchy.
On to the second point:
Provide Good, Prominent Titles
This sounds obvious, but it’s not adhered to nearly often enough. Frequently people miss the two words in the middle, “good” and “prominent.” Titles are very important because they confirm for users that they have come to the right place. If users feel lost, they won’t read all the good content and look at your beautiful pages.
Good, prominent titles should:
- …use the same language as the links that brought someone to that page and that are consistent with the topic of that page. If the link to a site says “Course Listing”, a title of “Curriculum” will confuse users and will not match the navigation. Note how such title/link/content consistency is also good for SEO.
- …be located above and close to the main content that they describe.
- …look consistent with main content, at least in general. Displaying headings in radically different fonts, colors, backgrounds, etc. breaks the visual association with the content they describe.
- …stand out from the main content and other page elements. It should be obvious what text on the page is the title.
The easiest way to make attractive, highly functional titles is to use the same or similar font to the main content and make the text significantly larger. Take a look at this blog. We might not do so well with navigation, but our titles are great.
Note that the same rules apply to subtitles, although for SEO reasons we recommend that almost anytime subtitles are warranted for sections, each section should be given its own page.
Pick a feed
