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

E47af1013d3ab2bd530c8b87010074b4?s=128

Chris Griffith

January 24, 2014
Tweet

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.

    3
  4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    4
  5. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    5
  6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    About Me 6
  7. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    7 Adobe MAX unconference Adobe MAX 2010 My Personal Recent Mobile Applications
  8. © 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
  9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    9 Mobile First
  10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    10
  11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    11
  12. © 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)
  13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    13
  14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    14
  15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    15 Technical Prototype
  16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    16
  17. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    17
  18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    18
  19. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    19
  20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

    Prototype Spectrum 21
  22. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Low Fidelity Prototyping Tools 22
  23. © 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
  24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

    Device Central 25
  26. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    26 Emulator Device
  27. © 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)
  28. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Medium Fidelity Prototyping Tools 28
  29. © 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
  30. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    30
  31. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Fireworks Prototype Demo 31
  32. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Add a little <meta> to your life 32
  33. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    High Fidelity Prototyping Tools 33
  34. © 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
  35. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Flash Prototyping Demo 35
  36. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    36 So what can Prototyping solve?
  37. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    37 Data based on respective products published technical speci cations
  38. © 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
  39. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Bitmaps vs. Vectors 39 Bitmap Vector
  40. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Touch Targets 40
  41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Touch Targets 41
  42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Screen Orientation 42
  43. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Ergonomics 43 You are holding it wrong ;)
  44. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

    “Hero” – Flex Mobile 45
  46. © 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
  47. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    47 Prototyping Pitfalls
  48. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    48 “It is a Fidelity Trap”
  49. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    49 “Looks Done to me! Ship IT!”
  50. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Prototyping: A Practitioner's Guide 50
  51. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Resources 51
  52. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    52 A few guidelines for be er mobile experiences…
  53. © 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
  54. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Layout Tips § Use screen space efficiently § Condense information § Mobilize, don't miniaturize 54
  55. © 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
  56. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Hardware Tips § Varied screen sizes § Conform to the platform § Varied input hardware § Conserve power 56
  57. © 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
  58. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    58 Q&A
  59. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Contact Me chris.griffith@gmail.com Twitter: @chrisgriffith Blog: http://chrisgriffith.wordpress.com/ 59
  60. © 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
  61. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.