• Save
Tapworthy ch4
Upcoming SlideShare
Loading in...5

Tapworthy ch4






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Tapworthy ch4 Tapworthy ch4 Presentation Transcript

  • TapworthyChapter 4
  • navigation modeThe three navigation models each have signature design silhouettes. From left to right: flat pages, tab bar, and treestructure.www.it-ebooks.info
  • Flat PagesA deck of cardsno hierarchy information
  • 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
  • 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
  • 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.
  • 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
  • navigation modeThe three navigation models each have signature design silhouettes. From left to right: flat pages, tab bar, and treestructure.www.it-ebooks.info
  • 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
  • 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
  • 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.
  • 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
  • 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
  • navigation modeThe three navigation models each have signature design silhouettes. From left to right: flat pages, tab bar, and treestructure.www.it-ebooks.info
  • 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
  • Tree structurebasic text-based list, table viewsthe content itself is control
  • 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
  • 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
  • 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