Designing for touch screens: You're doing it wrong


Touch screens are taking over. There's no denying it. Although I don't believe your desktop PC is ever going to truly die out, touch screens are soon going to be the vast majority.

Because of this we're shifting more of our attention towards mobile websites, apps and mLearning. But while we're making the shift in technology, we're often forgetting to change our mindset and I regularly see examples of desktop design ported to touch screens with frustrating results. Here's a short list of tips for designing for touch screens to get the best out of the medium.

Consider the pointer.

On a desktop, you use a mouse (or graphics tablet, if you're fancy). It's one of the most precise pointing devices you can imagine, you could probably click on a single pixel with just a little bit of concentration. On a touch screen, you're left with your clumsy fingers. Now I consider myself a fairly dexterous fellow; I feel that I play guitar and video-games well enough to justify that claim. But get me using a poorly designed site with a touch screen and I can look like I'm using my hands for the first time. This is generally because people aren't considering just how big and clumsy your finger can be compared to a mouse cursor.

Another thing to consider is that the cursor doesn’t exist on a touch screen. Because of this you lose all the benefits of hovering, such as hover states to indicate clickable items, drop-down menus and even fancy image effects and animation that occur when hovering with a mouse.

So how do you overcome this? It could be a variety of things depending on what you're making. Some good things to consider are increasing margins and padding, making buttons bigger, organising content in another way (the dreaded hamburger menu, tabs etc.) and considering using common gestures (eg. swiping tabs) to make the content more accessible on a touch screen.

margin content padding touch screen design

Consider the medium.

Designing for desktops and laptops was a luxury we never knew we had until it was slipping away. You know you have a captive audience, you know they're likely to be at a desk or at the very least they're sitting down in a quiet place. With touch screens and the ultra-portable devices that they're attached to, we have no idea anymore. It could literally be any situation.

With the new possibility of people opening your app while jetskiing comes a new challenge. How do you account for their lack of attention? Short, engaging tasks are your new best friends. Never rely on having the user’s attention for more than a minute or two at a time. Also, don’t rely on audio cues or voice input from the user, as they may be in a noisy environment which will render your product useless.

Make it enjoyable.

You’re not making a game, why should it be enjoyable? Well, humans are funny creatures. We constantly need to be made comfortable, otherwise, we get frustrated and we’re likely to give up.

UX plays a huge part in this. You can have the greatest idea for a fun and engaging product but if you don’t execute it properly the whole thing falls apart. UX is something that trips companies up constantly. An example I came across recently is the Yarra Trams TramTracker app on Android. Here’s an app that is so perfect in ideas, but completely useless in its current state. Apart from being slow and ugly (frustrating in itself), the functions you want to use require up to five clicks to access. If you can’t put information literally at my fingertips within two clicks, you’ve already failed. Five is woeful.

I’ll admit a tram tracking app is never going to be the next Angry Birds, but you can still make the experience enjoyable. Everyone has had that feeling of using a new, well made, polished app that’s so good it makes you want to tell everyone about it. Every time you start designing a new touch-based product, that should be your goal.