Web Usability [4] Matteo Magni
Nov 11, 2014
Web Usability [4]Matteo Magni
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)
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)
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)
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)
Tim Berners-Lee
“un sito accessibile è un sito più usabile per tutti”
wcag
http://www.w3.org/TR/WCAG10/
Web Content Accessibility Guidelines 1.0
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.
Ma parliamo solo di disabilità permanenti?
molti utenti possono trovarsi a operare in contesti molto differenti dal proprio
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;
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.
Errori comuni
Se non ho le immagini?
• Disabilito le immagini con la web developer toolbar di firefox
Errori comuni – menu immagini
Browser testuale
Richiesto plugin silverlight
• E se non lo so installare?
• E se non si installa?
• E se non ho i permessi per installarlo?
iFrame
• Gli iframe non hanno titoli significativi
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, ...).
Alternativa
Una della parole chiavi per l'accessibilità è sicuramente la parola alternativa
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.
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
e i CSS?
ul { liststyleimage: url("bullet.jpg") }
......
<ul>
<li>Primo punto elenco.</li>
<li>Secondo punto elenco.</li>
<li>Terzo punto elenco.</li>
</ul>
CAPTCHA
• Così è accessibile, ma è anche usabile?
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
Contrasto
• Cerchiamo di avere contrasti accessibili
http://www.iamcal.com/toys/colors/
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
Disabilitiamo Javascript?
Come navigo?!?!?
href=”#”
• Il menu dovrebbe essere utilizzabile lo stesso
• Con HTML e CSS posso creare alternative nel caso non ci sia Js
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 BolognaRoma</a>
...altri risultati...
</dd>
</dl>
</noscript>
Javascript quindi?
• Conoscendolo lo si può rendere accessibile, quindi ci tocca aspettare...
Usare le giuste tecnologie
• HTML
• Css
• Javascript
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
Tools
Ma purtroppo sono scomparsi
Tools [2]
https://addons.mozilla.org/it/firefox/addon/accessibility-evaluation-toolb/
Bibliografia
• Accessibilità Guida completa di Michele Diodati
http://accessibile.diodati.org/agc/
Risorse
http://webaccessibile.org/
http://www.iwa.it/categorie/informazioni/
Domande
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: