+ All Categories
Home > Documents > Web Usability Dott. Simone Lazzini Università di Pisa.

Web Usability Dott. Simone Lazzini Università di Pisa.

Date post: 02-May-2015
Category:
Upload: rosangela-baroni
View: 233 times
Download: 1 times
Share this document with a friend
52
Web Usability Web Usability Dott. Simone Lazzini Dott. Simone Lazzini Università di Pisa
Transcript
Page 1: Web Usability Dott. Simone Lazzini Università di Pisa.

Web Usability Web Usability

Dott. Simone LazziniDott. Simone Lazzini Università di Pisa

Page 2: Web Usability Dott. Simone Lazzini Università di Pisa.

Come si persegue la usability? Come si persegue la usability? ((Realizzazione e gestione di un sito web)Realizzazione e gestione di un sito web)

Str

ateg

ia

e fa

ttib

ilità

Management,Consulenti

1

Vis

ual

des

ign

Visual designer

3

Ese

rciz

io

del

sit

o

Web master

6

Ges

tio

ne

dei

ser

ver

Web farm

7S

vilu

pp

o

del

so

ftw

are

Systemintegrator

4 5Contenteditor

Ges

tio

ne

dei

co

nte

nu

ti

Web designer

2

Web

des

ign

&

use

r ex

per

ien

ce

Co

nn

etti

vit

àin

tern

et

Internet Service Provider

8

Page 3: Web Usability Dott. Simone Lazzini Università di Pisa.

Comun

icaz

ione

UsabilitàUsabilità

Funz

iona

lità

Conte

nuto

AccessibilitàAccessibilità

Obi

ettiv

i

Archi

tettu

ra Ges

tione

Quali elementi di valutazione è possibile Quali elementi di valutazione è possibile analizzareanalizzare

Str

ateg

ia

e fa

ttib

ilità

Management,Consulenti

1

Vis

ual

des

ign

Visual designer

3E

serc

izio

d

el s

ito

Web master

6

Ges

tio

ne

dei

ser

ver

Web farm

7

Svi

lup

po

del

so

ftw

are

Systemintegrator

4 5Contenteditor

Ges

tio

ne

dei

co

nte

nu

ti

Web designer

2

Web

des

ign

&

use

r ex

per

ien

ce

Co

nn

etti

vit

àin

tern

et

Internet Service Provider

8

Page 4: Web Usability Dott. Simone Lazzini Università di Pisa.

ContenutoIl contenuto informativo è corretto, e adeguato

agli scopi del sito?

ComunicazioneIl sito raggiunge i suoi

obiettivi di comunicazione?

AccessibilitàIl sito è di facile

accesso per tutti?

FunzionalitàLe funzioni del sito sono

adeguate e corrette?

GestioneL’operatività del sito

è ben gestita ?

ArchitetturaLa struttura e la navigazione

del sito sono adeguate?

UsabilitàIl sito è facile Il sito è facile

da usare?da usare?

Un primo modello di analisiUn primo modello di analisi

Page 5: Web Usability Dott. Simone Lazzini Università di Pisa.

Quindi un sito è usabile quando è :Quindi un sito è usabile quando è :

Identificare i BISOGNIBISOGNI degli utenti

Progettare e valutare prodotti FACILI DA USARE

Identificare i FATTORI CHE MOTIVANO gli utenti

UTILEUTILE

FRUIBILEFRUIBILE

DESIDERABILEDESIDERABILE

Page 6: Web Usability Dott. Simone Lazzini Università di Pisa.

Efficacia EfficienzaSoddisfazione

UtilitàUtilità

AppropriatezzaAppropriatezza

VelocitàVelocità

AffidabilitàAffidabilità

ScalabilitàScalabilità

Facilità d’usoFacilità d’uso

PiacevolezzaPiacevolezza

SemplicitàSemplicità

QUALI SONO LE DIMENSIONI DA CONSIDERAREQUALI SONO LE DIMENSIONI DA CONSIDERARE

Il sito deve essere strutturato in modo da richiedere

il minimo numero di passi per accedere all’informazione voluta tenendo presente il numero di elementi che l'utente

riesce a mantenere contemporaneamente in memoria (tipicamente un numero variabile da 4 a 7) e garantendo

comunque il minor tempo di accesso possibile.

Page 7: Web Usability Dott. Simone Lazzini Università di Pisa.

UsabilityUsability e Architettura dell’informazione e Architettura dell’informazione

Struttura

Mappatura

Navigazione

Page 8: Web Usability Dott. Simone Lazzini Università di Pisa.

L’analisi della Struttura del sitoL’analisi della Struttura del sitoLa rappresentazione avviene, di solito, mediante un diagramma ad albero, allo scopo di valutarne la adeguatezza

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1

1° livello

2° livello

