Multi-touch will change everything

For years, web designers have been working within a firmly established jig. Books have been published, studies have been conducted and businesses have been built on a handful of fundamental interface design principles. Many of these rules have been written based on the understanding that a mouse will be serving as the primary tool in carrying out the user’s will. What happens if this lowest common denominator for user interface design is replaced with a finger tip? Multi-touch technology will soon change the web more CSS3 or even HTML5.

evolution

Mouse Clicks VS Finger Tips

If I squint, I can get my mouse pointer accurate down to a single pixel. The tip of my right index finger measures 30px X 40px. That makes my finger 1200 times less precise than my mouse pointer. Does that mean that multi-touch technology is a step backwards? No. After all, user interface design is all about making things easier and more natural. Multi-touch does this by removing the middle man, in this case a mouse & cursor. Any gripe people have with multi-touch as it grows won’t be because they miss carefully positioning a mouse pointer to click a link. It will be because web designers have crammed too much on a page, or made link buttons too small for fingers to easily tap.

Scrolling VS Zooming & Tapping

Until now, websites have moved vertically, like a filmstrip, through a browser window. This specific linear method of engaging content has made a web designer’s job relatively easy. Counting on the fact that users are limited to scrolling from top to bottom while viewing the entire width of the page, important items can be placed at the top of the page (above the fold) while additional content can be arrayed below, or in a sidebar. With multi-touch, DIVs are the new fold. Being able to tap on a section to zoom in will allow users to focus only on the content they want to see. This quadrant based page browsing will make skipping over uninteresting content & advertisements much easier.

Multi-touch VS Mobile VS Standard

These are two very different areas of interface design that have a lot in common. Many of my iPhone apps already cater to finger tips with their big buttons & super simple navigation. So this begs the question, do we need to design a mobile and a multi-touch version of a website? I don’t think so. I think the core structure of what the regular version of a website will need to adapt to fit fingertips, which means everything will have to be redone, re-imagined... re-figured out.

A Change in Posture

During the Apple Keynote, Steve Jobs wasn’t hunched over a desk pecking characters into a keyboard. He was sitting on a couch, casually flipping through content on his iPad. To an extent, web design has been all about what we want users to see and when. We’ve been orchestrating the user-experience from click in to click out. With multi-touch the tables have turned. With a brand new set of gestures, users will be calling the shots as they tap, swipe, pinch and zoom. It will now be up to the web design community to study up & do their best to follow along.

Ads by Fusion

