What is the real experience of your online customer? A NeuroIS approach at user experience research

PIERRE-MAJORIQUE LÉGER, Ph.D.
NSERC-Prompt Industrial Research Chair in User Experience
Co-director Tech3Lab, Director ERPsim Lab
Pioneering the Digital Future for Omnichannel Retail Managers
Training Event T2
June 3rd
2019, Linz, Austria.
What is the real
experience of your
online customer?
A NeuroIS approach at user experience research

© Copyright Léger (2019)
Pierre-Majorique Léger, Ph.D.
Lab Serious games to learn
enterprise systems and
business analytics
https://www.researchgate.net/profile/Pierre-Majorique_Leger
NSERC-Prompt
Industrial Research Chair
in User Experience
Director ERPsim Lab
Co-direct0r Tech3Lab
pml@hec.ca
GRADUATE STUDIES
POST-DOCTORATE
LABORATORIES FINANCIAL SUPPORT
GUEST PROFESSOR

COGNITION
ATTENTION
ÉMOTIONS
1 Gb/hour
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA

Marc Fredette, Ph.D.
Data Sciences
Sylvain Sénécal, Ph.D.
Marketing
Pierre-Majorique Léger, Ph.D.
Information technologies

Industrial research partners
from a wide range of industries
INSURANCE
ONLINE GROCERY
MEDIA
RAILWAYS
BANKING
AERONAUTICS
LOGISTICS
FINANCE
r partenaire de
PLUSIEURS BOURSES DE RECHERCHE
À TOUS LES NIVEAUX :
chaire_ux.hec.ca
INSCRIVEZ-VOUS COMME
PARTICIPANTS À NOS ÉTUDES :
panel.hec.ca
Organismes subventionnaires :
partenaire de

est ﬁer partenaire de
PLUSIEURS BOURSES DE RECHERCHE
À TOUS LES NIVEAUX :
chaire_ux.hec.ca
INSCRIVEZ-VOUS COMME
PARTICIPANTS À NOS ÉTUDES :
panel.hec.ca
est ﬁer partenaire de
Propulsé par : Organismes subventionnaires :

2019
50Scientific articles
and conference
proceedings
8Postdoc
researchers
5PhD Students
21Master
students
10summer
interns
420human subjects
20research
projects

Please
test!

Ease of use?

3 of 5
Ease of use?

Conclusion?
?

COGNITION
ATTENTION
EMOTIONS
A B
Using neurophysiological data
to optimize user experience (UX)
1 Gb/participant
per hour
HELP DESIGNERS
TO MAKE DECISION
AUTOADAPT INTERFACE
EYETRACKING
NEUROPHYSIOLOGICAL MEASURES

Texting while walking:
An expensive switch cost.
A SIGNIFICANT COGNITIVE EFFORT IS REQUIRED TO DIVIDE
OUR ATTENDING WHEN TEXTING WHILE WALKING. THE
MORE THE EFFORT, THE MORE THE ERROR.
https://www.sciencedirect.com/science/article/pii/S0001457519302908
Courtemanche, Francois, Elise Labonté-LeMoyne, Pierre-Majorique Léger, Marc
Fredette, Sylvain Senecal, Ann-Frances Cameron, Jocelyn Faubert, and François
Bellavance. “Texting while walking: an expensive switch cost.” Accident Analysis &
Prevention 127 (2019): 1-8.
RESEARCH TEAM:
Pierre-Majorique Léger, Ph.D. (PI)
Ann-Frances Cameron, Ph.D.
Francois Courtemanche, Ph.D.
Jocelyn Faubert,Ph.D.
Marc Fredette, Ph.D.
Elise Labonté-Lemoyne, Ph.D.
Franco Lepore, Ph.D.
Sylvain Sénécal, Ph.D.

EMOTIONAL VALENCE
Sad Happy

FRONTALIS
CORRUGATOR
ZYGOMATICUS

