6 Rules to Designing Amazing Mobile Apps (@media 2011)

61. Rules for Designing Amazing Apps Brian Fling @fling 4.2. 5.3. 6.

great mobile design isnot made in Photoshop MADE WITH LOVE IN SEATTLE BY

“We could build the best mobile appever made, but if our customers don’tknow why it’s good, then it could be is great mobile designnot made in Photoshopthe worst app ever made. —Scott Dierdorf @sdierdorf MADE WITH LOVE IN SEATTLE BY

The Puget Sound Region

mobiledesign.org

“[Brian] states making a nativeapplication can be the best thing for aproduct, but conﬁrms on the otherhand that the mobile web is the onlylong term commercially viablecontent platform for mobile devices —Thibault Imbert

MADE WITH LOVE IN SEATTLE BY

Ancient Greek Technology

Ancient Greek TechnologySTREETS 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

POLITICAL_PHILOSOPHY ETHICS METAPHYSICS ONTOLOGY LOGIC BIOLOGY RHETORIC & AESTHETICS

“Greek philosophy hasshaped the entireWestern thought sinceits inception.”

Some Innovations from the Roman Empire

Some Innovations from the Roman EmpireABACUS AMPHITHEATER AQUEDUCT ARCHBOOK 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 POTTERYREAPER SAILS RUDDER SAUSAGE SEWERS SPIRAL_STAIRCASE STENOGRAPHY STREET_MAPS SURGICAL_INSTRUMENTS

“In an economy where the only certainty isuncertainty, the one source of lastingcompetitive advantage is knowledge. Whenmarkets shift, technologies proliferate, andproducts become obsolete almost overnight,successful companies are those thatconsistently create new knowledge,disseminate it widely throughout theorganization and quickly embody it in newtechnologies and products”

1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 next MADE WITH LOVE IN SEATTLE BY

61.#1 Rules for Designing Amazing Apps Brian Fling @fling UNDERSTAND THE MEDIUM Get to know the diﬀerences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

mobile design is anentirely new breed of design. MADE WITH LOVE IN SEATTLE BY

Phones areabout makingthe most ofthe moment,simple tasks,& context.

think of your app as a great book. MADE WITH LOVE IN SEATTLE BY

think of your app as a great book. with a clear beginning, middle and end MADE WITH LOVE IN SEATTLE BY

Tablets areabout focus,consumption,simple tasks& portability.

‣ Platform Aesthetic

‣ Platform Aesthetic‣ Many Resolutions

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids‣ Perspective‣ Dimension

‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective‣ Dimension

‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective ‣ Iconography‣ Dimension

p/z universal

p/z universalbuild a website that provided the bestpossible experience to the context.

p/z universalbuild a website that provided the bestpossible experience to the context. iPad magazine

p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone magazine web app

p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website

1x HTML5 Markup

1x HTML5 Markup1x Hexadecimal CSS Framework

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts

a hexadecimal what?

the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.

the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.

61. UNDERSTAND THE MEDIUM#2. Rules for Designing Amazing Apps Brian Fling @fling Get to know the diﬀerences between mobile and other mediums. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS 2 GET YOUR DATA DIALED Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

1 out of 3 projectsgo sideways because ofBAD DATA MADE WITH LOVE IN SEATTLE BY

Content is Data and there is noDesign without Data

Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, Content ProxySERVICES ScreenshotConcept, Strategy, Design & DevelopmentDESCRIPTION PlaceholderWe designed and developed an application for ADP customers tocomplete common tasks related to HR, payroll, and benefits in amobile context. This document contains confidential information and is provided for private review only. Do not distribute without permission.

“A new form of Web content that ismeaningful to computerswill unleash a revolution of new possibilities.”

61. UNDERSTAND THE MEDIUM Rules for Designing Amazing Apps Brian Fling @fling Get to know the diﬀerences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.#3. 3 BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

JARGON ALERTContextThe circumstances that formthe setting for an event,statement, or idea, and interms of which it can be fullyunderstood and assessed.

context addsmeaning to data MADE WITH LOVE IN SEATTLE BY

