Each element on a web-based application is designed to use colour, shape and its position on the page as part of the way it communicates non-textual information to the user. These standarised ways of displaying page elements on a particular web-based application allow us to build a visual vocabulary that the User can recognise and subconsiously assign a level of importance to.
Once learnt and recognised the User experience is improved, making it easier for Users to be introduced to new functions which have the same visual vocabulary. This results in a drop in customer service enquiries and helps with customer socialisation and training as well as making a customer's own internal training that much simpler.
The visual vocabulary is just as important as text content to a user. Don't mess with it!
Tuesday, December 06, 2005
The importance of good Graphic User Interface design
I know that it is sometimes hard for a programmer to see why design is important; graphic design is seen by many programmers as a natural enemy since, by nature, graphic designers don't code! This has been the case since the early days of the web when there was a battle between programmers who took delight in hand-coding, and designers who used GUI design environments like Dreamweaver or GoLive - the Microsoft product being abhorred by both designers and programmers will NOT be mentioned here .
But the web has now moved from its research distribution roots to become a complex communications and application platform, and so a lot of hard work and good research has gone into creating a good user experience on the web. And it has taken teams of specialists - programmers and designers - to achieve gains in the field of improved User experience through good GUI design. GUI design may be only one tool that we are now using to improve our products, but since I'm totally biased, I'll push my barrow here.
So programmers, be nice to your interface designers, and interface designers, do the same. Neither of you would have a job without the other!
But the web has now moved from its research distribution roots to become a complex communications and application platform, and so a lot of hard work and good research has gone into creating a good user experience on the web. And it has taken teams of specialists - programmers and designers - to achieve gains in the field of improved User experience through good GUI design. GUI design may be only one tool that we are now using to improve our products, but since I'm totally biased, I'll push my barrow here.
So programmers, be nice to your interface designers, and interface designers, do the same. Neither of you would have a job without the other!
Design for the User - a fable
Once upon a time there was programmer who went into a cafe for lunch, ordered a coffee, a hamburger and some chips. The programmer liked the look of the cafe so decided to eat in.
The programmer saw that the cafe had a selection of excellent complimentary reading materials - newspapers, magazines and even a copy of the latest Wired magazine full of great geek articles! It was a good cafe, it seemed. The programmer's first impression was being confirmed.
The tables were clean, with a nice set of condiment containers in plain designer white. The stark square white salt shaker with one hole in it and the stark square white pepper shaker with five smaller holes in it were complimented by the stark square white sugar caddy on a stark square white plate in the middle of the stark square white table. Very Zen. The programmer's friends (well at least the ones who all wear black t-shirts) should be told about this place.
The coffee was delivered to the programmer's table and it was also good. A mental note to come back was almost in place. Now all that was needed was the hamburger and chips and the programmer would be truly happy. Happy that the right choice for lunch had been made.
The meal arrived promptly, the waiting staff was courteous, the food looked good. The hamburger was big, juicy and mouthwatering. The chips were fresh and just out of the deep fry. The aroma of the chips was fantastic and all they needed was a bit of salt and the meal would be complete and perfect.
The programmer reached for the one-holed salt shaker and proceeded to apply a liberal amount of the contents of the shaker over the chips. But there was something wrong. It was not salt, but pepper in the shaker.
Hold on, thought the programmer? Salt shakers have one big hole, and pepper shakers have a lot of smaller holes don't they? It has always been like that, hasn't it? There has to be a law about it somewhere?
Then the thought came: My chips are ruined!
And: This cafe sucks!!
What happened? All was milk and honey until the salt shaker turned out to not be what the programmer expected. It ruined the moment.
Yet it was such a small thing; after all, all the programmer had to do was take the plate of chips back to the counter and explain the situation, ask for fresh chips and then go looking for a salt shaker that actually had salt in it. It would have been worse if the programmer had tried to put salt on the hamburger. Just a hick-up really, wasn't it. Just a little mistake made by an overworked kitchen hand when re-filling the condiment containers - they look the same when upside-down with their fill caps off. The programmer is over-reacting, surely?
The moral to this fable...
Little things annoy people. A whole stack of positive experiences were ruined by one negative. Good coffee, targeted geek reading materials, great ambience and attentive waiting staff were all cancelled out by one smallish mistake.
It could be argued that the whole experience in a web site or within a web-based application is the same. The convention of a salt shaker with one hole is kind of like a consistent interface that is repeated throughout a web site. The User has always associated a single hole in a plain white shaker as salt, NOT pepper. It was a visual indicator that was wrong. A rule of thumb to use is that you shouldn't go against the existing visual language but if you do, make sure that the User is aware of the change. Don't just expect the User to KNOW that there is pepper inside the shaker, rather than the expected salt.
It only takes one annoying inconsistency to spoil the party and make your users hate you! But then this doesn't happen to you guys, does it?
Think about it.
The programmer saw that the cafe had a selection of excellent complimentary reading materials - newspapers, magazines and even a copy of the latest Wired magazine full of great geek articles! It was a good cafe, it seemed. The programmer's first impression was being confirmed.
The tables were clean, with a nice set of condiment containers in plain designer white. The stark square white salt shaker with one hole in it and the stark square white pepper shaker with five smaller holes in it were complimented by the stark square white sugar caddy on a stark square white plate in the middle of the stark square white table. Very Zen. The programmer's friends (well at least the ones who all wear black t-shirts) should be told about this place.
The coffee was delivered to the programmer's table and it was also good. A mental note to come back was almost in place. Now all that was needed was the hamburger and chips and the programmer would be truly happy. Happy that the right choice for lunch had been made.
The meal arrived promptly, the waiting staff was courteous, the food looked good. The hamburger was big, juicy and mouthwatering. The chips were fresh and just out of the deep fry. The aroma of the chips was fantastic and all they needed was a bit of salt and the meal would be complete and perfect.
The programmer reached for the one-holed salt shaker and proceeded to apply a liberal amount of the contents of the shaker over the chips. But there was something wrong. It was not salt, but pepper in the shaker.
Hold on, thought the programmer? Salt shakers have one big hole, and pepper shakers have a lot of smaller holes don't they? It has always been like that, hasn't it? There has to be a law about it somewhere?
Then the thought came: My chips are ruined!
And: This cafe sucks!!
What happened? All was milk and honey until the salt shaker turned out to not be what the programmer expected. It ruined the moment.
Yet it was such a small thing; after all, all the programmer had to do was take the plate of chips back to the counter and explain the situation, ask for fresh chips and then go looking for a salt shaker that actually had salt in it. It would have been worse if the programmer had tried to put salt on the hamburger. Just a hick-up really, wasn't it. Just a little mistake made by an overworked kitchen hand when re-filling the condiment containers - they look the same when upside-down with their fill caps off. The programmer is over-reacting, surely?
The moral to this fable...
Little things annoy people. A whole stack of positive experiences were ruined by one negative. Good coffee, targeted geek reading materials, great ambience and attentive waiting staff were all cancelled out by one smallish mistake.
It could be argued that the whole experience in a web site or within a web-based application is the same. The convention of a salt shaker with one hole is kind of like a consistent interface that is repeated throughout a web site. The User has always associated a single hole in a plain white shaker as salt, NOT pepper. It was a visual indicator that was wrong. A rule of thumb to use is that you shouldn't go against the existing visual language but if you do, make sure that the User is aware of the change. Don't just expect the User to KNOW that there is pepper inside the shaker, rather than the expected salt.
It only takes one annoying inconsistency to spoil the party and make your users hate you! But then this doesn't happen to you guys, does it?
Think about it.
Subscribe to:
Posts (Atom)