Understanding mobile design patterns

  • 903 views
Uploaded on

Understanding mobile

Understanding mobile

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
903
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UNDERSTANDINGMOBILE DESIGN PATTERNSERIK LARSSON, PLEXICAL@ERIKLARSSON
  • 2. plexicalPLEXICAL.COM
  • 3. DEFAULT THINKING
  • 4. We look at the present througha rearview mirror;we march backwards into the futureMarshall McLuhan
  • 5. MOBILE DESIGN PATTERNS 1. CONSTRAINTS 2. CAPABILITIES 3. ORGANIZATION 4. TOUCH
  • 6. 1. CONSTRAINTS
  • 7. 1. CONSTRAINTS
  • 8. 1. CONSTRAINTS/SCREEN SIZE CONSTRAINTS SCREEN SIZE
  • 9. 1. CONSTRAINTS/SCREEN SIZE 1024X768
  • 10. 1. CONSTRAINTS/SCREEN SIZE 320 X 480
  • 11. 1. CONSTRAINTS/SCREEN SIZE -80% LESS SCREEN REAL ESTATE
  • 12. 1. CONSTRAINTS/SCREEN SIZE FOCUS IS ABOUT SAYING NO
  • 13. 1. CONSTRAINTS/SCREEN SIZE
  • 14. 1. CONSTRAINTS/SCREEN SIZE
  • 15. 1. CONSTRAINTS/SCREEN SIZE
  • 16. 1. CONSTRAINTS/SCREEN SIZE
  • 17. 1. CONSTRAINTS/SCREEN SIZE KEEP IT SIMPLE STUPID
  • 18. 1. CONSTRAINTS/NETWORKS & PERFORMANCE CONSTRAINTS NETWORKS & PERFORMANCE
  • 19. 1. CONSTRAINTS/NETWORKS & PERFORMANCE 1 MB
  • 20. 1. CONSTRAINTS/NETWORKS & PERFORMANCE USE IMAGE SPRITES TO GROUP MULTIPLE IMAGES INTO ONE
  • 21. 1. CONSTRAINTS/NETWORKS & PERFORMANCE BUNDLE AND MINIFY JS AND CSS FILES
  • 22. 1. CONSTRAINTS/NETWORKS & PERFORMANCE USE MICRO JS-LIBRARIES INSTEAD OF THE BIG ONES (IM LOOKING AT YOU JQUERY)
  • 23. 1. CONSTRAINTS/NETWORKS & PERFORMANCE SCRAP BLOATED CSS GRID SYSTEM AND WRITE YOUR OWN
  • 24. 1. CONSTRAINTS/NETWORKS & PERFORMANCE INVESTIGATE GREAT NEW CAPABILITIES SUCH AS CANVAS AND APPCACHE
  • 25. 1. CONSTRAINTS/NETWORKS & PERFORMANCE REDUCE THE NEED OF IMAGES AND USE CSS3 NOW!
  • 26. 1. CONSTRAINTS/NETWORKS & PERFORMANCE SPEED IS IMPORTANT
  • 27. 1. CONSTRAINTS/LOCATION LOCATION
  • 28. 1. CONSTRAINTS/LOCATION
  • 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. 1. CONSTRAINTS/LOCATION ONE EYEBALL AND ONE THUMB
  • 31. 1. CONSTRAINTS/LOCATION
  • 32. 1. CONSTRAINTS/TIME CONSTRAINTS TIME
  • 33. 1. CONSTRAINTS/TIME
  • 34. 1. CONSTRAINTS/TIME
  • 35. 1. CONSTRAINTS/TIME VS
  • 36. 1. CONSTRAINTS/TIME MOBILE APPS NEED TO ALIGN WITH SHORTER BURSTS OF USAGE.
  • 37. 1. CONSTRAINTS/TIME JUST-IN-TIME APPS LASER-FOCUSED APPS THAT PROVIDE USERS WITH QUICK, UPDATED AND RELEVANT INFORMATION THROUGHOUT THE DAY
  • 38. CONSTRAINTS SCREEN SIZENETWORKS & PERFORMANCE LOCATION TIME
  • 39. 2. CAPABILITIES
  • 40. 2. CAPABILITIES/LOCATION DETECTION CAPABILITIES LOCATION DETECTION
  • 41. 2. CAPABILITIES/LOCATION DETECTION
  • 42. 2. CAPABILITIES/LOCATION DETECTION
  • 43. 2. CAPABILITIES/LOCATION DETECTION
  • 44. 2. CAPABILITIES/LOCATION DETECTION
  • 45. 2. CAPABILITIES/LOCATION DETECTION
  • 46. 2. CAPABILITIES/LOCATION DETECTION
  • 47. CAPABILITIESDEVICE ORIENTATION/ ACCELEROMETER
  • 48. 2. CAPABILITIES/DEVICE ORIENTATION
  • 49. 2. CAPABILITIES/DEVICE ORIENTATION
  • 50. CAPABILITIESTOUCH INTERFACE
  • 51. 2. CAPABILITIES/TOUCH
  • 52. 2. CAPABILITIES/TOUCH
  • 53. 2. CAPABILITIES/TOUCH
  • 54. 2. CAPABILITIES/TOUCH
  • 55. CAPABILITIESLOCATION DETECTIONDEVICE ORIENTATION TOUCH INTERFACE
  • 56. 3. ORGANIZATION
  • 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. ORGANIZATIONMOBILE BEHAVIORS
  • 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. 3. ORGANIZATION/MOBILE BEHAVIORS EXPLORE/PLAY (BORED, LOCAL): I HAVE SOME TIME TO KILL AND JUST WANT A FEW IDLE TIME DISTRACTIONS.
  • 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. 3. ORGANIZATION/MOBILE BEHAVIORS EDIT/CREATE (URGENT CHANGE/MICRO-TASKING): I NEED TO GET SOMETHING DONE NOW THAT CAN’T WAIT.
  • 63. ORGANIZATIONCONTENT, NOT NAVIGATION
  • 64. 3. ORGANIZATION/CONTENT, NOT NAVIGATION
  • 65. 3. ORGANIZATION/CONTENT, NOT NAVIGATION
  • 66. ORGANIZATION OK, SO MAYBE SOMENAVIGATION IS NEEDED...
  • 67. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  • 68. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  • 69. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  • 70. 3. ORGANIZATION/OK, SO SOME NAVIGATION...
  • 71. ORGANIZATION: NATIVE VS MOBILE WEBBACK BUTTONS
  • 72. 3. ORGANIZATION/BACK BUTTONS
  • 73. 3. ORGANIZATION/BACK BUTTONS
  • 74. ORGANIZATION: NATIVE VS MOBILE WEBFIXED BOTTOM BARS
  • 75. 3. ORGANIZATION/FIXED BOTTOM BARS
  • 76. 3. ORGANIZATION/FIXED BOTTOM BARS
  • 77. ORGANIZATIONSTAY FOCUSED
  • 78. 3. ORGANIZATION/STAY FOCUSED
  • 79. 3. ORGANIZATION/STAY FOCUSED
  • 80. ORGANIZATION MOBILE BEHAVIORSCONTENT, NOT NAVIGATION OK, SO SOME NAVIGATION BACK BUTTONS FIXED BOTTOM BARS
  • 81. 4. DESIGN FOR TOUCH
  • 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. 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. DESIGNING FOR TOUCHTOUCH TARGET SIZE
  • 85. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE APPLE: 44X44 PTS WINDOWS: 9MM WITH 2MM DISTANCE MIT: 10-14MM
  • 86. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  • 87. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  • 88. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  • 89. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
  • 90. DESIGNING FOR TOUCHTOUCH POSITION
  • 91. 4. DESIGNING FOR TOUCH/TOUCH POSITION
  • 92. 4. DESIGNING FOR TOUCH/TOUCH POSITION
  • 93. DESIGNING FOR TOUCHCORE TOUCH GESTURES
  • 94. 4. DESIGNING FOR TOUCH/CORE GESTURES
  • 95. DESIGN FOR TOUCH TOUCH TARGET SIZE TOUCH TARGET POSITION TOUCH CORE GESTURES
  • 96. 1. CONSTRAINTS
  • 97. 2. CAPABILITIES
  • 98. 3. ORGANIZATION
  • 99. 4. DESIGN FOR TOUCH
  • 100. Q&A
  • 101. THANK YOU!