style me prettyimpactful first impressions
Sarah Weise, [email protected] Ferguson, [email protected]
User Focus 2012
Booz | Allen | Hamilton
Booz | Allen | Hamilton
You’ve got of a second.
1/20Flip through the next few slides as quick as you can – spend less than a second on each!
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
Booz | Allen | Hamilton
At first glance, what did you notice?
PhotosPeople Colors Layout
Ads
What you notice…
ContentNavigationInteraction
What you don’t…
Feelings
Emotions, not reason, drive online
behavior.
you’ve got 1/20 of a second.
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
make it count.
Booz | Allen | Hamilton
How to make first impressions count…
1. Impactful Images
2. Visual Simplicity
Booz | Allen | Hamilton
Not just for designers…
Source: http://www.slideshare.net/cxpartners/how-to-use-photos-to-improve-the-user-experience
Why are photos never really discussed in UX terms?!
- James ChudleyUX 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.
Booz | Allen | Hamilton
What do you see?What do you notice first here? Despite the noise, you will most likely focus on Bob Marley’s face.
Booz | Allen | Hamilton
Impactful ImagesWe spend more time on sites with people and faces.
Booz | Allen | Hamilton
Impactful Images
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.
Emotion + Reason = I want one!
Booz | Allen | Hamilton
How would you do this on a government site?
Booz | Allen | Hamilton
Booz | Allen | Hamilton
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
Impactful ImagesWe follow faces and gazes.
Source: usableworld.com.au
Booz | Allen | Hamilton
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
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
Some more things to consider…
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.
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.
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
What feelings come to mind?
Does this site seem very credible?
Booz | Allen | Hamilton
Oh yes, Government sites are guilty of clutter and poor first impressions too!
Booz | Allen | Hamilton
Take the old USAJobs.gov for example.
The main task is completely obscured. It looks like a hoarder designed it.
Booz | Allen | Hamilton
Visual SimplicityWhite 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
Visual SimplicityIt doesn’t have to be white.
RemoveGroup Hide Displace
How to simplify…
Booz | Allen | Hamilton
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
The revised layout significantly reduces content groupings on the homepage, which actually increases memory retention.
Visual SimplicityHide items so users don’t become overwhelmed.
Booz | Allen | Hamilton
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
You’ve got of a second.
1/20
Booz | Allen | Hamilton
Linna Ferguson and Sarah Weise are members of the User Experience Team at Booz Allen Hamilton. For a combined 20 years, they have helped clients increase site traffic, prevent drop-offs, and boost sales by enhancing user experience.
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 Bureau of Investigation, Environmental Protection Agency, and Washington Performing Arts Society.
Over the past 4 years, Linna and Sarah have presented at UPA conferences in Portland, Munich, and DC.
make it count.
Linna [email protected]
@vafoodscaper
Sarah [email protected]
@weisesarah