Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tapworthy ch3


Published on

  • Be the first to comment

Tapworthy ch3

  1. 1. TapworthyChapter 3
  2. 2. Rule of ThumbThe iPhone is sized perfectly for use in a singlehand, allowing your thumb to sweep easilyfrom one corner to the other with only amodest stretch.
  3. 3. Rule of ThumbWhile a thumb can manage to sweep the entire screen, only about a third of thescreen is in truly effortless territory—at the side of the screen opposite the thumb.For a comfortable ergonomic experience, you should place primary tap targets inthis thumb-thumping hot zone. (We’ll focus for now on right-handed users, buthang in there, lefties, we’ll get to you in a sec.)
  4. 4. Rule of ThumbOnly 1/3 of the screenis in effortless territory.That’s why toolbarsand tab bars always goat the bottom edge ofthe iPhone screen.While a thumb can manage to sweep the entire screen, onlyscreen is in truly effortless territory—at the side of the screeFor a comfortable ergonomic experience, you should place pthis thumb-thumping hot zone. (We’ll focus for now on righhang in there, lefties, we’ll get to you in a sec.)
  5. 5. Rule of ThumbLesser used buttonsand those that makechanges to data can betucked safely always attop right.Making accidentalchanges less of pages. Our limited thumbspan, however, flips that convention on its head.Navigation and primary tap targets sink to the bottom on the iPhone. This tapzone gives you hints about how to organize the visual hierarchy of tap targets.Frequently used buttons and navigation tabs should occupy the bottom left ofthe screen, while lesser used buttons and those that make changes to data can betucked safely away at top right. The Edit button for changing, deleting, or reorder-ing list items, for example, is conventionally placed at top right, putting it in easyview but also in an isolated and relatively difficult spot to tap, making accidentalchanges less likely.Let your thumb point the way in laying out your screens according to the mostcommon use cases for your app. Twitterrific, an app for Twitter users, organizesits buttons according to this thumb-thinking hierarchy. The two left toolbar iconsrespectively refresh and post tweets, reflecting the two most common Twitter-The standard iPhone toolbar (left) andtab bar (right) always go at the bottomedge of the iPhone screen in convenientthumb-tapping range.To-do list appThings (left) puts the Edit button at topright safely out of accidental tap range.At right,YouTube’s left-edge videothumbnails are chunky tap targets inthe hot zone of right-handed users.
  6. 6. Full-width buttonWhen space allows, full-width controls are theway to go.In interface design as in politics, sometimes it’s better just to meet in the middle.Many standard iPhone controls, including buttons and list items, span the entirewidth of the screen, an equal-opportunity layout for both left and right thumbs.When space allows, full-width controls are the way to go—an important reason,for example, that wide buttons are cooked into the layout of action sheets, theFull-width buttons, like the ones in the standard action sheet (left) or theWordCrasher and Epicurious apps, make foreasy tap targets no matter what hand you’re using.Rule of Thumb 61
  7. 7. Full-width buttonBig chunky buttons not only give clearguidance to users, they also provide can’t-misstap targets no matter what hand you’re using.
  8. 8. The magic number is 44How big is big enough when it comes toiPhone tap target?
  9. 9. The magic number is 44the size of a fingertip? Apple pegs it precisely at 44 pixels and this measure ap-pears reliably throughout the standard iPhone controls. In portrait orientation,44 pixels is the height of buttons in the Calculator app, of the keys of the iPhone’svirtual keyboard, of items in a standard list display, of the screen-topping naviga-tion bar, and the list goes on. (With the iPhone’s 163 ppi screen resolution, 44pixels is about 7mm, or just a hair over ¼ inch.)
  10. 10. The magic number is 44Buttons inside the standard navigation bar, forexample, are only 29 pixels high, but their taparea extends to the full 44 pixel height of thenavigation bar.gation bar. Even if you tap just above or below the button, it stilllong as you’re still inside the navigation bar. Likewise, taps im-eft or right are treated as taps on the button itself. Even thoughally smaller, its tappable footprint honors the 44-pixel mini-e button effectively larger than its outline this right by providing a whole stable of standard controlstandard height (you’ll explore these built-in views and controlshapters). When you use Apple’s prefab navigation bar, toolbar, orapp, its controls automatically use these finger-friendly dimen-g navigationmuch largert.The active taphere and spanavigation bar,he title text.-bottom tabas that extendab bar’s visible
  11. 11. The magic number is 44In the keyboard, keys are 44 pixels tall but only30 pixels wide - similarly, in landscape view,the buttons are 44 pixels wide but 38 pixelshigh.The practical minimum size for any tap targetis 44 x 30.
  12. 12. The magic number is 44ww
  13. 13. The magic number is 44Go with that flow, at least loosely. You don’t have to rigidly stick to aligning everyngle element to a 44-pixel grid. In fact, you can’t, since the iPhone’s 320 × 480imensions don’t round neatly to 44, and some of the built-in controls like the tabar at screen bottom veer into slightly different sizes. Instead, the point is that the
  14. 14. Don’t crowd meThe iPhone’s standard tab bars ensurescomfortable spacing by limiting app designersto 5 tabs, no crowding allowed.le’s standard controls help you do the right thing. For example,ses a standard tab bar at screen bottom to switch between modesrating system automatically spaces them out for you and limitsb bar ensureslimiting app—no crowdinge than five,y four of them,hich takes younal options, aswYorkTimesuggest limitings, as shown
  15. 15. Don’t crowd meIf you must place targets near the tab bar ortoolbar, make sure they’re large enough to hiteasily.specially important to give fingers some breathing room at the bottom of theen. Usability testing reveals this to be a clumsy area prone to mistaps whenets are placed too close to an app’s tab-bar navigation. The frustration isobal App and Skype both includekeypads with buttons that pressp against the tab bar. Call Globalmakes things especially difficultking the adjacent buttons narrowugh to hit, with frequent missedWhen you want to see your bal-a mistaken tap sweeps you awayapp’sWorld Call screen. In Skype, the problem is less pronouncedse the big buttons are tough toDon’t Crowd Me 65
  16. 16. The glance testWhen you hold them at arm’s length and still soak uptheir info effortlessly.Clarity trumps density.You don’t have to reveal all your information in oneshot.Every onscreen element comes with a cognitive costfor your users. It takes longer to scan the screen,longer to absorb the possible options, longer to figureout what you’re supposed to do.
  17. 17. The glance testbar lets you choose the type of tweets you’d like to view in yourAs always, the goal is to keep your interface visually uncomplicahow complex your app may be. Limit interface chrome, but hideyou have to. Give all of your features and controls a hard look bethem in your design to make sure they’re really tapworthy. If theQuickoffice (lein popover mein the main tosimilarly reveabar when youFilter icon at fa