Luca Save e Francesca Rizzo - Università degli Studi di Siena La web usability Esempi di euristiche...

Luca Save e Francesca Rizzo - Università degli Studi di Siena

La web usability

Esempi di euristiche specifiche per il web


INDICE

1. I principi di buona navigazione (Nielsen 1999)

2. I diversi tipi di link (Nielsen 1999)

3. Le convenzioni più diffuse (Krug 2000)

4. Le “leggi” molto empiriche di Krug

5. Progettare l’architettura informativa

La web usability


La web usability

1. I principi di buona navigazione

1. Dove mi trovo?

2. Dove sono stato?

3. Dove posso andare?

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


La web usability 1. Principi di buona navigazione

1. Dove mi trovo?in relazione al Web



1. Dove mi trovo?

in relazione alla struttura del sito



2. Dove sono stato ?nel Web


all’interno del sito


2. Dove sono stato ?

I link più chiari



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

link topici

link associativi

link strutturali


La web usability

2. I diversi tipi di link

TOPICI

STRUTTURALI

ASSOCIATIVI 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


2. I diversi tipi di linkLa web usability

Link associativi

Link strutturali

Link topici


La web usability

3. Le convenzioni più diffuse

5 elementi che dovrebbero sempre apparire in ogni pagina

La navigazione persistente

ID del sito Una via alla Home Page

Le sezioni

Utilities

Una via per la ricerca


Messi improvvisamente davanti ad una pagina nuova (non la home page!) dobbiamo saper “rispondere” rapidamente a 6 domande:

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

3. Le convenzioni più diffuseLa web usability

Il “test del portabagagli”


ID Sezioni

Nome della pagina

Navigazione locale

Voi siete qui

Ricerca


Il “test del portabagagli”



Cosa distingue la home page dalle altre pagine:

La web usability

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




La web usability

L’identità del sito (ID)

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




La web usability






La web usability






La web usability






IL WELCOM BLURB

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




IL WELCOM BLURB

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




La TAGLINE

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




La TAGLINE





La TAGLINE





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

Home page




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

Pagina interna




…ma senza modificare i nomi e l’ordine delle sezioni (consistency)


LEGGE PRIMANon farmi pensare…

LEGGE SECONDANon importa quanti click devo fare, se ogni click è frutto di

una scelta che non richiede impegno e che non è

ambigua…

LEGGE TERZASbarazzati della metà delle parole di ogni pagina e poi

sbarazzati della metà di quello che resta…

La web usability

4. Le “leggi” molto empiriche di Krug


4. Le “leggi” molto empiriche di KrugLa web usability


5. Progettare l’architettura informativa

L’architettura informativa “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.

La web usability


Tre strutture di base

1) 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.

La web usability 5. Progettare L’architettura informativa


2) Gerarchica

Più percorsi mutuamente esclusivi

Adatta ad evidenziare le relazioni insieme/sotto insieme

Consente movimenti top-down / bottom-up.




3) A ragnatela

Pagine 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 difficoltà di orientamento per l’utente.




Molte altre strutture possibili: parallela, a matrice, a sovrapposizione, a zoom, ecc. I siti web si basano di solito su una combinazione di varie strutture.

Quello che conta è che la struttura sia progettata deliberatamente, tenendo conto del tipo di fruizione dei contenuti che si ritiene più adatto per l’utente.

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.




E’ Sabato pomeriggio e state entrando in un centro commerciale per comprare una motosega:


Lo scenario di Krug:

UTENSILI

Dove sono le motoseghe?

Vi trovate di fronte a tre reparti…

CASALINGHIPRATO E

GIARDINO


Seguendo il vostro intuito provate a vedere se la motosega si trova sotto UTENSILI…



UTENSILI A MOTORE

UTENSILI A MOTORE

…nella corsia UTENSILI A MOTORE cercate la motosega e la trovate.

…nel reparto utensili guardate i cartelli alla fine di ogni corsia…

UTENSILI MANUALIUTENSILI MANUALI

SMERIGLIARE E LEVIGARE



Se la vostra scelta fosse stata PRATO E GIARDINO sareste stati costretti a tornare indietro…



UTENSILIPRATO E

GIARDINO

UTENSILI A MOTORE

UTENSILI A MOTORE




CASALINGHI


Un’organizzazione gerarchica dell’informazione impone di visitare prima una categoria e quindi la seconda, nel caso in cui non riusciate a trovare l’elemento desiderato.

UTENSILI CASALINGHIPRATO E

GIARDINO

UTENSILI A MOTORE

UTENSILI A MOTORE





HOME


Un’organizzazione a ragnatela consente invece 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

HOME

Smerigliare e levigare

Utensili a manuali

•motosega•tagliaerba• ecc…

Date post:	02-May-2015
Category:	Documents
Upload:	fulvia-massaro
View:	219 times
Download:	0 times

Luca Save e Francesca Rizzo - Università degli Studi di Siena La web usability Esempi di euristiche...

Documents