3° livello

Page 9: Web Usability Dott. Simone Lazzini Università di Pisa.

L’architettura strutturale “comunica” la relazione tra i contenuti di un sito web e il modo in cui questi sono espressi.

Aiuta a capire come si utilizza il sito.Rende accessibili e quindi più comprensibili i suoi contenuti informativi.

L’analisi della Struttura del sito – Gli scopiL’analisi della Struttura del sito – Gli scopi

Page 10: Web Usability Dott. Simone Lazzini Università di Pisa.

Tre strutture di baseTre strutture di base1) Lineare Una pagina dopo l’altra.

Struttura adatta per costruire funzioni vincolanti: se, ad esempio, l’informazione A deve essere conosciuta prima della B, e la B prima della C, si crea un accesso lineare da A a C.

2) Gerarchica

Più percorsi mutuamente esclusivi

Adatta ad evidenziare le relazioni insieme/sotto insieme

Consente movimenti top-down / bottom-up.

Page 11: Web Usability Dott. Simone Lazzini Università di Pisa.

3) A ragnatelaPagine collegate in modo da permettere riferimenti incrociati e salti avanti/indietro.Struttura che esalta le potenzialità dei sistemi interattivi.

Ma più la ragnatela è complessa, più aumentano le Ma più la ragnatela è complessa, più aumentano le difficoltà di orientamento per l’utente.difficoltà di orientamento per l’utente.

I livelloHOME

II Livello

I livello

I livello

II Livello

II Livello

II Livello II Livello II Livello

Page 12: Web Usability Dott. Simone Lazzini Università di Pisa.

v

Navigando cerco un sito per valutare la possibilità di comprare una motosega:

Lo scenario di Krug:Lo scenario di Krug:

UTENSILI

Dove sono le motoseghe?

La struttura del sito presenta tre reparti…

CASALINGHIPRATO E

GIARDINO

Ogni volta che si aggiungono nuovi contenuti bisogna valutare la loro coerenza rispetto all’architettura complessiva del sito. Trovare una collocazione adatta o riprogettare l’architettura stessa.

Le possibili strutture possono essere moltissime ed avere i caratteri di ciascuna ma…

Page 13: Web Usability Dott. Simone Lazzini Università di Pisa.

Seguendo il vostro intuito provate a vedere se la motosega si trova sotto UTENSILI… il livello successivo è?

UTENSILI A MOTORE

UTENSILI A MOTORE

…nella corsia UTENSILI A MOTORE cercate la

motosega ma???

UTENSILI MANUALIUTENSILI MANUALI

SMERIGLIARE E LEVIGARE

SMERIGLIARE E LEVIGARE

UTENSILIPRATO E

GIARDINO

UTENSILI A MOTORE

UTENSILI A MOTORE

UTENSILI MANUALIUTENSILI MANUALI

SMERIGLIARE E LEVIGARE

SMERIGLIARE E LEVIGARE

CASALINGHI

HOME

Page 14: Web Usability Dott. Simone Lazzini Università di Pisa.

Una struttura a ragnatelaUna struttura a ragnatela consente una molteplicità di percorsi possibili. Progettando l’architettura di un sito web si possono sfruttare

queste potenzialità, ma bisogna mantenere un modello concettuale coerente, evitando che l’utente si smarrisca.

UTENSILI PRATO E GIARDINO

Utensili per il giardino

Utensili per cucina

CASALINGHI

Utensili a motore

Smerigliare e levigare

Utensili a manuali

•motosega•tagliaerba• ecc…

HOME

Page 15: Web Usability Dott. Simone Lazzini Università di Pisa.

La mappatura La mappatura Esplicita le relazioni tra l’aspetto strutturale a quello funzionale

In alcuni casi può risultare molto

complesso in relazione alla gamma dei servizi

offerti

Page 16: Web Usability Dott. Simone Lazzini Università di Pisa.

La mappatura (2) La mappatura (2)

Definire la gerarchia dell’informazione

Sequenza lineare

La griglia

Network

Page 17: Web Usability Dott. Simone Lazzini Università di Pisa.

La mappatura (3) La mappatura (3)

Correlare la mappatura alla struttura

Page 18: Web Usability Dott. Simone Lazzini Università di Pisa.

La mappa del sito IKEALa mappa del sito IKEA

Page 19: Web Usability Dott. Simone Lazzini Università di Pisa.

La mappa del sito IKEALa mappa del sito IKEA

Page 20: Web Usability Dott. Simone Lazzini Università di Pisa.

Secondo l’approccio proposto da Jackob Nielsen la struttura di navigazione di un sito web deve aiutare l’utente nel rispondere a tre domande:

Dove mi trovo ?

Dove sono stato ?

Dove posso andare ?

I criteri per l’analisiI criteri per l’analisi

