Hampton's 6 Rules of Mobile Design

3,183 views
3,082 views

Published on

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,183
On SlideShare
0
From Embeds
0
Number of Embeds
788
Actions
Shares
0
Downloads
59
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Almost understood desktop --- Fake! Now you have to rethink.\n
  • It’s like a dare to you!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Really struggled with how to best make sass better\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×