SlideShare ist ein Scribd-Unternehmen logo
1 von 112
Downloaden Sie, um offline zu lesen
@hcatlin
6 Rules of Mobile
     Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
• Challenge of Mobile (Web)
• Understanding Mobile
• Hampton’s 6 Rules of Mobile
• Design Process Example
Types of Designers


graphic



              software
   ui
Types of Designers


graphic



              software
   ui
Types of Designers


graphic



              software
   ui
Types of Designers


graphic



              software
   ui
Types of Designers


graphic



              software
   ui
Types of Designers


graphic



              software
   ui
Aka: My shit is ugly, but
 usable and scalable
The Challenge of
    Mobile
Mobile Usage is Increasing
                    11


                  8.25
  %age of browsing that
occurs 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
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Challenge
Understanding Mobile
Mobile Users

• Usually Distracted
• ~3-5 minutes
• Half at Home, Half on the Go
• So Much More Variety
Primary    Primary
                Goal
                             Mode      Location
               Purchase                Home or
Ecommerce                   Demand
             Specific Item              Journey
              Message a
Social (A)                  Demand      Moving
                Friend
              Get Social
Social (B)                  Browse     Waiting
               Updates

 Games       Waste Time     Browse     Waiting

                                      Depends on
Reference    Learn A Fact   Demand
                                       Content
6 Rules of Mobile Design
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
“Good design
                                                                           is as little design
                                                                              as possible”
                                                                                - Dieter Rams’ 10th Rule




http://en.wikipedia.org/wiki/File:Designer-Dieter_Rams-at-Vits%C5%93.jpg
Hampton's 6 Rules of Mobile Design
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
    comprehension and brevity
Comprehension
Brevity
Simplicity
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
    comprehension and brevity
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
Core Value Proposition
What do people do on
Wikipedia while on the go?
What do people do on
Wikipedia while on the go?



  READ
What do people do on
Wikipedia while on the go?



  READ
   and edit
“Hey, I can’t remember
  who invented the
      television?”
“Hey, I can’t remember
  who invented the
      television?”
 1. Open browser
“Hey, I can’t remember
  who invented the
      television?”
 1. Open browser
 2. Google “television”
“Hey, I can’t remember
  who invented the
      television?”
 1. Open browser
 2. Google “television”
 3. Click on Wikipedia link
“Hey, I can’t remember
  who invented the
      television?”
 1. Open browser
 2. Google “television”
 3. Click on Wikipedia link
 4. READ
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
IV. "Where?" is more important than "who?"
HOME   TRANSIT


BARS   TOILET
HOME


BARS   TOILET
BARS   TOILET
BARS
Hampton's 6 Rules of Mobile Design
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
IV. "Where?" is more important than "who?"
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
IV. "Where?" is more important than "who?"
V. Assume terrible dexterity
http://screamingargonaut.files.wordpress.com/2010/01/all-thumbs.jpg
http://thechive.files.wordpress.com/2011/06/drunk-guy.jpeg
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
IV. "Where?" is more important than "who?"
V. Assume terrible dexterity
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
IV. "Where?" is more important than "who?"
V. Assume terrible dexterity
VI. The footer is a dead zone
It’s all about the
  header, baby!
Design Process
 Walkthrough
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
!
!
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Enter Term             Previous Search Flow



  “Search”                      “Go”




Search Result
     List                        ?




                        Read!          New Article?
Mobile Search Flow


                Enter Term




                 “Search”




Search Result
                             Read!
     List
Sushi
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Hampton's 6 Rules of Mobile Design
Checkit!
Dictionary!
Dictionary!

• Native Application
• English Language Dictionary
• #1 in the app store forever
• 8,685,404 Users
• 5,054 New Users TODAY
Goals
Goals
• Goal: I have a word I want to look up and
  then leave
Goals
• Goal: I have a word I want to look up and
  then leave
• Requires
Goals
• Goal: I have a word I want to look up and
  then leave
• Requires
 • No data, on device
Goals
• Goal: I have a word I want to look up and
  then leave
• Requires
 • No data, on device
 • Search as you type
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
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
Dictionary!
Hampton’s 6 Rules of Mobile Design

I. On mobile, simplicity is a requirement.
II. Simplicity is a balance between
     comprehension and brevity
III. Understand, then optimize your core value
     proposition
IV. "Where?" is more important than "who?"
V. Assume terrible dexterity.
VI. The footer is a deadzone
Surprise
Announcement!
Hampton's 6 Rules of Mobile Design
libsass
Aaron
  Leung
@ akhleung
Design
Design
• C interface, C++ internals
Design
• C interface, C++ internals
• Statically linkable
Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
• Simple Interface
Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
• Simple Interface
• FAST
Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
• Simple Interface
• FAST
• Sass 3.1 Features
Development

• Sponsored by Moovweb
• 6+ months in
• Used in production
• More features than we expected
• Adapters Needed!
Benchmarks!
4s

3s

2s

1s

0s
     Project A       Project B

           Sass   SassC
1.0 Release!
1.0 Release!

• Supports Bourbon Fully
1.0 Release!

• Supports Bourbon Fully
• Been in Production for 4 months
1.0 Release!

• Supports Bourbon Fully
• Been in Production for 4 months
• http://github.com/hcatlin/libsass
1.0 Release!

• Supports Bourbon Fully
• Been in Production for 4 months
• http://github.com/hcatlin/libsass
• https://github.com/andrew/node-sass
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!
GO FORTH AND
 ADAPTERIZE!
