6 rules to designing amazing mobile apps (@media 2011)
TRANSCRIPT
great mobile design is not made in Photoshop
MADE WITH LOVE IN SEATTLE BY
“We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could be the worst app ever made.
—Scott Dierdorf@sdierdorf
“[Brian] states making a native application can be the best thing for a product, but confirms on the other hand that the mobile web is the only long term commercially viable content platform for mobile devices
—Thibault Imbert
STREETS CARTOGRAPHY CALIPER CRANE ESCAPEMENT TUMBLER_LOCK GEARS
PLUMBING SPIRAL_STAIRCASE URBAN_PLANNING CROSSBOW WINCH
WHEELBARROW SHOWERS CENTRAL_HEATING LIGHTHOUSE
ALARM_CLOCK CHAIN_DRIVE CANNON LEVERS WATER_MILL GIMBAL DRY_DOCK
ANALOG_COMPUTERS FIRE_HOSE VENDING_MACHINE WIND_VANE
CLOCK_TOWER AUTOMATIC_DOORS
Ancient Greek Technology
ABACUS AMPHITHEATER AQUEDUCT ARCH BOOK BRASS BRIDGE CAMEOS CAST_IRON
CEMENT CRANE DAM DOME LOOM FLAMETHROWER GLASS BLOWING
HAND_SOAP HYDRAULICS HYDROMETER KNIFE LIGHTHOUSES LEATHER MILLS
STEAM_ENGINE NEWSPAPER ODOMETER PADDLE_WHEEL PEWTER POTTERY
REAPER SAILS RUDDER SAUSAGE SEWERS SPIRAL_STAIRCASE STENOGRAPHY
STREET_MAPS SURGICAL_INSTRUMENTS
Some Innovations from the Roman Empire
“In an economy where the only certainty is uncertainty, the one source of lasting competitive advantage is knowledge. When markets shift, technologies proliferate, and products become obsolete almost overnight, successful companies are those that consistently create new knowledge, disseminate it widely throughout the organization and quickly embody it in new technologies and products”
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
nextacademia
MADE WITH LOVE IN SEATTLE BY
touch
IPv6
4G
ubiquity
next
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#1
Brian Fling @fling
Rules for Designing Amazing Apps
think of your app as a great book.
MADE WITH LOVE IN SEATTLE BY
with a clear beginning, middle and end
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions‣ Motion
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions‣ Motion‣ Transitions
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions‣ Motion‣ Transitions‣ Color
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions‣ Motion‣ Transitions‣ Color‣ Typography
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
‣ Interactions‣ Motion‣ Transitions‣ Color‣ Typography‣ Iconography
p/z universalbuild a website that provided the best possible experience to the context.
iPad
magazine
p/z universalbuild a website that provided the best possible experience to the context.
iPad
magazineiPhone
web app
p/z universalbuild a website that provided the best possible experience to the context.
iPad
magazineiPhone
web appDesktop
website
1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts
the hex-grid
but in mobile design, we must use horizontal units as well. this means that any unit size must work vertically as well as horizontally.
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#2
Brian Fling @fling
Rules for Designing Amazing Apps
Creating Amazing Experiences for all Mobile Devices
This document contains confidential information and is provided for private review only. Do not distribute without permission.
ScreenshotPlaceholder
CLIENT
Automatic Data Processing
PROJECTS
ADP iPhone App, Mobile Web App, Content Proxy
SERVICES
Concept, Strategy, Design & Development
DESCRIPTION
We designed and developed an application for ADP customers to complete common tasks related to HR, payroll, and benefits in a mobile context.
“A new form of Web content that is
meaningful to computers will unleash a revolution
of new possibilities.”
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#3
Brian Fling @fling
Rules for Designing Amazing Apps
JARGON ALERT
ContextThe circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
always add value to the users context*
*Doing so requires a little Psych 101
MADE WITH LOVE IN SEATTLE BY
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#4
Brian Fling @fling
Rules for Designing Amazing Apps
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
JARGON ALERT
NeedsThe circumstances in which something is necessary, or that require some course of action.
Abraham Harold Maslow (April 1, 1908 – June 8, 1970) was an American psychologist. He is noted for his concept-ualization of a "hierarchy of human needs", and is considered the founder of humanistic psychology.
JARGON ALERT
SkeuomorphA derivative object that retains ornamental design cues to a structure that was necessary in the original.
http://www.flickr.com/photos/youraccount/sets/72157619967702538/with/3642814120/
AffectThe emotional response that expresses an individual's degree of preference for an entity.
AffectBehaviorCognitionThe evaluation of the entity that constitutes an individual's beliefs about the object.
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILS1. Small screens don’t make things easier. They
make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#5
Brian Fling @fling
Rules for Designing Amazing Apps
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views 15x View Controls13x Application Controls
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views 15x View Controls13x Application Controls9x Animations & Transitions
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#6
Brian Fling @fling
Rules for Designing Amazing Apps
This document contains confidential information and is provided for private review only. Do not distribute without permission.
A Fully Agile AgencyFrom Start to Finish
This document contains confidential information and is provided for private review only. Do not distribute without permission.
This document contains confidential information and is provided for private review only. Do not distribute without permission.
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Design Brief
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Design Brief
Wireframes
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Design Brief
Wireframes
Design Direction
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Design Brief
Wireframes
Design Direction
Design Comps
Process
Del
iver
able
s
DesignInteractionDataDefine
Project Brief
Journeys
Context Map
Content Audit
API Audit
Data Modeling
App Flow
Screen Descriptions
Zone Diagrams
App Map
Reference Design
Design Brief
Wireframes
Design Direction
Design Comps
Asset Library
Process
Del
iver
able
s
61. UNDERSTAND THE MEDIUM
Get to know the differences between mobile and other mediums.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.
5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
Brian Fling @fling
Rules for Designing Amazing Apps
Get in TouchFind Out How We Can Help You.
Brian FlingFounder & Creative Director
[email protected]+1 206 351-6060
My name is Brian Fling and I’m a Mobile Designer
twitter.com/fling
book mobiledesign.org
company pinchzoom.com
blog pinchzoom.com/fling
THANK YOU