web usability - 4 | webmaster & webdesigner

of 40/40
Web Usability [4] Matteo Magni

Post on 11-Nov-2014

392 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Quarta lezione modulo Web Usability del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. Web Usability [4]Matteo Magni
  • 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. Nielsen Lusabilit 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 lutente non riesce o non vuole usare una data funzionalit di un oggetto o di un programma, quella funzionalit potrebbe tranquillamente non esserci. (Nielsen)
  • 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. Accessibilit La propriet di un contenuto web, di uno strumento autoriale o di un programma utente di essere accessibile oppure, a seconda del contesto, linsieme di linee guida, raccomandazioni, suggerimenti, tecniche, per produrre contenuti accessibili, strumenti autoriali accessibili, programmi utente accessibili. (Diodati)
  • 6. Tim Berners-Leeun sito accessibile un sito pi usabile per tutti
  • 7. wcaghttp://www.w3.org/TR/WCAG10/Web ContentAccessibilityGuidelines 1.0
  • 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 sullaccessibilit 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 dellapprendimento. i sordociechi; gli ipovedenti;
  • 9. Ma parliamo solo di disabilit permanenti?
  • 10. molti utenti possonotrovarsi a operare incontesti moltodifferenti dal proprio
  • 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. 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, ludito 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. Errori comuni
  • 14. Se non ho le immagini? Disabilito le immagini con la web developer toolbar di firefox
  • 15. Errori comuni menu immagini
  • 16. Browser testuale
  • 17. Richiesto plugin silverlight
  • 18. E se non lo so installare? E se non si installa? E se non ho i permessi per installarlo?
  • 19. iFrame Gli iframe non hanno titoli significativi
  • 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. AlternativaUna della parole chiavi per laccessibilit sicuramente la parola alternativa
  • 22. WCAG 1.0, linea guida 1. Fornire contenutiche, quando presentati allutente, svolgonoessenzialmente la stessa funzione o scopo dei contenuti uditivi o visivi.
  • 23. Immagini attributo altLo abbiamo gi visto, ma nei casi di immaginidecorative?Meglio metterlo vuoto
  • 24. e i CSS?ul{liststyleimage:url("bullet.jpg")}......
    • Primopuntoelenco.
    • Secondopuntoelenco.
    • Terzopuntoelenco.
  • 25. CAPTCHA Cos accessibile, ma anche usabile?
  • 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. Contrasto Cerchiamo di avere contrasti accessibili http://www.iamcal.com/toys/colors/
  • 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. Disabilitiamo Javascript?
  • 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. noscript

    Irisultatidellegarediieri:

    Bologna91,Roma80.ImomenticloudellincontrodibasketBolognaRoma...altririsultati...
  • 32. Javascript quindi? Conoscendolo lo si pu rendere accessibile, quindi ci tocca aspettare...
  • 33. Usare le giuste tecnologie HTML Css Javascript
  • 34. In Italia?http://www.pubbliaccesso.gov.it/normative/legge_20040109_n4.htm Legge 4 gennaio 2004, n. 4, Disposizioni per favorire laccesso dei soggetti disabili agli strumenti informatici, nota come Legge Stanca dallallora ministro proponente, Lucio Stancahttp://www.pubbliaccesso.gov.it/biblioteca/documentazione/studio_lineeguida/3_requisiti_tecnica.htm
  • 35. ToolsMa purtroppo sono scomparsi
  • 36. Tools [2]https://addons.mozilla.org/it/firefox/addon/accessibility-evaluation-toolb/
  • 37. Bibliografia Accessibilit Guida completa di Michele Diodatihttp://accessibile.diodati.org/agc/
  • 38. Risorsehttp://webaccessibile.org/http://www.iwa.it/categorie/informazioni/
  • 39. Domande Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: [email protected]