SlideShare a Scribd company logo
1 of 18
From Skeuomorphism to Flat
Design: when Font and Layout of
M-Commerce Websites affect
Behavioral Intentions
Jean-Éric Pelet1 & Basma Taieb2
1ESCE International Business School, Paris, France, je.pelet@gmail.com,
2University of Cergy Pontoise, France, basma_taieb@yahoo.fr
2
Pitch
• Brands and private labels are constantly seeking ways to increase the
persuasive power of their webpages on the Internet, on smartphones
• Brands and private labels are encouraged to match the executional
elements of their mobile webpages (e.g. visuals such as fonts and
layout) with their consumer’s intention to process brand information
from webpages
• This study examines the effects of the font and layout of the design of
mobile phone websites on behavioral intentions
3
Skeuomorphism
•This synthesizer (MOOG)
represents this
software on the screen
of a computer
The more the object within the user interface (UI) mimics a real-
world object, the more likely that object is going to be intuitive to
use and deliver a quality user experience 4
Flat Design
• No volumes
• No shadows
• No 3D effects
• Only flat colors
• And simple
representations
5
Agenda
• Introduction
• Literature review
• Hypotheses & Conceptual model
• Methodology
• Discussion
6
Introduction
• There is nothing more annoying than when things do not function the
way we expect them to
• This is called “cognitive friction”, “…the resistance encountered by
human intellect when it engages with a complex system of rules that
change as the problem permutes.” (Cooper, 2014)
• Ease-of-use has proven to be extremely important on m-commerce
websites
• People appreciate shopping on a mobile phone, due to its
convenience and accessibility
7
Literature review
• Font and layout constitute important sight stimuli for online
consumers
• They are deemed as significant website factors, positively influencing
the frequency of a consumer visiting a website and affecting online
shopper responses
• Typefaces: Size matters
• Readability refers to the way in which words and blocks of type are arranged
on a page
• Legibility refers to how a typeface is designed and how well one individual
character can be distinguished from another
• Users should not be obliged to zoom when discovering content on an m-
commerce website interface or typing on the screen
8
Typefaces: Font serif vs sans serif
• Sans-serif typefaces are preferred because they are perceived as more
readable on computer screens
• H1. The sans-serif font has a stronger effect on behavioral intentions
GEN Y
Sans serif Serif
Seniors
9
Layout: Airy vs Dense content
• Building hierarchies to create the layout of the webpage is of paramount
importance since it gives visitors an idea of the website’s composition
• Web designers must create hierarchies related to specific text on the page,
develop relationships between headers and know how to use white spaces
effectively
• Make lengthy paragraphs visually digestible
• If the interface design of an apps or mobile website is inappropriate, it may
require excessive cognitive load while users perform certain tasks, affecting
their visit or increasing dropouts, since usability attributes directly
influence user satisfaction
• H2. An airy layout has a stronger effect on behavioral intentions
• H3. Ease-of-use has a positive effect on behavioral intentions
10
Emotions
• Emotions such as dominance can be considered of paramount
importance in the understanding of the mobile-user’s behavior
• Essential in an m-commerce paradigm
• Dominance or perceived control corresponds to the feeling of being
able to act freely in a specific environment
• H4. The dominance perceived has a positive effect on behavioral
intentions.
11
Conceptual Model
Layout
(dense vs airy) Behavioral
intentions
Font
(Size & Serif vs Sans Serif)
Ease-of-use
Dominance
12
Methodology
• Fonts and layout were manipulated on two levels:
• serif font (Times New Roman) vs sans-serif font (Arial) and
• a dense layout (line-height = 12pt) vs an airy layout (line-height = 30pt)
• An experimental website selling music CDs was especially designed
for this study
• Scales
• Mazaheri et al. (2011) - dominance (5 items)
• Bressolles (2006) - ease-of-use (5 items)
• Behavioral intentions were evaluated through purchase, revisits and
recommendations using the scales of Limayem and Rowe (2006), Mukherjee
and Nath (2007) and Goyette et al. (2010)
13
Methodology
• 312 valid responses were used for confirmatory analysis
• 51% females and 49% males
• average age of 40 years old respondents
14
Results
• H1 and H2 are examined using ANOVA
• Results show significant effects of font on behavioral intentions (F=
4.90, p < .05 for purchase; F= 4.72, p < .05 for revisit; F= 5.93, p < .01
for recommendation)
• H1 receives statistical support
• H2 is not supported
• These results show that people are more worried about the font
used than the spacing between the lines when they visit a website on
a mobile device
15
Results
• H3 and H4 are statistically supported
• An increase in dominance means that the person feels more in
control of the relationship between him/herself and the website
• In these circumstances, the person has less need to trust the object of
attention, because of this feeling of control
16
Discussion
• Font influences purchase, revisit and recommendation intentions
• Managers should:
• (1) emphasize impactful design of the m-commerce interface so that
consumers can navigate conveniently,
• (2) make available compelling content that will stimulate activity and,
• (3) recognize the trade-offs consumers make in terms of emotional reactions
and tangible benefits offered
• The presence or absence of serifs, font size, layout and interline
spacing can all affect intention and behavior.
17
Future directions
• Include different moderators and individual characteristics such as
gender or pursue opportunities to study the effect of website design
on impulsive buying
• To adopt triangulation of data and new methods such as eye-tracking
• With an ever-increasing aging population, the matter of conceiving
mobile website designs which are universally accessible to all types of
people needs to be investigated more thoroughly in the world of
digital marketing
18
Thank you
For your intention 
If you have any question…
Jean-Eric Pelet
je.pelet@gmail.com
19

