$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    Low Fidelity Prototyping Tools
    22

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  28. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    Medium Fidelity Prototyping Tools
    28

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    High Fidelity Prototyping Tools
    33

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    “Hero” – Flex Mobile
    45

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide