infoMapclose
Contact Us
tenfour home
Aug
06

Swiping, Scrolling & Lateral Navigation Trends  

Soon after the birth of my daughter, my first iPhone proved to be indispensable. With this *magical* gadget I was able to operate and navigate any program one-handed while holding my sleeping baby … typically with one thumb.

The action of dragging a finger across a screen to interact, or to ‘swipe’, is just one motion in the larger haptic and gesture revolution that is sweeping product interface design.

Frank Chimero eloquently highlighted that the classic paper-based scrolls – which Apple based the metaphor for an ever-expanding vertical canvas – should have gone the other way based on the horizontally formatted Dead Sea Scrolls. This was effectively illustrated by publishing the post on Duane King’s laterally expanding blog: Thinking For A Living.

Have mobile touch devices reminded designers that there is another direction to flick? Is it just more natural to think of content in chunks that are somewhat equal in importance and placed sequentially from left to right? Whatever the motivation, users across the globe appear to be keeping up with interaction designers (or vice versa) as more lateral motions are baked into our digital experiences.

Here is run-down of six common uses of lateral motions:
(1) “Boldly Going…” – exploration/browsing of unknown content
    Online photo galleries and blogs leverage lateral navigation to present new content that users are not familiar with:

    CoolIris photo plug-in creates extremely fluid lateral thumbnail catalogs:

    Flipboard iPad app flicks horizontally between dynamic feed-based magazine layouts:

    Netflix suggestions expand to the right:

    eBook readers such as the Kindle and Stanza simulate animated page turns:

(2) “Bread Crumbs” – illustrating where you have been

    Pandora‘s long-tail presents what has been heard and leaves what’s to come a mystery:

(3) “Divide & Conquer” – known segmentation of unknown content
    Tweetdeck allows users to organize microblogging status updates by lists, searches, and networks in chosen column order:

    NPR’s iPad app organizes the news in known segments with older stories in a stream to the right:

    Full text stories can be flicked left/right to dive into the previous/next:

    The BBC iPad app organizes vertical rows of sections that scroll sideways; selected stories appear on the right:

    Plurk’s literal stream never really caught on:

(4) “Present & Accounted For” – known segmentation of known content
    iTunes, among other of the ‘coverflow‘ knock-offs laterally organize familiar items (songs) within known segments (albums):

    The same goes for photos in an album or chapters on a DVD:

(5) “Slip & Slide” – interface controls
    Mobile devices, like the iPhone and Droid series use the basic swipe to initiate a session:

    Swiping within apps does not produce standard results even within the same device. On Apple’s standard mail utility on iPhones, swiping across a message is a short-cut to deleting it. In contrast, using the standard Twitter/Tweetie app on the same device provides a short-cut for engaging the tweet by making it a ‘favorite’, finding out more about the author, or emailing it:

    Most commonly across mobile devices, flicking is becoming the way to navigate all of the key applications and offerings on a phone. This is consistent across the Nexus (RIP), Droids, iPhone, and even the forthcoming Windows Phone 7:

(6) “Spoon Feeding” – carousel tours
    It appears that every large web portal received the memorandum on including an auto advancing thumbnail/news viewer.

    Here we have Yahoo’s

    then MSN’s:

    and lonely old AOL:

I’m sure to have missed some of the other common categories of use. Feel free to use the comments to correct me and expand the conversation.
.dtwood
(cc) baby iPad photo by umpcportal.com

Tell Me Something Good...