Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Brain hacks  for designing usable applications  insights from user research and their implications for web application des...
Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contai...
What’s a brain hack? <ul><li>Brain hacks: Tips, tactics, tricks and design techniques that exploit how users perceive and ...
Understanding the psychology of your users can help you design a more usable application! <ul><li>Before you start develop...
HOW PEOPLE PERCEIVE VISUAL INFORMATION <ul><li>Color perception </li></ul><ul><li>Text considerations </li></ul><ul><li>Pe...
Color Contrast & Eyestrain Easy Difficult Blue on Gray Blue and Green Blue on White Blue and Yellow Cyan on Dark Blue Red ...
Accessibility Issues <ul><ul><li>Vision Related Disabilities </li></ul></ul><ul><ul><ul><li>Low vision </li></ul></ul></ul...
Accessibility Issues <ul><ul><li>Vision Related Disabilities </li></ul></ul><ul><ul><ul><li>Low vision </li></ul></ul></ul...
Text Considerations <ul><ul><li>Serif  or  sans serif fonts?  </li></ul></ul><ul><ul><ul><li>No difference in readability ...
Perceived Ease and Line Length Research shows that users read faster when lines are long.  However, they tend to prefer sh...
Perspective tricks (depth & skew)
The Clutter Paradox (clutter isn’t always bad)
DIFFERENTIATION AND ASSOCIATION  Gestalt laws: proximity, similarity Group boxes and grids
Differentiation & Consistency Can you spot the inconsistencies  on this web site?
Differentiation & Consistency Can you spot the inconsistencies  on this web site?
Proximity and Similarity
Mental Categories: Similarity
Mental Categories: Similarity
Mental Categories: Similarity
Mental Categories: Proximity
Proximity and similarity  dramatically impact perception  NO PAPER  RECYCLING HERE Example by Pamela Rutledge, PhD,  http:...
Space and style impact perception dramatically (Dis) Similarity Proximity Example by Pamela Rutledge, PhD,  http://www.pam...
Group boxes help users associate items
FINDABILITY HOW PEOPLE SCAN WEB PAGES, AND IMPLICATIONS FOR VISUAL DESIGN <ul><li>Banner blindness and scroll blockers </l...
Banner Blindness
Banner Blindness Increased visibility and contrast of primary actions
Breaking up the grid helps people scroll
How people scan Eye tracking heat maps showing E & F scanning patterns Hot colors = more eye fixations  Nielsen/Norman 200...
What men see, what women see Nielsen/Norman 2007 eytracking study: see http://www.ojr.org/ojr/stories/070312ruel/
Is a picture worth a thousand words? Yes, if related, an approachable human, or anatomically correct Nielsen/Norman 2007 e...
Resources: Cloud tools for validating app usability <ul><ul><li>Click tests, labeling, memory tests, A/B testing </li></ul...
To build more usable apps and sites: <ul><li>Start by getting to know how your users perceive information and think about ...
Aviva Rosenstein, PhD <ul><li>Lead User Researcher </li></ul><ul><li>@uxresearch </li></ul>
Prochain SlideShare
Chargement dans…5
×

2

Partager

Brain hacks for designing usable applications

Presentation given at Dreamforce 2011 in the DeveloperZone Lightning Theater