NEUTRAL
HAPPY
SAD
DISCUSTED
ANGRY
SURPRISED
SCARED

NEUTRAL
HAPPY
SAD
ANGRY
SURPRISED
SCARED
DISCUSTED

EMOTIONAL INTENSITY
Calm Excited

Electrodermal
Activity

COGNITIVE LOAD
Easy Difficult

2 x 3 = ?
EASY
14 x 17 = ?
DIFFICULT

Tech3Lab:
A Real UX Playground
150 3000PROJECTS RESEARCH PARTICIPANTS
3YEARS

Top 3 UX Questions
Which is the
emotional journey
truly experienced
by my users?
What generates
cognitive and emotional
reactions on our interface?
Which of my interface
generates the best UX?
BA vs

Which is the
emotional journey
truly experienced
by my users?
Powered
by
1 2 3 ...
+
-ACTIVATION:
EmotionalIntensity
TIME
STEPS
Friction Point
EMOTIONAL
VALENCE
+ -

Which is the
emotional journey
truly experienced
by my users?
An example in Food and Agriculture

VALENCE
EMOTIONAL
Fruitless
search
using the
tool bar
Inscription:
Entering
personal data
Adding filters
to choose
the product
Search
results
Products
without photos
Click tio
“buy”
Submitting
tel. number
Which is the emotional journey truly experienced by my users?
An example of the cognitive path with the Tech3Lab methodEmotionalIntensity
Intensité émotionnelle
Emotional valence
Identification
of friction points
for each step

0 100 200 300 400 500 600 700 800 900 1000 1100 1200 1300 1400
Time (sec)
-0,7
-0,6
-0,5
-0,4
-0,3
-0,2
-0,1
0,0
0,1
Activation
Valence
-1,0000
-0,5000
0,0000
0,5000
1,0000
Tâche
Pain Point
Création de compte
Magasinage
Paiement
Sélection du lieu de collecte
Sélection du moment de collecte
Null
1
«No stress for me, I entered
my credit card, that was
fine»EmotionalIntensity
Which is the
emotional journey
truly experienced
by my users?
Our friction point identification method
reveals a contradiction between what
is expeienced and what is reported
Powered
by
VALENCE
EMOTIONAL

0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400
Time (sec)
-1,0
-0,8
-0,6
-0,4
-0,2
0,0
0,2
0,4
0,6
0,8
1,0
Activation
Valence
-1,000
-0,500
0,000
0,500
1,000
Tâche
Pain Point
Création de compte
Magasinage
Paiement
Sélection du lieu de collecte
Sélection du moment de collecte
Null
1
«Yes, I liked
the Search»
VALENCE
EMOTIONAL
Which is the
emotional journey
truly experienced
by my users?
Our friction point identification method
reveals a contradiction between what
is expeienced and what is reported
Powered
by
EmotionalIntensity

What generates cognitive and emotional
reactions on our interface?

What generates
reactions on our
interface?
Powered
by

DENSITY
OF FIXATIONPowered
by
What generates
reactions on our
interface?

POSITIVE EMOTIONS
NEGATIVE EMOTIONS
Powered
by
Reaction
at the moment
of fixation
What generates
reactions on our
interface?

Powered
by
What generates
reactions on our
interface?

Which of my interfaces generates
the best UX?BA vs

Which of my interfaces
An example comparing two prototypes
of a new website
Immobilier.ca Immobilier.ca
A BBA vs
Powered
by

EMOTIONAL
VALENCE
EMOTIONAL INTENSITY
Sad Happy
Calm
Excited

