Designing for
First Glance Attention
Two line title
goes here
Vision science AI – know what’s attracting attention
Sean Springer & Martine Sticha
© 3M 2021. All Rights Reserved. 3M Confidential.
1
© 3M 2021. All Rights Reserved.
2
AI that sees
like we see
© 3M 2021. All Rights Reserved.
3
Vision requires effort.
Find the green “O”
© 3M 2021. All Rights Reserved.
4
X X X X X X X X X X X X X X X X X X X
X X X X X X X X X X X X X X X X X X X
X X X X X X X X X X X X X X X X X X X
X X X X X X X X X X X X X X X X X X X
X X X X X X X X X X X X X X X X X X X
X X X X X X X X X X X X X X O X X X X
X X X X X X X X X X X X X X X X X X X
X X X X X X X X X X X X X X X X X X X
© 3M 2021. All Rights Reserved.
5
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
© 3M 2021. All Rights Reserved.
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
6
O X O X O O O X X O O X X X O O X O
O X X O X O X O X O X O X O X O O X
X X O X O X O X O O X O O X O X O O
O O X O O X O X O X O X O X O X O X
X O O X O X X O O X X O X O X O X X
O O X X O X O X O O X O O X X X O O
X X O O X O X O X O X O X O X O X X
© 3M 2021. All Rights Reserved.
7
We only process
the center 2º of our visual
field in HD + full color
© 3M 2021. All Rights Reserved.
8
© 3M 2021. All Rights Reserved.
9
Tough for humans,
easy for AI
Impossible for AI, but where
designers can leverage expertise
© 3M 2021. All Rights Reserved.
10
3M Visual Attention Software (VAS)
AI as visual spellcheck
▪ A predictive tool simulating the
first glance phase of human vision
▪ Reports which areas/objects are likely
to attract attention
▪ Built on unique algorithms tailored for all
viewing conditions from digital to print
© 3M 2021. All Rights Reserved. 3M Confidential.
▪ VAS (Visual Attention Software) created
by proprietary 3M Science
▪ Analyze layouts or photos
in ~7 seconds
▪ The model is 92% accurate versus an
eye-tracking study capturing the critical
first glance
11
Design with Data
Develop better, faster creative content
test
© 3M 2021. All Rights Reserved.
compare
refine
present
12
Integrating Visual Attention Software
In the Design Process
Web app - vas.3M.com
Plugin designed for:
Adobe Creative Cloud
© 3M 2021. All Rights Reserved. 3M Confidential.
13
Demo
Using VAS in
®
Adobe Illustrator
3M VAS plugin for
Adobe® Illustrator
© 3M 2021. All Rights Reserved.
14
Layout:
Adobe Illustrator
Design Analysis:
3M VAS plugin
© 3M 2021. All Rights Reserved.
15
Project
Visual Equities for the brand
Scotch™ Logo
Scotch™ Plaid
Brand colors + fonts
3M logo
Design Principles
Bold use of red
Brand fonts
Prominent, intentional
application of the plaid design
Visual Hierarchy
Scotch™ Logo
Product name
Claims
Lifetime warranty
© 3M 2021. All Rights Reserved.
16
Areas of Interest
Visual Elements
Areas of Interest
and
Visual Elements
Area of Interest (AOI)
Provides probability scores the areas selected as
important will be seen within the design.
Visual Elements
Based on the AOI selections. Use this numerical data
to evaluate the attributes and decide what to adjust
to shift viewer’s attention.
Edges
The score represents the clarity of transition between
two shapes.
Intensity
Luminance contrast, brightness, or dark/light contrast.
Red / Green Contrast
The contrast between red and green. The hue, value,
and saturation within these colors will affect the amount
of contrast.
Blue / Yellow Contrast
the contrast between blue and yellow. The hue, value,
and saturation within these colors will affect the amount
of contrast.
Faces
People are biologically drawn to other human faces.
Does not include the face of animals
© 3M 2021. All Rights Reserved.
18
Additional
Concepts
Overall Analysis
Concept B
product name in the middle with
a narrow black holding shape
Concept C
Larger black holding shape with
product name and warranty in yellow
– to create some visual differentiation
A
© 3M 2021. All Rights Reserved.
Original Concept
B
C
19
Heatmap
Red – higher probability
Yellow – mid-range probability
Blue – lower probability
This provides a visual overview of
the notable areas attracting attention
A
© 3M 2021. All Rights Reserved.
Original Concept
B
C
20
Hotspots
Red – higher probability
Yellow – mid-range probability
Blue – lower probability
Outlined areas shows probability
scores of areas being noticed
A
© 3M 2021. All Rights Reserved.
Original Concept
B
C
21
Gaze Sequence
The four most likely locations
a person will glance, in the
probable viewing order in the
first 3-5 seconds
A
© 3M 2021. All Rights Reserved.
Original Concept
B
C
22
Areas of Interest
Based on the AOI selections.
Use this numerical data to
evaluate the attributes and
decide what to adjust to
shift viewer’s attention.
A
© 3M 2021. All Rights Reserved.
Original Concept
B
C
23
© 3M 2021. All Rights Reserved.
24
Promo code:
5atMAX21
Get 5 bonus analysis credits
when you sign up for a
free VAS trial account at
vas.3M.com
Offer expires November 30, 2021
© 3M 2021. All Rights Reserved.
25
vas.3M.com
Questions?
vas.3m.com
© 3M 2021. All Rights Reserved.
helloVAS@3m.com
27