Università degli Studi di Udine


Relazioni per il Corso di

"PROGETTAZIONE SITI WEB"

SIMULAZIONE EURISTICA (Ceschin)

www.alitalia.it

Nell’ambito del progetto di Progettazione Siti Web, per quanto riguarda la simulazione euristica, ho valutato il sito della compagnia aerea Alitalia, servendomi delle barriere di usabilità fornite dal Professor Braijnik. Ho scelto, oltre a quali pagine del sito verificare (principalmente sei), tre tipologie di utenti, per ognuna delle quali sono andato a verificare se erano o meno presenti delle barriere.
Ho presentato in maniera dettagliata, grazie anche a molte immagini, tutti i problemi (barriere) riscontrati, cercando ove possibile di suggerire una soluzione; ho infine creato delle tabelle, una per ogni tipologia di utenti, che riportano, per ogni barriera riscontrata, il relativo livello di gravità.




PAGINE CONSIDERATE

Ho scelto le pagine a mio parere più significative e problematiche del sito, in modo tale da poter evidenziare i problemi di accessibilità più gravi.


Torna su



TIPOLOGIE DI UTENTI

Tra molte possibili tipologie di utenti possibili, ho scelto le seguenti tre, molto adatte a far emergere le problematiche maggiori del sito in questione.

  1. Utente ipovedente
  2. Utente disabile cognitivo
  3. Utente di browser senza javascript

Torna su



LIVELLI DI GRAVITÀ

Il livello di gravità di una barriera viene calcolato a partire dai valori assegnati a due attributi, IMPATTO e FREQUENZA, che devono essere assegnati ad ogni barriera in questo modo:

Per l’impatto, i possibili valori possono variare da 1 a 3, che vengono così assegnati:

Per la frequenza, i possibili valori variano sempre tra 1 e 3, e si riferiscono al numero di volte che un problema si presenta durante lo svolgimento d un compito:


GRAVITÀ
Impatto Frequenza Gravità
1 1 minore
1 2 minore
1 3 serio
2 1 serio
2 2 serio
2 3 critico
3 1 critico
3 2 critico
3 3 critico

Torna su



BARRIERE DI USABILITÀ

Utenti ipovedenti

Immagini ricche mal posizionate

Layout della pagina subottimale perché la grafica non fa capire la presenza dell'immagine, che è portatrice di informazioni.

Categoria: percezione

Immagini ricche incluse nello sfondo

Immagini latrici di informazioni incluse nello sfondo della pagina (tramite CSS) per le quali non è possibile specificare testo alternativo equivalente.

Categoria: percezione

Contrasto visivo insufficiente

La pagina contiene materiale in primo piano su qualche tipo di sfondo e i colori usati per dipingere gli uni e l'altro sono troppo poco contrastati. Lo sfondo in questione può essere un riquadro colorato con tinta uniforme, a gradiente, con qualche trama, con un'immagine. E il materiale di primo piano può consistere in testo o in immagini.

Il livello di contrasto troppo basso può essere dovuto ad insufficiente differenza di luminosità, o a cattiva scelta delle diverse tonalità di colore.

Talvolta il problema sorge solo quando il contenuto della pagina viene riposizionato (ad es. perché si è cambiata la dimensione del testo, o la geometria della finestra).

Categoria: percezione

Materiale in movimento

Immagini o testo in movimento (ad es. testo scorrevole, immagine animata).

Categoria: percezione

Immagini funzionali in sfondo

La pagina contiene nello sfondo (ev. anche mediante regole CSS) delle immagini che nella pagina visualizzata assumono un ruolo funzionale. Ad es. corrispondono ad immagini cliccabili, a pulsanti, a etichette di controlli di form o a etichette di categorie di contenuti.

Categoria: utilizzazione

Immagini funzionali prive di testo

La pagina contiene delle immagini funzionali (link cliccabili, pulsanti di invio per form, mappe immagine) prive di testo alternativo. Analogamente per pulsanti in Flash.

Categoria: utilizzazione

Menu dinamici in javascript

La pagina contiene del codice JavaScript che, non appena l'utente posiziona il focus dell'interazione su un elemento, viene aperto un menu in una determinata zona della pagina.

Categoria: utilizzazione

Mancanza di link interni

La pagina, relativamente complessa e ricca di contenuto che spesso non viene tutto visualizzato insieme, manca di link interni alla pagina che permettano all'utente di saltare di sezione in sezione, o di ritornare in testa alla pagina.

Categoria: utilizzazione, controllo da parte dell'utente

Righe di testo lunghe

