Lately I’ve been thinking a lot about touch-based user interfaces for mobile phone for a project I’ve been involved in.
Louis Kahn, one of the most influential architects of our time, and subject of an amazing documentary film, once said:
“What do you want Brick?”
He was alluding to the fact that each material has properties and limitations and wants to be used a certain way. Whether it be materials, or systems, or UI’s, each has a certain affordance you can either acknowledge and work with, or work against.
Don Norman also describes a similar attitude towards the design of products in his influential The Design of Everyday Things:
The term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. A chair affords (“is for”) support and, therefore, affords sitting.
When designing a touch user interface for mobile phones, where do you start? You can start by taking a look at what Apple has wonderfully done with the iPhone. Or you can take a look at how to improve the current mobile UI and make it touch-enabled. Both lead to very restricted designs, since they can’t escape what either Apple or current mobile UI have set up as its affordances.
One needs to ask, “So, what do you want to be, mobile phone touch UI?”
In my mind, some of what it wants to be is the following (these are its affordances):
- It wants large touch targets: Fingers are less precise than keys, and there are minimun touch area requirements that can’t be too small.
- It wants simple page layout: touch requires immediate feedback, and quick transitions to subsequent pages. There shouldn’t really be anything to navigate on a page. The interface should be “tap, tap, tap”, i.e. a quick progression of pages to finish the task the user to trying to accomplish.
- It want to have limited choices: More choices on a pages means more things to touch and this make make things harder to touch with precision. In the web page paradigm, it may be better to present more options on a page, however in a mobile touch interface, with limited screen area, and touch targets, it may make more sense to provide limited choices and more “in-between” pages.
It is also important to select the right everyday metaphor for the touch UI elements. Metaphors allow users to recognize how to use something without learning, since it is something they are familiar with already. On the iPhone you see sliders (unlocking the phone), dials (selecting a date), and buttons.
One great source of metaphors for a touch UI is actually baby toys for many reasons:
- Interactive elements are brightly colored, allowing the user (the baby) to locate and initiate an action.
- Interactive elements are easy to touch, pull or twist and have large target areas, taking in to account the users lack of mastery over motor functions and pudgy fingers.
- Interactive elements provide clear feedback to reward the users and provoke them to repeat the action.
- The objects are not overly complex and choices for manipulation are simple.
It is no wonder a baby can use an iPhone interface.