Usability Conventions: Basics and Examples

Published on Dec 8, 2006, filed under design, usability. (Share this on Mastodon or Bluesky?)

A convention is a set of agreed, stipulated, or generally accepted standards, norms, social norms, or criteria, often taking the form of a custom.

For web design there are not just technical conventions (and standards), but also conventions for usability and user-friendliness. They have their origin in “real life,” inspired by applications or online services. Wide adoption of particular practices, as with the placement of page elements, makes for agreement and with that convention.

Popularity of approaches and design ideas might not yield the most effective, efficient, or pleasant solutions, but it makes for familiarity, and building up of expectations. That now means the advantage that users can accomplish their goals more quickly once they have internalized the respective convention. And so we see the reason and importance of usability conventions.

• Conventions help users by readily meeting their expectations.
• Conventions support designers’ and developers’ making of decisions.

The next sections describe a few conventions and rules of thumb that web designers should know aside from general usability heuristics. The collection is free format and applies a liberal definition of convention; a stricter view that regards 50% popularity as a convention and 80% as a de facto standard can be found with Jakob Nielsen (1999).

Placement

Gradually maturing, the Web had early on brought forth conventions around the placement of page elements. Wichita’s Software Usability Research Laboratory, for example, had already in 2001 analyzed where people expected certain elements. SURL repeated the study in 2004 and 2006. They determined the following expectations, though here we skip on differences between the findings:

• homepage link: top left (44%), but also bottom center (15%) and bottom left (11%);
• internal, i.e., navigation links: left;
• site search: top;
• ads: top center (27%) and right;
• “About Us”: bottom center, but also bottom left.

Links

Jakob Nielsen in particular has stressed ground rules for links, rules that by any standard mean conventions now. His guidelines for visualizing links (2004) build the case to:

• color links;
• underline links (if not contained in sections that are clear to contain links, like navigation menus);
• use different colors for visited links;
• not underline anything that isn’t a link.

Even when other usability experts, like Jared Spool, share their experience of links not necessarily needing to be underlined, life’s still easier for users when we as designers and developers follow the “native” underline convention.

Forms

There are also conventions for forms and form elements:

• buttons for actions and confirmations go left (before other buttons, and in a left-to-right context);
• reset buttons should be avoided (not necessarily a convention, but still);
• form labels go to the top or left of their elements (exception: checkboxes and radio buttons that prefer labels on their right).

Conclusion

Despite a lazy definition of convention it should be a bit clearer now how conventions help, and which ones are most important. Counter-examples abound; many appear in Flash, which not only in 2000 hosted many design issues—especially around standard elements like forms and scrollbars. Conventions are our friends.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)