1. Progettare un sito Web per gli Utenti

4. Branding Usabilità UserExperience Funzionalità Contenuti

5. Branding

6. Colori Immagini Tagline I dettagli fanno la differenza http://www.smashingmagazine.com/2010/10/28/billboard-web-design-how-to-win-your-audience-s-attention/

7. I colori http://www.informationisbeautiful.net/visualizations/colours-in-cultures/

8. L’alfabeto dei colori http://is.gd/c7pVj9 Gallery di ispirazione CSSLine( http://cssline.com ) Design Bombs( http://www.designbombs.com ) Design Shack( http://designshack.co.uk/gallery ) Color Scheme Designer http://colorschemedesigner.com/

9. Allegria Estroversione Vivacità

10. Stabilità Affidabilità Fiducia

11. Calore Eleganza

12. Immagini come sfondo Slideshow Le immagini

13. http://css-tricks.com/perfect-full-page-background-image/ http://speckyboy.com/2010/03/25/50-examples-of-large-photography-backgrounds-within-web-design/ Le immagini come sfondo

14. Utilizzi comuni Portfolio Slide di informazioni Featured Post Caratteristiche Fornire controlli (thumb, numeri o pulsanti) Posizione pulsanti Automatico e manuale Buone transizioni Slideshow

15. Le tagline - http://www.tvlcorp.com/

16. Le tagline - http://www.dba-co.com/

17. I menu I form Footer Search Box I dettagli fanno la differenza

18. http://epicagency.net/ http://www.loodo.com.br/ http://acko.net/ I dettagli fanno la differenza – I menu

19. http://epicagency.net/ I dettagli fanno la differenza – I form

20. http://www.branded07.com/ http://www.davidhellmann.com/ I dettagli fanno la differenza – Il footer

21. http://blog.torondel.net/ http://www.carbonica.org/ http://www.matblogg.se/ I dettagli fanno la differenza – Search Box

22. Usabilità

23. 1. Utilità 2. Facilità di apprendimento 3. Facilità di ricordo 4. Quantità di errori 5. Soddisfazione Usabilità - Definizione

24. Usertesting Valutazione soggettiva Valutazione euristica Usabilità – Come testarla

25. Pianificazione test: obiettivi, scenari, protocollo, interviste 1-2 sperimentatori, 5 utenti della stessa categoria, campione dell’audience Reclutamento utenti: intervista preliminare Un utente alla volta, per non più di 1 ora Svolgimento dell’esperimento: 1. briefing iniziale 2. descrizione di uno scenario 3. svolgimento mediante thinkaloud 4. debriefing finale: intervista Analisi dei risultati UserTesting – Le fasi

26. Impatto sull’utente e frequenza con cui si manifesta Problema minore La presenza di questa barriera viene notata dall’utente ma ci sono facili modi per aggirarla od evitarla se la si riconosce o ricorda; essa incide sulla produttività e sulla soddisfazione; non incide sull’efficacia né sulla sicurezza. Problema importante La barriera viene notata ed essa ha una grossa influenza nel modo di proseguire il compito da parte dell’utente. Essa incide pesantemente sulla produttività e sulla soddisfazione. Può incidere anche sull’efficacia e sulla sicurezza, rendendo difficile, faticoso e/o rischioso il proseguimento del compito; è facile che l’utente compia degli errori. Spesso non è facile trovare delle vie alternative per ottenere lo scopo. Problema critico Si tratta di una barriera che porta molti utenti a rinunciare al raggiungimento dello scopo: gli errori possono essere molti e con gravi conseguenze, vie alternative non esistono. L’impatto negativo su efficacia e sicurezza è elevato; è ancora più elevato su produttività e soddisfazione. UserTesting – Livelli di gravità

27. UserTesting – Calcolo della gravità

28. Utenti coinvolti UserTesting – Esempio di test: Museo Egizio di Torino

29. Scenario Descrizione: Sei un appassionato di fotografia e vuoi visitare il Museo Egizio di Torino. Il tuo obiettivo è quello di richiedere informazioni, tramite mail, all'archivio iconografico del Museo. Livello di difficoltà: Facile Tempo previsto: 1.15 min Pagina di partenza: Homepage Pagina di arrivo: Contattaci Percorso previsto: selezionare il link Chi siamo / Contatti selezionare il link Contattaci, nei link a sinistra della pagina Criteri di successo: L'utente deve ottenere quello specifico indirizzo mail (archivio iconografico) e non un altro qualsiasi. UserTesting – Esempio di scenario: Museo Egizio di Torino

31. Dopo aver scorso la pagina, trova la mail giusta.Commenti sul caso d'uso 1 Associa ICONOGRAFICO con PHOTOGALLERY e quindi guarda prima sul link "News e Photogallery". UserTesting – Esempio di scenario: Museo Egizio di Torino

32. Problemi riscontrati Gravità del problema: associazione della parola "iconografico" con "photogallery" Gravità del problema: link a sinistra poco visibili Gravità del problema: link mail di colore blu UserTesting – Esempio di scenario: Museo Egizio di Torino

34. non deve essere supervisionato; può essere remoto

35. permette di esaminare varie parti di un sito

37. non permette di capire quali sono le cause di ev. problemi

38. certi problemi non li evidenzia

39. quasi le stesse difficoltà dello UT riguardo agli utentiValutazione soggettiva autonoma

41. l’esigenza informativa o l’obiettivo

42. la situazione operativa in cui si trova

43. la descrizione di uno scopo di un possibile utente (punto di partenza, punti di arrivo) Linee guida http://www.stcsig.org/usability/topics/articles/he-checklist.html 1. ciascun valutatore (da solo) analizza la pagina rispetto a tutte le linee guida 2. produce la lista delle violazioni, spiegando perché è una violazione (indicando le linee guida che sono soddisfatte e quelle che non si applicano) 3. e associa a ciascuna violazione una gravità Valutazione euristica

44. Tempi di caricamento Compatibilità Pagine 404 Funzionalità

45. Installare pagespeed (plugin di Firefox), dopo aver installato firebug Comprimere le immagini Comprimere javascript e css: http://javascriptcompressor.com http://csscompressor.com Limitare richieste HTTP: CSS tutto in un file, CSS Sprites http://css-tricks.com/css-sprites/ Scegliere con cura l’hosting Tempi di caricamento

46. IE6 SI, IE6 NO? Thisis the question Reset CSS http://meyerweb.com/eric/tools/css/reset/ IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage Browserlab https://browserlab.adobe.com Compatibilità - Browser

47. Testo introduttivo che spieghi cosa è successo e che non è colpa del visitatore Una serie di istruzioni su come procedere per continuare a visitare il blog Un link alla homepage Una casella di ricerca o un’indicazione su dove trovarla Pagine 404 – Linee guida

48. Contenuti

49. Controllare sintassi e grammatica Rendere il testo "percorribile con lo sguardo" Separare il testo Allineamento del testo Ampiezza delle righe Non esagerare con lo scrolling e tenere il testo ridotto Colori per il testo Scrivere per tutti Caratteri Evitare le parole scritte in maiuscolo Tenere i testi aggiornati Contenuti – I testi

50. Federico Pian E mail: federico.pian@gmail.com Web Site: www.fedeweb.net Account Manager Web Designer Freelance Insegnante