Web usability - 4 | WebMaster & WebDesigner

40
Web Usability [4] Matteo Magni

description

Quarta lezione modulo Web Usability del corso per WebMaster & WebDesigner

Transcript of Web usability - 4 | WebMaster & WebDesigner

Page 1: Web usability - 4 | WebMaster & WebDesigner

Web Usability [4]Matteo Magni

Page 2: Web usability - 4 | WebMaster & WebDesigner

Usabilità

• L'usabilità è definita dall'ISO (International Organisation for Standardisation), come l'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. In pratica definisce il grado di facilità e soddisfazione con cui si compie l'interazione tra l'uomo e uno strumento (console, leva del cambio, interfaccia grafica, ecc.)

(Wikipedia)

Page 3: Web usability - 4 | WebMaster & WebDesigner

Nielsen

• L’usabilità è un indicatore di qualità che ci dice quanto una determinata cosa è semplice da usare. Più precisamente, ci dice quanto è necessario per imparare a usare quella cosa, con quanta efficienza la si usa poi, quanto si riesce a tenerne a mente il funzionamento, quanto alta è la probabilità di fare errori quando la si usa, e quanto è piacevole usarla. Se l’utente non riesce o non vuole usare una data funzionalità di un oggetto o di un programma, quella funzionalità potrebbe tranquillamente non esserci. (Nielsen)

Page 4: Web usability - 4 | WebMaster & WebDesigner

Accessibilità

• L'accessibilità è la caratteristica di un dispositivo, di un servizio o di una risorsa d'essere fruibile con facilità da una qualsiasi tipologia d'utente.

(Wikipedia)

Page 5: Web usability - 4 | WebMaster & WebDesigner

Accessibilità

• La proprietà di un contenuto web, di uno strumento autoriale o di un programma utente di essere accessibile oppure, a seconda del contesto, l’insieme di linee guida, raccomandazioni, suggerimenti, tecniche, per produrre contenuti accessibili, strumenti autoriali accessibili, programmi utente accessibili. (Diodati)

Page 6: Web usability - 4 | WebMaster & WebDesigner

Tim Berners-Lee

“un sito accessibile è un sito più usabile per tutti”

Page 7: Web usability - 4 | WebMaster & WebDesigner

wcag

http://www.w3.org/TR/WCAG10/

Web Content Accessibility Guidelines 1.0

Page 8: Web usability - 4 | WebMaster & WebDesigner

Beneficiari

Le categorie di disabili che vengono citate nelle WCAG 1.0 come interessate dai benefici di una corretta applicazione delle raccomandazioni sull’accessibilità sono le seguenti:

• i ciechi;

• i sordi;

• i sordociechi;

• gli ipovedenti;

• i disabili motori (almeno per quel che influenza la possibilità di usare il mouse o la tastiera);

• i malati di epilessia fotosensibile (le cui crisi possono essere scatenate da luci in movimento o oggetti lampeggianti);

• individui affetti da non meglio specificate disabilità cognitive o dell’apprendimento.

Page 9: Web usability - 4 | WebMaster & WebDesigner

Ma parliamo solo di disabilità permanenti?

Page 10: Web usability - 4 | WebMaster & WebDesigner

molti utenti possono trovarsi a operare in contesti molto differenti dal proprio

Page 11: Web usability - 4 | WebMaster & WebDesigner

Situazioni [1]

• possono non essere in grado di vedere, sentire, muoversi, o possono non riuscire a elaborare, facilmente o del tutto, alcuni tipi di informazioni;

• possono avere difficoltà nella lettura o nella comprensione dei testi;

• possono non avere la tastiera o il mouse, oppure non essere in grado di adoperarli;

Page 12: Web usability - 4 | WebMaster & WebDesigner

Situazioni [2]

• possono avere uno schermo solo a caratteri, uno schermo piccolo o una connessione lenta a Internet;

• possono non parlare o comprendere in modo fluente la lingua in cui il documento è scritto;

• possono trovarsi in situazioni in cui la vista, l’udito o le mani sono occupati o ostacolati (per esempio, guidano per lavoro o lavorano in un ambiente rumoroso ecc.);

• possono avere una versione precedente di un browser, un browser del tutto differente, un browser vocale o un diverso sistema operativo.

Page 13: Web usability - 4 | WebMaster & WebDesigner

Errori comuni

Page 14: Web usability - 4 | WebMaster & WebDesigner

Se non ho le immagini?

• Disabilito le immagini con la web developer toolbar di firefox

Page 15: Web usability - 4 | WebMaster & WebDesigner

Errori comuni – menu immagini

Page 16: Web usability - 4 | WebMaster & WebDesigner

Browser testuale

Page 17: Web usability - 4 | WebMaster & WebDesigner

Richiesto plugin silverlight

Page 18: Web usability - 4 | WebMaster & WebDesigner

• E se non lo so installare?

