Design Conventions

Design conventions are informal rules that have been adopted over time, and have become embedded in visual culture. They reduce the amount of decoding a user has to do.

Conventions make the designer's job easier, meaning we don't have toinvent solutions for common problems, and letting us concentrate onspecifics.

One of the key skills for designing effectively is appreciating current conventions, and applying them for maximum benefit.

What are conventions?

They might be colours, shapes, patterns, layouts, font styles thathave, 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 witha bevelled edge) will conventionally perform an action when clickedwith the mouse. This mimics buttons on physical devices, such asradios, television sets and computers. By taking on the appearance of apush-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 thetop-left of the screen for a logo or a button with the word "Home" onit. No-one told you to do this, you've learnt from experience.
If you see A set of | Words | Separated by | Littlevertical lines at the bottom of a web page, you assume that they are aset of general links within the web site you're on. The only reasonthat should be the case is that you've learnt the convention from othersites.

How do they work?

The reason why conventions work is also the reason why they're sovaluable: they're visual shortcuts, capable of conveying complexmeanings with the simplest visual information. A red circle around anexclamation mark takes far less mental work to decode than the word,"Warning". They're great because they do your for you, saving you a lotof 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 brokenor bent. The trick for web designers is to know when going against anestablished convention will be detrimental to a design's function, andwhen it needs to be re-interpreted. As with any rule system, you haveto understand the rules in order to choose how to follow them. It'salso very important to avoid using a design that is a convention, inthe wrong context.

Taking the web examples above:

I'm working with a client on a web site that at one pointdisplays a yellow warning triangle when giving the user someinformation. 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.

Designing for the web
The purpose of design is to facilitate communication between user and content. Designing for the web means designing sympathetically with the way people actually use the web, not how we think they should. People approach web sites in very different ways to how we design them...
The Pursuit of the Original
Want to know the benefits of kicking the originality habit as a designer? They are numerous, and of those, one outstanding benefit is adherence to standards.
The Design Spectrum
Design encompasses a very wide spectrum of disciplines and applications, which address an enormous range of different problems. When designing a product, the techniques and priorities a designer should use change according to its purpose. This article introduces a simple conceptual model ....
Dos and Don'ts
Rules and preference for designing a website can differ from website to website depending on the target audience, whether it is entertainment website or corporate website or just a persona...
Navigation Models
After 10 years of web site architecture and design, conventions exist to solve nearly every navigation problem. This page provides a toolkit of common IA and navigation conventions...
General Guidelines for Imagery
Dont reinvent the wheel for functional imagery. Concentrate creative effort on imagery that adds value in branding or message (content). General guidelines for imagery/graphics:...
Evaluate Your Own Website
By looking at certain areas of your website, you will be able to determine why it isnt performing as you would expect, or, improve the performance it currently has in the search engines.
Top 7 Things I Wish I'd Known About Web Design
Its been three and a half years since my brother and I first launched our web design business in 2000. I admit that we were pretty primitive back then, and its a bit scary to go back and look at the very first sites I created. Im thankful to say, though, that Ive learned a tremendous amou...
Drop-Down Menus: They Aren't User-Friendly
On many sites, drop-down menus arent a significant part of the design. However, they appear often enough that they deserve some attention. So exactly how should they be used? For an example of the kind of drop-down menus Im referring to, check out the four menus at the top of this site: Logor.....
3D Effects in Web Design
Three-dimensional illusion effects are powerful devices that can achieve excellent results. They can also add significantly to overall page filesize, and can reduce usability if overused, so should be used deliberately and with care...