"Voice Memo" for the iPhone is a cool little app that allows people to record short audio clips using the on-device microphone. While the visual elements themselves look quite good, they create a bad user experience.
Confusing visual metaphor
Real world visual metaphors can be useful in helping users understand an interface. Buttons are a perfect example of this. The problem is when designers over use visual metaphors that don't relate to any functionality. When that happens, the metaphor confuses users.
The first thing someone usually does is try to tap or speak into the microphone only to find out that nothing happens. On this device, the illustrated mic serves no purpose. That's a lot of screen real-estate for something that does nothing. Forcing the app to look and feel like a physical mic makes it much less usable.
Where's the microphone again?
Visual elements should be used to enhance the content and functionality of an application. Visual style can look fantastic and generate a strong emotional response. The key is to use visual elements to guide users through an application.
In the case of the voice memo app, not only does the large illustrated microphone do nothing, it guides users away from the actual on-device microphone. The application forgets that it is on an actual device with a real microphone. The visual style just gets in the way of the functionality.
Tiny touch area
Users should be able to open the application and, without even looking, start a recording. This principle is even more accentuated on mobile devices. Mobile applications must let the user take action quickly and easily.
Looking back at our voice memo app, the main action button is a tiny icon down on the bottom of the screen. In comparison to the superfluous visual elements on the screen, the one thing that users need is tiny. Why hide the main functionality in an application in favor of visual style? That's bad design.
Our take
We thought we'd take a quick stab at a better design so we put together this mock up:
Our improvements:
- The visual style is similar but it doesn't try to use a real world metaphor that confuses users. Instead, we used a simple button that is easily understood and drives users to take action.
- We use simple text to guide users to the on device microphone. We don't need anything too heavy handed. Simple is better.
- A large touch area has been implemented that allows our users to take action without hardly even looking at the screen.
While there are more improvements that we could make, you can already begin to see that a few minor adjustments can make a big difference. As designers, we can't let unfocused visual style create bad design.
