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

Creating Compelling Mobile User Experiences: What You Need to Know

Creating Compelling Mobile User Experiences: What You Need to Know

Chris Griffith

January 24, 2014
Tweet

More Decks by Chris Griffith

Other Decks in Technology

Transcript

  1. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Creating Compelling Mobile User Experiences: What You Need to Know Chris Griffith
  2. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Disclaimer 2 ese opinions and thoughts are my own, and may or may not re ect the opinions of the company that I work for.
  3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    7 Adobe MAX unconference Adobe MAX 2010 My Personal Recent Mobile Applications
  4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Mobile is Everywhere 8 §  [photo from last year’s MAX before the sneaks with everyone holding up their devices] Mobile is Everywhere
  5. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    What is prototype? 12 …incomplete versions of the so ware program being developed. A prototype typically implements only a small subset of the features of the eventual program, and the implementation may be completely different from that of the eventual product. (h p://en.wikipedia.org/wiki/So ware_prototyping)
  6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Low Fidelity Prototyping §  Quick to develop §  Allows for explorations of ideas §  Can be more difficult to conduct user studies §  Zero coding! 23
  7. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    24 Source: h p://usereccentric.com/entries/000333.html
  8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Adobe on Android 27 Flash Player 10.1 for Android AIR for Android Available onothe Android Market (for selected devices)
  9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Medium Fidelity Prototyping § More “real” user experience § Longer design time § Longer development time § Some level of programming § “Golden Path” / Slideshow 29
  10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    High Fidelity Prototyping §  Closer to reality §  Greater design requirements §  More development time §  Can serve as a reference platform for other groups (Engineering, QA, Marketing) 34
  11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    37 Data based on respective products published technical speci cations
  12. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Pixels Per Inch (PPI) Device Resolution PPI Physical Nexus One/ HTC Incredible/ HTC Desire 800x480 254 3.7’ HTC EVO/ HTC Desire HD 800x480 217 4.3’ Droid/ Droid 2 854x480 265 3.7’ Droid X 854x480 240 4.3’ Samsung Galaxy S Vibrant 800x480 232 4.0’ iPhone 3GS and lower 480x320 163 3.5’ iPhone 4 960x640 326 3.5’ iPad 1024x768 132 9.7’ Galaxy Tab 1024x600 170 7’ 38 Data based on respective products published technical speci cations
  13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Ergonomics 44 How will they touch it? §  One Thumb? §  Two Thumbs? §  Pointer Finger?
  14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Hero in a Nutshell: Mobile Application Development Allow developers to create a single mobile project that will run on multiple mobile environments §  UI components supporting touchscreen interaction §  Application framework fitted with common mobile UI patterns §  Interactive performance tuned for mobile devices 46
  15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    52 A few guidelines for be er mobile experiences…
  16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Design Tips § Very short learning curve § Fast § Look beautiful § Entertain the user § Design In Context 53
  17. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Layout Tips § Use screen space efficiently § Condense information § Mobilize, don't miniaturize 54
  18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Content Tips § Optimize lists § Minimize scrolling § Minimize Typing § Large hit areas § Simple images § Readable text 55
  19. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Hardware Tips § Varied screen sizes § Conform to the platform § Varied input hardware § Conserve power 56
  20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    A few guidelines for better mobile experiences… §  Very short learning curve §  Use screen space efficiently §  Large hit areas §  Simple images §  Optimize lists §  Minimize scrolling §  Varied screen sizes §  Readable text §  Interruptible §  Fast 57 §  Condense information §  Minimize Downloads §  Minimize Typing §  Mobilize, don't miniaturize §  Look beautiful §  Entertain the user §  Varied input hardware §  Conform to the platform §  Conserve power
  21. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Contact Me [email protected] Twitter: @chrisgriffith Blog: http://chrisgriffith.wordpress.com/ 59
  22. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    60 Turn in your Surveys for a chance to WIN! §  Hand in your surveys to the room monitors §  One survey will be selected as a winner of the Adobe Press e-book Adobe Flash Platform from Start to Finish: Working Collaboratively Using Adobe Creative Suite 5 §  Winners will be notified via e-mail at the end of each day 60