La pagina contiene righe di testo troppo lunghe rispetto al campo visivo.

Categoria: controllo da parte dell'utente

Troppi link

Troppi link nella pagina, talvolta non bene organizzati in gruppi.

Categoria: controllo da parte dell'utente, comprensione

Form con redirect

La pagina contiene delle form in cui alcuni controlli (campi o menu a tendina implementati con SELECT), una volta che vengono utilizzati, causano un submit al server il quale spedisce una nuova pagina al browser. Questo comportamento è basato su gestori di eventi JavaScript.

Categoria: utilizzazione

Form ampie

La pagina contiene una form i cui controlli sono sparsi in un'ampia area della pagina e disposti su più di una colonna.

Categoria: utilizzazione

Finestre sovrapposte

La pagina contiene codice (HTML o JavaScript) che apre nuove finestre che si sovrappongono totalmente o quasi del tutto con la finestra usata sino a quel momento.

Categoria: utilizzazione

Temporizzazioni troppo brevi

Il comportamento del server è di causrae un refresh della pagina, magari con modifica del contenuto, senza che ci sia stato un qualche evento causato dall'utente per attivare tale comportamento.

Categoria: utilizzazione

Immagini come titoli

La pagina contiene dei titoli di categoria (ad es. di un gruppo di link tra loro correlati, o di un gruppo di news) implementati mediante delle immagini che sono prive di attributo ALT.

Categoria: comprensione

Mancanza di tasti rapidi

La pagina contiene dei link o pulsanti o controlli di form che sono ricorrenti nelle pagine del sito e che non hanno alcun tasto rapido associato (con @ACCESSKEY).

Categoria: controllo da parte dell'utente

Testo non ridemensionabile

La pagina contiene del testo per il quale sono state usate delle modalità di presentazione tali per cui non può essere ridimensionato. Ad es. unità di misura assolute del CSS (px, pt, cm) o tag deprecati come FONT/@SIZE.

Categoria: controllo da parte dell'utente

Layout non ridemensionabile

La pagina ha una struttura di impaginazione non fluida, che non permette di modificare le dimensioni della finestra o quelle del testo senza compromettere la comprensibilità e fruibilità del contenuto.

Talvolta la pagina lascia inutilizzata una grossa proporzione dello schermo.

Categoria: controllo da parte dell'utente

Skip links

La pagina non permette di saltare direttamente al contenuto, evitando il materiale preliminare e ripetuto nelle pagine (logo, briciole di pane, pulsantiera globale).

Categoria: controllo da parte dell'utente

Controlli del browser disabilitati

La pagina è stata aperta in una nuova finestra del browser dove i controlli tipici del browser non ci sono (back, next, refresh, ecc).

Categoria: controllo da parte dell'utente




Utenti disabili cognitivi

Mancanza di didascalie del video

Un file multimediale con un video o un'animazione è privo di descrizione testuale delle scene.

Categoria: percezione

Link generici

La pagina contiene dei link con etichette poco informative (ad es. "clicca qui", "dettagli", "di più").

Categoria: utilizzazione

Link ambigui

La pagina contiene dei link con etichette ambigue (ad es. "clicca qui", "dettagli", "di più" ripetuti più volte).

Categoria: utilizzazione

Mancanza di link interni

La pagina, relativamente complessa e ricca di contenuto che spesso non viene tutto visualizzato insieme, manca di link interni alla pagina che permettano all'utente di saltare di sezione in sezione, o di ritornare in testa alla pagina.

Categoria: utilizzazione, controllo da parte dell'utente

Assenza di icone

La pagina manca di icone associate ai link o alle parti importanti e ricorrenti della pagina. La pagina può anche avere pochi colori che aiuterebbero a distinguere le diverse parti di cui essa si compone.

Le pagine "solo testo" normalmente hanno questo difetto.

Categoria: comprensione

Testo complesso

La pagina contiene del testo che è complesso da leggere per via della struttura delle frasi, per via dei termini difficili usati, per via delle frequenti abbreviazioni ed acronimi, o perché lungo e male strutturato, o per i frequenti errori ortografici.

Categoria: comprensione

Sito complesso

Il sito è organizzato in maniera complessa, probabilmente a causa della ricchezza degli argomenti trattati.

Categoria: comprensione

Troppi link

Troppi link nella pagina, talvolta non bene organizzati in gruppi.

Categoria: controllo da parte dell'utente, comprensione

Campi di testo

La pagina contiene delle form che hanno dei campi di testo privi di esempi.

Categoria: utilizzazione

Nuove finestre

