love at first (web)site - anatomy of a good ux first impression

29
Love at First (Web)site Anatomy of a Good UX First Impression Greg Harron, UX Strategist

Upload: centerline-digital

Post on 21-Apr-2017

12.919 views

Category:

Design


2 download

TRANSCRIPT

Page 1: Love at First (Web)site - Anatomy of a Good UX First Impression

Love at First (Web)site Anatomy of a Good UX First Impression

Greg Harron, UX Strategist

Page 2: Love at First (Web)site - Anatomy of a Good UX First Impression

The web is full of bad first impressions.

@gregharron

Page 3: Love at First (Web)site - Anatomy of a Good UX First Impression

Your business will be (quickly) judged by its cover… on many levels

@gregharron

Page 4: Love at First (Web)site - Anatomy of a Good UX First Impression

First impressions can be long-lasting, unforgiving, and critical to your success… a snap judgment about the quality of your site can quickly turn into a strong impression of the overall quality of your business.

@gregharron

Your business will be (quickly) judged by its cover… on many levels

Page 5: Love at First (Web)site - Anatomy of a Good UX First Impression

And let’s face it…people can be anxious.

@gregharron

Page 6: Love at First (Web)site - Anatomy of a Good UX First Impression

And let’s face it…people can be skeptical.

@gregharron

Page 7: Love at First (Web)site - Anatomy of a Good UX First Impression

And let’s face it…people can be guarded.

@gregharron

Page 8: Love at First (Web)site - Anatomy of a Good UX First Impression

And let’s face it…people can be stressed.

@gregharron

Page 9: Love at First (Web)site - Anatomy of a Good UX First Impression

And let’s face it…people can be GRUMPY.

@gregharron

Page 10: Love at First (Web)site - Anatomy of a Good UX First Impression

And let’s face it…people can be GRUMPY.

@gregharron

As you can see, we are not exactly setting the mood for love at first sight. People may be a touch on the ornery side as they meet your site for the first time,

so we have our work cut out for us to make a positive first impression.

Page 11: Love at First (Web)site - Anatomy of a Good UX First Impression

Our UX Mission: Frown Inversion

:( :)

@gregharron

Page 12: Love at First (Web)site - Anatomy of a Good UX First Impression

The Mission Brief

Our Target: “Product Scout(s)” - the person(s) tasked with researching and recommending a new product or service for their company. The interests of many internal stakeholders must be considered.

User Mindset: - Busy, short on time - Anxious, stressed - Skeptical, guarded - Uninspired to sludge through product info & specs - …Grumpy

Objective: Deliver a user experience that generates a positive first impression and builds confidence in the value of your offering and your ability to deliver on it.

@gregharron

Page 13: Love at First (Web)site - Anatomy of a Good UX First Impression

How do we do it?

@gregharron

Page 14: Love at First (Web)site - Anatomy of a Good UX First Impression

Credibility Trust Opportunity + Ease of Adoption

User Confidence

And maybe, just maybe, EXCITEMENT

@gregharron

The 1st impression must convey

To establish

Page 15: Love at First (Web)site - Anatomy of a Good UX First Impression

@gregharron

Okay, but HOW do we establish credibility, trust, opportunity, etc?

Here are 5 key steps to building user confidence (and excitement) through a good first impression.

Page 16: Love at First (Web)site - Anatomy of a Good UX First Impression

5 keys to a good UX first impression.

Give a proper introduction 1. Be easy on the eyes (in more ways than one) 2. Arm your advocates 3. Grease the track 4. Glory by association 5. UX does not stop at UI

Make sure the user can clearly understand what you are all about within a second or two of hitting your site! Provide immediate reassurance that the user is in the right place and that they should definitely stick around to learn more about what you have to offer.

As part of your intro, you may also want to name drop - throw out a client list or testimonials to provide some confidence that you are worth getting to know.

1

@gregharron

Page 17: Love at First (Web)site - Anatomy of a Good UX First Impression

5 keys to a good UX first impression.

Be easy on the eyes (and brain) 1. Grease the track 2. Glory by association 3. UX does not stop at UI

2

Site must be aesthetically pleasing. Visual clutter or chaos will lead to quick exits. A solid design aesthetic will add instant credibility to your business.

Literally, ease the user’s mind by guiding them visually to thoughtfully manage and focus their attention on what is most important. “Ration” out the information using white space and layout to promote focus and retention of key points.