20 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Travis Gertz

    This makes a lot of sense. On client sites, we’re starting to make it a factor when designing things like navigation.

    If a mobile-optimized version of the site isn’t in the budget, at least we can make the standard site usable on those platforms with some simple changes to standard elements (eg, slightly bigger buttons, no drop-downs, etc).

    • Trent

      Agreed, Travis. I’ll be honest, I can’t yet picture what a multi-touch friendly site should look like exactly, but I’m looking forward to trying to figure that out.

  • David Arnold

    I agree, for small devices like the iPad it makes sense and the price of touch screens in general are dropping. however I think this will have a very slow adaption rate. More so for people who work online versus consumers.

    I use dual monitors on a daily basis and at the moment I can sit back in my chair, consume text, and barely move my arm/hand to have my mouse get me where I want to go. This may sounds lazy but it would take a lot more effort to sit up and use my hands to tap on the screens. Waaay more arm work. I can picture this working better if my screens were built flat into my desk like the old packman tables.

    The good news is that as designers/developers if we start to implement touch type functionality in our projects then it will just make it that much easier for standard mouse users.

    • Trent

      For me, I kind of like the idea of being more active while on the computer. Sure, pointing at a vertically oriented screen on a desk could get tiring, but maybe that needs to change as well.

      Oh, and I love that last point. There is never any harm in making a website easier to use. Thanks for stopping by, Mr. Arnold.

  • Allen Tan

    I suspect it will involve more than bigger display targets. For the first time we can no longer assume the presence of a mouse.

    This means no dropdown menus on hover, no displaying important information on hover, things that follow or track your cursor, and so on. Because it may not be there.

    Being able to zoom in and pan around also means modal boxes are going to pose a serious usability issue.

    I think this is a big enough issue to warrant a good deal of thought and consideration, I posted a response on my own blog: here but this will need ongoing adjustment.

    • Trent

      Allen, very true about those hovers & modal boxes. @Davatron5000 shared this link with me today, which shows how the Chrome OS tablet UI might accommodate hovers and action items. I really like this shot and wonder if a subtle version of that would work for standard link hovers, appearing just above your fingertip.

    • David Arnold

      A lot of UI experts argue that drop down menus should always be on click/touch. If a lot of companies feels they NEED drop downs (amazon, walmart, etc...) then maybe all drop down functionality will start moving towards “onClick/touch”.

  • Travis Neilson

    Trent,
    With all the excitement (positive or negative) going on about the iPad on the web, mostly in the form of people prematurely predicting its dominance or eventual obscurity, its good to read an article that has a thoughtful line of reasoning.

    On launch day, my co worker leans in and asks if I think I would get one. I replied that this is not a product for me as I strictly use desktop devices (excluding even laptops.) Also, that the iPad was more of a end-user type product whereas I function as a creator, and in that capacity an iPad would be of little use to me.

    His reply was that the iPad itself as a device is inconsequential, but that the direction it pulls us all in — that of a multi-touch world — has large implications. “imagine sitting here on your 24″ and working” he says, “you use your mouse any keyboard like you do, then when its time to go to a meeting you just pop that sucker off and take it with you to give a presentation on it.”

    His big-view way of thinking is why I like this article. I never considered until now, that drop down menus are going to be as old school as table-based layouts.

    Oh and P.S. I love the way you can comment on individual user comments like that in this layout. Excellent idea.

    • Trent

      That office/presentation scenario is a pretty darn good example. Also, I’m glad to get your perception on the slant of this post... that’s what I was going for.

  • Travis Neilson

    Do you find, Trent, that your response-on-the-right format for the comments encourages conversation or stunts it? I love theway you can relate to each comment personally but it feels kind of final-word-ish. Do many of your guests respond after you comment on their comment, to get a conversation going like that? Or does it turn out you usually end the conversation with your reply? I am just wondering.
    I love it for reviewing purposes, gone are the ‘@dude, blah blah’ replies.

    • Trent

      Good question- I’m not sure. My initial thought was to make it easy to track replies vertically. I wouldn’t want to send a final word vibe out. I wonder if being able to self-reply or start a new comment is sufficient. I’m always open to ideas.

    • Travis Neilson

      I am not suggesting either way, just bringing up the question. Wondering for my own information, more accurately. As a visitor, the most logical way for me to respond to your response, is to click the reply link under my own comment. Is that your intention? What after that? Can you reply to your own reply?
      I really like this medhod you have here, I am quite jealous.

      • Trent

        I think that’d work well, though there is definitely no wrong place to comment!

  • Arron Davies

    Interesting stuff I always enjoy your posts.

  • ken

    i agree with the notion that we’re moving towards a more human friendly and casual relationship with computers.

    but given the “innacuracy” of our hands doesn’t mean things should be made bigger to accomodate them. rather we have a long history of creating our own tools to be more precised. i.e. pencils, rulers, etc. these types of customary devices should be incorporated but hands should not be excluded.

    i agree with allen tan about the future being large screens i too posted about emerging physical interfaces a while back here and here. it seems obvious to me that in future workspaces it will resemble the drafting rooms of days past (i.e. microsoft sustainability )

    these are exactly the types of discussions that need to be had, and creators of not only web content need to anticipate retihinking how users interact, but creative software companies, adobe, autodesk, etc. need to as well.

    thanks.
    Ken

    • Trent

      Ken, I hadn’t thought about incorporating / creating tools like pencils or rulers before. Stuff like that alongside a drafting desk posture could really make the virtual work we do feel more natural and tangible. Cool stuff & thanks for commenting.

    • Allen Tan

      Ken, you’ve just touched on a pet love of mine. =) Have you heard about SLAP widgets? The idea of having individual tools, each with a specialization - pencils for sketching, keyboards for typing, etc, as physical, tangible objects that can be put away is very appealing to me. I suspect, though, that even if they exist in the future, these will be confined to “specialists”, the way Wacom tablets are for computer illustrators today. Everyday people will prefer an experience without having to drag along a cumbersome set of tools.

      And then there’s the possibility of digitizing and abstracting these tools. Steve Jobs argues that a blank surface allows for a far richer, and more adaptable set of interfaces, and I have to agree. (Word suggestions on a keyboard is a good example.) It’s a tradeoff between tangibility and flexibility (and convenience), I think, and perhaps digital versions of rulers and keyboards will prove to be worth the tradeoff.

  • Marylynn Lablue

    the economy and also the lack of firms willing to invest in their ınternet sites and upgrades. Web sites are Crucial to a business’s success so there will always be a will want for wonderful internet websites, currently most businesses are channeling their dollars elsewhere.

  • Peter Diseris

    @ DAVID ARNOLD ” I can picture this working better if my screens were built flat into my desk like the old packman tables.”

    Can you imagine though how sore our necks would get by constantly looking down?

    This is raising an ergonomic issue, which I can appreciate as I already experience pain from hours spent working on a computer. I see a distinct separation between workstation based systems, and consumer multi-touch devices which I don’t see merging into one unified approach. I don’t see a pointer device disappearing completely (from workstation based systems at least) - I perhaps see screens acting as a tablet with a pen becoming more of a standard like a Wacom Cintiq-21ux - http://www.wacom.com/cintiq/cintiq-21ux.php.

    Our work-based system could end up like in the movie ‘Minority Report’, but that raises an issue of possible RSI injury extending to the arms and shoulders and not just the mouse hand (which I now experience).

    Although I now work as an interactive art director, this left-field point of view or focus comes from my background in Industrial Design study and an early interest in ergonomics, which explains my diversion from the main topic. I though it would be interesting to discuss the factor of human interaction and ergonomics with devices of the future.

    What do you think?

Leave a Reply