Data driven mobile UX - UX insight 2017, uxinsight.nl

82
Proprietary + Confidential Data-driven mUX +jorden lentze - [email protected] Conversion Specialist

Transcript of Data driven mobile UX - UX insight 2017, uxinsight.nl

Page 1: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

Data-driven mUX

+jorden lentze - [email protected]

Conversion Specialist

Page 2: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Page 3: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

The difference between quantitative data and qualitative data. You need to use both - from the presentation of Luke W. on Conversions@Google

Page 4: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Page 5: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

50%

Page 6: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Almost half of UK eCommerce transactions (48.9%) now take place on mobile devices

Source: Criteo

Page 7: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

20%

Page 8: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

50% 60%

Page 9: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Proprietary + Confidential

The solution for mobile is not a responsive website…...

Page 10: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Proprietary + ConfidentialProprietary + Confidential

Proprietary + Confidential

…..are you ready for the mobile tipping point in 2017?

Page 11: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Agenda

Making design decisions with data

What happens if you design without data?

Page speed

Focus on the user

The end

Page 12: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

3 takeaways

✓ Focus on the user and every

else will follow

✓ You need both Quant and

Qual to design the best user

experience

✓ The one who knows their

customers the best will be the

most successful

Page 13: Data driven mobile UX -  UX insight 2017, uxinsight.nl
Page 14: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Focus on the User

“There is no substitute for personally watching and listening to real people”

- Larry Page

Page 15: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Focus on the User

and all else follows.

Page 16: Data driven mobile UX -  UX insight 2017, uxinsight.nl
Page 17: Data driven mobile UX -  UX insight 2017, uxinsight.nl
Page 18: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Page 19: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

Page 21: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Qualitative data creates

bigger insights than

quantitative data

Proprietary + Confidential

Page 22: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Agenda

Design decisions with data

What happens if you design without data?

Page speed

Focus on the user

The end

Page 23: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialWhy is my conversion rate low on mobile?

Website sales conversion by device (retail, UK)

Source: Adobe

Page 24: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialThe traditional assumptions:

1. Customers browse on mobile and buy on desktop

2. Mobile devices are used on the go

3. The user experience is not as good

4. The screen is too small

5. The speed is too low ?

Page 25: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialThe only way to understand what is happening is to have a measurement plan

1. Question

2. Measure

3. Test

Page 26: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialExample: the Google Merchandise store

1.37% 0.74% 0.59%

Page 27: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialUse advanced ecommerce reports

Page 28: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialHave an in depth understanding of your checkout funnel

Page 29: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialShopping behavior comparison: mobile vs desktop

Insights:

- Mobile users will visit more product

pages but are less likely to add

products to the cart

- Higher cart abandonment for mobile

users

Page 30: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialCheckout behavior comparison: mobile vs desktop

Insights:

- Mobile users drop off at the billing

page and at the payment page

especially

Page 31: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialUnderstanding why mobile users add less likely to add products to cart

Insights: The 25-34 years old mobile users are less likely to add products to the cart. However, on

desktop, they’re the more likely to do so. Are we dealing with cross devices users?

Page 32: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialSkatehut

Page 33: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

Customer Purchaser

Page 34: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialUnderstanding why users drop off at the billing page

- Too many steps for mobile?

- Get rid of optional fields?

Page 35: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialUnderstanding why users drop off at the payment page

- Can it be how the information is displayed?

- Is it linked to the payment options and how they are displayed?

- Is it a situational problem? -> add a pay later CTA

- Is it a technical problem?- Do users second-guess?

Page 36: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

(A) Quant to Qual: WhyExplaining observed changes in behavior.

(B) Qual to Quant: PriorityGenerating and then testing hypotheses.

Estimating impact of observed issues.

(C) Qual x Quant: Full Picture

Page 37: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialIs it a speed problem?

Page 38: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialIs it a browser support problem?

Page 39: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialIs it a browser support problem? Example

Page 40: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Agenda

Design decisions with data

What happens if you design without data?

Page speed

Focus on the user

The end

Page 41: Data driven mobile UX -  UX insight 2017, uxinsight.nl

NOYes

Source: Conversions@Google2016 - State of CRO Survey, 2016

Does your website have an automatic slider?

Page 42: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Why do you use an automatic homepage slider?

Page 43: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Why are sliders used?

1. Multiple messages above the fold

2. Politics

3. Monetisation

4. It’s beautiful

Page 44: Data driven mobile UX -  UX insight 2017, uxinsight.nl

What about your customers?

Page 45: Data driven mobile UX -  UX insight 2017, uxinsight.nl

This is what sliders do to visitor behavior

Visitors start scrolling right away

because there is so much “crap”

above the fold……...

Source: Conversions@Google2016 - Luke W.

Page 46: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Do not stop optimizing when using homepage sliders

