The Tangible Web: Thoughts on Designing Websites for Touchscreens

Categories Articles, iPhone, Web Design

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

Captain Hook on touchscreens: "I don't see the difference"
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).

Your customers (and octopi) are patiently waiting for multi-touch
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.

Bruce Lee knows about web screen resolutions. And kicking wholesale ass.
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.

Jason Amunwa
Jason Amunwa (@king_jaffy) is a marketing consultant and designer at JaffyDesigns in San Diego, CA. He writes for marketing blog The Zest, loves talking tech and marketing strategy, and is suspicious of helicopters.
  • Great post, the one thing I would have to question is the no hover on buttons in the dropdown section. There is a hover like effect currently with the iphone when they introduced the text selection (You hold your finger on the screen for a second and the selection initiates). That same principle can apply to dropdown’s and slide-out Navigation elements on touchscreens.

    Great post, thanks!!

  • Thanks, Dimi!

    I know what you’re talking about, and I named this a ‘Pop-open’, since it’s initiated by a long press on the screen – meaning you still have to have contact with the screen in order to initiate the menu’s appearance, whereas with a mouse, this simply was triggered by the location of your cursor. The way that current dropdown navigation menus behave when viewed by a touchscreen user is that the user can only click on the visible portion of the menu – since there’s no ‘hover’ behavior, there’s no way to trigger the menu.

    I absolutely agree that the long press is a viable method of revealing more information/UI elements, though.

  • User interfaces should be user friendly especially on the touch screens because sometimes people don’t like have to wait for too long especially when they are busy. They just want an instant result. Anyways this is a great post. hope to see more soon.

  • Very interesting article. I liked how you mentioned right hand users thing. I always love to see navigation on right side. This already applies to blogs where most of them have sidebar on right. Very nice read!

  • nice article, the future is here touchscreen, 3d and more so getting websites ready according to it would be fun.

  • Very interesting article and I do agree with your last statement, I do also feel that the sidebar on most sites will shift to the left side of a website. Great look into the future of design.

  • Great to see more non-desktop centric design articles!

    There are several other workarounds like using javascript to trigger a dropdown onclick instead.

    Some browsers (notably Safari) also in some circumstances only trigger the hover event on the first click, and cancels the click event if the target element has been changed. That way a dropdown is expanded on first click, and either a link in the submenu or the main link can be clicked.

    I don’t think we should bury the dropdown just yet.

  • Nice article, very inspiring. I see the future with holographic displays rather than touch screens. They should be developed in less than 10 years from now.

  • Joe

    Good article, I think there will be period when interface design for the web becomes more concerned with touch devices. The first thing we can do to ease access is increase the size of buttons and ensure margins are placed between links rather that pad them out. A lot of touch devices do support hover and I think drop down menus could easily be made more compatible with a few hover states and a little javascript to hold them open.

  • Well start thinking about this more, because it’s getting real. Don’t know if that’s good or bad…

  • Thanks all, I’m glad you liked it – it’s something that’s been on my mind as clients started to ask me whether their websites would be ‘iPad-compatible’.

    @Waheed Akhtar & @Lucas Cobb: Yes, I think the elimination of the fold as more users make the jump to touchscreens will definitely open up our placement options for navigation. Plus, I can definitely see more engaging “Hunt and gather” experiences appearing – check out http://www.biobak.nl for a glimpse. Just amazing work.

    @Nikunj & @Inspiration Feed: Yes, I think the age of the touchscreen will be quite short – we can already see the seeds of the Minority Report virtual interface in the gesture-type commands that Apple and others have already implemented into their OSes. This, paired with Augmented Reality and the recent push to bring 3D into the home (thanks to Sony) will really kickstart the shift of web design from 2D to 3D. Then all bets are off, navigation-wise; my crystal ball gets a bit cloudy from there on out. =)

  • David Turk

    Sorry Jason, this is partly old news for me.

    Having worked on interactive touch screens since the early 1990’s, the ones that were around then were not portable, but the large information kiosks like found in shopping centres, museums, libraries, art galleries and the like, I already knew about these points you outlined…

    Both “Things are going to get bigger” and “Dropdown and gimme 20”.

    Sure those interactive touch screens were not Web based, but made with Macromedia Director (now Adobe Director), however it it all blending into one design and development blob now. ie Adobe Director takes on Web properties, Web takes on Adobe Director properties.

    That design and development blob has taken 15+ years to occur, and is still morphing as we speak.

    However one area where interactive touch screens, as in the large information kiosks types, have only recently changed and this is before Apple caught up with the same notion, was with Microsoft Surface back in 2008, hence covering the “I multitouch myself” aspect.

    See: http://www.youtube.com/watch?v=Zxk_WywMTzc

    Where interactive touch screens, as in the large information kiosks types, are not necessarily going to ever change is in the “The fold, and liquid vs fixed widths” aspect.

    It’s more likely that “The fold, and liquid vs fixed widths” and the other aspects you list, as in the form of an iPad, will actually destroy large interactive touch screens instead.

    ie Museums, libraries, art galleries may simply provide an iPad to use for the visitor instead of installing a few large interactive touch screens anymore.

    Moving forward, and on the flip side there is one user interaction you forget to mention, that also won’t appear in large interactive touch screens as you will see, but that Web designer and developers need to grab with both hands, and that’s…

    “Shake, Rattle and Roll”.

    The “Shake, Rattle and Roll” Web designer and developers need to grab with both hands comes courtesy of the Accelerometer as found in the iPhone/iPad.

    What can a Website do when you shake it, etc? I will leave that as a lead in for your next article, that I await to read with great interest :)

    Note: I have left out one other user interaction possibility, as it’s not in the hands of anyone yet, and that’s the iPhone V4 Three-axis gyro. I may even hazard a guess as to what heading that might come under…

    “Position, Position, Position”.

    I would be happy to share with you the future that I have seen in regards to that possibility if you want me to post more on it.

  • @David Turk Thanks David, these are actually really great points! It’s funny you bring them up, because while writing the post, I was thinking that this is nothing that ATM/Cash machine UI designers don’t know about.

    You’re absolutely right that this isn’t rocket science – but with the rapid spread of the interface among mobile, web-connected consumers, these are an entirely new set of considerations that have very abruptly popped up for web designers within the last 6-12 months, when it became clear that touch and mobile were like Peas n’ Carrots.

    I also love your point about Shake, Rattle and Roll =) – once websites begin tapping into these functions (that I believe are currently only recognized by the OS), we’re going to see some incredible user experiences.

    I had thought about something similar, which was the additional environmental variables that mobile introduces to the user equation, e.g. does your design’s color scheme contrast well in high/low light conditions, can the type be read easily when you’re standing on a rumbling subway train, etc. – but at that point I was pushing 1200 words for the post, and had to end it somewhere! =) One thing’s clear, and that’s that this topic requires much more in-depth exploration/experimentation.

  • “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?”

    It’s already happening. Go to deviantART with an iPad ( http://www.deviantart.com ), and tap an image. You can swipe left or right to view the next or previous image. Also, the top of the site (where the navigation is) takes touchscreens into account, so that you can tap a drop down that also has a link in it’s press area, and the link activation takes 2 hits, triggering the drop down takes 1. This way, drop downs work on touchscreens.

  • Really interesting article. I agree with scrolling horizontal though. It’s only natural like a book. Though I think about people who read right to left, do you think that will cause a problem at all?

    Good article!

  • @Zack You’re right! In which case, the answer to my question is that this shift to accommodating touchscreeners is happening around us right now, so we all need to be taking this into account with the very next website we design. Thanks for the example!

    @Hillary Interesting question – personally, I think that it’s possible we’ll see the expansion of personal preferences determining the configuration of website layouts. As a fictional example, let’s say I’m a left-hander, so I’m more comfortable with the navigation on the left-hand side. We see this right now in sites like iGoogle’s modular layout, and drag/drop widgets. What’s relatively new is that the infrastructure is now in place to enable that preference to follow me around the web (hello, Facebook!), enabling websites to re-arrange and reconfigure themselves to my specific preference when I visit them – there won’t be just one website design any more; there will be as many as the number of visitors that go there.

  • nice introduction to the issue of this new interactive paradigms, we’ve been experimenting with them here: http://www.micc.unifi.it/projects/multi-user-environment-for-semantic-search-of-multimedia-contents/ is a thesis developed in adobe air by two students

  • Very interesting article! It raised a lot points that, as a web designer, I’ve yet had the demand to consider. Shameful, but I’m likely not alone in that statement.

    Methinks the long-put-off update of my own website will the be perfect playground to get my hands dirty with these very points, and see what I find!

  • @Gianpaolo Thanks for sharing, that looks amazing – do you have a video you can show us of this interface in action?

    @jhoysi Don’t be ashamed – it’s very easy to be focused only on what the your clients are demanding here and now. Can’t hurt to pull your nose off the grindstone to see what’s coming down the road, every once in a while!

  • David Turk

    Continuing on from my last post;

    “Position, Position, Position”.

    That line is a joke there if you didn’t get it. The clear one is from what many real estate agents say in regards to the most important part of selling from their perspective, however the maybe not so clear one is…

    “Position, Position, Position” being “Z Axis, X Axis, Y Axis”, which is what the iPhone V4 three-axis gyro will offer.

    How will we make use of it? Well you did mention “Augmented Reality” so let me expand on it and let you into my crystal ball, but first I must say…

    “Hurry up Apple and bring the three-axis gyro to the iPad!” (We must all scream for them to do that. Seriously once you have read the below you may wonder why it wasn’t in version one of the iPad.)

    So now onto one real world example that I have seen, maybe it is being used in other places so you can see as well, I am not sure, but guess what? It’s back to the large information kiosks types that I mentioned in my last comment.

    At my local city Museum you can grab one of these devices, it is locked down to the floor, but you can swing it about with a reasonable degree of movement. And when you do the screen content changes to what you are pointing at.

    In this case Fauna of many different types. The room is fully of stuffed animals, stuffed animals as in life like dead Museum type stuffed animals!

    So when you swing this device around it knows when you are pointing at a certain stuffed animal and shows info on that stuffed animal.

    It’s pretty basic, but it works, so when the iPad gets the three-axis gyro, imagine a trip to the Museum then!

    With GPS and the three-axis gyros, Museums could do away with all fixed labelling information for all their displays and just give everyone an iPad for their visit.

    Bang! The most amazing “Killer use for the iPad with three-axis gyro” would just about change the world.

    As everything in the real world would have more information linked to it from the cyber world than you can ever imagine.

    When the iPad gets three-axis gyros, I foresee many people out on the street holding their iPads up to many different landmarks to get the inside information on that landmark, and whatever else designers and developers create for real world location.

    Remember you read it here, so hurry up Apple and make it possible :)

    On a side note, the thing that someone points an iPad at doesn’t have to be some landmark, it could be just a spot on a wall.

    You know those historic building markers that say something like “This stone was placed here by the honourable, etc, etc.”

    Well with a three-axis gyro iPad/iPhone, you could point it at the spot on the wall and get a video, where available, of this stone being placed for the newly built building at that time.

    So history comes alive anywhere/everywhere you want it.

    It really goes much further than that doesn’t it? Yes, some more crystal ball gazing can be found in the documentary “Avatar: Creating the World of Pandora”.

    This is where I saw how the virtual world and the real world become as one.

    James Cameron has the tech in his hands now for making movies of the level of Avatar, but when can we have the same tech for us?

    But first I should say what it is… The first aspect is this massive real world performance capture system, that brings the real world into the digital world.

    Actors wearing suits that have markers so an array of cameras surrounding that part of the set to bring what they perform into the digital world. To make real actors into cyber ones.

    This is not something new, it has been around since “Lord of the Rings” came to the big screen, if not before, however James has taken it to the next level with performance capture of the face.

    But the next bit of tech is ground breaking, and that’s the “Virtual Camera”. Where with the tech highlighted above was about bringing the real into the cyber world, the “Virtual Camera” is about the reverse.

    The Virtual Camera is a system where the camera person or director sees both normal real world vision through the “Lens”, but also coupled with the cyber world interwoven into one continuous stream of motion.

    Sure it’s only a movie production aid at this time, and the 3D cyber vision is maybe not much better than a wireframe, but let the tech improve and let it escape into Web designer and developers hands one day and you will see a whole new window open.

    A possible window is where life on the Internet can been seen moving around the real world.

    It might take more than an iPad, it might need to be a special pair of Glasses we all start wearing.

    Actually that window is somewhat open now in a way, but it still has yet to make an impact on most of us, although for a while it seemed it might run wild, and that is something called Second Life. Some may say “That was Second Life”, but it’s too early to call and end to it just yet.

    http://secondlife.com/

    http://www.theage.com.au/digital-life/digital-life-news/second-life-in-second-incarnation-20100610-xyep.html

    Whatever happens to Second Life, one thing is for sure the cyber world and the real world are merging. Some would say the blending started not long ago, and we just don’t know it yet.

    But ask yourself, as Web designer and/or developers, which pill will you choose, the red pill or the blue pill? Who knows, but just be prepared to fasten your seat belt Dorothy, ’cause Kansas is going bye-bye.

  • @David Good stuff! Looks like you have the makings of your own blog post on the topic right there =)

  • David Turk

    @Jason, it’s not my primary goal in life, it may end up being so by accident.

    BTW I saw these linked articles and thought they were something your readers should be aware of in light of this discussion…

    http://www.theage.com.au/technology/the-future-is-now-20100619-yo2q.html

    http://www.theage.com.au/technology/get-them-to-the-geeks-how-film-showed-the-way-20100619-yo59.html

  • We definitely need a way to differ between right and left handed users! :p

  • Good article, but bit poor on solutions.
    No mention of Sencha Touch in this article, how inconsiderate…
    Jason, please investigate your topic first.

    twitter.com/tatran

  • In the case of the iPad, perhaps turning the device upside down toggles the device between left hand and right hand usage? (e.g. the navigation either floats to the left or the right of the screen depending on vertical position).

  • @Lupino Thanks for sharing this, it looks really cool!

    Obviously I’m not going to know the exact solutions to all these touchscreen issues (I’d probably be worrying more about how to spend the gigantic pile of money given to me as a result of my obvious awesomeness). This article is intended more as thought-starters for designers, rather than technical frameworks or coding techniques. Perhaps that’ll be fodder for another post!

    @Gene & @Luis It’s possible that with your personal preferences starting to follow you around online like a puppy (the great Jay Baer’s words, not mine), you may not have to even TELL the website to switch its configuration – it’ll just know that you’re left/right-handed, and adjust itself as necessary!

  • Pete Austin

    The most important issue is “discoverability”. When designing a page for touch, we will need to be very careful to make clickable icons and links obvious.

    For example, users can easily scan a mouse across a Web page, checking for links that reveal themselves by changing appearance. But nobody will want to rub their fingertip all over a touch screen.

  • @Jason we’re going to publish the video in a month becuase we made an article for a conference and we are not allowed to show it now, anyway you can see a lot of things we mad in natural interaction in the this section of our lab: http://www.micc.unifi.it/category/projects/natural-interaction/

  • Hi Jason,
    Really nice post. I bought Ipad couple weeks ago and it was lost fun. But now I’m actually thinking about webdesign that works well on the Ipad. that’s staying ahead of the curve. Thanks

  • as a person that was born in the mid 80’s I say this:

    “we live in the past”

    of course that I highly welcome websites that will work
    nicely with touchscreens. It’s about time that we’ll evolve and be a part of the sophisticated human race.

    Thanks for a great post :)

  • @Jason,

    sorry for the delay, we sent our work to ACM Multimedia 2010 conference and then until the conference we can’t put the video, we’ll update the page in a month

  • @Gianpaolo No problem – looking forward to seeing it when you finally unveil it!