More Related Content

Similar to From Skeuomorphism to Flat Design: when Font and Layout of M-Commerce Websites affect Behavioral Intentions

Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...
Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...
Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...Tania Schlatter
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove DesignMike Vdovin
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 MeetupMike Gallers
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingAtwix
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileRandstad USA
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
 
BBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignBBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignJaneMuder
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldThomas Robbins
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive DesignR2integrated
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandhjc
 
Senior project 2 capstone (thesis) - Designity final compendium
Senior project 2 capstone (thesis) - Designity final compendiumSenior project 2 capstone (thesis) - Designity final compendium
Senior project 2 capstone (thesis) - Designity final compendiumSarah Lee
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
Six tips for cross-cultural UX
Six tips for cross-cultural UXSix tips for cross-cultural UX
Six tips for cross-cultural UXOban International
 
Lead-Interaction-designer
Lead-Interaction-designerLead-Interaction-designer
Lead-Interaction-designerAnjali Singh
 
UX basics inception to experience delivery
UX basics  inception to experience deliveryUX basics  inception to experience delivery
UX basics inception to experience deliveryTechved Consulting
 
Design Learnings
Design LearningsDesign Learnings
Design LearningsQuikr
 

Similar to From Skeuomorphism to Flat Design: when Font and Layout of M-Commerce Websites affect Behavioral Intentions (20)

Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...
Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...
Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Persona...
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove Design
 
Designing the user experience
Designing the user experienceDesigning the user experience
Designing the user experience
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 Meetup
 
Tania Schlatter – Visual Usability
Tania Schlatter – Visual UsabilityTania Schlatter – Visual Usability
Tania Schlatter – Visual Usability
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
 
UX Fundamentals
UX FundamentalsUX Fundamentals
UX Fundamentals
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
 
Intranet trends to watch
Intranet trends to watchIntranet trends to watch
Intranet trends to watch
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
 
BBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignBBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive Design
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen world
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive Design
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotland
 
