Web Design Conventions

What design conventions are

They might be colours, shapes, patterns, layouts, font styles that have, over time, come to connote things that they don’t actually say.

There are literally hundreds of web conventions that you’d recognise.
Some simple examples you’ll find on the web include:

• In many parts of the world, a yellow triangle on a road sign means ‘warning’.
  This has crossed over to become the convention in software.
• An area of screen that looks like a button (rectangular and raised with a bevelled edge) will conventionally perform an action when clicked with the mouse.
  This mimics buttons on physical devices, such as radios, television sets and computers.
  By taking on the appearance of a push-button, the item borrows the user’s primal association: “button > I can push > makes something happen”.
• Early web browsers rendered text hyperlinks in blue, underlined format.
  This convention has endured for a decade, even though it is not the easiest format to read.
• If you want to go to a web site’s home page, you’ll look first at the top-left of the screen for a logo or a button with the word “Home” on it.
  No-one told you to do this, you’ve learnt from experience.
• If you see A set of | Words | Separated by | Little vertical lines at the bottom of a web page, you assume that they are a set of general links within the web site you’re on.
  The only reason that should be the case is that you’ve learnt the convention from other sites.

How they work

The reason why conventions work is also the reason why they’re so valuable: they’re visual shortcuts, capable of conveying complex meanings with the simplest visual information.
A red circle around an exclamation mark takes far less mental work to decode than the word, “Warning”.
They’re great because they do your for you, saving you a lot of time and effort.

Does that mean you should always use a convention where one exists?
No! Often, you might choose not to use a convention.

They are like rules, and, like the best rules, they can be broken or bent.
The trick for web designers is to know when going against an established convention will be detrimental to a design’s function, and when it needs to be re-interpreted.
As with any rule system, you have to understand the rules in order to choose how to follow them.
It’s also very important to avoid using a design that is a convention, in the wrong context.

Taking the web examples above:

• I’m working with a client on a web site that at one point displays a yellow warning triangle when giving the user some information.
  However, the info isn’t a warning, it’s more of a soft, did-you-know type of alert.
  This is misleading.
• Another web interface I’m redesigning uses bevelled buttons in the top toolbar.
  The toolbar also shows today’s date.
  To maintain consistency, the designer has placed the date in a bevelled area.
  Although it’s clearly just a date, people try to click on it, because it says, “Me button > push me > something happen”.
  I have recommended doing away with the date altogether, keeping the toolbar just for links.
• If blue text is used anywhere on a web page, someone will try to click on it.
  If it’s not a hyperlink, that will be a unnecessary, slightly disconcerting experience.
• In the West, the logo that describes the entire web site should reside at the top-left of every page.
  This is where people look to be reminded where they are, and to navigate upwards.
  If the logo is situated anywhere else, it takes more work on behalf of the designer and user to establish its authority.