Website Design and Usability - Keeping it real
Websites do not exist in the physical world. We see them as pixels on screens or projections. We have this space where we have seemly limitless boundaries or restrictions. The only restriction is our imagination but a vast amount of websites use elements either like for like or the ideology associated with it from this Cartesian space.
Principles
Web design is a new media and there are five principles of new media. One of the five principles is "Transcoding" which can be used to describe these design metaphors. It's the blending of computer and culture, Lev Manovich states that "traditional ways in which human culture modelled the world and the computer's own means of representing it". By blending the two it should make it easier to understand and use a design.
Icons
The use of icons are not only used to make the interface look "pretty" they are used for usability. Icons are pictographs of real objects which we subconsciously associated with whatever they show making the GUI easier to use. A site interface should be intuitive and by using icons to represent what the action will do this makes us think less, perfect!
If it's not broken don't try and fix it. There are icons which have a meaning associated with them. Bad practice for using icons is using them out of context or using an icon with a well established meaning to do something else. Examples such as an envelope implies email or sending a message and a magnifying glass is to search. Use metaphors to your advantage.
The humble trash can which is used by most operating systems and sites for a very good reason you associate getting rid of something in a bin and thus the same principle is applied. However you never think "Why have I got a trash can on my desktop" or "What does this trash can button do?" it comes natural to you when using a computer isn't natural to us. A live example of this in practice is Letts which has a trash can for removal of a product from the basket.
A basket or bag are used to store your virtual goods, then you proceed through the checkout to pay. All this is familiar to every one of us, however purchasing goods online is very different to physically doing so. Using common conventions makes the user feel familiar and more reassured about what they are doing. Amazon one of the largest e-commerce sties uses a basket icon whereas A Gift from the Gods uses a bag. AGFG is a woman's clothing retailer and using a bag instead of a basket make sense. Adding more items changes the icon from one bag up to an icon with three. From personal experience of going shopping with my fiancée I know the feeling of lots of bags, I'm glad these are virtual!
These are all good examples of use of icons. There can be a negative impact of using icons and that is if the user doesn't understand what it is or what it does.
Recently I was designing an interface where a user could add item to a saved list. If the user can add they should be able to delete. I used a red cross to show they could delete it. A confirmation window then asked them to confirm there actions with a green tick for yes and red cross for no, see the problem? When I reviewed my work I noticed I had used two similar icons that did very different actions, bad practice. I redesigned one of the icons so there was no confusion.
Web Design Trend
A web design trend is to use actual objects within a design. The site could simply use a few objects such as post it notes, paper clips, polaroids to theming the whole site.
We did a site for the plastic models company Airfix. This site adds a interesting elements to the design by using pots of paint, parts of the kits and a tub of glue. Unlike icons these are mostly for aesthetics but is the perfect look for the target audience and provides a clear message what Airfix is about.
Do you use post it notes, I know I do and some other Ants do to. If I need to remember something then where else to stick a post it note then on the screen? You can not avoid the note so making it perfect. So why not take a post it note and make it digital.
There are plenty of sites using office elements like this, checkout Design Melt Down to see other examples from around the web.
The Real truth
I hope you enjoyed reading about the reasons for using icons in web design and the added interest real objects can create in site design. Go to your favourite sites have a look and see what they do you may be surprised by how many metaphors are used.
But please the next time you are shopping online do not think about the basket icon just let your natural instincts guide you.
This blog post was written by Fitz
If you would like to discuss this post why not follow us on twitter?
