Contenu connexe Similaire à Creating Compelling Mobile User Experiences (20) Plus de Chris Griffith (20) Creating Compelling Mobile User Experiences1. © 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
These opinions and thoughts are my own,
and may or may not reflect 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.
Mobile is Everywhere
8
[photo from last year’s MAX before the sneaks with everyone holding up
their devices]
Mobile is Everywhere
8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Mobile First
9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
Technical Prototype
15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
17. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
19. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Prototype Spectrum
21
21. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Low Fidelity Prototyping Tools
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Source: http://usereccentric.com/entries/000333.html
24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Device Central
25
25. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
Emulator Device
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Medium Fidelity Prototyping Tools
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
30. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Fireworks Prototype Demo
31
31. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Add a little <meta> to your life
32
32. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
High Fidelity Prototyping Tools
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Prototyping Demo
35
35. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
So what can
Prototyping solve?
36. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
Data based on respective products published technical specifications
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Bitmaps vs. Vectors
39
Bitmap Vector
39. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Touch Targets
40
40. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Touch Targets
41
41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Screen Orientation
42
42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ergonomics
43
You are holding it
wrong ;)
43. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ergonomics
44
How will they touch it?
One Thumb?
Two Thumbs?
Pointer Finger?
44. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
“Hero” – Flex Mobile
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Prototyping
Pitfalls
47. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
“It is a Fidelity
Trap”
48. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
“Looks Done to me!
Ship IT!”
49. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Prototyping: A Practitioner's Guide
50
50. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Resources
51
51. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
A few guidelines
for better
mobile experiences…
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Layout Tips
Use screen space efficiently
Condense information
Mobilize, don't miniaturize
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. © 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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
Q&A
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. © 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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Notes de l'éditeur 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