Senior project 2 capstone (thesis) - Designity final compendium
Senior project 2 capstone (thesis) - Designity final compendiumSenior project 2 capstone (thesis) - Designity final compendium
Senior project 2 capstone (thesis) - Designity final compendium
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
Six tips for cross-cultural UX
Six tips for cross-cultural UXSix tips for cross-cultural UX
Six tips for cross-cultural UX
 
Lead-Interaction-designer
Lead-Interaction-designerLead-Interaction-designer
Lead-Interaction-designer
 
UX basics inception to experience delivery
UX basics  inception to experience deliveryUX basics  inception to experience delivery
UX basics inception to experience delivery
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 

More from Jean-Eric Pelet

Web3, Blockchain, NFTs, Métavers dans le monde du vin
Web3, Blockchain, NFTs, Métavers dans le monde du vinWeb3, Blockchain, NFTs, Métavers dans le monde du vin
Web3, Blockchain, NFTs, Métavers dans le monde du vinJean-Eric Pelet
 
The leveraging role of online world How online world and in particular social...
The leveraging role of online world How online world and in particular social...The leveraging role of online world How online world and in particular social...
The leveraging role of online world How online world and in particular social...Jean-Eric Pelet
 
L’Intelligence Artificielle fait sa place en Afrique
L’Intelligence Artificielle fait sa place en AfriqueL’Intelligence Artificielle fait sa place en Afrique
L’Intelligence Artificielle fait sa place en AfriqueJean-Eric Pelet
 
Télécom - Web-Media : Un changement de référentiel
Télécom - Web-Media :  Un changement de référentielTélécom - Web-Media :  Un changement de référentiel
Télécom - Web-Media : Un changement de référentielJean-Eric Pelet
 
L'intelligence artificielle et son importance immédiate et future
L'intelligence artificielle et son importance immédiate et futureL'intelligence artificielle et son importance immédiate et future
L'intelligence artificielle et son importance immédiate et futureJean-Eric Pelet
 
Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...
Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...
Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...Jean-Eric Pelet
 
Considering the effects of perceived website personality on wine purchases in...
Considering the effects of perceived website personality on wine purchases in...Considering the effects of perceived website personality on wine purchases in...
Considering the effects of perceived website personality on wine purchases in...Jean-Eric Pelet
 
Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...
Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...
Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...Jean-Eric Pelet
 
L’engagement sur les réseaux sociaux
L’engagement sur les réseaux sociauxL’engagement sur les réseaux sociaux
L’engagement sur les réseaux sociauxJean-Eric Pelet
 
Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...
Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...
Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...Jean-Eric Pelet
 
La promotion des ventes la communication evenementielle
La promotion des ventes la communication evenementielleLa promotion des ventes la communication evenementielle
La promotion des ventes la communication evenementielleJean-Eric Pelet
 
Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...
Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...
Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...Jean-Eric Pelet
 
Social networks and online advertising: should companies promote their brand ...
Social networks and online advertising: should companies promote their brand ...Social networks and online advertising: should companies promote their brand ...
Social networks and online advertising: should companies promote their brand ...Jean-Eric Pelet
 
Apprendre à communiquer
Apprendre à communiquerApprendre à communiquer
Apprendre à communiquerJean-Eric Pelet
 

More from Jean-Eric Pelet (18)

Web3, Blockchain, NFTs, Métavers dans le monde du vin
Web3, Blockchain, NFTs, Métavers dans le monde du vinWeb3, Blockchain, NFTs, Métavers dans le monde du vin
Web3, Blockchain, NFTs, Métavers dans le monde du vin
 
Artificial Intelligence
Artificial IntelligenceArtificial Intelligence
Artificial Intelligence
 
The leveraging role of online world How online world and in particular social...
The leveraging role of online world How online world and in particular social...The leveraging role of online world How online world and in particular social...
The leveraging role of online world How online world and in particular social...
 
L’Intelligence Artificielle fait sa place en Afrique
L’Intelligence Artificielle fait sa place en AfriqueL’Intelligence Artificielle fait sa place en Afrique
L’Intelligence Artificielle fait sa place en Afrique
 
