"Reaction [beta]"
Setting fire to the kitchen 18 Jul 2008
Interaction Design have a nice post on their site that illustrates the importance of mapping controls to the particular device (or function) that the control operates. Taking the example of a stove top, the author steps readers through several arrangements of dials and stove elements (or "burners"), asking which element will be activated by each of the controls. As the article reveals, it's no easy task!
Interaction Design's post reminds me of a project we fired-up recently for a client, which involved a redesign of our client's online purchase and checkout processes. One of the first steps we completed for our client involved a competitor review: looking at how other online retailers in our client's space handled their checkout processes in order to develop a set of best practices and guiding principles for the redesign project.
During a series of short usability tests on our client's competitors' sites, some real usability doozies cropped up. Many of these seemed obvious to us as interaction designers, so it was a little disappointing that the issues had slipped under the radar of the sites' designers. (This is why user testing is so important.)
In this example from La Senza, the user is attempting to purchase a swimsuit from La Senza's glamour range. Though try as she might, the user just doesn't seem to be able to "flick the right switches"... Or at least, she doesn't think she is flicking them.
Behind the scenes, La Senza's website is happily capturing the user's request to add the bikini to their shopping cart (dubbed "My Bag"). However, while the "Add to my bag" button is mapped to the shopping cart in a technology-sense, there isn't a visual mapping between the two components in the site's user interface. As can be seen in the video, the user isn't provided with any feedback when she presses the "Add to my bag" button, therefore she believes that nothing is happening when she attempts to add a swimsuit to her bag.
Perhaps I'm stretching the grounds of Interaction Design's article a little too far ;-) though this user's experience is tantamount to her turning a dial on her stove top, only for another stove element (hidden in a cupboard behind her) to fire up (...Or for her to turn the dial firmly to "on" only to find that the element stays cold). Either way, the stove element that she was looking at (in this case her "bag") appeared as though it wasn't under the control of the button that she was pressing.
In this age of Web 2.0 and uber-sophisticated interaction design, its important to think about how you map your controls to the functions they operate. Gap, for example, have laid to rest the old skool static shopping carts of bygone days. (These often loaded a completely separate "Your shopping cart" page every time you added something to it). Instead Gap uses a dynamic shopping cart (again, dubbed a "bag") that scrolls into view whenever a user adds a product to it.
Certainly there's significantly more feedback in Gap's design than there is in La Senza's, though there are still some "gaps" (if you'll excuse the pun) in the approach, as can be seen in the footage below.
As demonstrated in the Gap video clip, the mapping of the "Waist size" controls to the "Leg size" controls isn't immediately obvious. (This isn't helped by the slow loading time of these controls and all the flickering they do while they "adjust" themselves, ready for use). And Gap's grey-on-grey palette leaves some scope for the dynamic shopping cart to be missed.
As Interaction Design conclude, easy to use products are characterised by a short (or even no) learning curve. Certainly our own experiences show us time and time again that poor usability can be the downfall of an otherwise great proposition.
Next article: Binaural: Songs as sculpture
Previous article: I don't Love Film (or so they tell me)
Bookmark this page
Trackbacks
To create a TrackBack to this entry simply append ping/ to the permalink URL for this page.
