Using machine learning and eye tracking data from over 1 million designs, EyeQuant has developed a predictive model to analyze design patterns and their impact on user experience. Their technology can predict with 95% accuracy which of two designs users will find clearer based on factors like text density, image size, and contrast levels. Analysis showed nearly a third of website bounce rates could be explained by design clarity. EyeQuant works with companies to apply these insights and identify cluttered designs that can be improved to better guide users' attention and increase conversions.

1. Using AI to find effective design patterns
rory@eyequant.com
Business Dev.
EyeQuant

2. How can AI & design build
better experiences?

5. User Research Methods
Usability Studies Eye Tracking Studies
Set up your own experiments or
outsource to a lab. Lots of control and can
gather more insights with interviews. Very
expensive and time consuming.
Interview & monitor users completing
tasks on your site. Great for qualitative
insights. Recall is not very reliable. Quite
time consuming.

6. Image Source: http://wplancer.com/another-freelance-web-design-nightmare/

7. EyeQuant Research & Tech
‣ Large-scale acquisition of website eye
tracking and user preference data.
‣ Predictive engine analyzed more than 1
million designs last year.
‣ Core technology is protected by US
patent #8,098,886.

8. User Research Machine Learning
+
A new way to understand the relationship between
design and user experience.

9. Detecting design features:

10. Eye-Tracking Studies
Empirical Eye-Tracking
46 Participants
EyeQuant Prediction
Verified Performance: 83% Accurate

11. Eye-Tracking Studies
Empirical Eye-Tracking
46 Participants
EyeQuant Prediction
Verified Performance: 95% Accurate

12. Eye-Tracking Studies
Empirical Eye-Tracking
46 Participants
EyeQuant Prediction
Verified Performance: 83% Accurate

13. How do you influence
what users see?

15. 1. What? 2. Why? 3. Where?
A simple framework

17. Tip #1: Use contrast to
guide users eyes

20. Tip #2: Remove potential
distractors

24. Tip #3: Leverage the
location bias

29. What are some bad
design patterns?

30. Ling’s example

31. What makes a design
cluttered vs. clear?

35. We applied machine learning to a large database of studies
where users were presented with a pair of designs and asked
which one has a cleaner design.
Method
Which design is more clean?

36. We applied machine learning to a large database of studies
where users were presented with a pair of designs and asked
which one has a cleaner design.
Method
Which design is more clean?

37. We applied machine learning to a large database of studies
where users were presented with a pair of designs and asked
which one has a cleaner design.
Method
Which design is more clean?

38. We applied machine learning to a large database of studies
where users were presented with a pair of designs and asked
which one has a cleaner design.
Method
Which design is more clean?

39. Rating Clean vs. Cluttered
algorithmically:
0
10
0Clean, clear
design
Cluttered, busy
design

40. Clarity Scores:
93 70
26 2

41. Fashion
Tickets
Clothing Shoes Car Insurance Travel Booking
Flowers Tickets Electronics Insurance
Bounce Rates were collected for 300 websites from
several different Alexa “Top Sites” categories:

42. Bounce Rate
Visual Clarity Score

43. The data suggests that nearly one-third of the variance in
bounce rates is explained by a website’s design clarity!
Should I
stay or
leave?
Decision:
33% Clarity
67% All other factors

44. What factors actually drive
perception of clarity?

45. 8526
Example: eCommerce Product Page

46. 26
‣ Dense text
‣ Very little text
padding
‣ Sharp contrasts
‣ Bold typeface
‣ More, smaller images

47. 85
‣ Essential text only
‣ More padding on text
‣ Fewer sharp contrasts
‣ Understated typeface
‣ Larger image

48. Case Study: British Gas increases conversion by 50% by de-
cluttering their landing page template
7248

49. Thank You!
rory@eyequant.com
Business Dev.
EyeQuant