By Darrell Benatar
We recently finished a massive analysis of thousands of mobile usability studies in which we identified the major mobile traps that marketers fall victim to when transitioning their sites and applications to mobile.
When users get confused by a mobile app or Web site, it is often because of unclear controls and obscure interfaces.
Unclear controls: Buttons, icons and widgets
In the mobile space, creating easy-to-understand buttons and icons is a big challenge because there is no single standard for them.
In computers, there is effectively one GUI standard, but in mobile, there are two major platforms (Android and Apple iOS) and several minor ones.
The competing mobile platforms use button and icon designs as part of their differentiation, deliberately making them incompatible with each other.
Although a few images are standard across most platforms – a magnifying glass means search everywhere – many buttons and images are conflicting.
And when the definitions of icons differ, they start to lose meaning altogether and become just pretty pictures.
These icons mean the same thing on most mobile platforms:
These visually similar icons have different meanings in different operating systems:
Additionally, some widgets just do not work well on mobile devices.
Small screens make it very hard to use controls that require precise adjustment.
In our tests, the use of sliders for selecting quantities can cause huge frustrations.
Hierarchical menus are another source of user confusion.
Even on computers, multilevel menus can be confusing. But on a mobile device, where menus often take up the entire screen, it is very easy to get lost.
Obscure interfaces: Unreadable text and inadequate help
Text or pictures are sometimes displayed at too small a size for easy reading, especially if a user does not have perfect vision.
Companies also often make mistakes in contrast.
Text colors that look stylish and modern on a computer can become unreadable when a mobile user is outdoors in bright sunlight, or when they have turned down backlighting to save battery power.
Light gray or blue on a white background is very problematic, as is dark text on a black background.
Having unclear controls and confusing interfaces are problems that are further compounded by the constraints of a mobile device.
On a computer, popup tool tips help to explain any unclear icons.
In mobile, tool tips do not work, and there often is not space to display both text and graphics. So users become confused, they slow down, and they lose interest.
Top 5 tips to avoid this mobile trap
1. Avoid cryptic icons. Do not assume that icons are self-explanatory. When in doubt, use text instead of – or in addition to – a picture.
2. The highest form of beauty is functionality. Make sure that your mobile property works well and is easy to navigate, then make it pretty.
3. Beware of hierarchical or multilevel menus. They can easily create vast confusion.
4. Test outdoors. To avoid readability problems, test outdoors, in bright sunlight, on a variety of devices with different quality screens.
5. Great help is essential. A great help system is to mobile what tool tips are to traditional computing: the first line of defense against user confusion.
EVEN IF YOU make many of these changes, you need to accept that your users will sometimes get confused.
The limitations of the small screen make that inevitable. Therefore, out of the top five tips above, the most important usability feature for a mobile app or Web site is a great built-in help system.
The help system should be available anywhere in the app or Web site, context-sensitive and easily searched – for example, turn off auto correct in search because users get frustrated when the help system searches for the wrong term.
The underlying cause behind unclear controls and confusing interfaces is the tendency to emphasize art over functionality.
Although it is best to have a mobile property that looks great and works well, the short attention span of most mobile users means that functionality has to come first.
If users cannot get something done with your mobile app or site, they will not come back – no matter how pretty it looks.
Darrell Benatar is CEO of UserTesting.com, a Mountain View, CA-based video usability testing service. Reach him at db@usertesting.com.