SlideShare a Scribd company logo
1 of 72
Download to read offline
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 1
ERGONOMICS APPLIED TO THE DESIGN OF USABLE WEB
PAGES AND APPS
Roberto DADDA and Paolo NEGRI
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 2
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 3
Colors
fundamentals of theory
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 4
Refraction of light when
changing medium of
trasnmission
4
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 5
Refraction and reflection
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 6
The angle of refraction changes with color
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 7
Prism
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 8
Electromagnetic spectrum
The electromagnetic spectrum is the range of all possible frequencies of electromagnetic radiation.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 9
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 10
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 11
B&W
Black
total absorption
White
no absorption
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 12
Mixing colors
vs
Mixing lights
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 13
Mixing lights
1
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 14
Mixing pigments
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 15
Pointillism
Pissarro 1830 - 1903
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 16
Georges Seurat (1859-1891), “La Parade de Cirque”
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 17
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 18
Mixing colors
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 19
Johann Wolfgang von Goethe
1749 - 1832
http://www.gutenberg.org/ebooks/50572
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 20
Colours
wheel
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 21
Red, yellow and orange
WARM
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 22
Henri de Toulouse-Lautrec 1864 - 1901
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 23
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 24
Blue, green, violet
COLD
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 25
Vincent van Gogh 1853 - 1890
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 26
Black, white, grey
NEUTRAL
Georgia O'Keeffe 1887 - 1926
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 27
Analogous, Adiacent
Fusion
effect
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 28
Influence
Violet is a mix of blue cyan (cold) and magenta red (warm)
Near warm looks cold. Near cold looks worm
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 29
Monet 1840-1926
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 30
Definition of a color
Hue
Saturation
Lightness
(Luminosity)
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 31
Colours
practical interfaces design implications
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 32
Contrast - minimum 3:1
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 33
Consider short term memory limitations
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 34
Facts
• New visitors decide in less than 90 seconds if the
page is interesting
• 60-90%1 of the assessment is based on colors
alone!
3
4
1 Different for different type of pages
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 35
The Power Of Colours
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 36
Colors are important!
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 37
RED
• Power
• Importance
• Youth
• Allarm
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 38
RED
• Feeling of warmth.
• Most powerful of
all colours.
• Not use too much.
• Get attention
- Sell products
- Specific message,
- Focus
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 39
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 40
ORANGE
• Friendliness
• Energy
• Uniqueness
4
0
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 41
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 42
YELLOW
• Happines
• Enthusiasm
• Antiquity
4
2
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 43
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 44
GREEN
• Grow
• Harmony
• Renewall
4
4
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 45
Green
• The feeling of relaxing and
fresh.
• Represents:
- Health
- Life
- Rebirth and
- Nature/ environment
- Growth
• Warm and inviting
• Associated with money and
wealth.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 46
Green
• Often used in:
- Organic shop
- Healthy food
- Agricultural
Company
- Recycle item
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 47
BLUE
• Calm
• Reliability
• Openes
4
7
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 48
Blue
• The most favorite
color of people
• A feeling of :
- Calm and serenity.
• Establishes trust
and secure.
• Colour of
communication.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 49
Blue
• Light blue - fantasy.
• Dark blue - authority and power.
• Mostly used in:
- Medical, and
- Financial industries.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 50
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 51
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 52
Well togheter
• Analogous
• Compound
• Triadic
5
2
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 53
Getting sales by colours
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 54
92.6 percent said that
they put most
importance on visual
factors when
purchasing products.
Why Important?
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 55
Consumers make a
subconscious decision
about a product, person
or service in 90 seconds
or less.
- by The Institute for Color Research
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 56
Why Important?
• Colour can:
- send a positive or negative message,
- encourage sales, and
- calm a crowd.
• Specific colours
- creating brand relevance and
- motivating purchases.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 57
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 58
Red
• Often used in:
- Clearance sales
- Fast food chains
- Excitement and
danger
• Also used by big
company:
- Coca-cola
- Air Asia
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 59
How Does It Work?
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 60
How colours affect your sales
• Choosing the right colour.
- Understand your target audience
- Type of products or services.
• Use colour to tell story.
- An environment using colour to
represent some concept.
• Comfort and calm customers.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 61
How colours affect after sale
• Get shoppers attention again to
certain products
• Build brand recognition
- The color of the Logo used.
• Not overpower your products
- Highlight the product.
- Not using too many colors.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 62
Example
Before
Now
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 63
In practice
•Duriana changed:
- corporate logo,
- colors (from orange to blue 1st image to 2nd
image )
•Sales improved after they change their website
colour.
•Base on some color study:
- Blue is the most favourable colour.
- Orange is the least favourite.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 64
Color effects are not standard!
Gender, demographics, cultural
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 65
65
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 66
Changes
with
sex
and
culture
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 67
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 68
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 69
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 70
Palette
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 71
Tools
https://color.adobe.com/create/color-wheel/ http://paletton.com/
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 72
Usability
Roberto DADDA
roberto@dadda.it
www.dadda.it
Skype, Facebook e Twitter robertodadda

