Designing With Usability In Mind

15,485 views
16,847 views

Published on

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

No Downloads
Views
Total views
15,485
On SlideShare
0
From Embeds
0
Number of Embeds
8,241
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • Francis Drucker
  • Designing With Usability In Mind

    1. 1. Cenergy Interactive: Designing with Usability in Mind
    2. 2. What is usability? <ul><li>Usability is the measure of the quality of a user’s experience when interacting with a product. </li></ul>
    3. 3. The 5 E’s Usability Effective Easy to Learn Error Tolerant Engaging Efficient [1] “Using the 5 E’s to Understand Users” Whitney Quesenbery  2002-2004
    4. 4. how the heck do we do all that?
    5. 5. Define Objectives <ul><li>what are the goals of the site? </li></ul><ul><li>will we be able to measure effectiveness? </li></ul><ul><li>what do we want the users to do? </li></ul>
    6. 6. Know the User <ul><li>Know thy user! </li></ul><ul><li>“ Designers who spend more time thinking about the users are the ones that end up with more usable designs.” </li></ul><ul><ul><li>someone smart? (I forgot) </li></ul></ul>
    7. 7. Who is your primary audience?
    8. 8. Audiences have different needs
    9. 9. A design for all
    10. 10. Gathering Data: Field Research <ul><li>Conduct 1 on 1 interviews with users in target group </li></ul><ul><li>User environment can yield important clues </li></ul><ul><li>Use a consistent interview team </li></ul><ul><li>Don’t ask straight out….analyze! </li></ul><ul><li>Use research that’s available </li></ul>
    11. 11. Personas <ul><li>Model of a typical user, a “common case” </li></ul><ul><li>Based on observed behavior patterns and objectives </li></ul><ul><li>Represent the needs of many </li></ul>
    12. 12. Why Personas? <ul><li>Determine what a site should do and how it should behave </li></ul><ul><li>Communicate with stakeholders, other MKT companies, clients </li></ul><ul><li>Measure a design’s effectiveness </li></ul><ul><li>Get people committed to a design </li></ul>
    13. 13. Developing a Persona <ul><li>Identify variables for the common case </li></ul><ul><ul><li>- map interviewees to variables </li></ul></ul><ul><li>Identify characteristics and goals </li></ul><ul><li>Develop narrative </li></ul>
    14. 14. Map against variables Tech savvy Tech Unskilled High Brand Consciousness Low Brand Consciousness Info Only Entertainment User 1,3,4 User 2 User 1, 2, 3 User 4 User 1, 2 User 4 User 3
    15. 15. What’s next? <ul><li>Defining a structure/navigation based on that user. </li></ul>
    16. 16. Why is navigation important? <ul><li>Navigation is a tool for the user </li></ul><ul><ul><li>- Find information quickly </li></ul></ul><ul><ul><li>- Move between tasks easily </li></ul></ul><ul><ul><li>- Increased confidence = better experience </li></ul></ul><ul><li>Navigation is a tool for the brand </li></ul><ul><ul><li>- Drive users to important tasks </li></ul></ul>
    17. 17. Step 1: Identify your audience <ul><li>Use your personas! </li></ul><ul><li>Who is your primary audience? </li></ul><ul><li>Are there secondary audiences? </li></ul>
    18. 18. Step 2: Gather Resources and Tasks <ul><li>Define tasks for your primary audience </li></ul><ul><ul><li>- Your goals research is key! </li></ul></ul><ul><li>Collect supporting resources </li></ul><ul><ul><li>- e.g. job postings, logo downloads, etc </li></ul></ul>
    19. 19. Step 3: Choose a Grouping Strategy <ul><li>Consider the following items. How would you group these? </li></ul>
    20. 20. Grouping Strategies <ul><li>Did you pick size? Shape? How about color? </li></ul><ul><li>How do you know which one to use? </li></ul><ul><ul><li>- Everyone does it differently! </li></ul></ul><ul><ul><li>- Your primary audience decides </li></ul></ul>
    21. 21. Best Practices <ul><li>Keep it SIMPLE! </li></ul><ul><li>Design for Scent by using trigger words </li></ul><ul><li>Use Seducible Moments to drive user action </li></ul><ul><li>Plan for growth </li></ul>
    22. 22. Navigational Hazards <ul><li>Ignore the three-click rule </li></ul><ul><li>Search-dominance? </li></ul><ul><li>Watch for off-site links </li></ul>
    23. 23. What’s next? <ul><li>Creative Design </li></ul>
    24. 24. A Designer’s Guidelines <ul><li>Know thy user! “Designers who spend more time thinking about the users are the ones that end up with more usable designs.” - Jared Spool </li></ul><ul><li>Design with scent </li></ul><ul><li>Persuade the user </li></ul><ul><li>Follow these usability best practices… </li></ul>
    25. 25. Visual Design <ul><li>A professional looking design: - lends credibility, builds trust - can appropriately serve the user - will match current branding initiatives </li></ul>
    26. 26. Content <ul><li>“ Ultimately, users visit your website for its content. Everything else is just the backdrop&quot; (Nielsen) </li></ul><ul><li>Not providing the content the user is seeking = ultimate failure </li></ul>
    27. 27. Content tips <ul><li>Write for reader, not the client </li></ul><ul><li>Trigger words </li></ul><ul><li>Cute and clever…but clear? </li></ul><ul><li>Provide substance/positioning </li></ul><ul><li>Make it memorable </li></ul>
    28. 30. Content <ul><li>“Seducible Moments” - after completing a task </li></ul><ul><li>Write for “scan-ability”…less is more </li></ul><ul><ul><li>use shorter paragraphs </li></ul></ul><ul><ul><li>bulleted lists </li></ul></ul><ul><ul><li>highlight key words </li></ul></ul>
    29. 31. Content <ul><li>function 1st.. form 2nd.. </li></ul><ul><li>Include page titles/breadcrumbs </li></ul><ul><li>1:1 marketing </li></ul>
    30. 33. Interactivity/Functionality <ul><li>Take advantage of the medium </li></ul><ul><ul><li>- break away from a static page! </li></ul></ul><ul><li>Engage your users </li></ul>
    31. 37. Page Layout <ul><li>Visual Hierarchy </li></ul><ul><li>Avoid Clutter! </li></ul>
    32. 41. Visual Design: Be Consistent <ul><li>User feels at ease </li></ul><ul><li>Find things quicker and confidently </li></ul><ul><li>Placement & function of nav and elements </li></ul><ul><ul><li>- fonts (type, size, style) </li></ul></ul>
    33. 45. Visual Design: Consistency <ul><li>Inconsistency creates more “work” </li></ul><ul><li>Frustration: gets lost or leaves </li></ul><ul><li>“ Unprofessional feel”: seen as lower quality brand </li></ul><ul><li>“ Patchwork Quilt”: am I on the same site? </li></ul>
    34. 46. Visual Design: Imagery <ul><li>Represent your brand accurately </li></ul><ul><li>Be unique to your brand </li></ul>
    35. 47. Visual Design: Imagery <ul><li>Common Mistakes: - Imagery that appears “posed” </li></ul>
    36. 49. Visual Design: Imagery <ul><li>Common mistakes: - Imagery that appears “posed” - Imagery that’s cliché in the specific brand - Dated imagery (hair/fashion/bldgs) - Use of stock imagery </li></ul>
    37. 52. Performance <ul><li>QA all platforms and browsers </li></ul><ul><li>Usability test </li></ul>
    38. 53. <ul><li>Usability Testing </li></ul>
    39. 54. The 5 E’s Usability Effective Easy to Learn Error Tolerant Engaging Efficient [1] “Using the 5 E’s to Understand Users” Whitney Quesenbery  2002-2004
    40. 55. Why test? <ul><li>Find out if it’s successful </li></ul><ul><li>Designers are “too close” to product </li></ul><ul><li>You’ll find out eventually .. unhappy client </li></ul>
    41. 56. Some testing better than none <ul><li>“ 3 to 5 participants get you 80-90% of major problems. 10 to 12 participants get you 70 - 80% of minor problems” - Virzi, 1992 </li></ul>
    42. 57. Thank you <ul><li>Questions? </li></ul>

    ×