I’m a word person and proud of it.
That said, it’s always good to get a sense of how people who work primarily with images do their jobs. Take app designers. How do they go about creating clean, simple, intuitive user experiences and user interfaces?
They start with an outline
Before I write most anything, I create an outline of some kind. For app designers, the outlining process is called wireframing. A wireframe is a low-resolution line drawing of all the app’s different components and views. Since the focus isn’t on the website’s look and feel but on mapping the functionality, a wireframe isn’t necessarily pretty. It’s the first step in a solid design process, though; and while it takes a fair amount of time to do, it pays off in less frustration and confusion for everyone down the road.
They cue the user
Cluttered interfaces are confusing and, when you’re on the go, as mobile users generally are, enraging. Great design is all about making simple visuals. Great designers review every visual element and ruthlessly strip away the extraneous ones. Ornamental flourishes are a big no-no. Rather, app designers in the know don’t give people too many options on a single view. They use white space as a design element. Fluff elements are costly, in terms of development, in terms of bandwidth, in terms of most everything; so if designers can, for example, trim a given interaction from four taps to two, they will.
They know size matters
With a mobile device, space is at a premium, so good designers make every pixel count . How big should type be? Here are typical type sizes.
- Titles and buttons: 20px
- List labels: 17px
- Standard text: 16px
Another key spec: actionable elements should be a minimum of 44 x 44 px.
However, good design is not just about shrinking elements to fit. Good designers take advantage of hand gesture navigation such as swiping, tapping, double tapping, and pinch to zoom to optimize space.
And to make sure using an app is easy and enjoyable, they test their layout on a variety of devices. Design apps that simulate the screens of multiple devices help with this.
They know users are impatient
Waiting for a slow elevator is annoying. But it’s endurable if we see the indicator lights changing as the elevator moves from floor to floor. Good designers understand it’s the same with apps. Sure, a designer can’t know what kind of connection a user will have or the device that user is on or the power of that device; but designers can tamp down the frustration of waiting with a progress indicator. A progress bar or a spinner is indispensable when a process doesn’t happen instantaneously. Two seconds of not knowing if anything is going on? Users get huffy and leave. Four seconds or more with a progress indicator? They might roll their eyes, but they’ll probably stick around. Good designers plan on keeping users engaged, even during breaks in interactions.
These are just a few basics on how mobile app designers approach their work. Want to learn more? The Apple and Google Human Computer Interaction guidelines are essential references for mobile layout tips and techniques. Also, Apigee posts helpful videos on all things mobile development on YouTube. Check ’em out.