6 Rules to Designing Amazing Mobile Apps

THE PATH TO CREATING MEMORABLE MOBILE EXPERIENCES

Building a mobile app isn’t easy. Regardless of chosen platform or technology creating a memorable mobile experience has some pretty intense challenges throughout. However if you can get it right it can have some incredible rewards and propel your brand in more ways than one. After spending ten years building mobile apps for some of the biggest companies in the world, author and mobile designer Brian Fling shares his six rules for building amazing apps that will either you get you started or improve upon your next release.

Transcript

1. Brian Fling @fling Rules for Designing Amazing Apps 6 1. 2. 3. 4. 5. 6.
2. great mobile design is not made in Photoshop MADE WITH LOVE IN SEATTLE BY
3. 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
4. The Puget Sound Region
5. The Puget Sound Region
19. mobiledesign.org
21. “[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
22. MADE WITH LOVE IN SEATTLE BY
24. MADE WITH LOVE IN SEATTLE BY
25. MADE WITH LOVE IN SEATTLE BY
26. Ancient Greek Technology
27. 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
28. MADE WITH LOVE IN SEATTLE BY
29. POLITICAL_PHILOSOPHY ETHICS METAPHYSICS ONTOLOGY LOGIC BIOLOGY RHETORIC & AESTHETICS
31. “Greek philosophy has shaped the entire Western thought since its inception.”
34. MADE WITH LOVE IN SEATTLE BY
41. Some Innovations from the Roman Empire
42. 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
47. MADE WITH LOVE IN SEATTLE BY
49. MADE WITH LOVE IN SEATTLE BY
50. MADE WITH LOVE IN SEATTLE BY MADE WITH LOVE IN SEATTLE BY
51. MADE WITH LOVE IN SEATTLE BY
53. MADE WITH LOVE IN SEATTLE BY
56. “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”
59. computing network internet devices web dot-com 2010 2000 1990 1980 1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY touch IPv6 4G ubiquity next
62. MADE WITH LOVE IN SEATTLE BY
65. MADE WITH LOVE IN SEATTLE BY
67. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #1 Brian Fling @fling Rules for Designing Amazing Apps
68. mobile design is an entirely new breed of design. MADE WITH LOVE IN SEATTLE BY
69. Phones are about making the most of the moment, simple tasks, & context.
70. MADE WITH LOVE IN SEATTLE BY
71. MADE WITH LOVE IN SEATTLE BY
72. think of your app as a great book. MADE WITH LOVE IN SEATTLE BY
73. think of your app as a great book. MADE WITH LOVE IN SEATTLE BY with a clear beginning, middle and end
76. Tablets are about focus, consumption, simple tasks & portability.
82. ‣ Platform Aesthetic
83. ‣ Platform Aesthetic ‣ Many Resolutions
84. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch
85. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation
86. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids
87. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective
88. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension
89. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions
90. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion
91. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions
92. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color
93. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography
94. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography ‣ Iconography
96. p/z universal
97. p/z universal build a website that provided the best possible experience to the context.
98. p/z universal build a website that provided the best possible experience to the context. iPad magazine
99. p/z universal build a website that provided the best possible experience to the context. iPad magazine iPhone web app
100. p/z universal build a website that provided the best possible experience to the context. iPad magazine iPhone web app Desktop website
101. MADE WITH LOVE IN SEATTLE BY
103. 1x HTML5 Markup
104. 1x HTML5 Markup 1x Hexadecimal CSS Framework
105. 1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework
106. 1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework 3x Javascript Frameworks
107. 1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework 3x Javascript Frameworks 12x Media-Query-based Layouts
108. a hexadecimal what?
109. the hex-grid Typically when using a grid web designers are typically only using vertical units.
110. 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.
112. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #2 Brian Fling @fling Rules for Designing Amazing Apps
113. 1 out of 3 projects go sideways because of BAD DATA MADE WITH LOVE IN SEATTLE BY
115. MADE WITH LOVE IN SEATTLE BY
120. and there is no Design without Data Content is Data
121. and there is no Design without Data Content is Data
122. Creating Amazing Experiences for all Mobile Devices This document contains confidential information and is provided for private review only. Do not distribute without permission. Screenshot Placeholder 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.
124. “A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities.”
129. MADE WITH LOVE IN SEATTLE BY
131. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #3 Brian Fling @fling Rules for Designing Amazing Apps
132. JARGON ALERT Context The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.
133. context adds meaning to data MADE WITH LOVE IN SEATTLE BY
135. Events TV Billboard Radio Live Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device QR
136. Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device WAP SMS QR Cod SMS QR Code WAP SMS SMS Bluetooth WAP MMS MMS
137. Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device IVR SMS IVR SMS WAP SMS QR Code SMS QR Code SMS MMS SMS WAP SMS SMS Bluetooth Notify WAP WAP MMS Email Send to Friend W No B WAP Site WAP Site Join Buy MMS ify d to nd Discuss Send to Friend Notify Buy Send to Friend Notify
138. Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device IVR SMS IVR SMS WAP SMS QR Code SMS QR Code SMS SMS MMS SMS WAP SMS SMS Bluetooth Notify WAP WAP MMS Email Send to Friend WAP Site Notify Buy WAP Site WAP Site Send to Friend Join Buy Notify Notify Send to Friend Post WAP Site MMS Send to Friend Notify Send to Friend Join Discuss Send to Friend Notify Down load Down load Notify Vote Join Vote Notify Buy Send to Friend Notify
139. types of context Big Ideas Location Device State of Mind
144. types of context Big Ideas Location Device State of Mind
146. types of context Big Ideas Location Device State of Mind
149. types of context Big Ideas Location Device State of Mind
151. always add value to the users context* MADE WITH LOVE IN SEATTLE BY
152. always add value to the users context* *Doing so requires a little Psych 101 MADE WITH LOVE IN SEATTLE BY
153. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #4 Brian Fling @fling Rules for Designing Amazing Apps
156. interactions evoke strong feelings MADE WITH LOVE IN SEATTLE BY
158. MEDIUM (Mobile)
159. CONTEXT MEDIUM (Mobile)
160. CONTEXT MEDIUM (Mobile) INTERACTION
161. The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered 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 beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett jjg@jjg.net Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally 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 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. task-oriented information-oriented 30 March 2000 © 2000 Jesse James Garrett http://www.jjg.net/ia/
162. Information Architecture: structural design of the information space to facilitate intuitive access to content Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Content Requirements: definition of content elements required in the site in order to meet user needs Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components time Conception Completion nctional cations Content Requirements eraction ign Information Architecture Visual Design rmation Design rface Design Navigation Design ite Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site information-oriented
163. Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Concrete Abstract Functional Specifications C Requir Interaction Design Inf Archit Visual Desig Information Desi Interface Design Nav Site Objectives User Nee task-oriented
164. JARGON ALERT Needs The circumstances in which something is necessary, or that require some course of action.
165. 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.
171. CONTEXT MEDIUM (Mobile) INTERACTION
172. CONTEXT MEDIUM (Mobile) INTERACTION ?
177. JARGON ALERT Skeuomorph A derivative object that retains ornamental design cues to a structure that was necessary in the original.
178. http://www.flickr.com/photos/youraccount/sets/72157619967702538/with/3642814120/
186. great interactions evoke feelings MADE WITH LOVE IN SEATTLE BY
189. “Unlike personality, attitudes are expected to change as a function of experience.”
191. Affect
192. Affect The emotional response that expresses an individual's degree of preference for an entity.
193. Affect Behavior
194. Affect Behavior The verbal indication or typical behavioral tendency of an individual.
195. Affect Behavior Cognition
196. Affect Behavior Cognition The evaluation of the entity that constitutes an individual's beliefs about the object.
200. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS 1. Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #5 Brian Fling @fling Rules for Designing Amazing Apps
201. details matter MADE WITH LOVE IN SEATTLE BY
209. design @ 1600% MADE WITH LOVE IN SEATTLE BY
213. 6x Navigation & Toolbars
214. 6x Navigation & Toolbars 3x Alerts & Modals
215. 6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views
216. 6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls
217. 6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls 13x Application Controls
218. 6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls 13x Application Controls 9x Animations & Transitions
220. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #6 Brian Fling @fling Rules for Designing Amazing Apps
221. there are few tools or processes that suit mobile MADE WITH LOVE IN SEATTLE BY
222. DESIGNERS DEVELOPERS
223. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
224. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
225. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
226. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
227. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
228. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
229. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
230. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
231. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
235. Mobile Design is Web Design
236. Mobile Design is Web Design
238. Mobile Design is Software Design
239. Mobile Design is Software Design
240. This document contains confidential information and is provided for private review only. Do not distribute without permission. A Fully Agile Agency From Start to Finish
241. This document contains confidential information and is provided for private review only. Do not distribute without permission.
242. This document contains confidential information and is provided for private review only. Do not distribute without permission.
243. Process
244. Define Process
245. Data Define Process
246. Interaction Data Define Process
247. Design Interaction Data Define Process
248. Design Interaction Data Define Process Deliverables
249. Design Interaction Data Define Project Brief Process Deliverables
250. Design Interaction Data Define Project Brief Journeys Process Deliverables
251. Design Interaction Data Define Project Brief Journeys Context Map Process Deliverables
252. Design Interaction Data Define Project Brief Journeys Context Map Content Audit Process Deliverables
253. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Process Deliverables
254. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling Process Deliverables
255. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Process Deliverables
256. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Process Deliverables
257. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams Process Deliverables
258. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams App Map Process Deliverables
259. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams App Map Reference Design Process Deliverables
260. Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams App Map Reference Design Design Brief Process Deliverables
261. Design Interaction Data Define 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 Deliverables
262. Design Interaction Data Define 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 Deliverables
263. Design Interaction Data Define 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 Deliverables
264. Design Interaction Data Define 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 Deliverables
265. 6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. Brian Fling @fling Rules for Designing Amazing Apps
274. EHARMONY HOME v1
275. EHARMONY HOME v2
276. EHARMONY HOME v3
277. EHARMONY HOME v4
278. EHARMONY HOME v5
279. EHARMONY HOME v6
280. Get in Touch Find Out How We Can Help You. Brian Fling Founder & Creative Director brian@pinchzoom.com +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