Hampton's 6 Rules of Mobile Design

@hcatlin

6 Rules of Mobile Design

• Challenge of Mobile (Web)• Understanding Mobile• Hampton’s 6 Rules of Mobile• Design Process Example

Types of Designersgraphic 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 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

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 orEcommerce Demand Speciﬁc 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

6 Rules of Mobile Design

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

“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

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

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

Comprehension

Brevity

Simplicity

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

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

Core Value Proposition

What do people do onWikipedia while on the go?

What do people do onWikipedia while on the go? READ

What do people do onWikipedia 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 DesignI. On mobile, simplicity is a requirement.II. Simplicity is a balance between comprehension and brevityIII. Understand, then optimize your core value proposition

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?"

HOME TRANSITBARS TOILET

HOMEBARS TOILET

BARS TOILET

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?"

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

http://screamingargonaut.ﬁles.wordpress.com/2010/01/all-thumbs.jpg

http://thechive.ﬁles.wordpress.com/2011/06/drunk-guy.jpeg

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

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

It’s all about the header, baby!

Design Process Walkthrough

Enter Term Previous Search Flow “Search” “Go”Search Result List ? Read! New Article?

Mobile Search Flow Enter Term “Search”Search Result Read! List

Checkit!

Dictionary!

Dictionary!• Native Application• English Language Dictionary• #1 in the app store forever• 8,685,404 Users• 5,054 New Users TODAY

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 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

SurpriseAnnouncement!

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!4s3s2s1s0s 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

http://marakana.com	674
https://twitter.com	17
http://www.facebook.com	1

Hampton's 6 Rules of Mobile Design

by Hampton Catlin on Oct 18, 2012

Accessibility

Upload Details

Usage Rights

3 Embeds 692

Statistics

Hampton’s 6 Rules of Mobile Design Presentation Transcript