La pagina contiene del codice (HTML o JavaScript) che apre nuove finestre quando l'utente attiva dei link o pulsanti.

Categoria: utilizzazione

Temporizzazioni troppo brevi

Il comportamento del server è di causrae un refresh della pagina, magari con modifica del contenuto, senza che ci sia stato un qualche evento causato dall'utente per attivare tale comportamento.

Categoria: utilizzazione

Suddivisione in sezioni

La pagina non contiene tag tipo H1-H2...-H6 per suddividere in sezioni il suo contenuto.

Categoria: comprensione, controllo da parte dell'utente

Pagina solo testo

La pagina contiene un link che porta ad una pagina solo del contenuto testuale. Talvolta c'è modo di cambiare i colori e la dimensione del testo.

Spesso però la pagina solo testo contiene meno materiale, meno link e minori possibilità di accedere ai contenuti del sito di quanto permetta la pagina grafica.

Categoria: controllo da parte dell'utente




Utenti di browser senza javascript

Menu dinamici in JavaScript

La pagina contiene del codice JavaScript che, non appena l'utente posiziona il focus dell'interazione su un elemento, viene aperto un menu in una determinata zona della pagina.

Categoria: utilizzazione

Menu a cascata

La pagina contiene dei menu a cascata (implementati con delle SELECT annidate o mediante codice JavaScript).

Categoria: utilizzazione

Eventi mouse

La pagina si basa su codice JavaScript per ottenere determinati effetti. Le routine vengono invocate mediante gestori di eventi legati al mouse (es. "onclick", "onmouseover", "onmouseout", ...).

Categoria: utilizzazione

Form popolata automaticamente

La pagina contiene delle form in cui alcuni campi o controlli vengono popolati automaticamente, mediante codice JavaScript. Ad es. una volta che viene scelta la provincia di residenza, la lista dei comuni viene ristretta solamente ai comuni della provincia scelta.

Categoria: utilizzazione

Form con redirect

La pagina contiene delle form in cui alcuni controlli (campi o menu a tendina implementati con SELECT), una volta che vengono utilizzati, causano un submit al server il quale spedisce una nuova pagina al browser. Questo comportamento è basato su gestori di eventi JavaScript.

Categoria: utilizzazione

Validazione dei campi

La pagina contiene una form i cui campi vengono validati esclusivamente mediante JavaScript.

Categoria: utilizzazione

Campi nascosti

La pagina contiene una form che ha dei controlli nascosti (HIDDEN) che vengono popolati mediante JavaScript subito prima dell'invio dei dati.

Categoria: utilizzazione

Nuove finestre

La pagina contiene del codice (HTML o JavaScript) che apre nuove finestre quando l'utente attiva dei link o pulsanti.

Categoria: utilizzazione

Controlli del browser disabilitati

La pagina è stata aperta in una nuova finestra del browser dove i controlli tipici del browser non ci sono (back, next, refresh, ecc).

Categoria: controllo da parte del'utente


Torna su



TABELLE DI VALUTAZIONE

TABELLA PER UTENTI IPOVEDENTI
Barriera Impatto Frequenza Gravità
Immagini nello sfondo 1 1 minore
Contrasto visivo insufficiente 1 2 minore
Materiale in movimento 1 1 minore
Troppi link 1 1 minore
Menu dinamici in Javascript 2 1 serio
Mancanza di link interni 2 1 serio
Testo non ridimensionabile 2 1 serio
Immagini funzionali in sfondo 3 2 critico
Immagini funzionali senza ALT 3 2 critico
Mancanza di tasti rapidi 3 3 critico
Layout non ridimensionabile 3 3 critico



TABELLA PER UTENTI DISABILI COGNITIVI
Barriera Impatto Frequenza Gravità
Link Ambigui 1 1 minore
Troppi link 1 1 minore
Mancanza link interni 2 1 serio
Campi di testo 1 3 serio
Suddivisione in sezioni 2 3 critico



TABELLA PER UTENTI SENZA JAVASCRIPT
Barriera Impatto Frequenza Gravità
Menu a cascata 1 1 minore
Form popolata automaticamente 1 1 minore
Nuove finestre 1 3 serio
Validazione dei campi 3 3 critico
Eventi mouse 3 2 critico


Torna su



DETTAGLIO BARRIERE RISCONTRATE

Di seguito si trova l'elenco delle barriere che ho riscontrato all'interno del sito, accompagnato da immagini e frammenti di codice errato. Ho ritenuto opportuno ordinare le barriere per categoria piuttosto che per utente, poichè alcune categorie si riferiscono a più tipologie di utenti.


Categoria: percezione

