User interface design for thumbs and fingers

2,680 views
2,488 views

Published on

This is a talk given at Boston mobile camp on user interface design for touch devices. The talk has a focus on iPhone, iPad and other touch based devices.

Published in: Technology, Art & Photos

User interface design for thumbs and fingers

  1. 1. Designing  interfaces   for  thumbs  and  fingers Greg  Raiz      @graiz Disclosure, duplication, or use of the document, or any of its contents, for purposes other than those authorize by Raizlabs without the written permission of Raizlabs is prohibited. © Raizlabs Corporation 2011. All Rights Reserved.Wednesday, February 23, 2011
  2. 2. We’ve  come  a  long  way Photo: Telefon AB LM Ericsson February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 2Wednesday, February 23, 2011
  3. 3. Hand  held  interfaces February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 3Wednesday, February 23, 2011
  4. 4. A  lot  has  changed Nokia  1100 BlackBerry  6710 iPhone  1st  Gen February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 4Wednesday, February 23, 2011
  5. 5. What’s  new? • We’re  more  connected – We  always  have  internet • AdapBve  Screen – Use  every  pixel • LocaBon – GPS,  Compass • End-­‐user  apps – Non-­‐technical  users  are  installing  apps February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 5Wednesday, February 23, 2011
  6. 6. Designing  for  mobile 1. Physical     2. Typing  and  Tapping 3. Reading  Content 4. LocaBon 5. Context February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 6Wednesday, February 23, 2011
  7. 7. 1.  Physical February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 7Wednesday, February 23, 2011
  8. 8. 2.  Input  ConsideraBons One  Hand  Free No  Hands  Free February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 8Wednesday, February 23, 2011
  9. 9. 3.  Reading  ConsideraBons February 18, 2011 Know  anyone  like  this? Raizlabs © 2010 • Proprietary and Confidential 9Wednesday, February 23, 2011
  10. 10. 4.  LocaBon  LocaBon  LocaBon • AcBonable  Proximity • Designing  for  someone  who’s  not   in  front  of  their  desk   February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 10Wednesday, February 23, 2011
  11. 11. Design  for  locaBon • Home • Work • Car/Bus/Subway • Walking • Restaurant • Shopping • School • Bathroom February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 11Wednesday, February 23, 2011
  12. 12. 5.  Context  around  youWednesday, February 23, 2011
  13. 13. 5.  Object  Context February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 13Wednesday, February 23, 2011
  14. 14. The  phone  is  not  a  PC Design  pa[erns   that  work  on  a  PC   may  not  work  on  a   touch  phone   February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 14Wednesday, February 23, 2011
  15. 15. Mobile  vs.  Desktop Mobile Web/Desktop 14-­‐18pt  fonts  typical 10-­‐12pt  fonts  typical Large  hit  targets  60-­‐100px Hit  targets  16-­‐32px  square OpBmize  for  640x960 OpBmize  1024x768 AcBons: AcBons: Tap Click Tap  Hold Right  Click Swipe Double  Click Pinch Click  Drag Rotate Shake February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 15Wednesday, February 23, 2011
  16. 16. Visual  Design • Use  large  presentaBon  fonts Back Title Done search • Use  large  finger  Bp  size   S Al Smith targets Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith Favorites Recents Contacts Keypad VoicemailWednesday, February 23, 2011
  17. 17. Minimize on-screen elements Quantity, not sizeWednesday, February 23, 2011
  18. 18. Wednesday, February 23, 2011
  19. 19. Make things easy to tapWednesday, February 23, 2011
  20. 20. Wednesday, February 23, 2011
  21. 21. Common  Controls • Bu[on • Slider • Picker/Spinner • Tabs • NavigaBon • *  Lists  * February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 21Wednesday, February 23, 2011
  22. 22. Lists  and  NavigaBon February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 22Wednesday, February 23, 2011
  23. 23. 1  screen  1  task February 18, 2011 Raizlabs © 2010 • Proprietary and ConfidentialWednesday, February 23, 2011
  24. 24. Yes!  But  users  don’t  want  to  dig February 18, 2011 Raizlabs © 2010 • Proprietary and ConfidentialWednesday, February 23, 2011
  25. 25. Wire framing an iPhone Application Also called storyboarding and pencil prototypingWednesday, February 23, 2011
  26. 26. Basic List Pattern • We use wireframes to Back Title Done tell a story of how the Al Smith interface is used. Ben Smith – Keep it simple Carl Smith – Less is more Dave Smith – Use established Eric Smith design patterns Fred Smith when possible Greg Smith Hal Smith Jane Smith Favorites Recents Contacts Keypad VoicemailWednesday, February 23, 2011
  27. 27. Basic List Secondary Action Al Smith Al Smith Ben Smith Ben Smith Carl Smith Carl Smith Dave Smith Dave Smith Eric Smith Eric Smith Fred Smith Fred Smith Greg Smith Greg Smith Hal Smith Hal Smith Jane Smith Jane Smith Alphabetical long lists Searchable Al Smith Ben Smith Al Smith Carl Smith Ben Smith Dave Smith Carl Smith Eric Smith Dave Smith Fred Smith Eric Smith Greg Smith Fred Smith Hal Smith Greg Smith Jane Smith Hal Smith Jane SmithWednesday, February 23, 2011
  28. 28. Basic Table Pattern • Tables are grouped into logical Back Settings sections • Each table cell is usually one of the Name Required following: Password Required – Text field – Label with details arrow Status Good – Label with status and arrow Wi-Fi Not Connected – Label with toggle Sound • Use a short descriptive footer to Location provide additional help Auto-lock • Each grouping is usually connected logically Advanced Configuration Use text descriptions to make the application betterWednesday, February 23, 2011
  29. 29. Multi-line List Pattern • Use the multi-line pattern to give Back Messages Done users a peek at what may be in the details page. Al Smith 10:23pm This is a short message that Im writing to tell • This uses up more vertical space so you that the thing you thought you did was… Ben Smith 10:10pm dont use it if you expect a lot of I cant believe you didnt tell me you where going to be in town. I just talked to Peter… scrolling. Carl Smith 9:13pm • Email is a good example where you Did You get the message about the meeting Next Wednesday? I think we should take… usually read from the top and Dave Smith 7:25pm decide if you want details. Hey! Nice presentation. Before we sign the contract, let’s get a head start on the wire… Eric Smith 5:19pm Should we order some pizzas? There’s a lot to do before we can ship this app, and we want… Fred Smith 5:13pm I’m the finance minister of a remote island nation with a proposition for you. Please se…Wednesday, February 23, 2011
  30. 30. Show Interaction Edit Title Edit Title • The editing pattern allows you to add, Al Smith Al Smith edit and delete items from a list Ben Smith Ben Smith Delete • Consider Carl Smith Carl Smith supporting the swipe delete Dave Smith Dave Smith action Eric Smith Eric Smith Fred Smith Fred Smith Greg Smith Greg Smith Hal Smith Hal Smith Jane Smith Jane Smith Swipe to delete gesture Favorites Recents Contacts Keypad Voicemail Favorites Recents Contacts Keypad VoicemailWednesday, February 23, 2011
  31. 31. Landscape Example Al Smith Ben Smith Carl Smith Dave Smith • For certain applications landscape may make sense • In this view the keyboard takes almost 50% of the space when shownWednesday, February 23, 2011
  32. 32. Are you sure? • Simple modal UI to make decisions • Located near the thumb area, easy to tap. Al Smith 10:23pm This is a short message that Im writing to tell you that the thing you thought you did was… • Quickly present a couple choices Ben Smith 10:10pm I cant believe you didnt tell me you where going to be in town. I just talked to Peter… Are you sure you want to delete? Delete Archive CancelWednesday, February 23, 2011
  33. 33. Progress Indicators • There are three types of progress Title commonly used. – Title bar or tool bar spinner such as in email. You can keep working. – Heads up display spinner. You have to wait and we dont know how long. – Panel progress. You have to wait but we can tell you how far along we are. Downloading 2 of 4Wednesday, February 23, 2011
  34. 34. More  Wireframes  Online Free version: bit.ly/WireframeFree Pro version coming soon bit.ly/WireframeProWednesday, February 23, 2011
  35. 35. Mobile WebWednesday, February 23, 2011
  36. 36. Wednesday, February 23, 2011
  37. 37. Wednesday, February 23, 2011
  38. 38. Wednesday, February 23, 2011
  39. 39. Mobile  Web  Basics • Can’t  pinch/zoom  with  one  hand • Detect  mobile  browsers • If  you  have  the  content  the  hard  part  is  done February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 39Wednesday, February 23, 2011
  40. 40. Expect  the  unexpected • No  network • Touch  is  not  the  same  as  Click • Calls  and  Text  messages • Region  Differences February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 40Wednesday, February 23, 2011
  41. 41. Tablets  are  Touch February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 41Wednesday, February 23, 2011
  42. 42. Hand-­‐held February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 42Wednesday, February 23, 2011
  43. 43. Top  Tablet  Areas • Magazine  /  Content – Flipboard  /  Wired   • Field  data  collecBon • Field  sales  tool • Augmented  TV  experience • Games February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 43Wednesday, February 23, 2011
  44. 44. ‘Coffee  Shop’  usability • Usability  out  in  the  real  world • Shoulder  surfing • Recruit,  install,  observe  over  coffee • Fast  iteraBon   February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 44Wednesday, February 23, 2011
  45. 45. Thank You Gregory Raiz graiz@raizlabs.com Follow me @graizWednesday, February 23, 2011
  46. 46. Slides  not  cujng  it? If  you  missed  the   presentaBon  and  would   like  to  hire  Raizlabs  to   give  this  talk  please   contact  us. graiz@raizlabs.com February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 46Wednesday, February 23, 2011
  47. 47. About  Raizlabs • Based  in  Boston • A  growing  team  of  10  developers  /  designs • Developed  over  40  mobile  applicaBons – 30  iPhone  ApplicaBons – 5  Android  ApplicaBons – 5  iPad  ApplicaBons – Plus  many  prototypes • Diverse  experience  in  mulBple  facets  of  mobile   strategy  design  and  development  . February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 47Wednesday, February 23, 2011
  48. 48. Raizlabs  Domain  Experience • Mapping  technology • Social  networking  tools • Audio  applicaBons • E-­‐commerce • GEO-­‐locaBon  tracking • Field  data  collecBon  and  calculaBon • Magazine  and  book  content  presentaBon • ApplicaBon  deployment • Enterprise  apps February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 48Wednesday, February 23, 2011
  49. 49. MulBple  Plakorms • ExperBse  in  leading  mobile   plakorms: – Android – iPhone/iPad • App  creaBon  targeBng   mulBple  plakorms – Common  web  APIs  to  Be   mobile  apps  together • Learn  more  at  Raizlabs.com February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential 49Wednesday, February 23, 2011

×