UX for geeks

// Maša Crnkovič // UX for GEEKS
UX for GEEKS
CONVERSION OPTIMIZATION 101
@crnkovicM
Maša Crnkovič, Analytics Princess

// Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
Listening to
customers and
analysing digital
clues.
Head of Analytics and CX 
@Futura DDB

A B
Source: wordstream.com
or

WINNER
A B
or

A B
Source: behave.org
or

A B 18% 
more clicks
Source: behave.org
or

WE ARE NOT OUR USERS.

Decisions users make on a journey
Attention Relevance Interest Evaluation Action
Hmm … let me see. Is it relevant? Does it
interest me?
I want this.Do I like it enough
to get it?

Key user journey metrics
Click 5 seconds 15 seconds Scroll & click Conversion
interest me?
I want this.
Do I like it enough
to get it?

YOU CAN‘T OPTIMIZE IF YOU DON‘T MEASURE.

interest me?
I want this.
Do I like it enough
to get it?
First impression

First 5 seconds on a website are tightly connected to
an ad or referral link user has clicked on.

Measuring first impression
BOUNCE RATE
Is there a problem?
How big is the problem?
5 SECOND TEST
What is the problem?
How can I fix the problem?

BOUNCE RATE „User opens a single page and
then exits without triggering
any other requests.“

ADJUSTED
BOUNCE RATE
setTimeout(function () {
ga('send', 'event', {
eventCategory: 'Reading',
eventAction: 'Viewed 5 Seconds+',
eventLabel: 'Page: '+
location.pathname.toLowerCase()
});
}, 5000);

Bounce rate drops

 
5 SECOND TEST
Test your landing page
with random people.

Let’s do a
5 second test ...

website
Source: skb.si

Does the website pass a 5 second test?
1. Why should I stay here?
2. What company is behind it?
3. What do they offer?
4. Is the offer trustworthy?
5. What should I do next?

Does the website pass a 5 second test?
1. Why should I stay here?
2. What company is behind it?
3. What do they offer?
4. Is the offer trustworthy?
5. What should I do next?
Relevance
Identity
Offer
Credibility
Call to action

Page title
Relevance factor #1

Page title check-list
1. Clearly tells what page is about.
2. Matches the ad.

Picture is worth a thousand words.
Relevance factor #2

or
WINNER
A B

Hero image check-list
Can a user tell what the website is about
by seeing the hero image only?
HERO IMAGE RULE OF THUMB:
1. Shows the product or context of usage
2. Shows successful user because of the product
3. Shows real feelings (not a Stock photo vibe)
4. Supports key message
5. Gives additional info by showing details

interest me?
I want this.
Do I like it enough
to get it?
Keep user interested

Focus.
Keep user interested factor #1

Google homepage if it was designed by traditional organization
Image by Gerry McGovern
Promotions
About us
News for advertisers
Bragging
Basic search
Advanced search

Homepage should segment users, not sell.
Key task
Segmentation

Attention ratio
The lower the better.
How many different links
can users click on a
landing page vs. the goal?

Attention ratio
60:1
Source: skb.si

Attention ratio
10:1

Show value.
Keep user interested factor #2

What should users do and why?

CTA copy
What + why
I want to ________  
because ___________.
(action)
(benefit)

CTA copy
What + why
Download whitepaper
Learn 30 UX secrets from
TOP experts!
I want to ________  
because ___________.
(action)
(benefit)

CTA copy
What + why
Download whitepaper
to learn our UX secrets
I want to ________  
because ___________.
Name
E-mail
(action)
(benefit)

CTA design NOTICEABLE: 
Size + contrast

CTA design
Size + contrast
Can you identify the CTA
button even if your eyes are
almost closed?

READING FOR  
15 SECONDS
setTimeout(function () {
ga('send', 'event', {
eventCategory: 'Reading',
eventAction: 'Viewed 15 Seconds+',
eventLabel: 'Page: '+  
location.pathname.toLowerCase()
});
}, 15000);

interest me?
I want this.
Do I like it enough
to get it?
Answer questions

What specific information do users need to  
make a final decision?

How can I measure it?

Scroll tracking
Do users scroll?
• Below the fold
• End of the page

Are key benefits above the fold?
It’s not obvious the
page continues below

Click tracking
Do users click on key
information?
• Play video
• Show sample PDF
• Pricing

Tracking in Google Analytics
CLICK EVENTSSCROLL EVENTS
ga('send', 'event', 'Videos',
'play', 'Fall Campaign');
More: Google event tracking
1. Below the fold
2. End of the page
3. Main CTA section
See code at BONUS link at  
the end.

Tracking with special tools
Image credit
CLICK HEAT MAPSCROLL HEAT MAP
Image credit

Key takeaways
1. First 5 seconds are critical.  
Measure with adjusted bounce rate and 5 second test.
2. Focus and show value in design and copy. 
Measure with 15 second event and attention ratio.
3. You cannot optimize if you don’t measure. 
Use web analytics and talk to users.

“Without data, you’re just another
person with an opinion. Without good
interpretation... you're just another
source of noise.”  
- George Barna

BONUS: GA measurement check-list
1. Add tracking events in Google Analytics (GA):
• 5 seconds and 15 seconds → get code at https://goo.gl/Uq1tZW
• Scroll below the fold and to the end of the page → get code at https://goo.gl/2XCwXy
• Important clicks (e.g. play video, read sample ...) → Google event tracking
2. Set up GA goals for these events → https://goo.gl/J9rBSs (use Goal ID 6 to 9)
3. Set up custom report in GA → https://goo.gl/Mn3T8b

BONUS: Landing page UX check-list
1. Page title clearly tells what page is about.
(Test it!)
2. Page title matches the add.
3. Page looks professionally designed.
4. Page has one focus (buy/download/search).
5. Key benefits are above the fold.
6. It is clear that user can scroll on all
devices.
7. Company logo is visible.
8. It is clear what the company does.
9. Users can tell what is the page about only
by seeing the hero image. (Test it!)
10. Images are showing product and a customer
using the product.
11. There is no main navigation present.
(attention ratio is low, ideally 1:1)
12. Offer clearly communicates value, features and
price.
13. CTA button states exactly what will happen
next. (not smthng generic or two steps ahead).
14. The key benefit is next to CTA button.
15. CTA button stands out by size and color
contrast.

Maša Crnkovič 
Head of Analytics and CX 
Futura DDB
masa.crnkovic@gmail.com 
@crnkovicM

UX for geeks

Recommended

Recommended

More Related Content

Similar to UX for geeks

Similar to UX for geeks (20)

More from Maša Crnkovič

More from Maša Crnkovič (7)

Recently uploaded

Recently uploaded (20)

UX for geeks