6 Rules to Designing Amazing Mobile Apps

3994db1807811ceface5667bbbcb7311?s=47 Brian Fling
October 02, 2011

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.

3994db1807811ceface5667bbbcb7311?s=128

Brian Fling

October 02, 2011
Tweet

Transcript

  1. 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
  2. 6.
  3. 7.
  4. 8.
  5. 9.
  6. 10.
  7. 11.
  8. 12.
  9. 13.
  10. 14.
  11. 15.
  12. 16.
  13. 17.
  14. 18.
  15. 20.
  16. 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
  17. 23.
  18. 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
  19. 30.
  20. 32.
  21. 33.
  22. 35.
  23. 36.
  24. 37.
  25. 38.
  26. 39.
  27. 40.
  28. 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
  29. 43.
  30. 44.
  31. 45.
  32. 46.
  33. 48.
  34. 52.
  35. 54.
  36. 55.
  37. 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”
  38. 57.
  39. 58.
  40. 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
  41. 60.
  42. 61.
  43. 63.
  44. 64.
  45. 66.
  46. 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
  47. 73.

    think of your app as a great book. MADE WITH

    LOVE IN SEATTLE BY with a clear beginning, middle and end
  48. 74.
  49. 75.
  50. 77.
  51. 78.
  52. 79.
  53. 80.
  54. 81.
  55. 87.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective
  56. 88.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension
  57. 89.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions
  58. 90.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion
  59. 91.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions
  60. 92.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color
  61. 93.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography
  62. 94.

    ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography ‣ Iconography
  63. 95.
  64. 98.

    p/z universal build a website that provided the best possible

    experience to the context. iPad magazine
  65. 99.

    p/z universal build a website that provided the best possible

    experience to the context. iPad magazine iPhone web app
  66. 100.

    p/z universal build a website that provided the best possible

    experience to the context. iPad magazine iPhone web app Desktop website
  67. 102.
  68. 107.

    1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework

    3x Javascript Frameworks 12x Media-Query-based Layouts
  69. 109.

    the hex-grid Typically when using a grid web designers are

    typically only using vertical units.
  70. 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.
  71. 111.
  72. 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
  73. 113.

    1 out of 3 projects go sideways because of BAD

    DATA MADE WITH LOVE IN SEATTLE BY
  74. 114.
  75. 116.
  76. 117.
  77. 118.
  78. 119.
  79. 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.
  80. 123.
  81. 124.

    “A new form of Web content that is meaningful to

    computers will unleash a revolution of new possibilities.”
  82. 125.
  83. 126.
  84. 127.
  85. 128.
  86. 130.
  87. 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
  88. 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.
  89. 134.
  90. 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
  91. 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
  92. 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
  93. 140.
  94. 141.
  95. 142.
  96. 143.
  97. 145.
  98. 147.
  99. 148.
  100. 150.
  101. 152.

    always add value to the users context* *Doing so requires

    a little Psych 101 MADE WITH LOVE IN SEATTLE BY
  102. 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
  103. 154.
  104. 155.
  105. 157.
  106. 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/
  107. 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
  108. 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
  109. 164.
  110. 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.
  111. 166.
  112. 167.
  113. 168.
  114. 169.
  115. 170.
  116. 173.
  117. 174.
  118. 175.
  119. 176.
  120. 177.

    JARGON ALERT Skeuomorph A derivative object that retains ornamental design

    cues to a structure that was necessary in the original.
  121. 179.
  122. 180.
  123. 181.
  124. 182.
  125. 183.
  126. 184.
  127. 185.
  128. 187.
  129. 188.
  130. 190.
  131. 191.
  132. 196.
  133. 197.
  134. 198.
  135. 199.
  136. 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
  137. 202.
  138. 203.
  139. 204.
  140. 205.
  141. 206.
  142. 207.
  143. 208.
  144. 210.
  145. 211.
  146. 212.
  147. 217.

    6x Navigation & Toolbars 3x Alerts & Modals 26x Types

    of Views 15x View Controls 13x Application Controls
  148. 218.

    6x Navigation & Toolbars 3x Alerts & Modals 26x Types

    of Views 15x View Controls 13x Application Controls 9x Animations & Transitions
  149. 219.
  150. 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
  151. 232.
  152. 233.
  153. 234.
  154. 237.
  155. 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
  156. 241.

    This document contains confidential information and is provided for private

    review only. Do not distribute without permission.
  157. 242.

    This document contains confidential information and is provided for private

    review only. Do not distribute without permission.
  158. 243.
  159. 254.

    Design Interaction Data Define Project Brief Journeys Context Map Content

    Audit API Audit Data Modeling Process Deliverables
  160. 255.

    Design Interaction Data Define Project Brief Journeys Context Map Content

    Audit API Audit Data Modeling App Flow Process Deliverables
  161. 256.

    Design Interaction Data Define Project Brief Journeys Context Map Content

    Audit API Audit Data Modeling App Flow Screen Descriptions Process Deliverables
  162. 257.

    Design Interaction Data Define Project Brief Journeys Context Map Content

    Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams Process Deliverables
  163. 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
  164. 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
  165. 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
  166. 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
  167. 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
  168. 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
  169. 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
  170. 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
  171. 266.
  172. 267.
  173. 268.
  174. 269.
  175. 270.
  176. 271.
  177. 272.
  178. 273.
  179. 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