More Related Content

More from Roberto Dadda

12 tipography for the web
12 tipography for the web12 tipography for the web
12 tipography for the webRoberto Dadda
 
14 accessibility short
14 accessibility short14 accessibility short
14 accessibility shortRoberto Dadda
 
13 equilibrium order time
13 equilibrium order time13 equilibrium order time
13 equilibrium order timeRoberto Dadda
 
Poli15 uffizi - 2016-02-03
Poli15   uffizi - 2016-02-03Poli15   uffizi - 2016-02-03
Poli15 uffizi - 2016-02-03Roberto Dadda
 
Poli15 careffour - 2015-12-01
Poli15   careffour - 2015-12-01Poli15   careffour - 2015-12-01
Poli15 careffour - 2015-12-01Roberto Dadda
 
Poli15 barbie - 20160202
Poli15   barbie - 20160202Poli15   barbie - 20160202
Poli15 barbie - 20160202Roberto Dadda
 
Poli15 guanda publishing - 2016-02-03
Poli15   guanda publishing - 2016-02-03Poli15   guanda publishing - 2016-02-03
Poli15 guanda publishing - 2016-02-03Roberto Dadda
 
Poli15 nescafé final analysis
Poli15   nescafé final analysisPoli15   nescafé final analysis
Poli15 nescafé final analysisRoberto Dadda
 
VeryBello, usabilità ti continuo a cercare
VeryBello, usabilità ti continuo a cercareVeryBello, usabilità ti continuo a cercare
VeryBello, usabilità ti continuo a cercareRoberto Dadda
 
design, web design, usability
design, web design, usabilitydesign, web design, usability
design, web design, usabilityRoberto Dadda
 
FOCUS: WEB DESIGN NABA course elaborate 2013-2014
FOCUS: WEB DESIGN NABA course elaborate 2013-2014 FOCUS: WEB DESIGN NABA course elaborate 2013-2014
FOCUS: WEB DESIGN NABA course elaborate 2013-2014 Roberto Dadda
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLRoberto Dadda
 

More from Roberto Dadda (20)

01 usability
01 usability01 usability
01 usability
 
05 2 artifacts
05 2 artifacts05 2 artifacts
05 2 artifacts
 
11 error management
11 error management11 error management
11 error management
 
12 tipography for the web
12 tipography for the web12 tipography for the web
12 tipography for the web
 
14 accessibility short
14 accessibility short14 accessibility short
14 accessibility short
 
13 equilibrium order time
13 equilibrium order time13 equilibrium order time
13 equilibrium order time
 
Poli15 uffizi - 2016-02-03
Poli15   uffizi - 2016-02-03Poli15   uffizi - 2016-02-03
Poli15 uffizi - 2016-02-03
 
Poli15 careffour - 2015-12-01
Poli15   careffour - 2015-12-01Poli15   careffour - 2015-12-01
Poli15 careffour - 2015-12-01
 
Poli15 barbie - 20160202
Poli15   barbie - 20160202Poli15   barbie - 20160202
Poli15 barbie - 20160202
 
Poli15 guanda publishing - 2016-02-03
Poli15   guanda publishing - 2016-02-03Poli15   guanda publishing - 2016-02-03
Poli15 guanda publishing - 2016-02-03
 
Poli15 sansha
Poli15   sanshaPoli15   sansha
Poli15 sansha
 
Poli15 nescafé final analysis
Poli15   nescafé final analysisPoli15   nescafé final analysis
Poli15 nescafé final analysis
 
Poli15 Fujifilm
Poli15 FujifilmPoli15 Fujifilm
Poli15 Fujifilm
 
Poli15 Tiger
Poli15 Tiger Poli15 Tiger
Poli15 Tiger
 
VeryBello, usabilità ti continuo a cercare
VeryBello, usabilità ti continuo a cercareVeryBello, usabilità ti continuo a cercare
VeryBello, usabilità ti continuo a cercare
 
design, web design, usability
design, web design, usabilitydesign, web design, usability
design, web design, usability
 
FOCUS: WEB DESIGN NABA course elaborate 2013-2014
FOCUS: WEB DESIGN NABA course elaborate 2013-2014 FOCUS: WEB DESIGN NABA course elaborate 2013-2014
FOCUS: WEB DESIGN NABA course elaborate 2013-2014
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Iteraction design
Iteraction designIteraction design
Iteraction design
 
Form design
Form designForm design
Form design
 

Recently uploaded

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 

Recently uploaded (19)

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 

09 colors