Post on 05-Dec-2014
description
Progettare un sito Web per gli Utenti
User Experience
Funzionalità Contenuti
UsabilitàBranding
Branding
Colori
Immagini
I dettagli fanno la differenza
http://www.smashingmagazine.com/2010/10/28/billboard-web-design-how-to-win-your-audience-s-attention/
Tagline
http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
I colori
L’alfabeto dei colorihttp://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/
Allegria
Estroversione
Vivacità
Stabilità
Affidabilità
Fiducia
Calore
Eleganza
Le immagini
Immagini come sfondo
Slideshow
Le immagini come sfondo
http://css-tricks.com/perfect-full-page-background-image/
http://speckyboy.com/2010/03/25/50-examples-of-large-photography-backgrounds-within-web-design/
Fornire controlli (thumb, numeri o pulsanti)
Slideshow
Utilizzi comuni
Portfolio
Featured Post
Slide di informazioni
Caratteristiche
Posizione pulsanti
Automatico e manuale
Buone transizioni
I dettagli fanno la differenza
I menu
I form
Search Box
Footer
I dettagli fanno la differenza – I menu
http://epicagency.net/
http://www.loodo.com.br/
http://acko.net/
http://www.branded07.com/
I dettagli fanno la differenza – Il footer
http://www.davidhellmann.com/
I dettagli fanno la differenza – Search Box
http://blog.torondel.net/
http://www.carbonica.org/
http://www.matblogg.se/
Usabilità
5. Soddisfazione
Usabilità - Definizione
1. Utilità
2. Facilità di apprendimento
3. Facilità di ricordo
4. Quantità di errori
Usabilità – Come testarla
User testing
Valutazione soggettiva
Valutazione euristica
User Testing – Le fasi
Analisi dei risultati
Pianificazione test: obiettivi, scenari, protocollo, interviste
1-2 sperimentatori, 5 utenti della stessa categoria, campione dell’audienceReclutamento utenti: intervista preliminareUn utente alla volta, per non più di 1 oraSvolgimento dell’esperimento:
1. briefing iniziale
2. descrizione di uno scenario
3. svolgimento mediante think aloud
4. debriefing finale: intervista
User Testing – Livelli di gravità
Problema minoreLa 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 importanteLa 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.
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.
Problema critico
Impatto sull’utente e frequenza con cui si manifesta
Impatto Frequenza Gravità
1 1 Minore
1 2 Minore
1 3 Serio
2 1 Importante
2 2 Critico
2 3 Critico
3 1 Critico
3 2 Critico
3 3 Critico
User Testing – Calcolo della gravità
User Testing – Esempio di test: Museo Egizio di Torino
Utente Età Sesso Professione
Ore settimanali dedicate ad internet per STUDIO / LAVORO
Ore settimanali dedicate ad internet per SVAGO
Livello conoscenze informatiche
Ha già visitato il sito del Museo Egizio
A 22 M studente tra 3 e 5 tra 5 e 7 alto no
B 21 F studentessa tra 3 e 5 tra 3 e 5 medio no
C 21 M studente tra 5 e 7 tra 5 e 7 medio noD 53 M insegnante più di 7 tra 3 e 5 medio noE 27 M impiegato più di 7 più di 7 basso no
Utenti coinvolti
Scenario
User Testing – Esempio di scenario: Museo Egizio di Torino
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à: FacileTempo previsto: 1.15 minPagina di partenza: HomepagePagina di arrivo: ContattaciPercorso previsto: selezionare il link Chi siamo / Contattiselezionare il link Contattaci, nei link a sinistra della paginaCriteri di successo: L'utente deve ottenere quello specifico indirizzo mail (archivio iconografico) e non un altro qualsiasi.
User Testing – Esempio di scenario: Museo Egizio di Torino
Risultati – Utente A
Esito: NegativoTempo impiegato: 1:55 minPercorso eseguito: • Guarda il link "News e Photogallery", ma dovendo cercare informazioni non pensa che siano qui.• Clicca su "Orari e Visite" e scansionando la pagina non trova la mail giusta; clicca anche su "Informazioni Turistiche", ma non trova nulla.• Si accorge, scorrendo i link orizzontali in alto, di "Chi siamo / contatti" e clicca sul link.• 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".
Gravità del problema: associazione della parola "iconografico" con "photogallery"Impatto Frequenza Gravità1 2 minore
Gravità del problema: link a sinistra poco visibili
Impatto Frequenza Gravità3 2 critico
Gravità del problema: link mail di colore bluImpatto Frequenza Gravità1 1 minore
User Testing – Esempio di scenario: Museo Egizio di Torino
Problemi riscontrati
Valutazione soggettiva autonoma
Utenti usano il sito per conto loro e poi ci dicono cosa hanno trovato di strano o inaccessibilePro:• metodo semplice e con poche esigenze• non deve essere supervisionato; può essere remoto• permette di esaminare varie parti di un sito• la motivazione dell’utente può essere genuinaContro (rispetto a user testing):• non è sistematico nelle pagine esaminate né nel modo di identificare i problemi• non permette di capire quali sono le cause di ev. problemi• certi problemi non li evidenzia• quasi le stesse difficoltà dello UT riguardo agli utenti
Valutazione euristica
Uno scenario deve:• indicare il tipo di utente• l’esigenza informativa o l’obiettivo • la situazione operativa in cui si trova• la descrizione di uno scopo di un possibile utente (punto di partenza, punti di arrivo)
Procedimento
2-3 valutatori analizzano una parte di un sito, immaginando di essere utenti in determinati scenari, secondo delle linee guida
http://www.stcsig.org/usability/topics/articles/he-checklist.htmlLinee guida
1. ciascun valutatore (da solo) analizza la pagina rispetto a tutte le linee guida2. 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à
Funzionalità
Tempi di caricamento
Compatibilità
Pagine 404
Tempi di caricamento
Installare page speed (plugin di Firefox), dopo aver installato firebug
Comprimere le immagini
Comprimere javascript e css:http://javascriptcompressor.comhttp://csscompressor.com
Limitare richieste HTTP: CSS tutto in un file, CSS Sprites
Scegliere con cura l’hosting
http://css-tricks.com/css-sprites/
Compatibilità - Browser
IE6 SI, IE6 NO? This is the question
Reset CSS
IE Tester
Browserlab
http://meyerweb.com/eric/tools/css/reset/
http://www.my-debugbar.com/wiki/IETester/HomePage
https://browserlab.adobe.com
Pagine 404 – Linee guida
Una casella di ricerca o un’indicazione su dove trovarla
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
Contenuti
Contenuti – I testi
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
Federico Pian
E mail: federico.pian@gmail.com
Web Site: www.fedeweb.net
Account Manager
Web Designer Freelance
Insegnante