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 to invent solutions for common problems,
and letting us concentrate on specifics.
One of the key skills for designing
effectively is appreciating current conventions, and applying them for
What 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
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.