Style me pretty: impactful first impressions
•Als PPTX, PDF herunterladen•
7 gefällt mir•2,263 views
A first impression can make or break your website. Learn the research behind how people see and interpret different types of images, and how it affects experiences. From a figure’s gaze to smile to posture, give your images a persuasive boost that will impact conversion rates on your site. Use this data to select the best (most appropriate) images for your website. Presented at the User Experience Professionals Association (UXPA) User Focus 2012 Conference in Washington, DC.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (16)
Andere mochten auch
Andere mochten auch (6)
Mehr von Sarah Weise
Mehr von Sarah Weise (10)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Style me pretty: impactful first impressions
- 1. style me pretty impactful first impressions Sarah Weise, weise_sarah@bah.com Linna Ferguson, ferguson_linna@bah.com User Focus 2012 Booz | Allen | Hamilton
- 2. You’ve got 1/20 of a second. Flip through the next few slides as quick as you can – spend less than a second on each! Booz | Allen | Hamilton
- 3. Booz | Allen | Hamilton
- 4. Booz | Allen | Hamilton
- 5. Booz | Allen | Hamilton
- 6. Booz | Allen | Hamilton
- 7. Booz | Allen | Hamilton
- 8. Booz | Allen | Hamilton
- 9. Booz | Allen | Hamilton
- 10. Booz | Allen | Hamilton
- 11. At first glance, what did you notice? What you notice… What you don’t… Photos Content People Navigation Colors Interaction Layout Ads Feelings Booz | Allen | Hamilton
- 12. Emotions, not reason, drive online behavior.
- 13. you’ve got 1/20 of a second. make it count. If people believe a website looks good, then this positive quality will spread to other areas, such as the website’s content. Since people like to be right, they will continue to use the website that made a good first impression, as this will further confirm that their initial decision was a good one. Dr. Lindgaard, Carleton University, describing her 2006 research on the halo effect
- 14. How to make first impressions count… 1. Impactful Images 2. Visual Simplicity Booz | Allen | Hamilton
- 15. Not just for designers… Why are photos never really discussed in UX terms?! - James Chudley UX analysts are taught to build vanilla wireframes, and test paper prototypes without considering images. But images are crucial to first impressions (and impact whether a customer even stays on your site at all to become a conversion). They should not be left until the last minute. They should be part of initial analysis, and carefully selected to suit the target audience. Source: http://www.slideshare.net/cxpartners/how-to-use-photos-to-improve-the-user-experience Booz | Allen | Hamilton
- 16. What do you notice first here? Despite the noise, you will most likely focus on Bob What do you see? Marley’s face. Booz | Allen | Hamilton
- 17. Impactful Images We spend more time on sites with people and faces. Booz | Allen | Hamilton
- 18. Impactful Images Emotion + Reason = I want one! You see how the gorilla pod is will capture treasured moments of you and your loved ones (emotional brain). You see how it hooks to things so it is functional (rational brain). The content compliments the emotion of the image, but you probably didn’t even read it. The images are far more important than the content for a first impression. Booz | Allen | Hamilton
- 19. How would you do this on a government site? Booz | Allen | Hamilton
- 20. Booz | Allen | Hamilton
- 21. Take a moment to flip between the previous slide and this one… One image makes a huge difference! While the previous slide shows a site that seems clean and customer-focused, this site appears disorganized and organization- centric. Booz | Allen | Hamilton
- 22. Impactful Images We follow faces and gazes. Source: usableworld.com.au Booz | Allen | Hamilton
- 23. Do you find yourself looking at Obama’s face? Yes, especially his eyes! But wait… that’s not the point of this site. Booz | Allen | Hamilton
- 24. Here your eye moves from Romney’s face to the faces of your Facebook friends who you recognize. It draws you into the sign up area and encourages you to share your email and zip to get started. Booz | Allen | Hamilton
- 25. Some more things to consider… Can your audience relate? This photo may be successful at influencing those with children. But those without children looked at it and said “This doesn’t seem like a site for me.” Use photos that speak to key target audience groups. These people don’t look real. Stock photos are not always your friend. Gimmicky stock photos of unrealistic people with huge grins actually decrease your site’s credibility. 3-2-1 Action! Action photos are most persuasive. They allow the user to imagine herself doing whatever is going on in the picture. Notice how the person is gazing and pointing his body towards the text as well. Booz | Allen | Hamilton
- 26. What feelings come to mind? Does this site seem very credible? Booz | Allen | Hamilton
- 27. Oh yes, Government sites are guilty of clutter and poor first impressions too! Booz | Allen | Hamilton
- 28. Take the old USAJobs.gov for example. The main task is completely obscured. It looks like a hoarder designed it. Booz | Allen | Hamilton
- 29. Visual Simplicity White space is your friend. The main task is now simply presented, and surrounded by white space. It is now clear what you can do on this site now! Booz | Allen | Hamilton
- 30. Visual Simplicity It doesn’t have to be white. Booz | Allen | Hamilton
- 31. How to simplify… Group Hide Displace Remove
- 32. The human brain can hold approximately 4 groups of information in short-term memory at a time. Too many groupings on a website place a memory load burden on the customer – it literally makes a customer’s brain hurt! Booz | Allen | Hamilton
- 33. The revised layout significantly reduces content groupings on the homepage, which actually increases memory retention. Booz | Allen | Hamilton
- 34. Visual Simplicity Hide items so users don’t become overwhelmed.
- 35. So what did we learn? People are wired to find human faces and gazes. Use impactful images Don’t wait to choose the right image Point gazes at text to encourage customers to read Customers like white space and clean designs, and don’t respond well to clutter at first glance. Reduce the number of groups Create visual simplicity Apply targeted layouts Booz | Allen | Hamilton
- 36. You’ve got 1/20 of a second. Booz | Allen | Hamilton
- 37. make it count. Linna Ferguson and Sarah Weise are members of the User Experience Linna Ferguson 703.585.7268 Team at Booz Allen Hamilton. For a combined 20 years, they have ferguson_linna@bah.com helped clients increase site traffic, prevent drop-offs, and boost sales by enhancing user experience. @vafoodscaper Their experience extends to government, non-profit, and e-commerce websites and applications. A snapshot of their Booz Allen Hamilton clients includes U.S. Army, Coast Guard, Veterans Affairs, Federal Sarah Weise Bureau of Investigation, Environmental Protection Agency, and 301.346.0308 Washington Performing Arts Society. weise_sarah@bah.com @weisesarah Over the past 4 years, Linna and Sarah have presented at UPA conferences in Portland, Munich, and DC. Booz | Allen | Hamilton
Hinweis der Redaktion
- In a split second, you are assessing all of these things, and they are triggering emotions in your head. What you don’t – With more time, you could have noticed these….. But first impressions do make a difference and we need to realize that while navigation/content/interaction are essential for a good user experience, the PRESENTATION is initially the most important element in capturing a user/customers attention. not only focus on the fundamentals of usability, but realize that they all are not weighted equally in our brains.
- Now you’ve probably all heard the psychology behind persuasion. Susan Weinschenk does a great job of simplifying how the brain works in her book Neuro Web Design. She simplifies the science to basically three sections in your brain…Old brain was developed first in the evolutionary history of animals and mainly deals in staying away from danger, finding food, and reproducing – so for every input, it asks 3 important questions: Will it kill me?Can I eat it?Can I have sex with it?So your old brain is triggered and adrenaline rises when you see a dangerous situation (like a photo from a natural disaster), a delicious piece of food (which restaurants often use to market on their websites), or a person that you find attractive (which is why you respond to good-looking models holding whatever product it is that they’re selling).The mid-brain is the emotional section. You often use this brain when you hear news stories on TV. This brain helps you to empathize, and allows you to imagine you were in the place of someone else.Often you use your emotional brain to make decisions, then your new brain will make up a reason to rationalize the decision that your emotional brain has just made. We’re often unaware of the reasons for our own behavior, and this often happens when we hear personal stories or testimonials in particular.The New (rational) brain helps you rationalize the decision you’ve just made. Ultimately it comes down to the fact that emotions, not reason, drive decisions you make online. And many of these emotions are formed on your first impression of a website.
- Basically, if people believe a site looks good it speaks to credibility, which spreads to other areas of the site as well. So knowing this,…
- We believe that these are 2 key elements that impact first impressions on your site. And by tweaking just these 3, you can make a big difference.
- James theory is that usability analysts should be focused on the selection of images as they have such a profound impact on engaging a userProvides his thoughts/experiences/ideas on how to integrate photo selection during mockup development and how to coordinate with designers
- What do you see?Notice in the sea of colored banners, Bob Marleys face stands out.We’re hard wired to see faces… on streets, even where they don’t exist: in yogurt, in trees, on the moon.
- We see faces everywhere. We are so good at spotting faces that we even see them where they do not exist.This would explain why people see an image of Mother Teresa in a cheese sandwich or a face on Mars. (More fantasticexamples of "faces.")Faces—and things approximating images of faces — get our attention. Graphic designers and marketers know this very well, which is why you so often see faces in various forms of marketing communication.Use this behavior to your benefit…..
- Incorporating people and the product is very effective.Even though the people are in the photo, the stylistic elements like the blurry background make you focus on the product that they’re selling AND what it can do.
- We’re in DC so let’s talk government sites for a moment. How many of you in this room work on government sites?So how would you apply this theory if you’re not trying to sell something? You may not be trying to sell something, but you are trying to get someone to do something – often it is just getting information. So the example we’re going to use is Benefits.gov. It’s one our team has worked on. This site has information on Government benefits for any US resident. The site was trying to get people to use a product they call the “Benefit Finder” – it’s basically a 10-minute questionnaire that you fill out to get information on what you might qualify for.So we recommended this image and testimonial to tap into deep emotions, dreams or aspirations. Tug on those emotional heartstrings.Now how did it look with the rest of the site?
- Now just to show you the power of these images… instead of going with this image, the client decided to go with something different....
- So take a look at how it compares (switch back and forth a couple times). The image makes all the difference here, and makes the site look much more cluttered and organization-centric. A site you might come to and say “Eh, this is probably not a site for me.”
- People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.So if you want someone to read something, have them looking at the text.The two baby images are from a study by James Breeze at usableworld.com.au which used eye tracking software to determine if the direction the baby looked on screen influenced the eye gaze of the website readers. Not surprisingly the text on the right got more attention from the eyes when the baby's eye gaze was in that direction.
- Did you look at Obama’s face? Yes, you did – especially his eyes. That’s great you might think, but if the goal of the site is to get people to sign up, your gaze is not being directed over there. Even on a very simple, beautiful site, this makes the content obscuredbecause your eyes are going to the upper right corner of the screen, looking into Obama’s eyes and following his gaze.Lost opportunity.
- Here you’re more likely to read the text, and you’re also more likely to get started because your friends are doing it too – a social form of persuasion.
- 1 - On a website geared towards worried moms – maybe a national health website, for instance – this first photo could be wildly successful at influencing those with children. But if a large portion of your audience does not have kids, they may see this photo, assume that the site is not for them, and navigate away.2 – Make sure they are people in your target audience, but also that they look real.3 – Take action shots, and point bodies and gazes towards text.
- What feelings come to mind?Do you think this site is credible?
- Do you think this site is credible?
- White spaces is the empty space between paragraphs, pictures, button and other items on the page.It allows your eyes room to breathe and allows a person to focusCan also help increase credibility- without a lot of content/images, it is harder to make a bad impression. And when you have company’s like google building trust for pure simplicity, you can leverage that.
- White spaces is the empty space between paragraphs, pictures, button and other items on the page.It allows your eyes room to breathe and allows a person to focusCan also help increase credibility- without a lot of content/images, it is harder to make a bad impression. And when you have company’s like google building trust for pure simplicity, you can leverage that.
- Top tasks, simple groupings, directing your attention to the from and to airport to get started, perfect. In today’s hectic lifestyle, people are crying out for less. Your users just want to find what they need quickly so they can get stuff done faster and fit more into their days.Use your page layout to help them get to what they need to do.This page provides a very clean way of getting to the top tasks on the Delta site
- There are 4 ways you can simplify.Now today we have in the room the king of simplicity. This example comes from Giles Colborne and when I first saw this it was an ah-ha moment for me. These are the 4 ways you can make something simpler.
- In terms of first impressions, too many groups would immediately turn you off.Too many groups can lead to a confused, dazed user. The eye doesn’t now where to go first. Don’t obscure the most useful informationHuman memory loads can only absorb and process 4 groups at a time. Fewer groups enable new users to easily learn the site’s organization, and repeat users to quickly recall where items are located. Wonder what kind of feelings this type of site evokes?
- It’s important that users don’t see more than their minds can process at one time. There are several ways to “hide” features, but we have to make sure that we hide them in places where they will be found. For example, we can hide items under tabs, links, callouts, or lightboxes. We can bring items to the front when we want to use them.And we don’t just have to stop at content. We can do this for navigation too. Many people think that it’s a usability rule that all navigation should be persistent and accessible from all areas of a site. But that’s not always necessary. Check out the way Amazon hides it’s main navigation after you’ve clicked on something. You can always go back to it by clicking “Shop All Departments” but you’re shown what’s more important to you now: a secondary navigation that’s related to what you clicked.