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 videogames 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.