By Nicholas Wright, CEO at AppInstruct
When you’re building an app, it can feel like you’re on an adrenaline-fueled rush to the app store. But in a competitive market, if you’re serious about what you’re doing, you need to slow down and consider what it takes to make an app great.
In a previous post, I addressed the subject of user experience design for mobile apps. This post looks at the difference between user interaction design and user experience design; I’ll explain some of the core things you should consider when designing a user interface for your own app.
What is user interface design?
User interface design sits between user experience and graphic design. The former is how your app makes its users feel, and the latter is how your app looks. Good user interface design is the process of understanding how your users will interact with your app.
A great app means “designing for an economy of time, attention and screen space,” wrote designer and author Josh Clark.
User interface design and mobile
User interface design existed before the iPhone, but the iPhone’s mobile interface has made it more important: with the iPhone came the ability to use gestures for shortcuts and other actions, since borrowed by other smartphone manufacturers.
That sense of touch is called “haptics” and mobile apps are built with a haptic interface: people can use gestures, like taps and swipes, to navigate.
Most people understand the single finger gestures like tap, swipe and pinch — but they don’t always remember the more complicated two or three finger gestures.
Here’s a table that illustrates some of the more common gestures.
|Tap||To select and control an item (like a single mouse click on a computer).|
|Drag fingers across the screen||To scroll, pan (move side to side), or drag an element.|
|Flick finger lightly up, down, or across the screen||To scroll or pan quickly.|
|Swipe across the screen||One-finger swipes to reveal the delete button in table-view row, the hidden view in a split view (iPad only), or the Notification Center (from the top edge of the screen). Multi-finger swipes also work; swipe with four fingers to switch between apps on an iPad.|
|Double tap||To zoom in and centre a block of content or an image — or to zoom back out.|
|Pinch fingers together||Pinch fingers closed, along the screen, to zoom out; to zoom in, do the reverse action (pushing fingers away from each other).|
|Touch and hold||To display a magnified view for cursor positioning in editable or selectable text.|
|Shake phone||To undo or redo action.|
The touch target
When designing for mobile, you need to be aware of the “touch target rules” – basically, how much space a finger needs to make sufficient contact with the screen.
Let’s use the thumb as an example. When an iPhone is held in one hand, the thumb does the work and a user’s thumb can ordinarily only reach approximately one-third of the total screen area (this will be different with the new iPhone 6 Plus). A thumb also needs roughly 44 pixels or 1 centimeter for a “touch target.”
If you’ve ever wondered why so many apps have similar looking interface designs — for example, navigation menus appearing at the bottom of the screen — the touch zone is your answer as to why.
The end of skeumorphic design
The original iPhones – as well as the original Macintosh computers – relied on something known as skeumorphic design in their graphic interface design to help people figure out how to use these new devices.
Skeumorphic design means designing a computer interface that looks like objects in the physical world – like a folder to storing multiple documents on your PC or iMac, or the wooden bookshelf used in the original design of the iBook store.
With iOS7, and shortly iOS8, Apple made a massive shift away from this kind of design: they decided that we’re familiar enough with our mobile devices that we no longer need these “visual cues” to help us understand them.
Apple wasn’t the first to move away from this style of interface design; both Microsoft and Android changed their style well before iOS7 was launched. However, with all three platforms moving away from that style, it’s something you must keep in mind.
Got a question about mobile app interface design? Ask in the comments below!
To learn more about design and the other critical aspects that go into designing, building and launching an app successfully, AppInstruct’s online course explains all the most important things you need to learn to make your own app.