Web usability - 4 | WebMaster & WebDesigner

529 views

Published on

Quarta lezione modulo Web Usability del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
529
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web usability - 4 | WebMaster & WebDesigner

  1. 1. Web Usability [4]Matteo Magni
  2. 2. Usabilità• Lusabilità è definita dallISO (International Organisation for Standardisation), come lefficacia, lefficienza 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 linterazione tra luomo e uno strumento (console, leva del cambio, interfaccia grafica, ecc.) (Wikipedia)
  3. 3. 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)
  4. 4. Accessibilità• Laccessibilità è la caratteristica di un dispositivo, di un servizio o di una risorsa dessere fruibile con facilità da una qualsiasi tipologia dutente. (Wikipedia)
  5. 5. 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)
  6. 6. Tim Berners-Lee“un sito accessibile è un sito più usabile per tutti”
  7. 7. wcaghttp://www.w3.org/TR/WCAG10/Web ContentAccessibilityGuidelines 1.0
  8. 8. BeneficiariLe categorie di disabili che • i disabili motori (almeno per quelvengono citate nelle WCAG 1.0 che influenza la possibilità di usarecome interessate dai benefici di il mouse o la tastiera);una corretta applicazione delle • i malati di epilessia fotosensibile (leraccomandazioni sull’accessibilità cui crisi possono essere scatenatesono le seguenti: da luci in movimento o oggetti lampeggianti);• i ciechi; • individui affetti da non meglio• i sordi; specificate disabilità cognitive o dell’apprendimento.• i sordociechi;• gli ipovedenti;
  9. 9. Ma parliamo solo di disabilità permanenti?
  10. 10. molti utenti possonotrovarsi a operare incontesti moltodifferenti dal proprio
  11. 11. 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;
  12. 12. 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.
  13. 13. Errori comuni
  14. 14. Se non ho le immagini? • Disabilito le immagini con la web developer toolbar di firefox
  15. 15. Errori comuni – menu immagini
  16. 16. Browser testuale
  17. 17. Richiesto plugin silverlight
  18. 18. • E se non lo so installare?• E se non si installa?• E se non ho i permessi per installarlo?
  19. 19. iFrame • Gli iframe non hanno titoli significativi
  20. 20. 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, ...).
  21. 21. AlternativaUna della parole chiavi per laccessibilità è sicuramente la parola alternativa
  22. 22. WCAG 1.0, linea guida 1. Fornire contenutiche, quando presentati all’utente, svolgonoessenzialmente la stessa funzione o scopo dei contenuti uditivi o visivi.
  23. 23. Immagini attributo altLo abbiamo già visto, ma nei casi di immaginidecorative?<img src="pallino.gif" alt="" width="5" height="5"><img src="spaziatore.gif" alt="" width="15" height="10">Meglio metterlo vuoto
  24. 24. 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>
  25. 25. CAPTCHA • Così è accessibile, ma è anche usabile?
  26. 26. Non usare solo il coloreE i link quali sono se non vedo i colori?http://it.wikipedia.org/wiki/Accessibilit%C3%A0_%28design%29
  27. 27. Contrasto • Cerchiamo di avere contrasti accessibili http://www.iamcal.com/toys/colors/
  28. 28. 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
  29. 29. Disabilitiamo Javascript?
  30. 30. Come navigo?!?!? href=”#”• Il menu dovrebbe essere utilizzabile lo stesso• Con HTML e CSS posso creare alternative nel caso non ci sia Js
  31. 31. 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 cloudell’incontro di basket Bologna­Roma</a>...altri risultati...</dd></dl></noscript>
  32. 32. Javascript quindi?• Conoscendolo lo si può rendere accessibile, quindi ci tocca aspettare...
  33. 33. Usare le giuste tecnologie• HTML• Css• Javascript
  34. 34. 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 Stancahttp://www.pubbliaccesso.gov.it/biblioteca/documentazione/studio_lineeguida/3_requisiti_tecnica.htm
  35. 35. ToolsMa purtroppo sono scomparsi
  36. 36. Tools [2]https://addons.mozilla.org/it/firefox/addon/accessibility-evaluation-toolb/
  37. 37. Bibliografia• Accessibilità Guida completa di Michele Diodatihttp://accessibile.diodati.org/agc/
  38. 38. Risorsehttp://webaccessibile.org/http://www.iwa.it/categorie/informazioni/
  39. 39. Domande Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×