Why do we associate the color red with stop? Why is north at the top of most maps? Why do we look to street corners for the names of the street? We all become used to conventions that make life just plain easier. Pick up a newspaper and you quickly understand how to navigate from page to page and where to find the important information. The same holds true in web design. Conventions exist that designers can use to make browsing the web easy for users.
Any given user may visit dozens, if not hundreds of websites in a day. Whenever a consistent practice or theme develops among those sites, it helps speed up the decision making process which leads to faster navigation and a more pleasant browsing experience. Conventions help users feel more knowledgeable about their browsing capabilities because they don’t have to relearn how to use each new website.
Let’s take a look at practical web conventions that we can apply to improve user experience across the sites that we build.
Examples of Web Conventions
Layout
- The logos of most websites appear on the top left of the page and indicate exactly what site I am on. Taken even further, it is common practice to make this logo a link to the home page of the site.
Logos found in the top-left corner help identify the site.
- Continuing down the page, convention says we need navigation of some sort (more on this in a minute) with the main content being in the middle of the page.
Many sites will use a sidebar on the left side of the page for navigation and related content. In the blog community, however, a far greater number of sites put the sidebar on the right. - At the bottom of the page we expect to find a footer with helpful links to privacy policies, copyright information, contact pages and even a sitemap. It is also the first place to look for a link to find out who designed the site.
Misc. links in the footer of Barnes and Noble's site.
- One convention that is beginning to shift is the width of most web designs. In the past, conventional wisdom was to design websites to be viewed on 800 x 600 pixel displays. Now, because the majority of users are viewing sites on larger monitors, 960 pixels or larger are becoming the norm.
Navigation
- Most primary or main navigation is organized horizontally across the top middle area of the page.
Main navigation of Barnes and Noble's site.
- Vertical Sidebar menus can also be used for main navigation although most sites will use this list structure for second level navigation.
- Utilities, such as links to contact pages, user accounts, and other practical options appear as small text links at the top right of most websites.
- Breadcrumb navigation (the “You Are Here” of navigation) helps users identify location on larger websites. These links almost always appear directly above the main content area.
- As mentioned above, footer navigation is generally reserved for privacy and legal links, contact information, and maybe a sitemap. Large, more useful footers are growing in popularity which will change how users may search for popular pages, social network links, and more.
- The idea of grouping links into navigation menus is a convention in itself to allow users to recognize similar tasks or link items.
Links/Buttons
- A classic link is blue text with an underline. Visited links become purple. Many sites will alter the coloration but the underlined text is the give-away that this text is a link.
- Buttons much like links have become obvious because of their “pressable” qualities. Conventional web buttons may be rounded and colored with a text-effect or bevel to indicate interaction.
Twitter sign up link is emphasized by button qualities and mouse state.
- Hover states for links and buttons and the change in the pointer to a “Mickey Mouse” hand are also signs that something will happen upon a click.
Other Conventions
- Particular fonts are repeated from site to site because of their readability. Web-safe fonts are web-safe because they have been widely adopted across operating systems.
- The magnifying glass next to an input field indicates search, even if there are no words or texts indicating ‘search’.
- An orange icon with white radial curves indicates where a user can view an RSS feed or a little blue bird indicates that Twitter is involved.
RSS and Twitter links on Smashing Magazine
- Any only shopper or e-commerce user will understand the ideas of a checkout process and a shopping cart icon.
A Shopping Cart indicates where users can checkout.
- Naming Conventions: Practically every site has a ‘Contact’ page or an ‘About’ page. And users understand that ‘Home’ is the starting point for most sites.
- Even the way we organize content with Headings and bolded text indicate levels of importance that increase scanability.
Why Adopt Conventions?
Quite simply, because they work. Conventions only become conventions if users find them useful. If one site has success because it has decided to use a particular style of navigation, another site may pick up on this and adopt a similar style. The more this happens the faster users “learn” how to maneuver from site to site. Reassuring users and providing a familiar environment to browse can go a long way in instilling confidence and trust for your brand. Conventions can help convey information even if you can’t understand a single word on the page.
Conventions help you understand sites not written in your language.
Warning: Break Only If You Know What You’re Doing
Many times designers stray away from conventions because they want to be unique and creative (follow up: 15 Websites that Break the Rules). If that is your only reason to break convention – don’t do it. The only time conventions should be avoided is if you know you have a better way of doing something. If your decision produces results, it won’t be long before other sites are adopting your ideas and a new convention is born. If not,and your user finds the site hard to “learn” or they become frustrated by your unconventional approach they are always one simple convention away from leaving your site – that little red button in the corner.
Thoughts?
Have I missed any conventions? What conventions do you enjoy breaking? Let me know your thoughts in a conventional comment below.
Good points Chris. Being predictable isn’t always a bad thing. I think navigation is an area where you really want to pay attention to what your visitors are expecting.
I’m handing in a big paper today on this subject, confirming what you wrote here. Good read.
I agree that navigation is vital. If your users are lost, they’re gone!
Hey Chris!
You have some really interesting ideas here! Good work.
I wonder, though, whether a slightly different way of looking at the issue might not also be worthwhile – I mean should designers be following conventions per se, or should they be looking at conventions first in order to determine the best solution for usability on their site.
I find that was users are pretty savy for the most part, and there are a number of different ways to handle things like navigation. That being said, sticking strictly to convention may not always be the best solution. I think it’s more important to look at what is going to make for the best usability for your visitors.
Probably most of the time, this will actually line up with conventions (as you note, there is a reason that things become conventions – they work), but does this necessarily mean that we should follow conventions – at our peril – or, should we us conventions as a starting point and see if we can improve on them for a particular project.
Just a thought.
It will also be interesting to revisit this post several years from now, and see how many of these conventions are still in place and how many may of changed or shifted!
Matt,
Excellent thoughts! I think it really depends on the type of site you are creating. For more creative and unique websites, users may expect conventions to be missing. For a newspaper site, however, if the user cannot find the “Sports” page because the site has titled it “Athletic Endeavors”, then you have a problem. Like everything else, it completely depends on the situation.
A very good summary of basic conventions. There were two things that came to mind as I read through your article. The first was your reference to links being blue and underlined: visited links are purple. I recognized this as a default convention based on the use of Internet Explorer. Even today, this is the default for IE. However, I cut my teeth on desktop computers with a Mac. I believe Mosaic’s and Netscape’s defaults were different. Regardless, I was taught a different convention. Active links should be red, while visited links should be blue.
Second … the conventions you associate with with newspapers goes even further back to book printing. The book title and/or chapter title located in the upper left, and the page number somewhere along the bottom. Rather than sitemaps, books have tables of content. I think you probably see my point.
It would be interesting to trace back certain web design conventions to see which originated on the web (and who was the originator) and which were inherited from other media or completely different areas.
Couldn’t agree more. I am normally quite big on conventions, currently going through an experience with the client where they want to move the logo around, and fill up every gap of whitespace!