Page 47: Data driven mobile UX -  UX insight 2017, uxinsight.nl
Page 48: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Why are sliders evil?

1. Lower page speed: loading 5 visuals

2. Carrousels look like banners

3. The first slide triggers most interaction

4. UX design is often bad

5. Human Eye Reacts To Movement

6. Worst performance ever!

Source: http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites/

Page 49: Data driven mobile UX -  UX insight 2017, uxinsight.nl

The 3 rules for using homepage sliders

1. Do not use automatic homepage sliders2. Do not use automatic homepage sliders3. Be relevant! A/B test and improve them.

Make them as user friendly and effective as possible

Page 50: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Have you tested this?

Page 51: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Does your mobile website have a hamburger menu?

NO

Yes

Source: Conversions@Google2016 - State of CRO Survey, 2016

Page 52: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Only use hamburger menus at McDonalds

Page 53: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Example of A/B test with Menu

Source: Menu eats hamburger

Page 54: Data driven mobile UX -  UX insight 2017, uxinsight.nl

And…

Page 55: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Why do you have to explain what it does?

Page 56: Data driven mobile UX -  UX insight 2017, uxinsight.nl

If there is important content behind the Hamburger Menu. Why would you want to hide it?

Page 57: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Research by NNgroup: Hiding navigation is bad for discoverability and task time

https://www.nngroup.com/articles/hamburger-menus/

Summary: Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

Source: nngroup

Page 58: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Hiding navigation things is bad for discoverability

Page 59: Data driven mobile UX -  UX insight 2017, uxinsight.nl

And why put it as far away as possible?

Source http://www.lukew.com/ff/entry.asp?1927

Page 60: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Why are hamburger menus used so often?

NO

Yes

Source: Conversions@Google2016 - State of CRO Survey, 2016

Page 61: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Why are hamburger menus used so often?

Craig Sullivan quoting Peep Laja during Conversions @ Google event 2015

Page 62: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Talking about McDonald’s

Source: Hamburger menu

Page 63: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Agenda

Design decisions with data

What happens if you design without data?

Page speed

Focus on the user

The end

Page 64: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

Content Design & Functionality

Speed

Core principles of a great user experience

Page 65: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential“What do you dislike most when browsing the web on your mobile device?”

Encountering unplayable videos

Getting redirected to the homepage

Waiting for slow pages to load

Being shown interstitials

Other

14%

13%

46%

16%

11%

Page 66: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialHow scary are slow loading mobile websites?

Page 67: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialSlow and steady doesn’t win the race

Source: Kissmetrics

40%abandon if a

site takes >3 secto load

47%expect a page

to load in <2 sec

52%say fast load time

is important to brand loyalty

Page 68: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

Business impact of speedPage speed is a ranking

signal in Google’s organic

search results (blog post)2% slower = 2% less search/user

400ms faster = 9% more traffic

Faster pages = more pageviews

100ms faster = 1% more revenue

5s faster = 25% more pageviews, 7-12% more revenue

37% faster = 70% increase in mobile revenue per user

80% faster = 108% increase in ads interaction rate

Page 69: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + ConfidentialMobile pages that load 1 second faster achieve up to a 27% higher conversion rate

Pages with load times under 2.4

seconds and lower conversion

rates are most likely 404/error

pages.

180,000

160,000

140,000

120,000

100,000

80,000

60,000

40,000

20,000

0

1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9

Load time (in seconds)

Sess

ions

Sessions Conversion rate (%)

Conversion rate 1.9 %

Conversion rate 1.5 %

Page 70: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

So what is a GOOD load time?

Page 71: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

2 seconds

Page 72: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

Page 74: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Confidential + Proprietary

(A) Quant to Qual: WhyExplaining observed changes in behavior.

(B) Qual to Quant: PriorityGenerating and then testing hypotheses.

Estimating impact of observed issues.

(C) Qual x Quant: Full Picture

Page 75: Data driven mobile UX -  UX insight 2017, uxinsight.nl
Page 76: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Agenda

Making design decisions with data

What happens if you design without data?

Page speed

Focus on the user

The end

Page 77: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

3 + 1 takeaways✓ Focus on the user and every else

will follow

✓ You need both Quant and Qual to

design the best user experience

✓ The one who knows their

customers the best will be the

most successful

✓ Always use a/b testing to validate

your insights!

Page 78: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

30% of A/B tests is successful. This also means that if you do not

a/b test, there is a 70% chance that if you implement a change on your

website it will have no or a negative impact on your revenue.

Page 79: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Proprietary + Confidential

Source: Peep Laja

Page 80: Data driven mobile UX -  UX insight 2017, uxinsight.nl
Page 81: Data driven mobile UX -  UX insight 2017, uxinsight.nl

One more thing…..

Proprietary + Confidential

Page 82: Data driven mobile UX -  UX insight 2017, uxinsight.nl

Pixel Home Allo

How will Artificial intelligence impact UX design…..?