Designing Mobile Experiences

3994db1807811ceface5667bbbcb7311?s=47 Brian Fling
November 03, 2011

Designing Mobile Experiences

In this talk I talk about what it takes to create an amazing mobile experience, be innovative and include some tips and tricks we've learned at pinch/zoom to be successful.

3994db1807811ceface5667bbbcb7311?s=128

Brian Fling

November 03, 2011
Tweet

Transcript

  1. MADE WITH LOVE IN SEATTLE BY designing by Brian Fling

    mobile experiences
  2. what does it take to create an amazing mobile experience?

    MADE WITH LOVE IN SEATTLE BY
  3. None
  4. None
  5. None
  6. None
  7. None
  8. these experiences are not made in Photoshop MADE WITH LOVE

    IN SEATTLE BY
  9. 1965 MADE WITH LOVE IN SEATTLE BY

  10. MADE WITH LOVE IN SEATTLE BY

  11. MADE WITH LOVE IN SEATTLE BY

  12. MADE WITH LOVE IN SEATTLE BY

  13. MADE WITH LOVE IN SEATTLE BY

  14. MADE WITH LOVE IN SEATTLE BY

  15. MADE WITH LOVE IN SEATTLE BY

  16. MADE WITH LOVE IN SEATTLE BY

  17. MADE WITH LOVE IN SEATTLE BY

  18. MADE WITH LOVE IN SEATTLE BY

  19. MADE WITH LOVE IN SEATTLE BY

  20. None
  21. He never made any money from it. MADE WITH LOVE

    IN SEATTLE BY
  22. MADE WITH LOVE IN SEATTLE BY

  23. MADE WITH LOVE IN SEATTLE BY

  24. MADE WITH LOVE IN SEATTLE BY

  25. FAIL MADE WITH LOVE IN SEATTLE BY

  26. why did my father fail? MADE WITH LOVE IN SEATTLE

    BY
  27. 2000 MADE WITH LOVE IN SEATTLE BY

  28. 3DEF MADE WITH LOVE IN SEATTLE BY

  29. MADE WITH LOVE IN SEATTLE BY

  30. MADE WITH LOVE IN SEATTLE BY

  31. MADE WITH LOVE IN SEATTLE BY

  32. Ways of Making Money in Mobile 2 MADE WITH LOVE

    IN SEATTLE BY
  33. Ringtones. MADE WITH LOVE IN SEATTLE BY

  34. Carrier Logos. MADE WITH LOVE IN SEATTLE BY

  35. MADE WITH LOVE IN SEATTLE BY

  36. MADE WITH LOVE IN SEATTLE BY

  37. Lost our backing & failed. MADE WITH LOVE IN SEATTLE

    BY
  38. MADE WITH LOVE IN SEATTLE BY

  39. None
  40. why does innovative technology fail, while others succeed? MADE WITH

    LOVE IN SEATTLE BY
  41. a mobile design & development firm located in Fremont a

    few of our clients...
  42. a mobile design & development firm located in Fremont a

    few of our clients... “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
  43. mobile is really damn hard... MADE WITH LOVE IN SEATTLE

    BY ... it always has been
  44. the craft of just creating great mobile design is not

    enough MADE WITH LOVE IN SEATTLE BY
  45. None
  46. user goals business goals technical goals sweet spot

  47. user goals business goals technical goals sweet spot increases productivity

    dispenses soda as easy to use
  48. mobile is really damn hard. MADE WITH LOVE IN SEATTLE

    BY
  49. examples MADE WITH LOVE IN SEATTLE BY

  50. None
  51. MADE WITH LOVE IN SEATTLE BY

  52. MADE WITH LOVE IN SEATTLE BY

  53. MADE WITH LOVE IN SEATTLE BY

  54. MADE WITH LOVE IN SEATTLE BY

  55. MADE WITH LOVE IN SEATTLE BY

  56. 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.
  57. user goals business goals technical goals sweet spot disrupt business

  58. MADE WITH LOVE IN SEATTLE BY

  59. MADE WITH LOVE IN SEATTLE BY

  60. MADE WITH LOVE IN SEATTLE BY

  61. MADE WITH LOVE IN SEATTLE BY

  62. MADE WITH LOVE IN SEATTLE BY

  63. example MADE WITH LOVE IN SEATTLE BY

  64. None
  65. MADE WITH LOVE IN SEATTLE BY

  66. None
  67. None
  68. refresh product lines before they become tired. happy with just

    50%
  69. a bold vision empowers people to cross the chasm together.

    MADE WITH LOVE IN SEATTLE BY
  70. MADE WITH LOVE IN SEATTLE BY

  71. MADE WITH LOVE IN SEATTLE BY “As long as a

    function is confined to a small area on a wafer, the amount of capacitance which must be driven is distinctly limited.” —Gordon E. Moore April 19, 1965
  72. + 9 years = MADE WITH LOVE IN SEATTLE BY

  73. computing network internet devices web 2010 2000 1990 1980 1970

    2020 ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  74. computing network internet devices web 2010 2000 1990 1980 1970

    3G 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  75. computing network internet devices web 2010 2000 1990 1980 1970

    IPv4 3G IPv6 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  76. computing network internet devices web 2010 2000 1990 1980 1970

    feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  77. 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 HTML5 academia MADE WITH LOVE IN SEATTLE BY
  78. 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 HTML5 academia MADE WITH LOVE IN SEATTLE BY
  79. 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 HTML5 academia MADE WITH LOVE IN SEATTLE BY touch IPv6 4G ubiquity HTML5
  80. MADE WITH LOVE IN SEATTLE BY MOBILE BOOTCAMP

  81. ‣ designed to get brands on the mobile path quickly

    ‣ it lasts from 1-5 days depending on the size and scope of the project ‣ we create a shared vision of how mobile is meant to improve your business ‣ we discover what you do well ‣ we uncover areas where you can improve ‣ we define what success will look like ‣ we define how mobile will improve your bottom line ‣ the result is a mobile strategy that you can start on today that will take you into tomorrow MADE WITH LOVE IN SEATTLE BY
  82. user goals business goals technical goals sweet spot disrupt business

    empower users
  83. mobile is an entirely new breed. MADE WITH LOVE IN

    SEATTLE BY
  84. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

    ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography ‣ Iconography
  85. None
  86. None
  87. 6x Navigation & Toolbars 3x Alerts & Modals 26x Types

    of Views 15x View Controls 13x Application Controls 9x Animations & Transitions
  88. None
  89. Phones are about making the most of the moment, simple

    tasks, & context.
  90. MADE WITH LOVE IN SEATTLE BY

  91. MADE WITH LOVE IN SEATTLE BY

  92. think of your app as a great book. MADE WITH

    LOVE IN SEATTLE BY with a great beginning, middle and end
  93. None
  94. Tablets are about focus, consumption, simple tasks & portability.

  95. examples MADE WITH LOVE IN SEATTLE BY

  96. MADE WITH LOVE IN SEATTLE BY JOINT VENTURE

  97. MADE WITH LOVE IN SEATTLE BY us mobile experts them

    customer experts the product
  98. None
  99. None
  100. None
  101. None
  102. ‣ The BBC app was designed by pinch/zoom ‣ BBC

    hired pinch/zoom based on their deep knowledge and over a decade’s experience of creating mobile experiences ‣ pinch/zoom & BBC designed the iPad app as a new means to connect people to the wealth of BBC content ‣ We worked with BBC to define strategy, pricing, wording, content, design, interactions and more ‣ pinch/zoom created an interaction concept to test with 32 users between Dec 2010 and Feb 2011 in New York ‣ New York-based usability firm, Creative Good facilitated the usability tests ‣ We did rapid design iteration based on real-time user and client feedback
  103. ‣ iPad users are incredibly sophisticated ‣ Users have an

    expectation of the “Apple Aesthetic” when it comes to interaction and user experience. Pixel perfection is important. ‣ Users prefer Need-driven over Marketing-driven Design ‣ Users are in control of their iPad experience, and will remove, close, delete or leave anything they perceive as marketing or advertising activity. ‣ Less is more ‣ This is true when talking about animations or content on each screen. Users have an expectation of interactions but are impatient with too much animation. ‣ Gestures Matter ‣ Web metaphors, like scrolling are considered “cheap” or “lower quality.” Users prefer “native” metaphors like swiping.
  104. user goals business goals technical goals sweet spot disrupt business

    device constraints empower users
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

  112. example MADE WITH LOVE IN SEATTLE BY

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

    experience to the context. iPad magazine iPhone web app Desktop website
  114. MADE WITH LOVE IN SEATTLE BY

  115. 1x HTML5 Markup 1x Typography Framework 3x Javascript Frameworks 12x

    Media-Query-based Layouts 1x Hexadecimal CSS Framework
  116. a hexadecimal what? MADE WITH LOVE IN SEATTLE BY

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

    typically only using vertical units.
  118. 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.
  119. MADE WITH LOVE IN SEATTLE BY

  120. MADE WITH LOVE IN SEATTLE BY

  121. MADE WITH LOVE IN SEATTLE BY

  122. MADE WITH LOVE IN SEATTLE BY

  123. MADE WITH LOVE IN SEATTLE BY

  124. 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
  125. MADE WITH LOVE IN SEATTLE BY CARMEN agile product management

  126. 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
  127. you can create innovative technology that succeeds. MADE WITH LOVE

    IN SEATTLE BY
  128. you can design mobile experiences that empower. MADE WITH LOVE

    IN SEATTLE BY
  129. user goals business goals technical goals sweet spot MADE WITH

    LOVE IN SEATTLE BY
  130. user goals business goals technical goals sweet spot MADE WITH

    LOVE IN SEATTLE BY Trust the Triangle!
  131. mobiledesign.org

  132. Get in Touch Find Out How We Can Help You.

    Brian Fling Founder & CEO brian@pinchzoom.com +1 206 351-6060 @fling book mobiledesign.org company pinchzoom.com blog pinchzoom.com/fling THANK YOU!