Which of my interfaces
Prototype A generates a better
experience than Prototype B
Immobilier.ca Immobilier.ca
A B
BA vs
-1.0 -0.8 -0.6 -0.4 -0.2 0.0 0.2 0.4 0.6 0.8 1.0
Valence
-1.0
-0.8
-0.6
-0.4
-0.2
0.0
0.2
0.4
0.6
0.8
1.0
Arousal
Task 1
Task 4
Task 5
Task 6
Task 1
Task 6
global_modiﬁed
Platform
Firm 1
Firm 2
Average of Valence vs. average of Calculation1. Color shows details about Platform. The marks are labeled by Subtask.
INTENSITY
VALENCE
COGNITIVE LOAD
VALENCE
Negative Positive
Easy Hard
-0.40 -0.35 -0.30 -0.25 -0.20 -0.15 -0.10 -0.05 0.00 0.05 0.10 0.15 0.20 0.25
Valence
-0.1
0.0
0.1
0.2
0.3
0.4
0.5
Arousal
Task 4
Task 3
Task 2
Task 2
Task 4
Task 1
Task 5
Task 6
Task 7
Task 8
COGNITIVE LOAD
VALENCE
Negative Positive
Easy Hard
COGNITIVE
LOAD
Sad Happy
Calm
Excited

Case
studies

Which of these two ads creates
the most optimal emotional reaction?

WHY IS IT IMPORTANT ?
Social media ads are expensive. In 2018, Companies spent
108 billion dollars on social media ads1
. It is therefore im-
portant to get the most out of your ad. This can be done
by evaluating the ad before deployment, assuring that it
has the desired effect on your customers.
DO CUSTOMERS LIKE YOUR AD?
For an ad to be effective, it must produce a positive emo-
tional response. Wouldn’t it be ideal to quickly map a cus-
tomer’s emotional response to an ad before deployment?
Components of ads that generate negative emotion can
then be modified, leading to more effective ads.
What do your customers really experience
when viewing your ads on social media?
The case of Apple.com
homepage carousel: Methodology
Sample: 8 participants (4 men, 4 women)
Task: Looking for 5 seconds at each banner ad.
Data acquisition: Tobii Pro, Facereader v.8,
Biopac Acknowledge, Noldus Observer XT.
Measures used in the example:
Positive and Negative Valence
Data Analysis and Triangulation:
CubeHX
.
Time to insight:
1 day to collect data,
1 day to post-process and analysis results.
Over 97 million dollars spend
on digital ads in 20162
1
eMarketer, 2019
2
Pathmatics, 2016
WHICH OF THESE TWO ADS CREATES THE MOST OPTIMAL EMOTIONAL REACTION?

Ad #1 Ad #2
Ad Emotional Response: Results and Insights
INSIGHT #1
For more than half the participants,
Ad #1 generated only positive emotion. As
the UX heatmaps show, the face and faded lights
in the background seem to have contributed
to the positive emotional response for this Ad.
INSIGHT #2
Even when participants preferred this Ad,
it generated mostly negative emotions.
The backward-facing person in this Ad
contributes to the negative emotion felt
by participants.
Positive valence
(Facereader)
Negative valence
(Facereader)
UX Heatmap powered by CubeHX

Reports from the industry show that consumers usu-
ally avoid rotating banners on the homepage carousel1.
Thus, it it essential to choose banners that trigger posi-
tive emotions and subsequently reduce the homepage
bounce rate. Optimization of the banner can lead to mil-
lions of dollars in gained revenue, simply by mass visibility
to placed products.
THE NAME OF THE GAME :
TIME TO INSIGHT
Given the frequency of changes of rotating banners
(weekly changes in the case of Walmart), it is essential to
perform this type of analysis very quickly, and cost effec-
tively, in order to select which banners should and should
not be used. A/B testing this could cost tens of thousands
of dollar every week in lost revenue!
when they land on your homepage?
The case of Walmart.com
homepage carousel: Methodology
Walmart.com: 321 million visitors per month
EXAMPLE 1
https://conversionxl.com/blog/dont-use-automatic-image-sliders-or-carousels/1
Task: Looking for 5 seconds at each banner ad.
Positive and Negative Valence
CubeHX
.
Time to insight:

