VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO...

26
VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma Prof. Lidia Falomo Tesi di Laurea di: Salvatore Tinebra a.a. 2012- 13 UNIVERSITA’ DEGLI STUDI DI PAVIA DIPARTIMENTI DI SCIENZE POLITICHE E SOCIALI, STUDI UMANISTICI, INGEGNERIA INDUSTRIALE E DELL’INFORMAZIONE, SCIENZE ECONOMICHE E AZIENDALI CORSO DI LAUREA INTERDIPARTIMENTALE IN COMUNICAZIONE, INNOVAZIONE, MULTIMEDIALITA'

Transcript of VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO...

Page 1: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING:ANALISI DEL SITO WEB DEL

COMUNE DI MILANO

Relatore:Chiar.mo Prof. Marco PortaCorrelatrice:Chiar.ma Prof. Lidia Falomo

Tesi di Laurea di:Salvatore Tinebra

a.a. 2012-13

UNIVERSITA’ DEGLI STUDI DI PAVIADIPARTIMENTI DI SCIENZE POLITICHE E SOCIALI, STUDI UMANISTICI,

INGEGNERIA INDUSTRIALE E DELL’INFORMAZIONE,SCIENZE ECONOMICHE E AZIENDALI

CORSO DI LAUREA INTERDIPARTIMENTALE IN

COMUNICAZIONE, INNOVAZIONE, MULTIMEDIALITA'

Page 2: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

ISO 9241, Part 11: “Extent to which a product can be used by specified users to achieve specified goals with effectiveness, effi ciency and satisfaction in a specified context of

use”

USABILITY

effectiveness

• Goals achievement

• Actions

effi cience

• Errors• Time• Mental load

satisfaction

• Qualitative• Quantitative

Page 3: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

“Usability is a quality attribute that assesses how easy user interfaces are to use”

JAKOB NIELSEN

Learnability

Efficiency MemorabilityErrors

Satisfaction

Page 4: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

USER CENTERED DESIGN

“User Centered Design (UCD) is an approach to design that grounds the process in information about the

people who will use the product” - Usability Professionals Association

Iterative process

Page 5: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Why

• Improved user productivity

• Decreased development cost

• Better costumers loyalty

• Reduced costumer service cost

How• Interviews• Card sorting• Usability testing• Focus groups• Questionnaires

USER CENTERED DESIGN

Page 6: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Usability testing refers to evaluating a product or service by testing it with representative users 

USABILITY TESTING

Benefits

Evaluate participants’

skills

Reduced costumer

service cost

Evaluate time to complete tasks

Find out usability problems

Evaluate participants’ satisfaction

Page 7: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

the measurement of eye activity

EYE TRACKING

gaze eye motion / head position

Where do we look?

What do we ignore?

How do pupils react?

Page 8: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

EYE TRACKER

Eye Tracker based on Video – oculography (VOG)

• Non-intrusive

• Camera

• Infra-red illuminators

Page 9: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

CALIBRATION

Static Dynamic

Page 10: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

DATA INTERPRETATION

HEAT MAP

Hot Area

Cold Area

Lukewarm Area

Page 11: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

GAZE PLOT

DATA INTERPRETATION

Fixation

Saccade

Page 12: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

"there is no appreciable lag between what is fixated and what is processed“ - Just and Carpenter

EYE – MIND HYPOTHESIS

Gaze

Cognitiv

e Process

Page 13: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

CASE STUDY: CHOICE OF THE WEBSITE

www.comune.milano.it

Screenshots available in 20/10/13

Website of the Municipality of Milan

Page 14: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Usability Evaluation

TEST GOALS

Heuristic evaluation

Eye Tracking

test

Page 15: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

HEURISTIC EVALUATION

Evaluator replaces User’s profile

System analysis

Usability problems

Jakob Nielsen’s 10 Usability Heuristics for Iterface Design

Page 16: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

•6 users•20 – 26 years old•Italian native speakers

Participants

• Qualitative:• User’s behavior• Surrendered users

Data

EYE TRACKING TEST

Page 17: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Realistic Tasks

TASK

To look for parking areas

with fee in Milan

To look for the exhibition areas

of museums and exhibits in

Milan

Page 18: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Tobii 1750 and Tobii

Studio

Webcam Internet Explorer

TOOLS

Page 19: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Preliminary phase

• Test explanation• Thinking aloud• Revealing task

calibration• How to make a

correct calibration

Taskexecution

• Without observator’s help

TEST EXECUTION

Page 20: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

ANALYSIS OF THE RESULTS (1)

Pop - Up

Page 21: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

ANALYSIS OF THE RESULTS (2)

Home page

• Images

• Banners

• Long scrolling

• Research bar

Page 22: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

ANALYSIS OF RESULTS (3)

Information architecture (1)

Page 23: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

ANALISYS OF RESULTS (4)

Information architecture

(2)

Page 24: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

Designing a Public Authority’s Website is diffi cult

CONCLUSIONS

Complex contents and

services

Complex Management

Page 25: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

CONCLUSIONS

Pop - Up

To be avoided

Too invasive

Research bar

Graphical ly recognizable

Optimal posit ion

Banners

Banner bl indness

Display advert is ing or minor information

Information

Optimal organization

Anchors

Card sort ingBest results

Short scrol l ing

Page 26: VALUTAZIONE DELL’USABILITÀ BASATA SU EYE TRACKING: ANALISI DEL SITO WEB DEL COMUNE DI MILANO Relatore: Chiar.mo Prof. Marco Porta Correlatrice: Chiar.ma.

THANK YOU FOR YOUR

ATTENTION