Lateral Navigation Trend Analysis

1

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.

Frank-Chimero-TFAL-480x318.png.scaled980

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 the 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:
YanGross-Screen-shot-2010-08-02-at-3.14.37-PM-480x318.png.scaled980

CoolIris photo plug-in creates extremely fluid lateral thumbnail catalogs:cooliris1-480x382.jpg.scaled980

 

Flipboard iPad app flicks horizontally between dynamic feed-based magazine layouts:FlipBoard--480x360.png.scaled980 

Netflix suggestions expand to the right:netflix-suggestions-480x312.png.scaled980 

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

photo.jpg.scaled980 

(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:
pandora-sample-480x265.png.scaled980 

(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:
TweetDeck-Screen-shot-2010-08-03-at-11.14.42-AM-480x300.png.scaled980 

NPR’s iPad app organizes the news in known segments with older stories in a stream to the right:
NPR-iPad-app-1-480x360.png.scaled980 

Full text stories can be flicked left/right to dive into the previous/next:NPR-iPad-app-2-480x360.png.scaled980 

The BBC iPad app organizes vertical rows of sections that scroll sideways; selected stories appear on the right:BBC-iPad-App-480x360.png.scaled980 

Plurk’s literal stream never really caught on:Plurk-Screen-shot-2010-08-03-at-3.02.20-PM-480x300.png.scaled980 

(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):Coverflow-UI-480x277.png.scaled980 

The same goes for photos in an album or chapters on a DVD:iphoto-web-gallery-carousel-480x394.png.scaled980 

(5) “Slip & Slide” – interface controls

Mobile devices, like the iPhone and Droid series use the basic swipe to initiate a session:

 iphone-unlock.png.scaled980

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:
Tweetie-swipe.jpg.scaled980 

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:WP7c-480x290.jpg.scaled980WP7b-480x222.jpg.scaled980 

(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:
Yahoo.png.scaled980 

 then MSN‘s:
MSN_Screen-shot-2010-08-03-at-11.28.48-AM-480x269.png.scaled980 

 and lonely old AOL:AOL.png.scaled980

 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.

 

baby iPad photo courtesy of umpcportal.com

Share.

About Author

My name is Daniel T. Wood. I am an experience strategist working in Portland, Oregon. I primarily write about digital trends including user experience, technology, culture and marketing. I can be reached at daniel@MIRA.agency

1 Comment

  1. 4 years later, lateral navigation trends have grown to include:

    – the divisive ‘hamburger’ menu
    – swiping of cards to dismiss (Google Now, et.al)
    – swiping for quick yes/no, hot/not ratings (Tinder, et.al)
    – swiping between feature modes (Facebook, et.al)

Leave A Reply