Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Mobile Experiences

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.

Brian Fling

November 03, 2011
Tweet

More Decks by Brian Fling

Other Decks in Design

Transcript

  1. 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
  2. the craft of just creating great mobile design is not

    enough MADE WITH LOVE IN SEATTLE BY
  3. 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.
  4. 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
  5. computing network internet devices web 2010 2000 1990 1980 1970

    2020 ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. ‣ 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
  13. ‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

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

    of Views 15x View Controls 13x Application Controls 9x Animations & Transitions
  15. think of your app as a great book. MADE WITH

    LOVE IN SEATTLE BY with a great beginning, middle and end
  16. ‣ 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
  17. ‣ 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.
  18. p/z universal build a website that provided the best possible

    experience to the context. iPad magazine iPhone web app Desktop website
  19. 1x HTML5 Markup 1x Typography Framework 3x Javascript Frameworks 12x

    Media-Query-based Layouts 1x Hexadecimal CSS Framework
  20. the hex-grid Typically when using a grid web designers are

    typically only using vertical units.
  21. 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.
  22. 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
  23. 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
  24. Get in Touch Find Out How We Can Help You.

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