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.

Hampton's 6 Rules of Mobile Design

3,532 views

Published on

  • Be the first to comment

Hampton's 6 Rules of Mobile Design

  1. 1. @hcatlin
  2. 2. 6 Rules of Mobile Design
  3. 3. • Challenge of Mobile (Web)• Understanding Mobile• Hampton’s 6 Rules of Mobile• Design Process Example
  4. 4. Types of Designersgraphic software ui
  5. 5. Types of Designersgraphic software ui
  6. 6. Types of Designersgraphic software ui
  7. 7. Types of Designersgraphic software ui
  8. 8. Types of Designersgraphic software ui
  9. 9. Types of Designersgraphic software ui
  10. 10. Aka: My shit is ugly, but usable and scalable
  11. 11. The Challenge of Mobile
  12. 12. Mobile Usage is Increasing 11 8.25 %age of browsing thatoccurs on a mobile device 5.5 2.75 0 Jan-09 June-09 Jan-10 June-10 Jan-11 June-11 Jan-12 June-12 gs.statcounter.com
  13. 13. Challenge
  14. 14. Understanding Mobile
  15. 15. Mobile Users• Usually Distracted• ~3-5 minutes• Half at Home, Half on the Go• So Much More Variety
  16. 16. Primary Primary Goal Mode Location Purchase Home orEcommerce Demand Specific Item Journey Message aSocial (A) Demand Moving Friend Get SocialSocial (B) Browse Waiting Updates Games Waste Time Browse Waiting Depends onReference Learn A Fact Demand Content
  17. 17. 6 Rules of Mobile Design
  18. 18. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.
  19. 19. “Good design is as little design as possible” - Dieter Rams’ 10th Rulehttp://en.wikipedia.org/wiki/File:Designer-Dieter_Rams-at-Vits%C5%93.jpg
  20. 20. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.
  21. 21. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevity
  22. 22. Comprehension
  23. 23. Brevity
  24. 24. Simplicity
  25. 25. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevity
  26. 26. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value proposition
  27. 27. Core Value Proposition
  28. 28. What do people do onWikipedia while on the go?
  29. 29. What do people do onWikipedia while on the go? READ
  30. 30. What do people do onWikipedia while on the go? READ and edit
  31. 31. “Hey, I can’t remember who invented the television?”
  32. 32. “Hey, I can’t remember who invented the television?” 1. Open browser
  33. 33. “Hey, I can’t remember who invented the television?” 1. Open browser 2. Google “television”
  34. 34. “Hey, I can’t remember who invented the television?” 1. Open browser 2. Google “television” 3. Click on Wikipedia link
  35. 35. “Hey, I can’t remember who invented the television?” 1. Open browser 2. Google “television” 3. Click on Wikipedia link 4. READ
  36. 36. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value proposition
  37. 37. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value propositionIV. "Where?" is more important than "who?"
  38. 38. HOME TRANSITBARS TOILET
  39. 39. HOMEBARS TOILET
  40. 40. BARS TOILET
  41. 41. BARS
  42. 42. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value propositionIV. "Where?" is more important than "who?"
  43. 43. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value propositionIV. "Where?" is more important than "who?"V. Assume terrible dexterity
  44. 44. http://screamingargonaut.files.wordpress.com/2010/01/all-thumbs.jpg
  45. 45. http://thechive.files.wordpress.com/2011/06/drunk-guy.jpeg
  46. 46. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value propositionIV. "Where?" is more important than "who?"V. Assume terrible dexterity
  47. 47. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value propositionIV. "Where?" is more important than "who?"V. Assume terrible dexterityVI. The footer is a dead zone
  48. 48. It’s all about the header, baby!
  49. 49. Design Process Walkthrough
  50. 50. !
  51. 51. !
  52. 52. Enter Term Previous Search Flow “Search” “Go”Search Result List ? Read! New Article?
  53. 53. Mobile Search Flow Enter Term “Search”Search Result Read! List
  54. 54. Sushi
  55. 55. Checkit!
  56. 56. Dictionary!
  57. 57. Dictionary!• Native Application• English Language Dictionary• #1 in the app store forever• 8,685,404 Users• 5,054 New Users TODAY
  58. 58. Goals
  59. 59. Goals• Goal: I have a word I want to look up and then leave
  60. 60. Goals• Goal: I have a word I want to look up and then leave• Requires
  61. 61. Goals• Goal: I have a word I want to look up and then leave• Requires • No data, on device
  62. 62. Goals• Goal: I have a word I want to look up and then leave• Requires • No data, on device • Search as you type
  63. 63. Goals• Goal: I have a word I want to look up and then leave• Requires • No data, on device • Search as you type • Fuzzy Search
  64. 64. Goals• Goal: I have a word I want to look up and then leave• Requires • No data, on device • Search as you type • Fuzzy Search • QUICK
  65. 65. Dictionary!
  66. 66. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value propositionIV. "Where?" is more important than "who?"V. Assume terrible dexterity.VI. The footer is a deadzone
  67. 67. SurpriseAnnouncement!
  68. 68. libsass
  69. 69. Aaron Leung@ akhleung
  70. 70. Design
  71. 71. Design• C interface, C++ internals
  72. 72. Design• C interface, C++ internals• Statically linkable
  73. 73. Design• C interface, C++ internals• Statically linkable• Small(ish)
  74. 74. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface
  75. 75. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST
  76. 76. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST• Sass 3.1 Features
  77. 77. Development• Sponsored by Moovweb• 6+ months in• Used in production• More features than we expected• Adapters Needed!
  78. 78. Benchmarks!4s3s2s1s0s Project A Project B Sass SassC
  79. 79. 1.0 Release!
  80. 80. 1.0 Release!• Supports Bourbon Fully
  81. 81. 1.0 Release!• Supports Bourbon Fully• Been in Production for 4 months
  82. 82. 1.0 Release!• Supports Bourbon Fully• Been in Production for 4 months• http://github.com/hcatlin/libsass
  83. 83. 1.0 Release!• Supports Bourbon Fully• Been in Production for 4 months• http://github.com/hcatlin/libsass• https://github.com/andrew/node-sass
  84. 84. 1.0 Release!• Supports Bourbon Fully• Been in Production for 4 months• http://github.com/hcatlin/libsass• https://github.com/andrew/node-sass• Compass Support Coming!
  85. 85. GO FORTH AND ADAPTERIZE!
  86. 86. My missing collaborator... Michael Catlin @malrase
  87. 87. @hcatlin

×