Télécom - Web-Media : Un changement de référentiel
Télécom - Web-Media :  Un changement de référentielTélécom - Web-Media :  Un changement de référentiel
Télécom - Web-Media : Un changement de référentiel
 
L'intelligence artificielle et son importance immédiate et future
L'intelligence artificielle et son importance immédiate et futureL'intelligence artificielle et son importance immédiate et future
L'intelligence artificielle et son importance immédiate et future
 
Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...
Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...
Mobile Commerce Adoption on Tablets in the world: A Cross-Cultural Comparison...
 
Considering the effects of perceived website personality on wine purchases in...
Considering the effects of perceived website personality on wine purchases in...Considering the effects of perceived website personality on wine purchases in...
Considering the effects of perceived website personality on wine purchases in...
 
Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...
Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...
Mobilité dans l'environnement mobile Une revue de la littérature sur le compo...
 
L’engagement sur les réseaux sociaux
L’engagement sur les réseaux sociauxL’engagement sur les réseaux sociaux
L’engagement sur les réseaux sociaux
 
Le programmatic
Le programmaticLe programmatic
Le programmatic
 
M-Commerce
M-CommerceM-Commerce
M-Commerce
 
Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...
Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...
Le e-commerce renforcé par les réseaux sociaux numériques : Résultats d’une a...
 
M-Commerce
M-CommerceM-Commerce
M-Commerce
 
La promotion des ventes la communication evenementielle
La promotion des ventes la communication evenementielleLa promotion des ventes la communication evenementielle
La promotion des ventes la communication evenementielle
 
Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...
Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...
Présentation des chapitres 5 : comportement des consommateurs, 7: vieillissem...
 
Social networks and online advertising: should companies promote their brand ...
Social networks and online advertising: should companies promote their brand ...Social networks and online advertising: should companies promote their brand ...
Social networks and online advertising: should companies promote their brand ...
 
Apprendre à communiquer
Apprendre à communiquerApprendre à communiquer
Apprendre à communiquer
 

Recently uploaded

MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 

Recently uploaded (20)

MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 

