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

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

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

3. “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

4. The Puget Sound Region

5. The Puget Sound Region

6. mobiledesign.org

7. “[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

8. MADE WITH LOVE IN SEATTLE BY

11. Ancient Greek Technology

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

14. POLITICAL_PHILOSOPHY ETHICS METAPHYSICS ONTOLOGY LOGIC BIOLOGY RHETORIC & AESTHETICS

15. “Greek philosophy hasshaped the entireWestern thought sinceits inception.”

17. Some Innovations from the Roman Empire

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

24. “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”

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

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

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

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

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

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

35. Tablets areabout focus,consumption,simple tasks& portability.

36. ‣ Platform Aesthetic

37. ‣ Platform Aesthetic‣ Many Resolutions

38. ‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch

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

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

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

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

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

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

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

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

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

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

49. p/z universal

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

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

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

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

55. 1x HTML5 Markup

56. 1x HTML5 Markup1x Hexadecimal CSS Framework

57. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework

58. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks

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

60. a hexadecimal what?

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

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

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

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

66. Content is Data and there is noDesign without Data

67. Content is Data and there is noDesign without Data

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

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

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

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

73. context addsmeaning to data MADE WITH LOVE IN SEATTLE BY

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

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

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

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

78. types of contextBig IdeasLocationDeviceState of Mind

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

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

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

85. interactions evoke strong feelings MADE WITH LOVE IN SEATTLE BY

86. MEDIUM (Mobile)

87. CONTEXT MEDIUM (Mobile)

88. CONTEXT MEDIUM (Mobile) INTERACTION

89. 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/

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

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

92. JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.

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

94. CONTEXT MEDIUM (Mobile) INTERACTION

95. ?CONTEXT MEDIUM (Mobile) INTERACTION

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

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

98. great interactions evoke feelings MADE WITH LOVE IN SEATTLE BY

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

100. Affect

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

102. AffectBehavior

103. AffectBehaviorThe verbal indication or typical behavioraltendency of an individual.

104. AffectBehaviorCognition

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

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

107. details matter MADE WITH LOVE IN SEATTLE BY

108. design @ 1600% MADE WITH LOVE IN SEATTLE BY

109. 6x Navigation & Toolbars

110. 6x Navigation & Toolbars3x Alerts & Modals

111. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views

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

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

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

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

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

117. DESIGNERS DEVELOPERS

118. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

127. Mobile Design is Web Design

128. Mobile Design is Web Design

129. Mobile Design is Software Design

130. Mobile Design is Software Design

131. A Fully Agile Agency From Start to FinishThis document contains confidential information and is provided for private review only. Do not distribute without permission.

132. This document contains confidential information and is provided for private review only. Do not distribute without permission.

133. This document contains confidential information and is provided for private review only. Do not distribute without permission.

134. Process

135. DeﬁneProcess

136. Deﬁne DataProcess

137. Deﬁne Data InteractionProcess

138. Deﬁne Data Interaction DesignProcess

139. Deliverables Deﬁne Data Interaction Design Process

140. Deliverables Project Brief Deﬁne Data Interaction Design Process

141. JourneysDeliverables Project Brief Deﬁne Data Interaction Design Process

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

157. EHARMONYHOME v1

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