Hampton's 6 Rules of Mobile Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Hampton's 6 Rules of Mobile Design

on

  • 3,107 views

 

Statistics

Views

Total Views
3,107
Views on SlideShare
2,318
Embed Views
789

Actions

Likes
15
Downloads
52
Comments
0

4 Embeds 789

http://marakana.com 689
https://thenewcircle.com 82
https://twitter.com 17
http://www.facebook.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. @hcatlin
  • 2. 6 Rules of Mobile Design
  • 3. • Challenge of Mobile (Web)• Understanding Mobile• Hampton’s 6 Rules of Mobile• Design Process Example
  • 4. Types of Designersgraphic software ui
  • 5. Types of Designersgraphic software ui
  • 6. Types of Designersgraphic software ui
  • 7. Types of Designersgraphic software ui
  • 8. Types of Designersgraphic software ui
  • 9. Types of Designersgraphic software ui
  • 10. Aka: My shit is ugly, but usable and scalable
  • 11. The Challenge of Mobile
  • 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. Challenge
  • 14. Understanding Mobile
  • 15. Mobile Users• Usually Distracted• ~3-5 minutes• Half at Home, Half on the Go• So Much More Variety
  • 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. 6 Rules of Mobile Design
  • 18. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.
  • 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. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.
  • 21. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevity
  • 22. Comprehension
  • 23. Brevity
  • 24. Simplicity
  • 25. Hampton’s 6 Rules of Mobile DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevity
  • 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. Core Value Proposition
  • 28. What do people do onWikipedia while on the go?
  • 29. What do people do onWikipedia while on the go? READ
  • 30. What do people do onWikipedia while on the go? READ and edit
  • 31. “Hey, I can’t remember who invented the television?”
  • 32. “Hey, I can’t remember who invented the television?” 1. Open browser
  • 33. “Hey, I can’t remember who invented the television?” 1. Open browser 2. Google “television”
  • 34. “Hey, I can’t remember who invented the television?” 1. Open browser 2. Google “television” 3. Click on Wikipedia link
  • 35. “Hey, I can’t remember who invented the television?” 1. Open browser 2. Google “television” 3. Click on Wikipedia link 4. READ
  • 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. 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. HOME TRANSITBARS TOILET
  • 39. HOMEBARS TOILET
  • 40. BARS TOILET
  • 41. BARS
  • 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. 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. http://screamingargonaut.files.wordpress.com/2010/01/all-thumbs.jpg
  • 45. http://thechive.files.wordpress.com/2011/06/drunk-guy.jpeg
  • 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. 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. It’s all about the header, baby!
  • 49. Design Process Walkthrough
  • 50. !
  • 51. !
  • 52. Enter Term Previous Search Flow “Search” “Go”Search Result List ? Read! New Article?
  • 53. Mobile Search Flow Enter Term “Search”Search Result Read! List
  • 54. Sushi
  • 55. Checkit!
  • 56. Dictionary!
  • 57. Dictionary!• Native Application• English Language Dictionary• #1 in the app store forever• 8,685,404 Users• 5,054 New Users TODAY
  • 58. Goals
  • 59. Goals• Goal: I have a word I want to look up and then leave
  • 60. Goals• Goal: I have a word I want to look up and then leave• Requires
  • 61. Goals• Goal: I have a word I want to look up and then leave• Requires • No data, on device
  • 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. 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. 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. Dictionary!
  • 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. SurpriseAnnouncement!
  • 68. libsass
  • 69. Aaron Leung@ akhleung
  • 70. Design
  • 71. Design• C interface, C++ internals
  • 72. Design• C interface, C++ internals• Statically linkable
  • 73. Design• C interface, C++ internals• Statically linkable• Small(ish)
  • 74. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface
  • 75. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST
  • 76. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST• Sass 3.1 Features
  • 77. Development• Sponsored by Moovweb• 6+ months in• Used in production• More features than we expected• Adapters Needed!
  • 78. Benchmarks!4s3s2s1s0s Project A Project B Sass SassC
  • 79. 1.0 Release!
  • 80. 1.0 Release!• Supports Bourbon Fully
  • 81. 1.0 Release!• Supports Bourbon Fully• Been in Production for 4 months
  • 82. 1.0 Release!• Supports Bourbon Fully• Been in Production for 4 months• http://github.com/hcatlin/libsass
  • 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. 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. GO FORTH AND ADAPTERIZE!
  • 86. My missing collaborator... Michael Catlin @malrase
  • 87. @hcatlin