Designing a mobile application? Look at these design patterns for primary and secondary navigation. All the images from the book are included plus dozens of new examples. http://www.mobiledesignpatterngallery.com

1. By Theresa Neil
O’Reilly Media, March 2012
Chapter 1:
Navigation Patterns
Take a look at the images from
the book +70 new examples
Get Started
www.MobileDesignPatternGallery.com Follow me on Twitter @mobilepatterns

2. Primary Navigation Patterns
Springboard List Menu Tab Menu Gallery
Dashboard Metaphor Mega Menu

3. Navigation: Springboard from the book
Facebook Ovi Maps Norton Masters
irregular layout

4. Navigation: Springboard from the book
Trulia LinkedIn NewsRoom Yahoo!Mobile
w/ multiple pages

5. Navigation: Springboard from the book
PayPal Gowalla
Personalized Springboards

6. Navigation: Springboard updates & extras
Evernote Hello Flipboard Net-A-Porter WorldMate
also uses a mega
menu

7. Navigation: Springboard updates & extras
Craiglist Evernote Google Plus Pages
circular with summary data with drill down

8. Navigation: Springboard updates & extras
SCVNGR mobli Google Docs rdio
personalized

9. Navigation: Springboard updates & extras
New York Times- The Scoop Outdoor Navigation MultiTexter
circular

10. Navigation: List Menu from the book
Valspar Paint Kayak BlackBoard Mobile Learn Zoho CRM
enhanced list

11. Navigation: List Menu from the book
RadioTime Cozi Amazon MP3 Stratus

12. Navigation: List Menu updates & extras
Facebook
tap to reveal menu

13. Navigation: List Menu updates & extras
Path
pan to reveal menu

14. Navigation: List Menu updates & extras
Shows Android Photo Editor Slacker Radio

15. Navigation: List Menu updates & extras
Reeder Lapse It Any.DO

16. Navigation: Tab Menu from the book
Jamie Oliver’s Recipe Library Molome Starbucks BlueMobile
bottom tabs scrolling bottom tabs

17. Navigation: Tab Menu from the book
Harvest TimeTractor Fring foursquare HitPost
scrolling top tabs top tabs

18. Navigation: Tab Menu updates & extras
Pintrest Pose Instagram Zaarly
tab menus with overloaded
command buttons

19. Navigation: Tab Menu updates & extras
Steam MagicHour Screencast Recorder
top tabs

20. Navigation: Gallery from the book
BBCNews pulse PictureIt

21. Navigation: Gallery from the book
dwell flickr

22. Navigation: Gallery updates & extras
Gowalla Evernote Meals LinkedIn
also uses mega menu

23. Navigation: Gallery updates & extras
Distill QuickPic
itookapicture

24. Navigation: Dashboard from the book
Mint ego Flex 4.5 Showcase

25. Navigation: Dashboard updates & extras
Gaug.es baconreader PageOnce

26. Navigation: Dashboard updates & extras
daily burn Windows Mobile FedEx

27. Navigation: Metaphor from the book
Awesome Note Aidiko Reader

28. Navigation: Metaphor from the book
DoItTomorrow TripJournal
Cellar

29. Navigation: Metaphor updates & extras
DJ iPhone Beats by Bjango

30. Navigation: Metaphor updates & extras
Tap’n’Scratch Apple Cards

31. Navigation: Metaphor updates & extras
Out of Milk iBook Square

32. Navigation: Mega Menu from the book
Facebook Walmart

33. Navigation: Mega Menu updates & extras
Flipboard
drill down in the mega menu

34. Navigation: Mega Menu updates & extras
Google Maps News360

35. Navigation: Mega Menu updates & extras
LinkedIn

36. Secondary Navigation Patterns

37. Secondary Navigation from the book
all of the primary patterns can be used in combination w/each other
ANZ Jamie Oliver’s Recipes- Android
tabs + springboard tabs + list

38. Secondary Navigation from the book
all of the primary patterns can be used in combination w/each other
Bills Jamie Oliver’s Recipes- iOS
tabs + dashboard tabs + tabs

39. Secondary Navigation updates + extras
all of the primary patterns can be used in combination w/each other
runtastic BodyMedia
scrolling top tabs + tabs + dashboard
dashboard

40. Secondary Navigation updates + extras
all of the primary patterns can be used in combination w/each other
Etsy Liquor Cabinet streamzoo
tabs + gallery tabs + metaphor custom tabs +
personalized sprinboard

41. Navigation: Page Carousel from the book
Nigella Zappos Yahoo finance
using paging indicators (little dots)

42. Navigation: Page Carousel from the book
iMobile Excellent Analytics
too many pages

43. Navigation: Image Carousel from the book
IMDb Flex 4.5 Showcase App
flick to see more images/content

44. Navigation: Image Carousel from the book
Photo Cookbook
Scrap n’ Tap
carousel style coverflow style

45. Navigation: Image Carousel from the book
ANZ
demos nice, but gets tedious

46. Navigation: Image Carousel extras
Adobe Carousel
Google Music
same issues as ANZ- offer an
alternate option for navigating
content

47. Navigation: Inline Expand from the book
Android Call Log

48. Navigation: Inline Expand from the book
Gap Mobile Web Example

49. Navigation: Inline Expand updates & extras
Android Downloads

50. Next Chapters Mobile Design Pattern Gallery
UI Patterns for Mobile Apps
2 Forms
3 Tables
4 Search, Sort & Filter sample chapter on Smashing
5 Tools (coming soon)
6 Charts
7 Invitations sample chapter on UXBooth
8 Feedback & Affordance
0
9 Help The eBoo k is Only $1
THD
with cou pon code AU
10 Anti-Patterns
www.MobileDesignPatternGallery.com Follow me on Twitter @mobilepatterns
Buy Now