Web usability - 2 | WebMaster & WebDesigner

280
-1

Published on

Seconda lezione modulo Web Usability del corso per WebMaster & WebDesigner

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

  • Be the first to like this

No Downloads
Views
Total Views
280
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web usability - 2 | WebMaster & WebDesigner

  1. 1. Web Usability [2]Matteo Magni
  2. 2. Jakob Nielsenhttp://it.wikipedia.org/wiki/Jakob_NielsenE considerato il gurudellusabilità. È unoscrittore, oratore econsulente. Ha undottorato in designdellinterfaccia utente einformatica delPolitecnico Danese. (wikipedia) http://www.useit.com/jakob/
  3. 3. Norman e Nielsen• Norman è uno psicologo mentre Nielsen è un ingegnere. Il secondo ha un approccio che predilige le funzionalità al design.• Per lui lusabilità è praticità e semplicità, quindi ogni volta che qualcuno non trova una informazione o non riesce a concludere un compito si sta scontrando con problemi di usabilità.
  4. 4. • Un sito Web è usabile quando soddisfa i bisogni informativi dellutente finale che lo sta visitando e interrogando, fornendogli facilità di accesso e navigabilità e consentendo un adeguato livello di comprensione dei contenuti. Nel caso non sia disponibile tutta linformazione, un buon sito demanda ad altre fonti informative. (Michele Visciola).
  5. 5. 10 regole di Nielsen• Dalle sue ricerche Nielsen fa emergere 10 principi per puntare ad una buona usabilità.
  6. 6. 1 - Visibility of system statusThe system should always keep usersinformed about what is going on, throughappropriate feedback within reasonabletime.
  7. 7. 2 - Match between system and the real worldThe system should speak the userslanguage, with words, phrases andconcepts familiar to the user, rather thansystem-oriented terms. Follow real-worldconventions, making information appear ina natural and logical order.
  8. 8. 3 - User control and freedomUsers often choose system functions bymistake and will need a clearly marked"emergency exit" to leave the unwantedstate without having to go through anextended dialogue. Support undo andredo.
  9. 9. 4 - Consistency and standardsUsers should not have to wonder whetherdifferent words, situations, or actionsmean the same thing. Follow platformconventions.
  10. 10. 5 - Error preventionEven better than good error messages is acareful design which prevents a problemfrom occurring in the first place. Eithereliminate error-prone conditions or checkfor them and present users with aconfirmation option before they commit tothe action.
  11. 11. 6 - Recognition rather than recallMinimize the users memory load bymaking objects, actions, and optionsvisible. The user should not have toremember information from one part of thedialogue to another. Instructions for use ofthe system should be visible or easilyretrievable whenever appropriate.
  12. 12. 7 - Flexibility and efficiency of useAccelerators -- unseen by the novice user-- may often speed up the interaction forthe expert user such that the system cancater to both inexperienced andexperienced users. Allow users to tailorfrequent actions.
  13. 13. 8 - Aesthetic and minimalist designDialogues should not contain informationwhich is irrelevant or rarely needed. Everyextra unit of information in a dialoguecompetes with the relevant units ofinformation and diminishes their relativevisibility.
  14. 14. 9 - Help users recognize, diagnose, and recover from errorsError messages should be expressed inplain language (no codes), preciselyindicate the problem, and constructivelysuggest a solution.
  15. 15. 10 - Help and documentation• Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the users task, list concrete steps to be carried out, and not be too large.
  16. 16. Quindi?Possiamo forse raggruppare tutto in trearee:• Orientamento e Navigazione• Prevenzione e gestione di errori• Coerenza interna, aderenza agli standard e ai vincoli del web http://www.usabile.it/082001.htm
  17. 17. Orientamento e NavigazioneRendere cioè disponibili e comprensibili tutti quegli strumenti che consentonoallutente di capire immediatamente dove si trova, da dove è venuto e dove puòandare allinterno del sito web.E necessario presentare in maniera chiara e con nomi comprensibili le sezionidel sito, lindicazione del percorso delle pagine interne, usando nomi significativied evitando di usare metafore poco chiare per lutente. Bisognerebbe inoltrestrutturare linformazione seguendo il tipo di conoscenza dellutente, più che ilproprio, e assegnare la massima libertà di esplorazione e movimento allutente,con chiare indicazioni di come tornare indietro e alla pagina principale. http://www.usabile.it/082001.htm
  18. 18. Prevenzione e Gestione di errorisenza allarmismi e con linguaggio comune. Gli errori dovrebbero prima di tuttoessere prevenuti, ci dice Nielsen, ma se ciò non fosse possibile, sarebbe necessariooffrire allutente la possibilità di tornare sempre indietro, e dovremmo semprespiegare cosa sta succedendo, con un linguaggio semplice e chiaro, evitando imessaggi tecnici del server. Ciò diventa particolarmente cruciale in caso di linkmancanti, di inserimento di dati nei form, di procedure dacquisto e di registrazione aservizi online, e coinvolge in prima istanza lo staff tecnico che si occupa del sito, maanche il progettista: le gestioni degli errori vanno comunicate con un linguaggio il piùpossibile vicino allutente finale. http://www.usabile.it/082001.htm
  19. 19. Coerenza interna, aderenza agli standard e ai vincoli del webIl che significa soprattutto definire uno stile omogenero per lintero sito, non disorientare il lettore concambi di carattere tipografico, dimensioni, colori e layout senza un motivo che sia prima di tuttosemantico. Come ribadisce anche Sofia Postai nel suo libro, i cambiamenti di forma dovrebberosempre corrispondere a cambiamenti logici, di contenuto.Per quanto riguarda laderenza agli standard, io non mi soffermerei troppo sul colore del link, quantosul fatto che effettivamente si capisca che quello è un link e una barra dei menu.I vincoli sono soprattutto quelli legati alla dimensione e al formato della grafica e delle pagine html,della loro compatibilità allindietro e dalla possibilità di essere fruite senza grossi problemi dal maggiornumero possibile di dispositivi. http://www.usabile.it/082001.htm
  20. 20. Test Usabilità• Testare il proprio sito con utenti reali serve a valutare lusabilità di un sito internet in collaborazione con chi sta eseguendo il test•
  21. 21. Protagonisti• Utenti• Esperti di usabilità• Progettisti/sviluppa tori
  22. 22. Obiettivi• Valutazione generale dellapplicazione• Valutazione di elementi specifici: Menù, carrello, ecc..
  23. 23. Metodo [1]Basato sul compito: Esempio:• Si danno allutente dei • Ricercare un compiti specifici per contenuto valutare il suo grado di soddisfazione/frustrazio • Eseguire un acquisto ne nelleseguirli. • Registrarsi al sito • Inviare una mail di contatto • ecc...
  24. 24. Metodo [2]Basato sullo scenario: • Permette di capire• Si stabiliscono degli scenari duso per vedere lo se ci sono scostamento tra il layout eventuali carenze proposto dal sito e il modello dellutente (la sequenza con informative nel cui lutente consegue modello del layout lobiettivo nel minor tempo e proposto. costo possibile).
  25. 25. Il test• Durante lo svolgimento dei compiti lutilizzatore deve cercare di esprimere i suoi pensieri ad alta voce
  26. 26. Il test [2]• Losservatore si occuperà si segnare come evolve la situazione dellutente nello svolgimento dei vari compiti .
  27. 27. Analisi dei dati• I riscontri ottenuti dal test vanno riportati e studiati per poi tradurli in modifiche per lapplicazione web.
  28. 28. Facciamo dei Test? • sosacroniro.it • sosacroniro.com • ....
  29. 29. Domande Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×