@gregharron

Page 18: Love at First (Web)site - Anatomy of a Good UX First Impression

5 keys to a good UX first impression.

Arm your advocates 1. Grease the track 2. Glory by association 3. UX does not stop at UI

3

Do your homework. Acknowledge and address all relevant stakeholder concerns as clearly and concisely as possible. It should be easy for a scout to detect coverage of key issues with a quick scan. Make it easy to share the info with colleagues.

@gregharron

Page 19: Love at First (Web)site - Anatomy of a Good UX First Impression

5 keys to a good UX first impression.

Make change attainable & desirable 1. Grease the track 2. Glory by association 3. UX does not stop at UI

4

The experience must convey ease of use and ease of adoption. Provide clear, obvious, and easy to complete next steps.

Change is hard. Acknowledge and address potential barriers to entry. Break down these barriers and make change seem desirable (and easy), not burdensome.

@gregharron

Page 20: Love at First (Web)site - Anatomy of a Good UX First Impression

5 keys to a good UX first impression.

UX does not stop at UI5

To be successful, the remainder of the customer experience must live up to the positive first impression… The “promises” that you are making and modeling with the site’s UI in terms of ease-of-use and adoption should carry over into the overall operational execution and customer experience.

@gregharron

Page 21: Love at First (Web)site - Anatomy of a Good UX First Impression

Once upon a time (Circa 2009), I was enlisted as a “product scout” researching options for file storage and sharing to reduce costs for our company. Someone had referred me to look at a new kid on the block, DropBox.

Well, the site made a great first impression - all of my preconceived notions, stress, anxiety, and general lack of inspiration around the task were washed away quickly when I visited the DropBox site.

After quickly absorbing the first layer of the site I was actually EXCITED to learn more and get started…and I was excited to proudly share it with my colleagues. It was refreshingly clear and simple.

Remembering that experience, I went back to visit the DropBox landing page to see if the magic was still there.

Let’s take a look… @gregharron

Consider an example: A DropBox First Impression

Page 22: Love at First (Web)site - Anatomy of a Good UX First Impression

At First Glance: Introduce yourself and the value you offer quickly and concisely.

“Am I in the right place?” Just a few seconds for that FIRST first impression…

As part of your intro, build some trust & confidence through client lists,

testimonials

Give a Proper Introduction 1

Page 23: Love at First (Web)site - Anatomy of a Good UX First Impression

Be easy on the eyes (and the brain)

Get their attention…without screaming. Use white space to minimize distraction and ration out information into easy to consume bites.

Give key points room to breathe and your users will breathe a little easier.

2

Page 24: Love at First (Web)site - Anatomy of a Good UX First Impression

Arm your advocates

Address key stakeholders’ needs so a “product scout” can quickly scan to see you have done your homework and considered the top concerns.

Productivity Security Training IT Support ROI

3

Page 25: Love at First (Web)site - Anatomy of a Good UX First Impression

Note the keywords used:

“relief” = confidence, peace of mind, help!

“revolutionize”, “better” = opportunity, improved way

“easier” = ease of use, ease of adoption

Remove barriers to entry by providing clear next steps

Make change attainable & desirable

4

Page 26: Love at First (Web)site - Anatomy of a Good UX First Impression

UX does not stop at UI

The DropBox user experience has promised simplicity and ease of use both in the messaging (as shown here) and through the simple layout and iconography used to deliver the message.

To be successful, the rest of the user experience beyond the purchase must live up to the promise of this initial user interaction.

5

Page 27: Love at First (Web)site - Anatomy of a Good UX First Impression

Give a proper introduction

Be easy on the eyes (in more ways than one)

Arm your advocates

Make change attainable & desirable UX does not stop at UI

5 keys to a good UX first impression.

@gregharron

4

3

2

1

5

Page 28: Love at First (Web)site - Anatomy of a Good UX First Impression

To learn more, check out these other great UX resources from the Centerline Team:

UX vs UI: What’s the difference? http://bit.ly/1Nqu3IE How Humans Think - UX and Content Marketing http://bit.ly/1dt0YPN Why User Experience Matters http://bit.ly/1U1oAg1

…and even more at centerline.net/insights

@gregharron

Page 29: Love at First (Web)site - Anatomy of a Good UX First Impression

Questions, comments, examples of some great UX first impressions?

Connect Here: @gregharron @centerline centerline.net/insights

thanks.