0
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Creating Compelling Mobile User Experiences:
W...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Disclaimer
2
These opinions and thoughts are m...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
About Me
6
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile is Everywhere
8
 [photo from last year...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Mobile First
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What is prototype?
12
…incomplete versions of ...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
Technical Prototype
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Prototype Spectrum
21
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Low Fidelity Prototyping Tools
22
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Low Fidelity Prototyping
 Quick to develop
 ...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Source: http://usereccentric.com/entries/00...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Device Central
25
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
Emulator Device
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe on Android
27
Flash Player 10.1 for Andr...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Medium Fidelity Prototyping Tools
28
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Medium Fidelity Prototyping
 More “real” user...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Fireworks Prototype Demo
31
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Add a little <meta> to your life
32
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
High Fidelity Prototyping Tools
33
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
High Fidelity Prototyping
 Closer to reality
...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Prototyping Demo
35
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
So what can
Prototyping solve?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
Data based on respective products published...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Pixels Per Inch (PPI)
Device Resolution PPI Ph...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Bitmaps vs. Vectors
39
Bitmap Vector
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Touch Targets
40
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Touch Targets
41
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Screen Orientation
42
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ergonomics
43
You are holding it
wrong ;)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ergonomics
44
How will they touch it?
 One Th...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
“Hero” – Flex Mobile
45
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hero in a Nutshell: Mobile Application Develop...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Prototyping
Pitfalls
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
“It is a Fidelity
Trap”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
“Looks Done to me!
Ship IT!”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Prototyping: A Practitioner's Guide
50
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Resources
51
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
A few guidelines
for better
mobile experien...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Design Tips
 Very short learning curve
 Fast...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Layout Tips
 Use screen space efficiently
 C...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Content Tips
 Optimize lists
 Minimize scrol...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hardware Tips
 Varied screen sizes
 Conform ...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
Q&A
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Contact Me
chris.griffith@gmail.com
Twitter: @...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60
Turn in your Surveys for a chance to WIN!
...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in...5
×

Creating Compelling Mobile User Experiences

1,374

Published on

These are the slides that I presented at the 2010 Adobe MAX conference.

Explore the role of prototyping in designing and developing compelling mobile applications. We'll examine the forms that prototypes can take (from paper prototypes to rich, interactive simulations), their advantages and costs, and how Adobe tools can be used to create them. Then we'll walk through creating a user interface for a mobile application using Adobe Illustrator, Photoshop, Flash Professional, Flash Catalyst, and Flash Builder. This presentation also covers best practices for UX, as well as developer-focused tips and tricks.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,374
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Full of constraints:
    Memory
    Processor
    Screen size
    Screen orientation
    Environment
    Network
    Time of Use
    Interaction models
    As designers & developers have to overcome these challenges, best designs learn to embrace them
  • Source: http://www.whattofix.com/blog/archives/2008/05/peace_for_pachy.php
  • But in the end it is really the Power of Show and Tell that a prototype can give over more traditional forms of communication.
  • Bring more fidelity to your designs

    <meta> tag tricks

    On device browser demo

  • Transcript of "Creating Compelling Mobile User Experiences"

    1. 1. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Creating Compelling Mobile User Experiences: What You Need to Know Chris Griffith
    2. 2. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Disclaimer 2 These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
    3. 3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
    4. 4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
    5. 5. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
    6. 6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. About Me 6
    7. 7. © 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
    8. 8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Mobile First
    9. 9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
    10. 10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
    11. 11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. What is prototype? 12 …incomplete versions of the software 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. (http://en.wikipedia.org/wiki/Software_prototyping)
    12. 12. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
    13. 13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
    14. 14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 Technical Prototype
    15. 15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
    16. 16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
    17. 17. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
    18. 18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
    19. 19. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    20. 20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Prototype Spectrum 21
    21. 21. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Low Fidelity Prototyping Tools 22
    22. 22. © 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
    23. 23. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24 Source: http://usereccentric.com/entries/000333.html
    24. 24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Device Central 25
    25. 25. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 Emulator Device
    26. 26. © 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)
    27. 27. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Medium Fidelity Prototyping Tools 28
    28. 28. © 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
    29. 29. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
    30. 30. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Fireworks Prototype Demo 31
    31. 31. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Add a little <meta> to your life 32
    32. 32. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Fidelity Prototyping Tools 33
    33. 33. © 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
    34. 34. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flash Prototyping Demo 35
    35. 35. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 So what can Prototyping solve?
    36. 36. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 Data based on respective products published technical specifications
    37. 37. © 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 specifications
    38. 38. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Bitmaps vs. Vectors 39 Bitmap Vector
    39. 39. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Touch Targets 40
    40. 40. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Touch Targets 41
    41. 41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Screen Orientation 42
    42. 42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Ergonomics 43 You are holding it wrong ;)
    43. 43. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Ergonomics 44 How will they touch it?  One Thumb?  Two Thumbs?  Pointer Finger?
    44. 44. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. “Hero” – Flex Mobile 45
    45. 45. © 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
    46. 46. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47 Prototyping Pitfalls
    47. 47. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 “It is a Fidelity Trap”
    48. 48. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49 “Looks Done to me! Ship IT!”
    49. 49. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Prototyping: A Practitioner's Guide 50
    50. 50. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Resources 51
    51. 51. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52 A few guidelines for better mobile experiences…
    52. 52. © 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
    53. 53. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Layout Tips  Use screen space efficiently  Condense information  Mobilize, don't miniaturize 54
    54. 54. © 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
    55. 55. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hardware Tips  Varied screen sizes  Conform to the platform  Varied input hardware  Conserve power 56
    56. 56. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58 Q&A
    57. 57. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Contact Me chris.griffith@gmail.com Twitter: @chrisgriffith Blog: http://chrisgriffith.wordpress.com/ 59
    58. 58. © 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
    59. 59. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    1. A particular slide catching your eye?

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

    ×