As a smartphone user, one of the most frustrating experiences is when you tap on something and it doesn’t work, or worse still, the interaction delivers an unexpected result. As creators of online user journeys, it’s our duty to understand what users want, need and expect. When you disappoint, confuse or frustrate an online visitor, they won’t have the time or patience to figure it out – they’ll quickly move on, most likely to a competitor.
So, what are the key considerations when designing for touchable interfaces?
Design for thumbs
Ensure the user doesn’t have to stretch too far to reach key navigation elements. People hold their mobile device in different ways, but the majority (85%) use their smartphone with one hand. For the 75% of thumb-only users, increasingly large mobile screens are reducing the amount of content within easy reach. This is important to note when designing key actions on the interface: it’s vital to ensure that menus and other important controls are within a thumb’s reach.
‘Cards’ are a thumb-friendly way of presenting information on mobile. Using simple rectangular layouts to contain anything from photos and text to coupons and links, or even videos and social media streams, cards make content digestible for users, who can quickly scan and swipe. Cards provide variety without clutter, making them ideal for teasing users or alerting them to information.
It’s interesting to note, however, that even with this emphasis on keeping menus within easy reach, the ‘hamburger menu’ (the three-line icon that toggles collapsed menu items) is often located far out of reach at the top of the screen. How many designers and developers are blindly copying others, rather than considering the use of their website or app in context?
Design for inaccuracy
People aren’t very accurate when it comes to tapping their device screen – and the further from the centre of the screen the user’s thumb reaches, the less accurate their taps become. With this in mind, ensure that unrecoverable actions such as ‘delete’, ‘undo’ or ‘empty basket’ are placed away from regularly used actions. This should help to avoid those accidental taps that can be so frustrating.
Providing enough space between the on-screen elements also helps prevent users from accidentally tapping the wrong thing. Apple recommends a minimum 44 by 44 pixel hit area for interactive controls.
Use intuitive input fields
Whether it’s inputting a booking date or lengthy credit card details, make it easy for users. No one wants to use fiddly drop-down boxes, and tapping out long numbers on a tiny alphanumeric keyboard is a chore. When designing for touchable interfaces, especially on smaller screens, identify ways to reduce the need for typing.
Smartphones are packed full of functionality that can lift the cognitive load off a laborious online form filling process. As web designers and developers, it’s important to take advantage of all the device’s functionality and make use of the video and audio features like the camera and microphone, as well as GPS wherever possible, to make data input effortless.
When used wisely, autofill suggestions, numeric input screens, scrolling date pickers, steppers and sliders can streamline the input process. Inline validation is also useful to provide instant feedback to the user if they’re completing a form field incorrectly: instead of going through the whole process just to be told that something’s wrong, the user can amend their input immediately.
Consider ways to reduce the number of input fields too. What’s the bare minimum of information you need to collect at that moment in time, and what can be gathered at a later stage during the customer’s journey?
Use gesture controls (with caution!)
Gesture controls like ‘hold’, ‘swipe’, ‘drag’ and ‘pinch’ are some of the actions that can be used, where appropriate, instead of tapping or typing. However, gestures are often hidden controls with no consistent standard as to how they work, requiring users to learn and remember different gestures for each app or site. Gesture controls present a lot of potential frustrations, so if you want to use them, it’s better to start simple and ensure you provide straightforward visual cues – you can always add more complex gestures over time.
Always remember: mobile first
Quite simply the best way to design for touchable interfaces is to design with mobile devices in mind first. When you design for desktop and then retro-design the mobile version, or simply rely on responsive design, your website will never be fully optimised for mobile. Only when you design in the context of mobile devices – their sizes, features and functionalities – will you be able to truly focus on creating an intuitive user experience.
Finally, remember to gain ongoing user feedback throughout the process. What makes sense to you might not be so obvious to an end user or customer. User experience research and testing should be a continuous process, helping you learn and iterate your product to ensure it meets the needs and expectations of your users. This insight is what will ultimately ensure success when designing for touchable interfaces.
