Top Banner
style me prett impactful first impression Sarah Weise, weise_sarah@bah. Linna Ferguson, ferguson_linna@bah. User Focus 2 Booz | Allen | Hamilt
37

Style me pretty: impactful first impressions

Jan 28, 2015

Download

Technology

Sarah Weise

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Style me pretty: impactful first impressions

style me prettyimpactful first impressions

Sarah Weise, [email protected] Ferguson, [email protected]

User Focus 2012

Booz | Allen | Hamilton

Page 2: Style me pretty: impactful first impressions

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!

Page 3: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 4: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 5: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 6: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 7: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 8: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 9: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 10: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 11: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

At first glance, what did you notice?

PhotosPeople Colors Layout

Ads

What you notice…

ContentNavigationInteraction

What you don’t…

Feelings

Page 12: Style me pretty: impactful first impressions

Emotions, not reason, drive online

behavior.

Page 13: Style me pretty: impactful first impressions

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.

Page 14: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

How to make first impressions count…

1. Impactful Images

2. Visual Simplicity

Page 15: Style me pretty: impactful first impressions

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.

Page 16: Style me pretty: impactful first impressions

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.

Page 17: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Impactful ImagesWe spend more time on sites with people and faces.

Page 18: Style me pretty: impactful first impressions

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!

Page 19: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

How would you do this on a government site?

Page 20: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Page 21: Style me pretty: impactful first impressions

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.

Page 22: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Impactful ImagesWe follow faces and gazes.

Source: usableworld.com.au

Page 23: Style me pretty: impactful first impressions

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.

Page 24: Style me pretty: impactful first impressions

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.

Page 25: Style me pretty: impactful first impressions

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.

Page 26: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

What feelings come to mind?

Does this site seem very credible?

Page 27: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Oh yes, Government sites are guilty of clutter and poor first impressions too!

Page 28: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Take the old USAJobs.gov for example.

The main task is completely obscured. It looks like a hoarder designed it.

Page 29: Style me pretty: impactful first impressions

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!

Page 30: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

Visual SimplicityIt doesn’t have to be white.

Page 31: Style me pretty: impactful first impressions

RemoveGroup Hide Displace

How to simplify…

Page 32: Style me pretty: impactful first impressions

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!

Page 33: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

The revised layout significantly reduces content groupings on the homepage, which actually increases memory retention.

Page 34: Style me pretty: impactful first impressions

Visual SimplicityHide items so users don’t become overwhelmed.

Page 35: Style me pretty: impactful first impressions

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

Page 36: Style me pretty: impactful first impressions

Booz | Allen | Hamilton

You’ve got of a second.

1/20

Page 37: Style me pretty: impactful first impressions

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