Radio TV Live Billboard ry Vi to su di al AuWord of Print AdMouth Kinesthetic Mobile Events Device QR

WAP Bluetooth Radio TV SMS SMS Live Billboard WAP ry Vi toMMS su di al Au QR Cod Word of Print Ad MouthSMS Kinesthetic SMS WAP Mobile Events Device QR Code Website MMS

WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboardd to B nd WAP ry Vi to MMS su di a Au l W QR Code Word of Print Ad Mouth SMSify Kinesthetic No SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site

Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live BillboardSend to Buy Friend WAP ry Vi to MMS su di al AuJoin WAP Site QR Code Word of Print Ad Mouth SMSNotify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend

types of contextBig IdeasLocationDeviceState of Mind

always add value to the users context* MADE WITH LOVE IN SEATTLE BY

always add value to the users context* *Doing so requires a little Psych 101 MADE WITH LOVE IN SEATTLE BY

6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the diﬀerences between mobile and other mediums.2. GET YOUR DATA DIALED #4. 4 DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

interactions evoke strong feelings MADE WITH LOVE IN SEATTLE BY

MEDIUM (Mobile)

CONTEXT MEDIUM (Mobile)

CONTEXT MEDIUM (Mobile) INTERACTION

The Elements of User Experience Jesse James Garrett jjg@jjg.netA basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000but 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.Web as software interface Concrete Completion Web as hypertext system Visual Design: visual treatment of text,Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel") Visual Design graphic page elements and navigational componentsInterface Design: as in traditional HCI: Navigation Design: design of interfacedesign of interface elements to facilitate elements to facilitate the users movementuser interaction with functionality Interface Design Navigation Design through the information architectureInformation Design: in the Tuftean sense:designing the presentation of information Information Design Information Design: in the Tuftean sense: designing the presentation of informationto facilitate understanding to facilitate understandingInteraction Design: development of Interaction Information Information Architecture: structural design timeapplication flows to facilitate user tasks,defining how the user interacts with Design Architecture of the information space to facilitate intuitive access to contentsite functionalityFunctional Specifications: "feature set":detailed descriptions of functionality the site Functional Content Content Requirements: definition of content elements required in the sitemust include in order to meet user needs Specifications Requirements in order to meet user needsUser Needs: externally derived goals User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc. User Needs for the site; identified through user research, ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site Site Objectives Site Objectives: business, creative, or other internally derived goals for the sitetask-oriented Abstract Conception information-oriented 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 a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.© 2000 Jesse James Garrett http://www.jjg.net/ia/

Completion Web as hypertext system Visual Design: visual treatment of text,Visual Design graphic page elements and navigational components Navigation Design: design of interface elements to facilitate the users movementrface Design Navigation Design through the information architecturermation Design Information Design: in the Tuftean sense: designing the presentation of information to facilitate understandingeraction Information time Information Architecture: structural designign Architecture of the information space to facilitate intuitive access to contentnctional Content Content Requirements: definition of content elements required in the sitecations Requirements in order to meet user needs User Needs: externally derived goals User Needs for the site; identified through user research, ethno/techno/psychographics, etc.ite Objectives Site Objectives: business, creative, or other internally derived goals for the site Conception information-oriented

Web as software interface ConcreteVisual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel") Visual DesigInterface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionality Interface Design NavInformation Design: in the Tuftean sense:designing the presentation of information Information Desito facilitate understandingInteraction Design: development of Interaction Infapplication flows to facilitate user tasks,defining how the user interacts with Design Architsite functionalityFunctional Specifications: "feature set":detailed descriptions of functionality the site Functional Cmust include in order to meet user needs Specifications RequirUser Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc. User NeeSite Objectives: business, creative, or otherinternally derived goals for the site Site Objectivestask-oriented Abstract

JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire 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 ofhuman needs", and isconsidered the founder ofhumanistic psychology.

CONTEXT MEDIUM (Mobile) INTERACTION

?CONTEXT MEDIUM (Mobile) INTERACTION

JARGON ALERTSkeuomorph A derivative object that retains ornamental design cues to a structure that was necessary in the original.

http://www.ﬂickr.com/photos/youraccount/sets/72157619967702538/with/3642814120/

