Designing the mobile experience

1,016
-1

Published on

In this presentation Joseph Dickerson, UX Architect for Fortune 500 Company Fiserv, discusses best practices in UX design for mobile with some practical examples and approaches. Topics covered:

- How to do mobile ethnographic research, to understand mobile personas and usage patterns
- Designing for the "immediacy of now", "ego-centric design" and for context of use
- Designing for device constraints
- Mobile usability testing and documentation

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Designing the mobile experience

    1. 1. Designing the Mobile Experience Joseph Dickerson
    2. 2. Agenda
    3. 3. Agenda✤ Foundations
    4. 4. Agenda✤ Foundations✤ User-Centered Design
    5. 5. Agenda✤ Foundations✤ User-Centered Design ✤ Case study
    6. 6. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process
    7. 7. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process✤ Usability testing
    8. 8. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process✤ Usability testing✤ Some things to keep in mind...
    9. 9. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process✤ Usability testing✤ Some things to keep in mind...✤ Final Thoughts/Q&A
    10. 10. About me✤ My names Joe Dickerson✤ User Experience Architect, Fiserv ✤ International and Fortune 500 financial services company based out of the US ✤ Member of Fiserv’ Innovation and Experimentation Team✤ 10+ years doing user-centered design and research✤ In Australia working on the redesign of Westpacs online and mobile presence
    11. 11. Foundations
    12. 12. Foundations✤ First, know what you are designing
    13. 13. Foundations✤ First, know what you are designing ✤ What are your business drivers?
    14. 14. Foundations✤ First, know what you are designing ✤ What are your business drivers? ✤ Who are your customers?
    15. 15. Foundations✤ First, know what you are designing ✤ What are your business drivers? ✤ Who are your customers? ✤ What are you trying to do?
    16. 16. Foundations✤ First, know what you are designing ✤ What are your business drivers? ✤ Who are your customers? ✤ What are you trying to do? ✤ What is your “Vision”?
    17. 17. Foundations✤ First, know what you are designing ✤ What are your business drivers? ✤ Who are your customers? ✤ What are you trying to do? ✤ What is your “Vision”?✤ If you don’t know what you are doing, then how can you make sure you’ve designed it right?
    18. 18. User-centered design
    19. 19. User-centered design✤ Second, know your users
    20. 20. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices
    21. 21. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How?
    22. 22. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How? ✤ User Interviews
    23. 23. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How? ✤ User Interviews ✤ Collaborative design “sketchstorms”
    24. 24. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How? ✤ User Interviews ✤ Collaborative design “sketchstorms” ✤ Observational research (Ethnographic study)
    25. 25. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How? ✤ User Interviews ✤ Collaborative design “sketchstorms” ✤ Observational research (Ethnographic study)✤ Be open-minded, listen, and be prepared to be surprised...
    26. 26. User-centered design✤ A comment from one of our interview subjects during a research project: ✤ “I love my phone, it does everything I need it to do. I could not think about using another one. It’s perfect for me.”✤ Talking about a smart phone, or the iPhone? ✤ …No.
    27. 27. User-centered design✤ A comment from one of our interview subjects during a research project: ✤ “I love my phone, it does everything I need it to do. I could not think about using another one. It’s perfect for me.”✤ Talking about a smart phone, or the iPhone? ✤ …No.
    28. 28. Case study
    29. 29. Mobile Diary Study✤ Interviewed 30 individuals in 4 different states✤ 20 of these interview subjects documented their mobile usage over a week✤ Over a week we cataloged and analysed the results ✤ Identified usage patterns ✤ Created representative personas✤ Used all of this as a reference and an input into our design
    30. 30. The design process
    31. 31. The design process✤ Sketch
    32. 32. The design process✤ Sketch✤ Test
    33. 33. The design process✤ Sketch✤ Test✤ Revise
    34. 34. The design process✤ Sketch✤ Test✤ Revise✤ Iterate
    35. 35. The design process✤ Sketch✤ Test✤ Revise✤ Iterate✤ Try and Fail, successfully.
    36. 36. Design tools
    37. 37. Design tools✤ Paper
    38. 38. Design tools✤ Paper✤ Visio/Omnigraffle
    39. 39. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote
    40. 40. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP
    41. 41. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP✤ Code
    42. 42. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP✤ Code✤ Whatever tool works best for you - there is no magic bullet that makes your designs better
    43. 43. Usability Testing - Methods
    44. 44. Usability Testing - Methods✤ Test your design!
    45. 45. Usability Testing - Methods✤ Test your design!✤ Test Methods
    46. 46. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype
    47. 47. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype ✤ Test on computer, using Keynote/powerpoint/Axure
    48. 48. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype ✤ Test on computer, using Keynote/powerpoint/Axure ✤ Test on device - mockup/prototype (use camera roll)
    49. 49. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype ✤ Test on computer, using Keynote/powerpoint/Axure ✤ Test on device - mockup/prototype (use camera roll) ✤ Test on device - compiled code
    50. 50. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype ✤ Test on computer, using Keynote/powerpoint/Axure ✤ Test on device - mockup/prototype (use camera roll) ✤ Test on device - compiled code ✤ Works great if you are using an agile process
    51. 51. Usability Testing - Tools
    52. 52. Usability Testing - Tools✤ Silverback (for Mac) ✤ Captures the screen and the webcam video
    53. 53. Usability Testing - Tools✤ Silverback (for Mac) ✤ Captures the screen and the webcam video✤ Morae (for PC) ✤ Great for devise testing ✤ You can use a web or video camera to capture the device
    54. 54. Usability Testing - Tools✤ Silverback (for Mac) ✤ Captures the screen and the webcam video✤ Morae (for PC) ✤ Great for devise testing ✤ You can use a web or video camera to capture the device✤ Blueprint for the iPad ✤ Lets you create clickable prototypes that can "run" on the device
    55. 55. Some things to keep in mind..
    56. 56. Platforms✤ There’s three major platforms, and a multitude of devices✤ Should you target one platform, or many? App or Web?✤ Focus on your customers and where they are - and let that drive your decision✤ Design knowing the constraints - and the usability issues - of the platform
    57. 57. “Experience Sensitivity”
    58. 58. “Experience Sensitivity”✤ Users are slow to praise, but quick to complain... and they’ll do it publicly ✤ Twitter ✤ Facebook ✤ Etc.
    59. 59. “Experience Sensitivity”✤ Users are slow to praise, but quick to complain... and they’ll do it publicly ✤ Twitter ✤ Facebook ✤ Etc.✤ Expectations matter ✤ The “baseline” has shifted, and continues to do so ✤ Users are less patient - and they expect a responsive app that “just works”
    60. 60. The baseline has shifted... “History don’t repeat, but it sure does rhyme.”
    61. 61. Design for the“Immediacy of Now”
    62. 62. Design for the“Immediacy of Now”✤ The Immediacy of Now: The need for users to quickly accomplish an urgent task.
    63. 63. Design for the“Immediacy of Now”✤ The Immediacy of Now: The need for users to quickly accomplish an urgent task.✤ Mobile usage is often urgent and focused ✤ Understand and support this mode ✤ Context matters
    64. 64. Design for the“Immediacy of Now”✤ The Immediacy of Now: The need for users to quickly accomplish an urgent task.✤ Mobile usage is often urgent and focused ✤ Understand and support this mode ✤ Context matters✤ Design to support the user’s core need, and don’t add superfluous functionality that distracts from this core
    65. 65. Design for the“Immediacy of Now”✤ The Immediacy of Now: The need for users to quickly accomplish an urgent task.✤ Mobile usage is often urgent and focused ✤ Understand and support this mode ✤ Context matters✤ Design to support the user’s core need, and don’t add superfluous functionality that distracts from this core✤ If you don’t know what that core need you’re servicing is, then what are you creating?
    66. 66. “Ego-driven design”
    67. 67. “Ego-driven design”✤ Many mobile and web apps appeal to user’s sense of self-importance, and self-worth ✤ Twitter ✤ Quora ✤ Instagram
    68. 68. “Ego-driven design”✤ Many mobile and web apps appeal to user’s sense of self-importance, and self-worth ✤ Twitter ✤ Quora ✤ Instagram✤ This is a huge opportunity to tap into ✤ Make the app you are designing personal
    69. 69. On design documentation
    70. 70. On design documentation✤ Focus on designing the optimal experience - not on documentation ✤ Document as much as you need to, and no more ✤ Use whatever tool allows you to be most efficient at documenting your design
    71. 71. On design documentation✤ Focus on designing the optimal experience - not on documentation ✤ Document as much as you need to, and no more ✤ Use whatever tool allows you to be most efficient at documenting your design✤ Great article: Lean UX: Getting Out of the Deliverables Business ✤ http://tinyurl.com/3dctgls
    72. 72. In closing...
    73. 73. In closing...✤ “Great artists ship”
    74. 74. In closing...✤ “Great artists ship” ✤ ... but they don’t ship before they’re done.
    75. 75. In closing...✤ “Great artists ship” ✤ ... but they don’t ship before they’re done.✤ Example: the Color app
    76. 76. The future is not whatit used to be... 23rd Century 21st Century
    77. 77. Thank You!✤ http://www.josephdickerson.com✤ Twitter: Josephdickerson ✤ ...or you can just Google me...

    ×