Tapworthy ch4


Published on

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tapworthy ch4

  1. 1. TapworthyChapter 4
  2. 2. navigation modeThe three navigation models each have signature design silhouettes. From left to right: flat pages, tab bar, and treestructure.www.it-ebooks.info
  3. 3. Flat PagesA deck of cardsno hierarchy information
  4. 4. Flat Pagesof screens, particularly variations on the same relativelyScreens in ESPN ScoreCenter show a roundup of sports scores, with each“page”targeted to a different team orleague.Tap the gear icon to see the app’s settings.www.it-ebooks.info
  5. 5. Flat Pagesons on the same relativelynavigation model is a betterings while browsing throughhe standard page control,ttom of flat-page apps. Thepages in the collection, withour current position in theontrol gives your audiencene of several screens, and it’sft or right half of the controlxt screen—an alternative toup of sports scores, with each“page”targeted to a different team orttings.The presence of a page control signalsthat you’re browsing a collection offlat pages, with the highlighted dot
  6. 6. Flat PagesStriving for a no-scroll layoutPeople are most successfully at navigating thetouchscreen when moving in just onedimension; adding a second requires moreprecision and thus, more effort, from youraudience. Avoid it when you can.
  7. 7. Flat PagesProsIdeal for quick, focused content;suited for casual browsing ofscreensAdapts to variable number ofscreens with customized contentEasy to use; navigation relies onfamiliar swipe gestureLimited interface chrome; pagecontrol requires very little space,leaving lots of room for thecontent itselfConsMust swipe through the stackone page at a time; can’t jump toany screen other than immediateneighborsDoesn’t scale well to largenumber of screens; pageindicator limited to 20 dotsDoesn’t handle scrolling well,not good for lengthy contentUsers may overlook the smallpage indicator and miss app’sadditional screens
  8. 8. navigation modeThe three navigation models each have signature design silhouettes. From left to right: flat pages, tab bar, and treestructure.www.it-ebooks.info
  9. 9. Tab barUrbanspoon uses a tab bar to offer five different ways to approach a restaurant search.The screens for the Shake,Browse, and Scope tabs are shown here from left to right.www.it-ebooks.info
  10. 10. Tab barEach of the features behind the tabs behavesalmost like an independent appLet user choose among modes of operationtailored to specific features, information, oreven states of mind.5 buttons limit
  11. 11. Tab barAvoid the More button.When you sweep key navigation elementsbehind the More button’s curtain, you addmore than just an extra tap. You ask users toremember what operations are back there, abrain burden that might seem trivial and willinevitably cause those hidden features to gooverlooked and underappreciated.
  12. 12. Tab barthe More button. When you sweep key navigation elements behind thebutton’s curtain, you add more than just an extra tap. You ask users to re-screen lists the tabs thaton the tab bar. Here, the Newes app offers section-specificrom its More screen (left).Tap-ction name in that screen takesist of articles from that section.e the tab-bar icons by tappingutton (circled), which revealsew (right) that lets you dragrite sections to the tab bar.www.it-ebooks.info
  13. 13. Tab barProsOne-tap access to allof the app’s mainfeaturesClearly labeledmenu advertisesprimary features,shows currentlocationConsOnly 5 tabs can bedisplayed at onceAbsorbs significantscreen space on all(or most) screens ofthe app
  14. 14. navigation modeThe three navigation models each have signature design silhouettes. From left to right: flat pages, tab bar, and treestructure.www.it-ebooks.info
  15. 15. Tree structureTree-structure apps use the same file/category structure that we use to organize our desktop computers.The columnview of Mac OS X (top) matches up conceptually and visually to tree-structure apps.The built-in Mail app lets youdrill down to an individual mail message the same way you would drill down through folders on the desktop.Tap anaccount, then a mailbox, then a message to finally see its details.Tree Structure: Let 1,000 Screens Bloom 111
  16. 16. Tree structurebasic text-based list, table viewsthe content itself is control
  17. 17. Tree structurethat resembles the iPhone Home screen. The approach is not only graphical andfamiliar but also highlights that Facebook (as both platform and iPhone app) isreally a collection of mini-apps comprising news, contacts, messages, calendarevents, and more. This main-screen arrangement may look different than the pre-vious list-based examples, but it’s the same underlying organizational structure.A list of primary features leads to lists of content, and you keep tapping to drilldown through these structured layers. (For more about Facebook’s design
  18. 18. Tree structureFacebook (top) uses icons in its main screen to represent the app’s primary features.The built-in Photos app (bottom)uses thumbnail images to represent individual photos in the album view.Tree Structure: Let 1,000 Screens Bloom 113
  19. 19. Tree structureProsScales well for large numbers ofcategories, features, and itemsFamiliar outline organization iseasily understoodDirect interaction with content isintuitive and limits interfacechromeList-based display adapts wellfor user-customized categoriesConsPrimary features are listed onlyon top-level screen, unlike tabbar’s always-on displayInefficient switching amongmain features or categories; youhave to surface to top levelbecause drilling down again