Brain hacks for designing usable applications

  1. 1. Brain hacks for designing usable applications insights from user research and their implications for web application design Salesforce User Experience <ul><li>Aviva Rosenstein, Salesforce.com, @uxresearch </li></ul><ul><li>#df11brainhacks </li></ul>
  2. 2. Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended April 30, 2011. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
  3. 3. What’s a brain hack? <ul><li>Brain hacks: Tips, tactics, tricks and design techniques that exploit how users perceive and look for information </li></ul><ul><li>Understanding how the brain processes visual information helps you design better apps </li></ul><ul><li>We’ll look at how these hacks can make an app or website more usable </li></ul><ul><li>Also: I’ll review some tools that can help you validate the usability of web sites and apps </li></ul>Usability: includes perceived performance, efficiency, learnability and overall satisfaction with experience
  4. 4. Understanding the psychology of your users can help you design a more usable application! <ul><li>Before you start developing, </li></ul><ul><li>get to know your end users: </li></ul><ul><ul><li>Where they use your app </li></ul></ul><ul><ul><li>What they want to do, or what they’re looking for </li></ul></ul><ul><ul><li>How they think about that task or subject </li></ul></ul><ul><ul><li>Assumptions and knowledge they bring to the task </li></ul></ul><ul><ul><li>How they perceive visual information </li></ul></ul>
  5. 5. HOW PEOPLE PERCEIVE VISUAL INFORMATION <ul><li>Color perception </li></ul><ul><li>Text considerations </li></ul><ul><li>Perspective </li></ul><ul><li>Information density </li></ul>
  6. 6. Color Contrast & Eyestrain Easy Difficult Blue on Gray Blue and Green Blue on White Blue and Yellow Cyan on Dark Blue Red on Magenta Brown on Tan Black on Blue Light Gray on Dark Blue White on Yellow Painful! Blue on Red Red on Blue
  7. 7. Accessibility Issues <ul><ul><li>Vision Related Disabilities </li></ul></ul><ul><ul><ul><li>Low vision </li></ul></ul></ul><ul><ul><ul><li>Color blindness </li></ul></ul></ul>
  8. 8. Accessibility Issues <ul><ul><li>Vision Related Disabilities </li></ul></ul><ul><ul><ul><li>Low vision </li></ul></ul></ul><ul><ul><ul><li>Color blindness </li></ul></ul></ul>How those icons look to someone with red/green color blindness
  9. 9. Text Considerations <ul><ul><li>Serif or sans serif fonts? </li></ul></ul><ul><ul><ul><li>No difference in readability </li></ul></ul></ul><ul><ul><li>Unfamiliar (display) fonts are very hard to read </li></ul></ul><ul><ul><li>Fonts smaller than 12 points =slower reading performance </li></ul></ul><ul><ul><ul><li>For users over age 65, consider using at least 14 point fonts. </li></ul></ul></ul><ul><ul><ul><li>Avoid using less than 9 point font on a site or app </li></ul></ul></ul>
  10. 10. Perceived Ease and Line Length Research shows that users read faster when lines are long. However, they tend to prefer shorter line lengths, even though reading shorter lines generally slows overall reading speed .
  11. 11. Perspective tricks (depth & skew)
  12. 12. The Clutter Paradox (clutter isn’t always bad)
  13. 13. DIFFERENTIATION AND ASSOCIATION Gestalt laws: proximity, similarity Group boxes and grids
  14. 14. Differentiation & Consistency Can you spot the inconsistencies on this web site?
  15. 15. Differentiation & Consistency Can you spot the inconsistencies on this web site?
  16. 16. Proximity and Similarity
  17. 17. Mental Categories: Similarity
  18. 18. Mental Categories: Similarity
  19. 19. Mental Categories: Similarity
  20. 20. Mental Categories: Proximity
  21. 21. Proximity and similarity dramatically impact perception NO PAPER RECYCLING HERE Example by Pamela Rutledge, PhD, http://www.pamelarutledge.com/
  22. 22. Space and style impact perception dramatically (Dis) Similarity Proximity Example by Pamela Rutledge, PhD, http://www.pamelarutledge.com/
  23. 23. Group boxes help users associate items
  24. 24. FINDABILITY HOW PEOPLE SCAN WEB PAGES, AND IMPLICATIONS FOR VISUAL DESIGN <ul><li>Banner blindness and scroll blockers </li></ul><ul><li>Eye fixations </li></ul><ul><li>Scanning patterns </li></ul><ul><li>Using photos </li></ul>
  25. 25. Banner Blindness
  26. 26. Banner Blindness Increased visibility and contrast of primary actions
  27. 27. Breaking up the grid helps people scroll
  28. 28. How people scan Eye tracking heat maps showing E & F scanning patterns Hot colors = more eye fixations Nielsen/Norman 2007 eytracking study: see http://www.ojr.org/ojr/stories/070312ruel/
  29. 29. What men see, what women see Nielsen/Norman 2007 eytracking study: see http://www.ojr.org/ojr/stories/070312ruel/
  30. 30. Is a picture worth a thousand words? Yes, if related, an approachable human, or anatomically correct Nielsen/Norman 2007 eytracking study: see http://www.ojr.org/ojr/stories/070312ruel/
  31. 31. Resources: Cloud tools for validating app usability <ul><ul><li>Click tests, labeling, memory tests, A/B testing </li></ul></ul><ul><ul><ul><li>IntuitionHQ </li></ul></ul></ul><ul><ul><ul><li>Usabilla </li></ul></ul></ul><ul><ul><ul><li>Usabilityhub </li></ul></ul></ul><ul><ul><ul><li>Verify </li></ul></ul></ul><ul><ul><ul><li>Optimizely </li></ul></ul></ul><ul><ul><li>Accessibility: </li></ul></ul><ul><ul><ul><li>Vischeck.com </li></ul></ul></ul><ul><ul><li>Online Remote Usability Testing </li></ul></ul><ul><ul><ul><li>Loop11.com </li></ul></ul></ul><ul><ul><ul><li>GhostRec </li></ul></ul></ul><ul><ul><ul><li>Userfly </li></ul></ul></ul>
  32. 32. To build more usable apps and sites: <ul><li>Start by getting to know how your users perceive information and think about tasks </li></ul><ul><li>Color combinations, font choices, white space and perspective can make or break usability </li></ul><ul><li>Help users by grouping information. Make different things look different, make similar things look the same </li></ul><ul><li>Provide information scent; don’t create an obstacle course with irrelevant images, banners, scroll blockers </li></ul><ul><li>Validate app designs with representative users </li></ul>
  33. 33. Aviva Rosenstein, PhD <ul><li>Lead User Researcher </li></ul><ul><li>@uxresearch </li></ul>
  • kirkgleffe

    Sep. 6, 2016
  • sbw1984

    Aug. 20, 2012

Presentation given at Dreamforce 2011 in the DeveloperZone Lightning Theater

Vues

Nombre de vues

1 849

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

29

Actions

Téléchargements

0

Partages

0

Commentaires

0

Mentions J'aime

2

×