Description:
People are coming to your website... and leaving just as quickly. What is going on? In this talk you will learn:
1) analytical checklist that will help you identify places where your website is leaking users: Metrics such as bounce rate, scroll depth, and click through rate. Attention ratio. UX heuristics such as: large enough call to action that pops; using the same copy as in ads; unique selling proposition above the fold...
2) two of UX user testing methods The 5s test. How to conduct a short interview to assess if users understand content and value of your offer.
9711147426✨Call In girls Gurgaon Sector 31. SCO 25 escort service
UX for geeks
1. // Maša Crnkovič // UX for GEEKS
UX for GEEKS
CONVERSION OPTIMIZATION 101
@crnkovicM
Maša Crnkovič, Analytics Princess
2. // 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
10. // Maša Crnkovič // UX for GEEKS
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?
11. // Maša Crnkovič // UX for GEEKS
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?
12. // Maša Crnkovič // UX for GEEKS
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?
13. // Maša Crnkovič // UX for GEEKS
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?
14. // Maša Crnkovič // UX for GEEKS
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?
15. // Maša Crnkovič // UX for GEEKS
Key user journey metrics
Click 5 seconds 15 seconds Scroll & click Conversion
Hmm … let me see. Is it relevant? Does it
interest me?
I want this.
Attention Relevance Interest Evaluation Action
Do I like it enough
to get it?
16. // Maša Crnkovič // UX for GEEKS
YOU CAN‘T OPTIMIZE IF YOU DON‘T MEASURE.
17. // Maša Crnkovič // UX for GEEKS
Click 5 seconds 15 seconds Scroll & click Conversion
Hmm … let me see. Is it relevant? Does it
interest me?
I want this.
Attention Relevance Interest Evaluation Action
Do I like it enough
to get it?
First impression
18. // Maša Crnkovič // UX for GEEKS
First 5 seconds on a website are tightly connected to
an ad or referral link user has clicked on.
20. // Maša Crnkovič // UX for GEEKS
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?
21. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
BOUNCE RATE „User opens a single page and
then exits without triggering
any other requests.“
27. // Maša Crnkovič // UX for GEEKS
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?
28. // Maša Crnkovič // UX for GEEKS
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
30. // Maša Crnkovič // UX for GEEKS
Page title check-list
1. Clearly tells what page is about.
2. Matches the ad.
31. // Maša Crnkovič // UX for GEEKS
Picture is worth a thousand words.
Relevance factor #2
32. // Maša Crnkovič // UX for GEEKS
or
WINNER
A B
Source: wordstream.com
33. // Maša Crnkovič // UX for GEEKS
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
34. // Maša Crnkovič // UX for GEEKS
Click 5 seconds 15 seconds Scroll & click Conversion
Hmm … let me see. Is it relevant? Does it
interest me?
I want this.
Attention Relevance Interest Evaluation Action
Do I like it enough
to get it?
Keep user interested
35. // Maša Crnkovič // UX for GEEKS
Focus.
Keep user interested factor #1
36. // Maša Crnkovič // UX for GEEKS
Google homepage if it was designed by traditional organization
Image by Gerry McGovern
Promotions
About us
News for advertisers
Bragging
Basic search
Advanced search
37. // Maša Crnkovič // UX for GEEKS
Homepage should segment users, not sell.
Key task
Segmentation
38. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
Attention ratio
The lower the better.
How many different links
can users click on a
landing page vs. the goal?
39. // Maša Crnkovič // UX for GEEKS
Attention ratio
60:1
Source: skb.si
43. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
CTA copy
What + why
I want to ________
because ___________.
(action)
(benefit)
44. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
CTA copy
What + why
Download whitepaper
Learn 30 UX secrets from
TOP experts!
I want to ________
because ___________.
(action)
(benefit)
45. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
CTA copy
What + why
Download whitepaper
to learn our UX secrets
I want to ________
because ___________.
Name
E-mail
(action)
(benefit)
46. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
CTA design NOTICEABLE:
Size + contrast
47. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
CTA design
Size + contrast
Can you identify the CTA
button even if your eyes are
almost closed?
48. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
CTA design
Size + contrast
Can you identify the CTA
button even if your eyes are
almost closed?
50. // Maša Crnkovič // UX for GEEKS
Click 5 seconds 15 seconds Scroll & click Conversion
Hmm … let me see. Is it relevant? Does it
interest me?
I want this.
Attention Relevance Interest Evaluation Action
Do I like it enough
to get it?
Answer questions
51. // Maša Crnkovič // UX for GEEKS
What specific information do users need to
make a final decision?
53. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
Scroll tracking
Do users scroll?
• Below the fold
• End of the page
54. // Maša Crnkovič // UX for GEEKS
Are key benefits above the fold?
It’s not obvious the
page continues below
55. // Maša Crnkovič // UX for GEEKS// Maša Crnkovič // UX for GEEKS
Click tracking
Do users click on key
information?
• Play video
• Show sample PDF
• Pricing
56. // Maša Crnkovič // UX for GEEKS
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.
58. // Maša Crnkovič // UX for GEEKS
Tracking with special tools
Image credit
CLICK HEAT MAPSCROLL HEAT MAP
Image credit
59. // Maša Crnkovič // UX for GEEKS
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.
60. // Maša Crnkovič // UX for GEEKS
“Without data, you’re just another
person with an opinion. Without good
interpretation... you're just another
source of noise.”
- George Barna
61. // Maša Crnkovič // UX for GEEKS
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
62. // Maša Crnkovič // UX for GEEKS
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.
63. // Maša Crnkovič // UX for GEEKS
Maša Crnkovič
Head of Analytics and CX
Futura DDB
masa.crnkovic@gmail.com
@crnkovicM