Jason Amunwa is a marketing Macgyver, with experience creating innovative campaign strategies, designing creative executions across multiple channels, and most of the stuff that happens in-between, for brands big and small.

It’s probably safe to say that touchscreens as a method of interacting with the web aren’t going away. In fact, it appears quite the opposite: most new smartphones have one now, Google’s making their own tablet, and I think ol’ Steve Jobs has managed to shift a couple…million.

Therefore I think now is a good time for us designers to take a step back from all the glassy smoothness of these devices and ponder the implications of this radically new way of interacting with our online environment. Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors. You’re welcome!

Things are going to get bigger

The Tangible Web: Thoughts on Designing Websites for Touchscreens

Unless you’re like this guy, you probably can’t press just one pixel

Imagine for a minute how many pixels you could fit on the tip of your fingers – that’s approximately the number of times less accurate touchscreen users are, compared with the single-pixel precision of mice. This is one of the fundamental differences between these two input methods that radically affects how we must design our user interfaces.

Buttons, links and other interactive elements must now be large enough to be easily pressed on the first try. Typography will therefore also need to expand in line with the rest of the interface, or else look dwarvish by comparison. The spread of copy & paste functions among smartphones (starting with Android, and recently arriving at some of the lesser known handsets) will also require larger typography, in order to be comfortable.

“But what about fixed widths and the fold?” echoes your agonized cry. “All these supersized elements and text will push everything down!”. Well, a peculiar quirk of touchscreens’ very nature means bye bye worrying about these – but we’ll get to that in a minute.

Dropdown and gimme 20

Breaking News: In touchscreen-land, the “hover” state doesn’t exist – there is either no contact at all, or contact with a fingertip. Some more advanced touchscreens register variable amounts of pressure from a finger, but these are far from being in widespread use for the time being. The primary triggering mechanism for that staple navigation element – the dropdown menu – is simply not viable for touchscreen users, meaning that for all its ‘magical’-ness, you can’t easily navigate many websites’ content on the iPad or indeed any other touchscreen device. How, then, can we compensate for this in our UI designs? Some ideas:

  • Pop-opens“: hidden menus that appear after a long press on a UI element – kind of like a ‘sticky’ dropdown menu
  • “Drag-opens”: sliding menus that the user manually pulls open like a drawer, to access the info or elements within. These are nice, because return users can drag it partially open to only reveal the info/element that is needed, thus saving screen space overall.
  • More focused navigational structure: the spread of touchscreen devices may force website owners to ask themselves what’s really important to have in their top-level navigation, and which pages can be consolidated, to trim down the number of sub-pages they need to cram into hidden menu tabs
  • Drag & drop, and easing behaviors: since we’re increasingly able to manipulate digital objects in much the same way as physical ones, users will expect them to behave similarly in the digital space - our hunter-gatherer instinct is in full effect as we physically sift through objects that have either been read or are not relevant, in order to reveal the valuable info.
  • Contextual navigation: do all your users really need the ability to jump from one end of your website to the other at all times? Perhaps a more dynamic navigation element that adapts to suit the context of their location within your website is a better use of the screen real-estate, instead of inflexibly offering the same static set of choices regardless of their current page.

I multitouch myself

Multitouch is truly a fork in the road for website owners that won’t happen for a while, but will happen eventually as the technology becomes more pervasive. Consider this: mouse users have just a single point of interaction, whereas touchscreen users can have between 1 and 21 points of contact with the screen, depending on their flexibility (and degree of perversion).

The Tangible Web: Thoughts on Designing Websites for Touchscreens

Apple is forging ahead with user interfaces for octopi – can YOU afford to be left behind?

Granted, until multitouch becomes a standard feature across all touchscreen devices, any UI functions that take advantage of it will have to be luxuries, but it’s worth considering how much it potentially speeds up a user’s interactions with your website, and the interesting possibilities it opens up to designers.

Interaction via gestures is also an avenue to be aware of, e.g. flipping through a series of consecutive pages using a swipe of the hand. We see these types of gestures built into the operating systems of touchscreen devices, but how long before websites begin to take advantage of them?

The fold, and liquid vs fixed widths

Remember when I said forget about the fold and fixed widths? If you replied ‘yes’, then you’re obviously ignoring me. Forget about them. Mice were built for the vertically-emphasized nature of the web – scroll wheels and the pushing/pulling action of vertical scrolling were more natural with mice, therefore web interfaces evolved to emphasize vertical movement. In addition, the web was primarily consumed by desktop PCs and laptops, with their comparably standardized screen resolutions.

The Tangible Web: Thoughts on Designing Websites for Touchscreens

Bruce once said about liquid web layouts “Be formless. Shapeless, like water. If you put water into a cup, it becomes the cup.”He also beat wholesale ass.

Things are different now – with the rapid rise of web-capable smartphones, it’s like the wild west out there. Not only do the screen sizes differ across each handset manufacturer, but recent phones can display in either portrait or landscape modes! The upshot is that there are now too many possible screen resolutions for us to feasibly pick a reliable fixed width, and one solution is to adopt liquid layouts that conform to whatever sized screen the user is viewing our pages with.

An alternative is to start using *gasp* horizontal scrolling in web design, allowing touchscreen users to flip through information from left-to-right in much the same way as with a book. Heresy, I know, but hey, it’s a new world we’re living in, folks.

You put your right hand in, your right hand out…

Between 70 and 90% of the world’s population is right-handed, meaning that those with tablet computers are likely going to be holding the device with their left hand. It’s therefore entirely possible that we will see a shift in sidebar navigation placement from the left to the right, for quicker access than reaching all the way across the screen. Just sayin’.

In Conclusion

Touchscreens and the mobile web just made designers’ lives a lot more complicated, BUT it’ll be our creativity and ingenuity that sets the standards of the next generation of touchscreen and gesture-driven user interfaces. That’s like, some crazy Minority Report stuff – how cool is that?

Get on time success in 642-617 & 642-681 exams by using our latest and high quality 350-029 and other superb 650-296 exam pass resources of 642-067.