Immagini ricche incluse nello sfondo

Immagine ricca su sfondoAltra immagine ricca su sfondo

All'interno della pagina "Offerte speciali" e home-page, le varie offerte sui voli presentate agli utenti sono sottoforma di immagini in cui sono scritte le informazioni.


Contrasto visivo insufficiente

Immagine con contrasto visivo insufficiente

I colori sono nel complesso ben bilanciati con scritte scure su sfondi chiari apparte in qualche piccolo caso in cui i toni del verde non suparano il test di ********.


Materiale in movimento

Materiale in movimento
Materiale in movimento

L'unico materiale in movimento è una riga di testo difficilmente notabile che fa scorrere a rotazione le varie news e offerte del sito e alcuni box in javascript che presentano alcune offerte.





Categoria: utilizzazione

Immagini funzionali in sfondo

Immagine funzionale in sfondo

Immagine funzionale in sfondo

Gran parte delle immagini nella home-page recano informazione, come titoli o i nomi delle sezioni, e sono indispensabili per procedere alla navigazione.


Immagini funzionali prive di testo

Immagine funzionale priva di testo

Gran parte delle immagini nella home-page indispensabili per raggiungere e navigare tra le varie sezioni sono prive di testo alternativo. Immagini invece di contorno e inutili ai fini della navigazioni hanno tutte testo alternativo.


Menu dinamici in javascript

Finestra in javascript Calendario in javascript

Non ci sono veri e propri menu dinamici in javascript ma il calendario ed altri link in javascript vengono aperti in zone della pagina che un utente con ingranditore di schermo potrebbe non notare facilmente.


Mancanza di link interni

Nella pagina Scelta voli, Offerte speciali e Mappa del Sito, relativamente lunghe, mancano i link interni di navigazione.


Campi di testo

Immagine di una form

I campi di testo nelle varie form analizzate sono tutti privi di esempi di compilazione già proposti; i campi sono comunque relativamente di facile comprensione e comunque forniti di titolo esplicativo


Link ambigui

Immagine link ambiguoImmagine altro link ambiguo

I link presenti nel sito sono in genere ben scelti ed informativi apparte in qualche rara occasione (“Continua” in scelta voli potrebbe essere non inteso, o “Consulta l'orario” e “Status Volo”)


Nuove finestre

Immagine Calendario Immagine info Immagine altre info

Vengono aperte nuove finestre al calendario e a determinate informazioni sui voli nella homepage.


Validazione dei campi

Il codice javascript per inviare i dati di ricerca per la prenotazione di un volo è bloccante rendendo impossibile completare la richiesta. Ciò rende di fatto impossibile prenotare un volo se il browser non supporta javascript.


Form popolata automaticamente

Campo completato automaticamente

Non ci sono form popolate automaticamente apparte il campo “Da” di ricerca voli nella home che viene completato di default con l'ultima ricerca fatta nel sito.


Eventi mouse

Alcuni menu, link per informazioni e scelte sul volo ed intere sezioni del sito non funzionano o non sono visualizzate senza javascript.


Menu a cascata

Menu a cascata nella home

Scrivendo nella home la destinazione o il luogo di partenza viene proposto un menu in javascript di scelta degli aeroporti disponibili. Senza il supporto a javascript questa possibilià non si presenta.





Categoria: comprensione

Troppi link

Immagine di troppi link1
Immagine di troppi link2

Nella pagina della Mappa del sito ci sono evidentemente troppi link e organizzati male, con colonne lunghe e corte mal disposte; risulta difficile trovare ciò che si cerca.


Suddivisione in sezioni

In tutte le pagine analizzate ad eccezione della pagina "Offerte speciali" manca qualsiasi tag H1-...-H6. La suddivisione in sezioni viene fatta in altri modi oppure non viene proprio fatta.





Categoria: controllo da parte dell'utente

Layout non ridimensionabile

Tutte le pagine analizzate hanno una struttura fissa, e se viene ridimensionata la grandezza della finestra o dei caratteri, le pagine non vengono ridemensionate ne i testi fluiscono ma appaiono solamente le scrollbar ai lati.

Immagine del menu a lato

Ai lati del contenuto della pagina ci sono grandi spazi bianchi e sul lato sinistro un menu che si nota difficilmente se la finestra non è aperta al massimo.


Testo non ridimensionabile

Non tutto il testo risulta ridemensionabile, per esempio quello implementato nei link in javascript.


Mancanza di tasti rapidi

Manca del tutto qualsisi tasto di scelta rapida per cui si limita la possibilità di una fruizione più veloce e precisa del sito.


Torna su