Brands and private labels are constantly seeking ways to increase the persuasive power of their webpages on the Internet, especially on handled devices such as mobile phones or tablets. To this end, 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. Following this approach, this study examines the effects of the font and layout of the design of mobile phone websites, a potentially critical and under-investigated executional element, on behavioral intentions. A mobile phone website was specifically designed for this study. The research was conducted on French consumers. Through online and personal survey questionnaires, 312 responses were collected. Data was analyzed using ANOVA and linear regression. The findings indicate that not only is ease-of-use capable of affecting consumer ability to process brand information on web pages, but also that the effects of various font characteristics have the potential to significantly influence behavioral intentions. Therefore, font represents a major executional element of word-driven mobile web pages, which should be highly considered when designing websites for mobile devices.
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
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
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