user experience

Principles of design and usability in "everyday things"

Have you ever wondered how our brain achieves a specific task and expects a specific feedback in return?

Like pushing a button would probably power on the stereo system, flipping the switch would turn on a specific device or a light, and how do we map things in our brain.
[ Mapping ]

Not just in web design, in general; we interact with ?everyday things? and sometimes you expect a certain feedback from that interaction, unfortunately it sometimes doesn?t meet our expectations?

A good example usability experts use, is the stove?s dial to burners mapping [ see image below ] which one do you think is easier to operate? Stove image & article source, see also mental model

Here Is how all of this started:

My cousin and I were out couple of days ago driving around in his car when we stopped by a fast food restaurant to order some food.

While waiting for our order, an old song was playing on the car?s audio system, I wanted to put the volume up a tad, so I took a quick look at the dashboard ( it was pretty dark), ? 1-2 seconds later I rotated the volume controller/wheel to the right? and I ?changed? the track ? emph, not really what I expected in return!

Note:* there is a reason why we tend to rotate the ?wheel? controller to the right or left, our brain have learned that if we rotate such controllers to the right it will amplify a specific function & if we rotate it to the left it will de-amplify ? ever asked yourself why?

Now why on earth did that happen? Let?s have a closer look at the interface:

There is a reason why my brain mapped the volume function with that controller, here is how I looked at it:

Bigger means an important function such as on/off, and trust that the on/off button is important to operate a car?s stereo, I have also learnt that with the same button I can control the volume ( in most cases ).

I didn?t read what?s on the bigger button; I just assumed that?d be it since the upper smaller controller didn?t have anything written on it?

Let?s have a look at my car?s stereo volume controller/button.

See how the power button acts as a volume controller on rotation!

Although I prefer that they had the power sign on top and volume arrows to the bottom, it would make more sense - linear operations ( push to turn on, then rotate to control volume).

And I like how they?ve laid out the stereo controls to achieve a symmetrical balance( green borders ), here is how my brain mapped the controls on the dashboard to its functions:

It?s a square, direct audio/music functions are laid out to the sides right & left, anything in the middle would probably be?in-directly related to it?like 2 or 3 deep links to achieve the desired tasks + navigation.

Here is what I hate about my car, the navigation system's keyboard touch screen:

It?s been laid out in an alphabetical order, this layout goes against all what we interact with in our life from laptop?s keyboards to mobile phones which uses the QWERTY layout ? and yes it takes ages for me to ?touch-in? locations, especially while driving, it could cause some serious accidents and Cadillac should fix this issue to make it more usable.

Question for you Mr. Reader, should the above ( fixing layout ) fall under User Experience or ?Usability?

It?s amazing how we interact with ?everyday things? without realizing how our brains maps and interpret buttons and switches to the device?s functions?eyh?

since we brought up mobile, let?s have a look at the HTC Android?s [iconic representation]:

From right to left:

• The magnifying glass is used to produce a magnified image of an object, but we?ll always relate and map it to search/find functions, is it because we magnify objects to look for something?? Is it because of Sherlock Holmes or the cartoon shows we used to watch when we were little kids?
• Home: it?s obviously the first screen or home screen ? but why home? What emotions are triggered when you see such icon? And is it influenced by the internet term (home page)?
• Now this looks like a list, that?s how my brain interpreted it , look closely and you will see 4 cascaded bars, the one on top is longer than the rest, this could also mean multiple options for a specific application or task?? What do you think [ I don?t own an android yet ] im waiting for google to send me one as a birthday gift.
• Left curved arrow: I associated it with back, clear or exit, why isn?t it a straight arrow? The curve probably means a longer jump, a total exit unlike a straight to the left arrow which indicates a backspace (for example delete the last character which was typed in) perhaps?

Ok? one last example:

While I was installing adobe flash player for Mozilla firefox I got the following alert window:

Now this could just be me, for some reason it took me some time to think of what to do next!

The Window is asking me to close down firefox manually to continue with the installation & it has only one button that says ?QUIT? ? quit what exactly? Abort the installation or Auto-quit Firefox?

Usually, when im prompted such actions there are always two buttons that says ?Abort? which quits the installation or ?Close X? to auto-close firefox and continue with the installation.

Try it yourself in your ?everyday things? a phone, remote controls, your microwave, the router, Zain & Batelco shops, your camera, your car etc? try and analyze/break down buttons to functions mapping and see how you could make it more User Friendly / usable.

:-)

by Mohammed Zainal