From Skeuomorphism to Flat Design: when Font and Layout of M-Commerce Websites affect Behavioral Intentions

  • 1. From Skeuomorphism to Flat Design: when Font and Layout of M-Commerce Websites affect Behavioral Intentions Jean-Éric Pelet1 & Basma Taieb2 1ESCE International Business School, Paris, France, je.pelet@gmail.com, 2University of Cergy Pontoise, France, basma_taieb@yahoo.fr 2
  • 2. Pitch • Brands and private labels are constantly seeking ways to increase the persuasive power of their webpages on the Internet, on smartphones • Brands and private labels are encouraged to match the executional elements of their mobile webpages (e.g. visuals such as fonts and layout) with their consumer’s intention to process brand information from webpages • This study examines the effects of the font and layout of the design of mobile phone websites on behavioral intentions 3
  • 3. Skeuomorphism •This synthesizer (MOOG) represents this software on the screen of a computer The more the object within the user interface (UI) mimics a real- world object, the more likely that object is going to be intuitive to use and deliver a quality user experience 4
  • 4. Flat Design • No volumes • No shadows • No 3D effects • Only flat colors • And simple representations 5
  • 5. Agenda • Introduction • Literature review • Hypotheses & Conceptual model • Methodology • Discussion 6
  • 6. Introduction • There is nothing more annoying than when things do not function the way we expect them to • This is called “cognitive friction”, “…the resistance encountered by human intellect when it engages with a complex system of rules that change as the problem permutes.” (Cooper, 2014) • Ease-of-use has proven to be extremely important on m-commerce websites • People appreciate shopping on a mobile phone, due to its convenience and accessibility 7
  • 7. Literature review • Font and layout constitute important sight stimuli for online consumers • They are deemed as significant website factors, positively influencing the frequency of a consumer visiting a website and affecting online shopper responses • Typefaces: Size matters • Readability refers to the way in which words and blocks of type are arranged on a page • Legibility refers to how a typeface is designed and how well one individual character can be distinguished from another • Users should not be obliged to zoom when discovering content on an m- commerce website interface or typing on the screen 8
  • 8. Typefaces: Font serif vs sans serif • Sans-serif typefaces are preferred because they are perceived as more readable on computer screens • H1. The sans-serif font has a stronger effect on behavioral intentions GEN Y Sans serif Serif Seniors 9
  • 9. Layout: Airy vs Dense content • Building hierarchies to create the layout of the webpage is of paramount importance since it gives visitors an idea of the website’s composition • Web designers must create hierarchies related to specific text on the page, develop relationships between headers and know how to use white spaces effectively • Make lengthy paragraphs visually digestible • If the interface design of an apps or mobile website is inappropriate, it may require excessive cognitive load while users perform certain tasks, affecting their visit or increasing dropouts, since usability attributes directly influence user satisfaction • H2. An airy layout has a stronger effect on behavioral intentions • H3. Ease-of-use has a positive effect on behavioral intentions 10
  • 10. Emotions • Emotions such as dominance can be considered of paramount importance in the understanding of the mobile-user’s behavior • Essential in an m-commerce paradigm • Dominance or perceived control corresponds to the feeling of being able to act freely in a specific environment • H4. The dominance perceived has a positive effect on behavioral intentions. 11
  • 11. Conceptual Model Layout (dense vs airy) Behavioral intentions Font (Size & Serif vs Sans Serif) Ease-of-use Dominance 12
  • 12. Methodology • Fonts and layout were manipulated on two levels: • serif font (Times New Roman) vs sans-serif font (Arial) and • a dense layout (line-height = 12pt) vs an airy layout (line-height = 30pt) • An experimental website selling music CDs was especially designed for this study • Scales • Mazaheri et al. (2011) - dominance (5 items) • Bressolles (2006) - ease-of-use (5 items) • Behavioral intentions were evaluated through purchase, revisits and recommendations using the scales of Limayem and Rowe (2006), Mukherjee and Nath (2007) and Goyette et al. (2010) 13
  • 13. Methodology • 312 valid responses were used for confirmatory analysis • 51% females and 49% males • average age of 40 years old respondents 14
  • 14. Results • H1 and H2 are examined using ANOVA • Results show significant effects of font on behavioral intentions (F= 4.90, p < .05 for purchase; F= 4.72, p < .05 for revisit; F= 5.93, p < .01 for recommendation) • H1 receives statistical support • H2 is not supported • These results show that people are more worried about the font used than the spacing between the lines when they visit a website on a mobile device 15
  • 15. Results • H3 and H4 are statistically supported • An increase in dominance means that the person feels more in control of the relationship between him/herself and the website • In these circumstances, the person has less need to trust the object of attention, because of this feeling of control 16
  • 16. Discussion • Font influences purchase, revisit and recommendation intentions • Managers should: • (1) emphasize impactful design of the m-commerce interface so that consumers can navigate conveniently, • (2) make available compelling content that will stimulate activity and, • (3) recognize the trade-offs consumers make in terms of emotional reactions and tangible benefits offered • The presence or absence of serifs, font size, layout and interline spacing can all affect intention and behavior. 17
  • 17. Future directions • Include different moderators and individual characteristics such as gender or pursue opportunities to study the effect of website design on impulsive buying • To adopt triangulation of data and new methods such as eye-tracking • With an ever-increasing aging population, the matter of conceiving mobile website designs which are universally accessible to all types of people needs to be investigated more thoroughly in the world of digital marketing 18
  • 18. Thank you For your intention  If you have any question… Jean-Eric Pelet je.pelet@gmail.com 19