WALMART HAS A VERY EMOTIONALLY
EFFECTIVE FIRST BANNER
Of the five banners tested. The “We Dress America” vi-
sualization performs the best, when engaging with the
customers non-conscious. As this is the virst visualiza-
tion the customer sees, it is essential that it must cap-
tura and engage the consumer. Our test show that of all
the visualizations, “We Dress America” is best suited to
allow the customer tofurther engage with the site.
THE REST OF THE CARROUSEL
CREATE MIXED EMOTIONS
Maintaining user attention for the rest of the carousel is
challenging. The other banners must be as effective, if
not more, to maintain consumer engagement. For ex-
ample, the basketball banner does not have the same
level of professionalism in its design and consumers im-
mediately reacted to it. Obviously, testing banners every
week before putting them online would help the perfor-
mance Walmart’ website (e.g., bounce rate).
Walmart.com Homepage Carousel Banners on March 27
UX Heatmap powered by CubeHX
Homepage Carrousel: Insights & Recommendations
INSIGHT #1
Nearly half of the participants
had an entirely positive
emotional experience on the
first rotating banner.
INSIGHT #2
This image generates emotional
confusion for a majority of consum-
ers, mostly because of bad design.
INSIGHT #3:
Confusion due to missing
human head
INSIGHT #4
Although nearly half of
participants mention they like
the Apple products’ banner,
several elements generate
negative emotions, including
the product names.
EXAMPLE 1
Positive valence
(Facereader)
Negative valence
(Facereader)

“Your product page is the most important page on your
site. Build your product page effectively and both your
traffic and conversions will skyrocket. Fail to do so, and
almost all your marketing and advertising efforts will fall
short of goal.”1
CONVERSION FUNNEL OPTIMIZATION
As all retailers invest heavily to attract consumers to their
websites and then convert them into customers, having
best in class product pages is essential for performing
websites.
BENCHMARK YOUR SITE
The best way to improve is to compare your online perfor-
mance. Not just on web analytic metrics. Behaviors can’t
tell you what user really experience. By comparing all the
key steps in your conversion funnel to those of your com-
petitors, you can get inspired and try to move the needle
in your favor.
Comparing product choice experience
across three platforms: Methodology
on your product pages?
Generalist Specialist Niche
EXAMPLE 2
https://www.bigcommerce.com/blog/product-page-examples/#7-ecommerce-product-page-best-practices1
Task: Find for a gift for your 11 year old nephew.
Measures:
Valence (Facereader), Arousal (standardized EDA,
Biopac), Cognitive load (Pupil size, Tobii)
CubeHX
.
Time to insight:

EXAMPLE 2
HOMEPAGE PRODUCT SEARCH PRODUCT SPECS CHECKOUT
Visitors Bounce Rate
Walmart.com 321M 52.16%
Bestbuy.com 109M 47.63%
Gamestop.com 21.5M 44.44%
The sales funnel of Walmart, Bestbuy and EB Games
on your product pages?

Emotional Circumplex
METHODOLOGICAL NOTES
EMOTIONAL
VALENCE
EMOTIONAL INTENSITY
Sad Happy
Calm
Excited
UX No Man Land Excitement
SerenityTolereble
HOW TO READ THIS CIRCUMPLEX
On the vertical axis, we find the emotional intensity
experienced by consumers; the higher they are, the
more emotionally intense is the experience. Horizon-
tally, emotional valence is represented; on the right,
experience generates pleasure, while on the left, the
experience generates displeasure. Finally, the size of
the circle represents the mental workload; a large
circle represents a significant mental effort of con-
sumers.