Page 21: Web Usability Dott. Simone Lazzini Università di Pisa.

Le tipologie di navigazioneLe tipologie di navigazione

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1

navigazione orizzontale

navigazione trasversale

navigazione verticale

Page 22: Web Usability Dott. Simone Lazzini Università di Pisa.

1. Dove mi trovo?in relazione al Web

Page 23: Web Usability Dott. Simone Lazzini Università di Pisa.

1. Dove mi trovo?

in relazione alla struttura del sito

Page 24: Web Usability Dott. Simone Lazzini Università di Pisa.

2. Dove sono stato

?

nel Web

Page 25: Web Usability Dott. Simone Lazzini Università di Pisa.

all’interno del sito

2. Dove sono stato ?

Page 26: Web Usability Dott. Simone Lazzini Università di Pisa.

3. Dove posso andare ?A questa domanda rispondono tre diversi tipi di link… link topici

link associativi

link strutturali

Page 27: Web Usability Dott. Simone Lazzini Università di Pisa.

TOPICITOPICI

STRUTTURALI STRUTTURALI

ASSOCIATIVIASSOCIATIVI link usati per indicare altre pagine dal contenuto simile o correlato a quella attuale che l’utente potrebbe perciò trovare interessanti

testo sottolineato (di solito ma non sempre!) che conduce a ulteriori

informazioni riguardo all’argomento trattato

link usati per connettere tra di loro livelli diversi della struttura del sito. Usati anche per connettere una data pagina con altre allo stesso livello gerarchico

I I LinkLink

Page 28: Web Usability Dott. Simone Lazzini Università di Pisa.

Link associativi

Link strutturali

Link topici

Page 29: Web Usability Dott. Simone Lazzini Università di Pisa.

ID del sito Una via alla Home Page

Le sezioni

Utilities

Una via per la ricerca

Il “test del portabagagli”

1) In che sito mi trovo? ID

2) In che pagina sono? Nome della Pagina

3) Quali sono le sezioni principali del sito? Sezioni del sito o navigazione primaria

4) Quali opzioni ho a disposizione a questo livello? Navigazione locale

5) Dove mi trovo nella struttura generale del sito? Indicazioni “voi siete qui”

6) Come posso effettuare una ricerca? Campo ricerca

1

4

62

2

3

5

Page 30: Web Usability Dott. Simone Lazzini Università di Pisa.

ID Sezioni

Nome della pagina

Navigazione locale

Voi siete qui

Ricerca

Page 31: Web Usability Dott. Simone Lazzini Università di Pisa.

Una struttura di navigazione tipicaUna struttura di navigazione tipica

A B C D E

D1

D2

D3

pagina D1

contenuti della pagina

navigazione globale

navigazione locale

B C

D

EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1

D

Page 32: Web Usability Dott. Simone Lazzini Università di Pisa.

A B C D E

Un’altra variante: navigazione globale (metafora dello Un’altra variante: navigazione globale (metafora dello schedario)schedario)

A B C D E

D1 D2 D3

pagina D1

A B C D E

pagina D1

D1

D2

D3

Page 33: Web Usability Dott. Simone Lazzini Università di Pisa.

<contenuti Linea Cash>

Una variante: navigazione locale in orizzontaleUna variante: navigazione locale in orizzontale

Strutturalmente, è la stessa cosa

Un’altra variante: navigazione locale in menu a tendinaUn’altra variante: navigazione locale in menu a tendina

Page 34: Web Usability Dott. Simone Lazzini Università di Pisa.

Cosa distingue la home page dalle altre pagine:Cosa distingue la home page dalle altre pagine:

deve mettere in evidenza l’identità del sito (ID)

deve comunicare un quadro d’insieme (facendo dei compromessi!) ed esporre la mission del sito in modo chiaro e sintetico (WELCOME BLURB)

dovrebbe avere una TAGLINE ben progettata (solo i più famosi possono farne a meno!)

può avere un diverso orientamento delle sezioni e del testo, ma senza modificare i nomi e l’ordine delle sezioni (consistency)

HOME

Page 35: Web Usability Dott. Simone Lazzini Università di Pisa.

Cosa distingue la home page dalle altre pagine (2) :Cosa distingue la home page dalle altre pagine (2) :

L’identità del sito (ID)

…Il logo (ID) in evidenza, insieme ai valori e alla storia che esso esprime

Page 36: Web Usability Dott. Simone Lazzini Università di Pisa.

IL WELCOM BLURB

…poche righe per spiegare chi siamo, cosa facciamo, che obiettivi abbiamo(mission)

Cosa distingue la home page dalle altre pagine (3) :Cosa distingue la home page dalle altre pagine (3) :

Page 37: Web Usability Dott. Simone Lazzini Università di Pisa.

La TAGLINE