great interactions evoke feelings MADE WITH LOVE IN SEATTLE BY

“Unlike personality, attitudesare expected to change as afunction of experience.”

Affect

AffectThe emotional response that expresses anindividuals degree of preference for an entity.

AffectBehavior

AffectBehaviorThe verbal indication or typical behavioraltendency of an individual.

AffectBehaviorCognition

AffectBehaviorCognitionThe evaluation of the entity that constitutes anindividuals beliefs about the object.

6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the diﬀerences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION #5. 5 A gift for pixel perfection and psych degree can come in handy. FOCUS ON THE DETAILS Data is the new content, and it comes from 1. Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

details matter MADE WITH LOVE IN SEATTLE BY

design @ 1600% MADE WITH LOVE IN SEATTLE BY

6x Navigation & Toolbars

6x Navigation & Toolbars3x Alerts & Modals

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Transitions

6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the diﬀerences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT #6. 6 ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

there are few tools or processes that suit mobile MADE WITH LOVE IN SEATTLE BY

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Mobile Design is Web Design

Mobile Design is Software Design

A Fully Agile Agency From Start to FinishThis 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.

Process

DeﬁneProcess

Deﬁne DataProcess

Deﬁne Data InteractionProcess

Deﬁne Data Interaction DesignProcess

Deliverables Deﬁne Data Interaction Design Process

Deliverables Project Brief Deﬁne Data Interaction Design Process

JourneysDeliverables Project Brief Deﬁne Data Interaction Design Process

Context Map JourneysDeliverables Project Brief Deﬁne Data Interaction Design Process

Context Map JourneysDeliverables Project Brief Content Audit Deﬁne Data Interaction Design Process

Context Map Journeys API AuditDeliverables Project Brief Content Audit Deﬁne Data Interaction Design Process

Context Map Data Modeling Journeys API AuditDeliverables Project Brief Content Audit Deﬁne Data Interaction Design Process

App Flow Context Map Data Modeling Journeys API AuditDeliverables Project Brief Content Audit Deﬁne Data Interaction Design Process

App Flow Context Map Data Modeling Journeys API AuditDeliverables Project Brief Screen Content Audit Descriptions Deﬁne Data Interaction Design Process

App Flow Context Map Data Modeling Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Descriptions Deﬁne Data Interaction Design Process

App Flow Context Map Data Modeling App Map Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Descriptions Deﬁne Data Interaction Design Process

App Flow Reference Design Context Map Data Modeling App Map Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Descriptions Deﬁne Data Interaction Design Process

App Flow Reference Design Context Map Data Modeling App Map Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Design Brief Descriptions Deﬁne Data Interaction Design Process

App Flow Reference Design Context Map Data Modeling App Map Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Deﬁne Data Interaction Design Process

App Flow Reference Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Deﬁne Data Interaction Design Process

App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Deﬁne Data Interaction Design Process

Asset Library App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Deﬁne Data Interaction Design Process

6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the diﬀerences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.

EHARMONYHOME v1

EHARMONYHOME v2

EHARMONYHOME v3

EHARMONYHOME v4

EHARMONYHOME v5

EHARMONYHOME v6

Get in TouchTHANK YOU Find Out How We Can Help You.My name is Brian Fling and Brian FlingI’m a Mobile Designer Founder & Creative Director brian@pinchzoom.com +1 206 351-6060twitter.com/flingbook mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling

http://www.webdirections.org	1261
http://lanyrd.com	748
http://pinchzoom.com	549
http://www.wooom.it	33
url_unknown	25
http://www.pinchzoom.com	13
http://www.canappi.com	11
http://www.slideshare.net	4
http://us-w1.rockmelt.com	3
http://blog.niccai.com	3
http://www.m.techgig.com	2
http://translate.googleusercontent.com	1
http://www.moppr.com	1
http://paper.li	1
http://moppr.org	1
http://www.techgig.com	1
http://www.collegehumor.com	1
http://canappi.com	1

6 Rules to Designing Amazing Mobile Apps (@media 2011)

by Brian Fling

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 2,659

Statistics

6 Rules to Designing Amazing Mobile Apps (@media 2011) Presentation Transcript