When designing interfaces, both online and offline, the placement of the elements required to complete a task is important. Put the elements in the wrong places, and you’re likely to frustrate the user. The key to designing good interfaces is thinking about the order in which a user approaches a task. A short study in two everyday tasks illustrates the need to plan for the placement of elements in a sequence.
 

when setting the timer

 
Figure 1) I’m ready to set the timer. I tap the “Set/Start” button below the label “Timer” and enter a time using the numeric keypad on the right.

 
 
Figure 2) The time has been input, and now I need to start the timer.

 
 
Figure 3) I hit the large “Start” button to the right of the keypad. The oven makes an error noise, and the timer does not start. Did I do something wrong?

 
 
Figure 4) Right, I wasn’t reading. I should have pressed the “Set/Start” button again, as the screen instructed me.

 
 
What happened here? The process breaks the sequence of numeric keypad plus enter button. Having been trained by previous experiences with numeric keypads on calculators and computer keyboards, a user would expect the start / enter button to be in close proximity to the keypad. The placement of the buttons creates a back-and-forth motion, not a left-to-right action, and moving both forward and backward is less efficient.

Setting the oven timer is a five second task, but small annoyances can multiply over time and affect user perception. One solution to this problem would be to have a global start button. When in the timer setting mode, the start button could activate the timer.

when creating a label in gmail

 
Figure 1) After searching for a particular phrase, I have the option to create a filter. In this example, my filter will be a label that is applied to all messages that match the filter criteria.

 
 
Figure 2) I’ve created my filter. But wait, it wasn’t applied to the messages I searched for — I should have checked the box “To also apply filter to 1 conversation below”. The placement of the “Create filter” button was first, so I didn’t notice this option until after the fact.

 
 
One solution to this would be to move the check box for applying the filter above the “Create filter” button. But given that the other elements there are actions related to the filter creation, it should be separated from that list. Another alternative might be to have a button that says “Create and apply filter”. Experimentation and testing would be required to arrive at the best solution.

In the end, it’s easier to remember sequences that don’t work well. For every problematic sequence in everyday life, there are a dozen that go well. Now it’s your turn to share — what interface elements have you encountered that are more complex than they need to be?

Tags: design thinking, graphic design, usability, web design

This entry was posted on Friday, August 6th, 2010 at 01:53 and is filed under user interface design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.