Designing mobile experiences

6,142
-1

Published on

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.

Published in: Design, Business, Education
0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,142
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
245
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide

Designing mobile experiences

  1. designing mobile experiences by Brian Fling MADE WITH LOVE IN SEATTLE BY
  2. what does it take tocreate an amazingmobile experience? MADE WITH LOVE IN SEATTLE BY
  3. these experiences arenot made in Photoshop MADE WITH LOVE IN SEATTLE BY
  4. 1965 MADE WITH LOVE IN SEATTLE BY
  5. MADE WITH LOVE IN SEATTLE BY
  6. MADE WITH LOVE IN SEATTLE BY
  7. MADE WITH LOVE IN SEATTLE BY
  8. MADE WITH LOVE IN SEATTLE BY
  9. 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. He never made anymoney from it. 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. FAIL MADE WITH LOVE IN SEATTLE BY
  20. why didmy father fail? MADE WITH LOVE IN SEATTLE BY
  21. 2000 MADE WITH LOVE IN SEATTLE BY
  22. 3DEF MADE WITH LOVE IN SEATTLE BY
  23. MADE WITH LOVE IN SEATTLE BY
  24. MADE WITH LOVE IN SEATTLE BY
  25. MADE WITH LOVE IN SEATTLE BY
  26. 2Ways ofMakingMoney inMobile MADE WITH LOVE IN SEATTLE BY
  27. Ringtones. MADE WITH LOVE IN SEATTLE BY
  28. CarrierLogos. MADE WITH LOVE IN SEATTLE BY
  29. MADE WITH LOVE IN SEATTLE BY
  30. MADE WITH LOVE IN SEATTLE BY
  31. Lost ourbacking & failed. MADE WITH LOVE IN SEATTLE BY
  32. MADE WITH LOVE IN SEATTLE BY
  33. why does innovativetechnology fail, whileothers succeed? MADE WITH LOVE IN SEATTLE BY
  34. a mobile design & developmentfirm located in Fremonta few of our clients...
  35. “We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could bea mobile design & developmentfirm located in Fremont the worst app ever made. —Scott Dierdorfa few of our clients... @sdierdorf
  36. mobile is reallydamn hard... ... it always has been MADE WITH LOVE IN SEATTLE BY
  37. the craft of just creatinggreat mobile design isnot enough MADE WITH LOVE IN SEATTLE BY
  38. ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals
  39. increases dispenses ls tec oaproductivity soda hn sg ica es lg sweet sin spot oa bu ls user goals as easy to use
  40. mobile is reallydamn hard. MADE WITH LOVE IN SEATTLE BY
  41. examples MADE WITH LOVE IN SEATTLE BY
  42. MADE WITH LOVE IN SEATTLE BY
  43. MADE WITH LOVE IN SEATTLE BY
  44. MADE WITH LOVE IN SEATTLE BY
  45. MADE WITH LOVE IN SEATTLE BY
  46. MADE WITH LOVE IN SEATTLE BY
  47. 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.
  48. disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals
  49. MADE WITH LOVE IN SEATTLE BY
  50. MADE WITH LOVE IN SEATTLE BY
  51. MADE WITH LOVE IN SEATTLE BY
  52. MADE WITH LOVE IN SEATTLE BY
  53. MADE WITH LOVE IN SEATTLE BY
  54. example MADE WITH LOVE IN SEATTLE BY
  55. MADE WITH LOVE IN SEATTLE BY
  56. refresh product lines before they become tired.happy with just 50%
  57. a bold vision empowerspeople to cross thechasm together. MADE WITH LOVE IN SEATTLE BY
  58. MADE WITH LOVE IN SEATTLE BY
  59. “As long as a function is confined toa small area on a wafer, the amountof capacitance which must be drivenis distinctly limited.” —Gordon E. Moore April 19, 1965 MADE WITH LOVE IN SEATTLE BY
  60. + 9 years = MADE WITH LOVE IN SEATTLE BY
  61. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  62. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  63. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devicesweb MADE WITH LOVE IN SEATTLE BY
  64. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb MADE WITH LOVE IN SEATTLE BY
  65. 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 HTML5 MADE WITH LOVE IN SEATTLE BY
  66. 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 HTML5 MADE WITH LOVE IN SEATTLE BY
  67. 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 HTML5 MADE WITH LOVE IN SEATTLE BY
  68. MOBILE BOOTCAMP MADE WITH LOVE IN SEATTLE BY
  69. ‣ 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
  70. disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals empower users
  71. mobile is anentirely new breed. MADE WITH LOVE IN SEATTLE BY
  72. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective ‣ Iconography‣ Dimension
  73. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Transitions
  74. Phones areabout makingthe most ofthe moment,simple tasks,& context.
  75. MADE WITH LOVE IN SEATTLE BY
  76. MADE WITH LOVE IN SEATTLE BY
  77. think of your app as a great book. with a great beginning, middle and end MADE WITH LOVE IN SEATTLE BY
  78. Tablets areabout focus,consumption,simple tasks& portability.
  79. examples MADE WITH LOVE IN SEATTLE BY
  80. JOINT VENTURE MADE WITH LOVE IN SEATTLE BY
  81. us themmobile experts customer experts the product MADE WITH LOVE IN SEATTLE BY
  82. ‣ 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
  83. ‣ 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.
  84. disrupt device ls tec oabusiness constraints hn sg ica es lg sweet sin spot oa bu ls user goals empower users
  85. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  86. example MADE WITH LOVE IN SEATTLE BY
  87. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website
  88. MADE WITH LOVE IN SEATTLE BY
  89. 1x HTML5 Markup1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts1x Hexadecimal CSS Framework
  90. a hexadecimal what? MADE WITH LOVE IN SEATTLE BY
  91. the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
  92. the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.
  93. MADE WITH LOVE IN SEATTLE BY
  94. MADE WITH LOVE IN SEATTLE BY
  95. MADE WITH LOVE IN SEATTLE BY
  96. MADE WITH LOVE IN SEATTLE BY
  97. MADE WITH LOVE IN SEATTLE BY
  98. 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 Define Data Interaction Design Process
  99. CARMEN agile product management MADE WITH LOVE IN SEATTLE BY
  100. A Fully Agile Agency From Start to FinishThis document contains confidential information and is provided for private review only. Do not distribute without permission.
  101. you can createinnovative technologythat succeeds. MADE WITH LOVE IN SEATTLE BY
  102. you can design mobileexperiences thatempower. MADE WITH LOVE IN SEATTLE BY
  103. ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals MADE WITH LOVE IN SEATTLE BY
  104. ls tec oa hn sg ica esTrust the Triangle! lg sweet sin spot oa bu ls user goals MADE WITH LOVE IN SEATTLE BY
  105. mobiledesign.org
  106. Get in TouchTHANK YOU! Find Out How We Can Help You. Brian Fling Founder & CEO@fling brian@pinchzoom.com +1 206 351-6060book mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×