Brain hacks for designing usable applications
•
3 j'aime•861 vues
Presentation given at Dreamforce 2011 in the DeveloperZone Lightning Theater
![Brain hacks for designing usable applications insights from user research and their implications for web application design Salesforce User Experience ,[object Object],[object Object]](https://image.slidesharecdn.com/brainhacksfordesigningusableapplicationsscrubbed-110912135257-phpapp02/85/Brain-hacks-for-designing-usable-applications-1-320.jpg)
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Brain hacks for designing usable applications
Similaire à Brain hacks for designing usable applications (20)
Dernier
Dernier (20)
Brain hacks for designing usable applications
- 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.
- 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
- 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. Perspective tricks (depth & skew)
- 12. The Clutter Paradox (clutter isn’t always bad)
- 13. DIFFERENTIATION AND ASSOCIATION Gestalt laws: proximity, similarity Group boxes and grids
- 14. Differentiation & Consistency Can you spot the inconsistencies on this web site?
- 15. Differentiation & Consistency Can you spot the inconsistencies on this web site?
- 21. Proximity and similarity dramatically impact perception NO PAPER RECYCLING HERE Example by Pamela Rutledge, PhD, http://www.pamelarutledge.com/
- 22. Space and style impact perception dramatically (Dis) Similarity Proximity Example by Pamela Rutledge, PhD, http://www.pamelarutledge.com/
- 23. Group boxes help users associate items
- 25. Banner Blindness
- 26. Banner Blindness Increased visibility and contrast of primary actions
- 27. Breaking up the grid helps people scroll
- 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. What men see, what women see Nielsen/Norman 2007 eytracking study: see http://www.ojr.org/ojr/stories/070312ruel/
- 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/
Notes de l'éditeur
- Any purchase decisions customer make should be made based on currently available technology. Please visit our website sto review our Safe Harbor statement in detail.
- SATISFACTION: CREATING OPTIMAL EXPERIENCES THAT ARE INTRINSICALLY ENJOYABLE Parsimony: simple, elegant design Ease of use : “Don’t make me think!” learnability, performance, getting out of their way Flow (optimal experience) SATISFACTION CREATING OPTIMAL EXPERIENCES THAT ARE INTRINSICALLY ENJOYABLE Delight :“wow” moments Knowing your users: Knowing where they’ll use the application Physical setting Length of attention Frequency of interaction What’s the most important thing? Design that first.
- Elements of satisfaction Ease of use considerations Fitts’ Law Readability Visual Noise Differentiation and Association Exploiting Time for Delight
- Warm/cool contrast can cause strain Highly saturated blues and reds create an unpleasant visual effect – the colors are also perceived in different depths, which strains the eyes. Colored backgrounds may change the hue of colored text through color contrast or (color assimilation ) as demonstrated in the right column Content should blink no more than 2x per second Of course, there is no rule without an exception. You may want to use this effect to attract attention to your website
- there’s a variety of disabilities, but for site design we’re mostly concerned about vision impairment. It’s important to remember that three types of vision impairment have different implications for design because the needs are different. Low vision Older Users : reduced visual acuity, lower monitor resolution Colorblindness 7%- 10% incidence of red-green color blindness in US This is what the icons look like to someone with red-green color blindness 7-10% Hue and contrast Psychological implications of color (culturally constrained) .
- there’s a variety of disabilities, but for site design we’re mostly concerned about vision impairment. It’s important to remember that three types of vision impairment have different implications for design because the needs are different. Low vision Older Users : reduced visual acuity, lower monitor resolution Colorblindness 7%- 10% incidence of red-green color blindness in US This is what the icons look like to someone with red-green color blindness 7-10% Hue and contrast Psychological implications of color (culturally constrained) .
- data on column widths, fonts ,spacing, perceived ease) Fontography: “web safe fonts”
- This is a good example of how what users do, and what they say: aren’t the same! They say they like the shorter lines even though they actually perform better with longer ones Efficiency vs. perceived usability
- Same data
- Relationship between clutter and increased credibility in news content sites How to know if you’re too cluttered: can the user see the main thing to do in the first 5 seconds? “ blink test” will help you figure this out. Or you can do a squint test – what’s the main action?
- Same things look the same, different things look different
- Bullets, arrows, play buttons Set expectations appropriately Help users identify next clue Consider using design standards to exploit existing system knowledge
- Bullets, arrows, play buttons Set expectations appropriately Help users identify next clue Consider using design standards to exploit existing system knowledge
- Gestalt rules of perceptual organization Table: Rows and columns
- Columns Rows? Colors can guide people (who see colors) to associate information, color plus position
- Columns Rows? Colors can guide people (who see colors) to associate information, Color, Position, Shape
- Columns Rows? Colors can guide people (who see colors) to associate information, Color, Position, Shape
- Spacing change Which is rows more important? Which is columns more important? A few pixels of whitespace can convey intention
- Example from Pamela rutledge at UCLA What happens when things look different? What happens when they’re spaced far apart? (too much or too little white space between elements on a page can make or break usability There are other rules of gestalt perception that you can exploit when you’re doing visualizations and graphs– closure, continuity, simplicity
- Example from Pamela rutledge at UCLA What happens when things look different? Links: consistent treatments, underlines? Color? Bold? Keep that style reserved What happens when they’re spaced far apart? (too much or too little white space between elements on a page can make or break usability There are other rules of gestalt perception that you can exploit when you’re doing visualizations and graphs– closure, continuity, simplicity
- Pamela rutledge at UCLA
- Information scent: Users as hunter gatherers What we know from eyetracking: the E and F patterns Differences between browsing vs. searching behavior Banner and Ad Blindness: the problem with emphasis Scroll blockers “ Seducible moments” and “shiny objects”: effective placement of additional information Iconography and mental models contextual cues
- Scroll blockers: ads, white space, no grid teaser People see a horizontal scroll and they assume nothing useful will be beneath or above it, or they frame it off because they think an ad is there
- Information Scent Task focus and conversion “ ooooh, shiny”: Seducible moments Contextual cues Example patterns: Search results layout Grids Galleries and promotional elements (expand, visualize)
- This image of George Brett was part of a larger page with his biographical information. All users tested looked the image, but there was a distinct difference in focus between men and women.
- In the case of Web design a picture isn’t always worth those thousand words. According to Coyne users treat pages with superfluous images like obstacle courses: The images create barriers to content. The types of images that get attention share these attributes: Related to the content Photos edited for relevance = photos viewed Clear Feature approachable people (clearly can see faces; people shown are smiling/looking at the camera) Feature areas of private anatomy. In addition, the team says that individuals look at "real people" more than they do at images of models. Most assume that content that features models are advertisements, so they avoid it. Take a look at this page from dancworks.com. Users were given the task to find out more about Mickhail Baryshnikov. Their eye traveled around almost all parts of the page, but the photo, which was more decorative than informational.
- Some of these have free trial versions Verify (verifyapp.com) where would you click, what would you remember, A/B preference)… usabilityhub: navflow.com, fivesecondtest.com theclicktest.com Usabilla: feedback, click tests feedback application for apps, sites, abandonment, user intent (with salesforce integration) Kampyle Clicktools Zoomerang TimbaSurveys
- Links: consistent treatments, underlines? Color? Bold? Keep that style reserved