WALMART, THE LAGGER.
Low prices is not sufficient for a bet-
ter experience. Walmart is a generalist
and must find a way to compete against
websites that can afford to carve a
unique experience for users. A microsite
can be a way to compete on the emo-
tional front. Walmart has successfully
used this strategy in the past for niche
products.
INSIGHT #1
Experience on Walmart is as emotionally engaging on these two pages. EBGames and BestBuy
are able to carry over to the search page the excitement generated on the homepage.
EXAMPLE 2
Homepage Product Search
VALENCE (FACEREADER)VALENCE (FACEREADER)
AROUSAL(STANDARDIZED
Product pages: Insights & Recommendations (1/2)
AROUSAL(STANDARDIZEDEDA)

Product Specs Checkout
PUPIL SIZE PUPIL SIZE
THE ULTIMATE STEP IN
THE CONVERSION FUNNEL:
THE PRODUCT PAGE
The product page is the last page
before consumers make a purchase.
The experience on EBGames appears
to be the gold standard. It performs
significantly better than Walmart and
BestBuy. By having the best product
page the EBGames website, is making
the most of their efforts to convert
consumers to paying customers on
their website.
Product pages: Insights & Recommendations (2/2)
INSIGHT #2
EBGames product page generates emotions that are positive
and intense, while maintaining a low mental workload.
VALENCE (FACEREADER)
EXAMPLE 2

Every customer is unique in the way that they engage
with an organisation, so having a framework in place to
optimise each touchpoint and capitalise on customers’
moments of truth is essential to generating more revenue
and new business alike.1
By using what consumers really experience in terms of
emotions when interacting with the website, CubeHX
journey maps identify all consumers’ moment of truth, not
just the ones they self-reported.
IDENTIFYING THE PAIN POINTS
IN THE USER JOURNEY
By calculating moments of high arousal and negative
emotions, we can detect pain points along the consumer
journey, which will enable Walmart to identify problems in
the conversion funnel. Understanding the most important
pain points on a website is very useful to help designers
prioritize what needs to be fixed.
What do customers truly experience
during their journey on your website?
Walmart.com journey maps :
Methodology
https://www.sas.com/en_gb/insights/articles/marketing/why-is-customer-journey-mapping-important.html#/
EXAMPLE 3
1
Walmart.com: 321 million visitors per month
Task: Searching and buying a “pop figure” under 15$.
Valence (Facereader) and
Arousal (standardized EDA, Biopac)
CubeHX
.
Time to insight:

Journey maps
METHODOLOGICAL NOTES
1 2 3 ...
+
-
ACTIVATION:
(StandardizedEDA-Biopac)
Time
STEPS
Friction Point
EMOTIONAL
VALENCE
(Facereader)
+ -
HOW TO READ THIS JOURNEY MAP
Colors of tasks are presented on the right, the red
squares representing moments of physiological pain
points along the journey. On the vertical axis, we find
the emotional intensity experienced by consumers;
the higher they are, the more emotionally intense is
the experience. Horizontally, the time is presented in
seconds. The size of the circle represents the emotional
valence; a large circle represents negative emotions.
In other words, pain points are high and large dots
on the journey map!

FILTERING ISSUE IN PRODUCT SEARCH
Problems seem to occur during product search and
more specifically, during the filtering process. This
issue creates an obstacle keeping the customer from
attaining the product page and ultimately, the checkout.
FIX ORDER AMOUNT RECALCULATION
The last thing you want is to lose a customer
in the check out page. Fixing the recalculation is easy
and should be a priority!
User journey: Insights & Recommendations
EXAMPLE 3
VALENCE (FACEREADER)
INSIGHT #1
Even after filtering for the price, consumers cannot find
the product he is looking for, which creates frustration.
INSIGHT #2
The total order amount does not adjust when an item
is removed from the cart, creating confusion.

What is the real experience of your online customer? A NeuroIS approach at user experience research

Recommended

Recommended

More Related Content

Similar to What is the real experience of your online customer? A NeuroIS approach at user experience research

Similar to What is the real experience of your online customer? A NeuroIS approach at user experience research (20)

More from Pierre-Majorique Léger

More from Pierre-Majorique Léger (20)

Recently uploaded

Recently uploaded (20)

What is the real experience of your online customer? A NeuroIS approach at user experience research