• E se non si installa?

• E se non ho i permessi per installarlo?

Page 19: Web usability - 4 | WebMaster & WebDesigner

iFrame

• Gli iframe non hanno titoli significativi

Page 20: Web usability - 4 | WebMaster & WebDesigner
Page 21: Web usability - 4 | WebMaster & WebDesigner

Dispositivi

• browser grafici (Internet Explorer, Firefox, Opera, Safari, ...);

• browser testuali (Lynx, Links, ...);

• browser vocali (Home Page Reader);

• plug-in (Adobe Reader, Flash, Java Runtime Environment, ...);

• screen reader (Jaws, Windows Eyes, Hal, ...);

• ingranditori di schermo (Lunar, ZoomText, Magic, ...).

Page 22: Web usability - 4 | WebMaster & WebDesigner

Alternativa

Una della parole chiavi per l'accessibilità è sicuramente la parola alternativa

Page 23: Web usability - 4 | WebMaster & WebDesigner

WCAG 1.0, linea guida 1. Fornire contenuti che, quando presentati all’utente, svolgono essenzialmente la stessa funzione o scopo

dei contenuti uditivi o visivi.

Page 24: Web usability - 4 | WebMaster & WebDesigner

Immagini attributo alt

Lo abbiamo già visto, ma nei casi di immagini decorative?

<img src="pallino.gif" alt="" width="5" height="5">

<img src="spaziatore.gif" alt="" width="15" height="10">

Meglio metterlo vuoto

Page 25: Web usability - 4 | WebMaster & WebDesigner

e i CSS?

ul { list­style­image: url("bullet.jpg") }

......

<ul>

<li>Primo punto elenco.</li>

<li>Secondo punto elenco.</li>

<li>Terzo punto elenco.</li>

</ul>

Page 26: Web usability - 4 | WebMaster & WebDesigner

CAPTCHA

• Così è accessibile, ma è anche usabile?

Page 27: Web usability - 4 | WebMaster & WebDesigner

Non usare solo il colore

E i link quali sono se non vedo i colori?http://it.wikipedia.org/wiki/Accessibilit%C3%A0_%28design%29

Page 28: Web usability - 4 | WebMaster & WebDesigner

Contrasto

• Cerchiamo di avere contrasti accessibili

http://www.iamcal.com/toys/colors/

Page 29: Web usability - 4 | WebMaster & WebDesigner

Marcatura html e css

• Come abbiamo visto nel modulo html e css usare un codice pulito e molti fogli di stile rende tutto più accessibile.

• Validiamo il codice

Page 30: Web usability - 4 | WebMaster & WebDesigner

Disabilitiamo Javascript?

Page 31: Web usability - 4 | WebMaster & WebDesigner

Come navigo?!?!?

href=”#”

• Il menu dovrebbe essere utilizzabile lo stesso

• Con HTML e CSS posso creare alternative nel caso non ci sia Js

Page 32: Web usability - 4 | WebMaster & WebDesigner

noscript

<script type="text/tcl">

...uno script Tcl che mostra un tabellone di risultati sportivi... 

</script>

<noscript> 

<p>I risultati delle gare di ieri:</p> 

<dl>

<dt>Bologna 91, Roma 80.</dt>

<dd>

<a href="gara1.html">I momenti clou

dell’incontro di basket Bologna­Roma</a>

...altri risultati...

</dd>

</dl>

</noscript>

Page 33: Web usability - 4 | WebMaster & WebDesigner

Javascript quindi?

• Conoscendolo lo si può rendere accessibile, quindi ci tocca aspettare...

Page 34: Web usability - 4 | WebMaster & WebDesigner

Usare le giuste tecnologie

• HTML

• Css

• Javascript

Page 35: Web usability - 4 | WebMaster & WebDesigner

In Italia?

http://www.pubbliaccesso.gov.it/normative/legge_20040109_n4.htm

Legge 4 gennaio 2004, n. 4, Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici, nota come Legge

Stanca dall’allora ministro proponente, Lucio Stanca

http://www.pubbliaccesso.gov.it/biblioteca/documentazione/studio_lineeguida/3_requisiti_tecnica.htm

Page 36: Web usability - 4 | WebMaster & WebDesigner

Tools

Ma purtroppo sono scomparsi

Page 37: Web usability - 4 | WebMaster & WebDesigner

Tools [2]

https://addons.mozilla.org/it/firefox/addon/accessibility-evaluation-toolb/

Page 38: Web usability - 4 | WebMaster & WebDesigner

Bibliografia

• Accessibilità Guida completa di Michele Diodati

http://accessibile.diodati.org/agc/

Page 39: Web usability - 4 | WebMaster & WebDesigner

Risorse

http://webaccessibile.org/

http://www.iwa.it/categorie/informazioni/

Page 40: Web usability - 4 | WebMaster & WebDesigner

Domande

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

[email protected]