…poche parole (!) vicino all’ID per mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)(mission)

Cosa distingue la home page dalle altre pagine (4) :Cosa distingue la home page dalle altre pagine (4) :

Page 38: Web Usability Dott. Simone Lazzini Università di Pisa.

Nella home page i link strutturali (sezioni) possono essere disposti in modo diverso rispetto a tutte le altre pagine (navigazione persistente)…

Home

page

Cosa distingue la home page dalle altre pagine (5) :Cosa distingue la home page dalle altre pagine (5) :

Pagina interna

Page 39: Web Usability Dott. Simone Lazzini Università di Pisa.

Un difetto tipico: duplicazione degli accessi a una Un difetto tipico: duplicazione degli accessi a una stessa paginastessa pagina

Page 40: Web Usability Dott. Simone Lazzini Università di Pisa.

Il modello più in dettaglioIl modello più in dettaglio

Page 41: Web Usability Dott. Simone Lazzini Università di Pisa.

Valutare le caratteristiche apartire dallesottocaratteristiche

Caratteristica Voto PesoVoto

pesatoArchitettura 2,67 2,50 2,80Struttura 3 1 3Mappa del sito 2 0,5 1Navigazione 3 1 3

Comunicazione 3,00 3,00 3,00Home page 4 1 4Brand image 2 1 2Grafica 3 1 3

Funzionalità 4,00 2,00 4,00Adeguatezza 4 1 4Correttezza 4 1 4

Contenuto 3,00 4,00 3,00Categorizzazione/labelling 2 1 2Stile 4 1 4Informazione 3 1 3Localizzazione 3 1 3

Gestione 2,67 4,00 2,00Disponibilità 2 1 2Monitoraggio 1 1 1Aggiornamento 2 1 2Relazioni con gli utenti 3 1 3

Accessibilità 2,50 3,00 2,92Tempi d'accesso 3 1 3Reperibilità 4 1 4Indipendenza dal browser 2 0,75 1,5Accessibilità per i disabili 1 0,25 0,25

Usabilità 2,00 3,00 2,00Efficacia 2 1 2Efficienza 2 1 2Soddisfazione 2 1 2

Un possibile sistema Un possibile sistema di misurazionedi misurazione

Page 42: Web Usability Dott. Simone Lazzini Università di Pisa.

Una visione globaleUna visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione

FunzionalitàContenuto

Gestione

Accessibilità

Page 43: Web Usability Dott. Simone Lazzini Università di Pisa.

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione

FunzionalitàContenuto

Gestione

Accessibilità

Confronto di due sitiConfronto di due siti

Page 44: Web Usability Dott. Simone Lazzini Università di Pisa.

Un profilo di qualità più analiticoUn profilo di qualità più analitico

Page 45: Web Usability Dott. Simone Lazzini Università di Pisa.

Best site web awardBest site web award

Page 46: Web Usability Dott. Simone Lazzini Università di Pisa.

Best site web awardBest site web award

Page 47: Web Usability Dott. Simone Lazzini Università di Pisa.
Page 48: Web Usability Dott. Simone Lazzini Università di Pisa.
Page 49: Web Usability Dott. Simone Lazzini Università di Pisa.
Page 50: Web Usability Dott. Simone Lazzini Università di Pisa.
Page 51: Web Usability Dott. Simone Lazzini Università di Pisa.

Analisi operativa e “strategica” dei risultati

OBIETTIVIDEL

PORTALE

DETERMINAZIONE DELFABBISOGNO INFORMATIVO

DESTINATARI ESTERNI

REALIZZAZIONE/REVISIONE

ESPLICITAZIONEDEI

PARAMETRI DEL PORTALE

COMMISURAZIONEDEI

PARAMETRI

REPORTCON PARAMETRI

E-GOV

Il circuito del controlloIl circuito del controllo

IL PORTALE

Page 52: Web Usability Dott. Simone Lazzini Università di Pisa.

Qualche riferimentoQualche riferimento

Documenti consultati Web Usability – Francesca Rizzo Informatica per l’e-Government

Come cambia la Pubblica Amministrazione italiana - Prof. Valter Baldassi.

Linee Guida per laQualità delle Forniture ICT: evoluzione ed applicazione – Marco Gentili

Analisi siti web Pa –Paolo Atzeni, Paolo Merialdo

Progettazione di un sito Web – Roberto Pirrone

Bibliografia Consultata Designing Web Usability, Nielsen,

J., tr. it. di Vanini, W., Apogeo,Milano, 2000.

Information Architecture for the World Wide Web, Rosenfeld, L.,Morville, P., O’Reilly, Sebastapol CA, 1998.

Usability Inspection Methods, Nielsen, J., and Mack, R. L., JohnWiley & Sons, New York, NY, 1994.


Recommended