My missing collaborator...



                             Michael Catlin
                                   @malrase
@hcatlin

Más contenido relacionado

Was ist angesagt?

Smart Phones for Real Estate (property of HAR)
Smart Phones for Real Estate (property of HAR)Smart Phones for Real Estate (property of HAR)
Smart Phones for Real Estate (property of HAR)Marilyn M. Maxwell
 
Association for Voice Interaction Design - Annual Meeting 2018
Association for Voice Interaction Design - Annual Meeting 2018Association for Voice Interaction Design - Annual Meeting 2018
Association for Voice Interaction Design - Annual Meeting 2018Crispin Reedy
 
Context Aware Everything!
Context Aware Everything!Context Aware Everything!
Context Aware Everything!Duo Consulting
 
So You Think You Can App?
So You Think You Can App?So You Think You Can App?
So You Think You Can App?YTH
 
iPad 101: Get App'd For Real Estate
iPad 101: Get App'd For Real EstateiPad 101: Get App'd For Real Estate
iPad 101: Get App'd For Real EstateSheri Barker
 
UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)
UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)
UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)UXPA International
 

Was ist angesagt? (11)

Smart Phones for Real Estate (property of HAR)
Smart Phones for Real Estate (property of HAR)Smart Phones for Real Estate (property of HAR)
Smart Phones for Real Estate (property of HAR)
 
Association for Voice Interaction Design - Annual Meeting 2018
Association for Voice Interaction Design - Annual Meeting 2018Association for Voice Interaction Design - Annual Meeting 2018
Association for Voice Interaction Design - Annual Meeting 2018
 
Context Aware Everything!
Context Aware Everything!Context Aware Everything!
Context Aware Everything!
 
NYC.JS
NYC.JSNYC.JS
NYC.JS
 
So You Think You Can App?
So You Think You Can App?So You Think You Can App?
So You Think You Can App?
 
iPad 101: Get App'd For Real Estate
iPad 101: Get App'd For Real EstateiPad 101: Get App'd For Real Estate
iPad 101: Get App'd For Real Estate
 
Tech in libraries
Tech in librariesTech in libraries
Tech in libraries
 
Perso.na
Perso.naPerso.na
Perso.na
 
iPad for Business
iPad for BusinessiPad for Business
iPad for Business
 
Ad-Tech NY 2009
Ad-Tech NY 2009Ad-Tech NY 2009
Ad-Tech NY 2009
 
UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)
UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)
UX Comics: Communicating Experiences and Sharing Ideas (Bonny Colville-Hyde)
 

Ähnlich wie Hampton's 6 Rules of Mobile Design

Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)kevinjohngallagher
 
He web12 atec presentation.key
He web12 atec presentation.keyHe web12 atec presentation.key
He web12 atec presentation.keyJordan Layman
 
Ten Tips for Fixing Your Terrible Website
Ten Tips for Fixing Your Terrible WebsiteTen Tips for Fixing Your Terrible Website
Ten Tips for Fixing Your Terrible WebsiteOn-Site
 
Getting started with Couchbase
Getting started with CouchbaseGetting started with Couchbase
Getting started with CouchbaseJosue Bustos
 
Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)Adrian Cockcroft
 
Make Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile FriendlyMake Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile FriendlyDave Zille
 
Emperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkEmperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkkevinjohngallagher
 
Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012kevinjohngallagher
 
Why HTML5?
Why HTML5?Why HTML5?
Why HTML5?istudor
 
Putting Mobile First - July 2013
Putting Mobile First - July 2013Putting Mobile First - July 2013
Putting Mobile First - July 2013Precedent
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesMatt Machell
 
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...Erin Scime
 
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr PresentationRich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr PresentationLee Stott
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devicesFahd Alhazmi
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan
 
Mobile First London 13 August
Mobile First London 13 August Mobile First London 13 August
Mobile First London 13 August Precedent
 
Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Precedent
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptJonathan Stark
 

Ähnlich wie Hampton's 6 Rules of Mobile Design (20)

Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
 
He web12 atec presentation.key
He web12 atec presentation.keyHe web12 atec presentation.key
He web12 atec presentation.key
 
Ten Tips for Fixing Your Terrible Website
Ten Tips for Fixing Your Terrible WebsiteTen Tips for Fixing Your Terrible Website
Ten Tips for Fixing Your Terrible Website
 
Getting started with Couchbase
Getting started with CouchbaseGetting started with Couchbase
Getting started with Couchbase
 
Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)
 
Make Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile FriendlyMake Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile Friendly
 
Emperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkEmperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakk
 
Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012
 
Why HTML5?
Why HTML5?Why HTML5?
Why HTML5?
 
Putting Mobile First - July 2013
Putting Mobile First - July 2013Putting Mobile First - July 2013
Putting Mobile First - July 2013
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk ...
 
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr PresentationRich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
321 alexander kimmobilestrategy
321 alexander kimmobilestrategy321 alexander kimmobilestrategy
321 alexander kimmobilestrategy
 
Mobile First London 13 August
Mobile First London 13 August Mobile First London 13 August
Mobile First London 13 August
 
Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13
 
The Future of eLearning
The Future of eLearningThe Future of eLearning
The Future of eLearning
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 

Hampton's 6 Rules of Mobile Design

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. Almost understood desktop --- Fake! Now you have to rethink.\n
  21. It’s like a dare to you!\n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. Really struggled with how to best make sass better\n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n