5 Design Tips for Touchscreen Interfaces

Posted 6/4/2014 11:32 AM by Jeff Julian

Steve Hoober of 4ourth Mobile did an amazing job of presenting at the UXPA KC event this month, hosted by VML.  His topic was titled Design for Fingers, Touch and People and you can watch the online version via SlideShare or his UXPA LA recording.  Steve is a great presenter and kept the audience engaged with his wealth of information about how people use touch devices and the effects of design.  Here is a list of key points I enjoyed during the presentation.

Design by Zones

On a touch device, there are different zones of the screen that a user has a higher percentage of accuracy to press the appropriate target.  Typically these zones are Masthead, Tabs, Content, Last Row, and Chyron.  Each area has a specific amount of error when it comes to human interaction so understanding how large the target needs to be or how much space to place between it and its neighbors is key.  Whenever possible, put the target in the middle of the screen.

Account for Distance

The distance a user holds the device from their eyes has a direct correlation to how you design the elements on the screen.  Typically, the larger the device, the farther you hold it from your eye.  The farther something is from your eye, the larger the fonts and other elements need to be.  Steven suggests a minimum size of 4pt font on devices that are 2.5”, 6pt font for 3.5” and 5” devices, 8pt on 8-10” handhelds, and 10pt on 8” or larger devices that are on a stand.

Create the Largest Touch Target Possible

Do not overcrowd your targets and be aware of the surrounding touch targets.  This is not just important side by side (ie. Navigation Bars), but also vertically when design elements are used to divide the page but space is not given.  Ensuring the user interacts with the right targets will enhance the user experience and create happier users.

Design, Test, and Demo at Scale

Do not just show users and decision makers screenshots in PowerPoint, get the application on the target set of devices and let people interact with it.  Use tools like TestFlight to deploy your application to a test device, don’t just use the desktop emulator.  When you sketch, make sure you sketch in a box the size of the target device to address design concerns right away.  Photoshop, Sketch, Axure, and Balsamiq are amazing tools, but make sure you review their results frequently on the device.

Handsets in Portrait, Tablets in Landscape

On average, the user of a handset will hold the device in portrait and a tablet in landscape.  You should ensure you understand how the user holds your application to make the appropriate design changes.