Understanding mobile design patterns

1,164 views
1,101 views

Published on

Understanding mobile

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,164
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Understanding mobile design patterns

  1. 1. UNDERSTANDINGMOBILE DESIGN PATTERNSERIK LARSSON, PLEXICAL@ERIKLARSSON
  2. 2. plexicalPLEXICAL.COM
  3. 3. DEFAULT THINKING
  4. 4. We look at the present througha rearview mirror;we march backwards into the futureMarshall McLuhan
  5. 5. MOBILE DESIGN PATTERNS 1. CONSTRAINTS 2. CAPABILITIES 3. ORGANIZATION 4. TOUCH
  6. 6. 1. CONSTRAINTS
  7. 7. 1. CONSTRAINTS
  8. 8. 1. CONSTRAINTS/SCREEN SIZE CONSTRAINTS SCREEN SIZE
  9. 9. 1. CONSTRAINTS/SCREEN SIZE 1024X768
  10. 10. 1. CONSTRAINTS/SCREEN SIZE 320 X 480
  11. 11. 1. CONSTRAINTS/SCREEN SIZE -80% LESS SCREEN REAL ESTATE
  12. 12. 1. CONSTRAINTS/SCREEN SIZE FOCUS IS ABOUT SAYING NO
  13. 13. 1. CONSTRAINTS/SCREEN SIZE
  14. 14. 1. CONSTRAINTS/SCREEN SIZE
  15. 15. 1. CONSTRAINTS/SCREEN SIZE
  16. 16. 1. CONSTRAINTS/SCREEN SIZE
  17. 17. 1. CONSTRAINTS/SCREEN SIZE KEEP IT SIMPLE STUPID
  18. 18. 1. CONSTRAINTS/NETWORKS & PERFORMANCE CONSTRAINTS NETWORKS & PERFORMANCE
  19. 19. 1. CONSTRAINTS/NETWORKS & PERFORMANCE 1 MB
  20. 20. 1. CONSTRAINTS/NETWORKS & PERFORMANCE USE IMAGE SPRITES TO GROUP MULTIPLE IMAGES INTO ONE
  21. 21. 1. CONSTRAINTS/NETWORKS & PERFORMANCE BUNDLE AND MINIFY JS AND CSS FILES
  22. 22. 1. CONSTRAINTS/NETWORKS & PERFORMANCE USE MICRO JS-LIBRARIES INSTEAD OF THE BIG ONES (IM LOOKING AT YOU JQUERY)
  23. 23. 1. CONSTRAINTS/NETWORKS & PERFORMANCE SCRAP BLOATED CSS GRID SYSTEM AND WRITE YOUR OWN
  24. 24. 1. CONSTRAINTS/NETWORKS & PERFORMANCE INVESTIGATE GREAT NEW CAPABILITIES SUCH AS CANVAS AND APPCACHE
  25. 25. 1. CONSTRAINTS/NETWORKS & PERFORMANCE REDUCE THE NEED OF IMAGES AND USE CSS3 NOW!
  26. 26. 1. CONSTRAINTS/NETWORKS & PERFORMANCE SPEED IS IMPORTANT
  27. 27. 1. CONSTRAINTS/LOCATION LOCATION
  28. 28. 1. CONSTRAINTS/LOCATION
  29. 29. 1. CONSTRAINTS/LOCATION 84% USE THEM AT HOME 80% USE THEM DURING MISC DOWNTIME 74% USE THEM WHILE WAITING 69% USE THEM WHILE SHOPPING 64% USE THEM AT WORK 62% USE THEM WHILE WATCHING TV 47% USE THEM DURING THEIR COMMUTE.
  30. 30. 1. CONSTRAINTS/LOCATION ONE EYEBALL AND ONE THUMB
  31. 31. 1. CONSTRAINTS/LOCATION
  32. 32. 1. CONSTRAINTS/TIME CONSTRAINTS TIME
  33. 33. 1. CONSTRAINTS/TIME
  34. 34. 1. CONSTRAINTS/TIME
  35. 35. 1. CONSTRAINTS/TIME VS
  36. 36. 1. CONSTRAINTS/TIME MOBILE APPS NEED TO ALIGN WITH SHORTER BURSTS OF USAGE.
  37. 37. 1. CONSTRAINTS/TIME JUST-IN-TIME APPS LASER-FOCUSED APPS THAT PROVIDE USERS WITH QUICK, UPDATED AND RELEVANT INFORMATION THROUGHOUT THE DAY
  38. 38. CONSTRAINTS SCREEN SIZENETWORKS & PERFORMANCE LOCATION TIME
  39. 39. 2. CAPABILITIES
  40. 40. 2. CAPABILITIES/LOCATION DETECTION CAPABILITIES LOCATION DETECTION
  41. 41. 2. CAPABILITIES/LOCATION DETECTION
  42. 42. 2. CAPABILITIES/LOCATION DETECTION
  43. 43. 2. CAPABILITIES/LOCATION DETECTION
  44. 44. 2. CAPABILITIES/LOCATION DETECTION
  45. 45. 2. CAPABILITIES/LOCATION DETECTION
  46. 46. 2. CAPABILITIES/LOCATION DETECTION
  47. 47. CAPABILITIESDEVICE ORIENTATION/ ACCELEROMETER
  48. 48. 2. CAPABILITIES/DEVICE ORIENTATION
  49. 49. 2. CAPABILITIES/DEVICE ORIENTATION
  50. 50. CAPABILITIESTOUCH INTERFACE
  51. 51. 2. CAPABILITIES/TOUCH
  52. 52. 2. CAPABILITIES/TOUCH
  53. 53. 2. CAPABILITIES/TOUCH
  54. 54. 2. CAPABILITIES/TOUCH
  55. 55. CAPABILITIESLOCATION DETECTIONDEVICE ORIENTATION TOUCH INTERFACE
  56. 56. 3. ORGANIZATION
  57. 57. 3. ORGANIZATION UNDERSTAND HOW AND WHY PEOPLE USE THEIR MOBILE DEVICES PRIORITIZE CONTENT RATHER THAN NAVIGATION PROVIDE RELEVANT OPTIONS FOR EXPLORATION SAY NO TO MAINTAIN FOCUS AND CLARITY
  58. 58. ORGANIZATIONMOBILE BEHAVIORS
  59. 59. 3. ORGANIZATION/MOBILE BEHAVIORS LOOKUP/FIND (URGENT INFO, LOCAL): I NEED AN ANSWER TO SOMETHING NOW OFTEN RELATED TO MY CURRENT LOCATION IN THE WORLD.
  60. 60. 3. ORGANIZATION/MOBILE BEHAVIORS EXPLORE/PLAY (BORED, LOCAL): I HAVE SOME TIME TO KILL AND JUST WANT A FEW IDLE TIME DISTRACTIONS.
  61. 61. 3. ORGANIZATION/MOBILE BEHAVIORS CHECK IN/STATUS (REPEAT/MICRO-TASKING): SOMETHING IMPORTANT TO ME KEEPS CHANGING OR UPDATING AND I WANT TO STAY ON TOP OF IT.
  62. 62. 3. ORGANIZATION/MOBILE BEHAVIORS EDIT/CREATE (URGENT CHANGE/MICRO-TASKING): I NEED TO GET SOMETHING DONE NOW THAT CAN’T WAIT.
  63. 63. ORGANIZATIONCONTENT, NOT NAVIGATION
  64. 64. 3. ORGANIZATION/CONTENT, NOT NAVIGATION
  65. 65. 3. ORGANIZATION/CONTENT, NOT NAVIGATION
  66. 66. ORGANIZATION OK, SO MAYBE SOMENAVIGATION IS NEEDED...
  67. 67. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  68. 68. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  69. 69. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  70. 70. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  71. 71. ORGANIZATION: NATIVE VS MOBILE WEBBACK BUTTONS
  72. 72. 3. ORGANIZATION/BACK BUTTONS
  73. 73. 3. ORGANIZATION/BACK BUTTONS
  74. 74. ORGANIZATION: NATIVE VS MOBILE WEBFIXED BOTTOM BARS
  75. 75. 3. ORGANIZATION/FIXED BOTTOM BARS
  76. 76. 3. ORGANIZATION/FIXED BOTTOM BARS
  77. 77. ORGANIZATIONSTAY FOCUSED
  78. 78. 3. ORGANIZATION/STAY FOCUSED
  79. 79. 3. ORGANIZATION/STAY FOCUSED
  80. 80. ORGANIZATION MOBILE BEHAVIORSCONTENT, NOT NAVIGATION OK, SO SOME NAVIGATION BACK BUTTONS FIXED BOTTOM BARS
  81. 81. 4. DESIGN FOR TOUCH
  82. 82. ABOUT 47 PERCENT OF APP USERS SAY THEY ARE MORE APT TO CLICK A MOBILE AD BY MISTAKE THAN THEY DO ON PURPOSE
  83. 83. MAKE SURE YOUR TOUCH TARGETS ARE POSITIONED CORRECTLY AND ARE OF CORRECT SIZE YOU NEED TO CONNECT THE APPROPRIATE TOUCHGESTURES TO THE OBJECTIVES OF YOUR APP OR WEBSITE
  84. 84. DESIGNING FOR TOUCHTOUCH TARGET SIZE
  85. 85. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE APPLE: 44X44 PTS WINDOWS: 9MM WITH 2MM DISTANCE MIT: 10-14MM
  86. 86. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  87. 87. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  88. 88. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  89. 89. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  90. 90. DESIGNING FOR TOUCHTOUCH POSITION
  91. 91. 4. DESIGNING FOR TOUCH/TOUCH POSITION
  92. 92. 4. DESIGNING FOR TOUCH/TOUCH POSITION
  93. 93. DESIGNING FOR TOUCHCORE TOUCH GESTURES
  94. 94. 4. DESIGNING FOR TOUCH/CORE GESTURES
  95. 95. DESIGN FOR TOUCH TOUCH TARGET SIZE TOUCH TARGET POSITION TOUCH CORE GESTURES
  96. 96. 1. CONSTRAINTS
  97. 97. 2. CAPABILITIES
  98. 98. 3. ORGANIZATION
  99. 99. 4. DESIGN FOR TOUCH
  100. 100. Q&A
  101. 101. THANK YOU!

×