Dal Wireframe alla pubblicazione: sviluppo usabile di un sito

Dal wireframe alla pubblicazione: sviluppo usabile di un sito
Di Marco Olivetti

Premessa
Per poter creare un sito usabile (dove usabile ha significato anche di fruibile ) bisogna conoscere alcune cose come: Il modo in cui gli utenti usufruiscono del
sito
Capire quali sono le loro esigenze Conoscere gli obiettivi del sito

Architettura dell’informazione L’architettura dell’informazione assolve questo compito, cercando di creare un prodotto accessibile studiando il miglior modo per far coincidere i bisogni degli utenti con gli obiettivi aziendali Definizione: […] è la struttura organizzativa logica e semantica delle informazioni, dei contenuti, dei processi e delle funzionalità di un sistema o un'applicazione informatica. Wikipedia. Cosa è e che cosa fa?

Architettura dell’informazione Crea un prodotto accessibile, usabile, fruibile Gli utenti che navigheranno il sito non si troveranno spaesati e saranno guidati man mano nella navigazione. Il sistema rende di facile accesso tutte le informazioni di cui si può aver bisogno e fa guadagnare credibilità e fiducia al sistema sito/azienda. Crea prodotti adatti alle vere esigenze delle aziende Le aziende hanno strumenti molto potenti nelle loro mani che possono efficacemente trasmettere il loro modello di organizzazione sul web senza problemi o traumi. Perché è così importante?

Architettura dell’informazione Un processo in continuo movimento

La ricerca La comprensione come base per lo sviluppo

La ricerca La parola chiave di questa fase è: “ comprensione ”. Comprensione di cosa? Quali persone gestiranno il sito Quale è il target al quale si punta Esiste già un sito? Quale è il budget per il progetto? Ecc..

La ricerca Un approccio bilanciato

La ricerca Controllare attraverso le statistiche quali sono le pagine più cercate e perchè Scoprire quali sono i termini più utilizzati dagli utenti per poterli usare poi nella creazione dei vocabolari controllati. Tramite heatmap controllare quali sono i punti maggiormente cliccati e visualizzati del sito per scoprire e risolvere problemi Esiste già un sito web?

La ricerca
Analizzare le keyword
Interviste con i clienti attuali e potenziali
Test utenti
Le aziende non conoscono i loro utenti

La ricerca Nell’analisi del sito potrebbero scoprire cose che sfuggono alla nostra osservazione. Ci fanno capire cosa piace e cosa non piace alle persone che navigano quel sito, e cosa vogliono o vorrebbero che facesse per loro. Fanno capire ai capi delle aziende l’importanza del processo di architettura dell’informazione. I test utenti nella ricerca

La strategia La cornice per strutturare e organizzare il sito

La strategia La strategia è il momento in cui ci si da una direzione per procedere in maniera coerente attraverso la progettazione. Muoversi nella direzione giusta

La strategia Dobbiamo definire gli obiettivi del sito e la direzione da prendere perché si realizzino. Queste scelte guideranno il processo fino all’implementazione, ovvero alla creazione fisica del sito web. Come muoversi

Il design Entrare nel vivo dell’azione

Il design Design = Progettazione Una premessa…

Il design Il design è il momento del processo di creazione di un sito dove possiamo iniziare a sfogare la nostra creatività. Se ci basiamo su quanto fatto finora il design non dovrebbe essere una fase di istinto e supposizioni, ma di mettere in pratica tutto ciò che si è appreso fino a questo momento . Processo creativo

Il design I vocabolari controllati sono elenchi di parole che verranno usati sia per definire le etichette e i metadati del sito, che nel contenuto. Questi vocabolari servono per dare coerenza al sito attraverso: Contenuti Metadati Motori di ricerca Come li creiamo? Attraverso le statistiche Analizzando i contenuti Studiando la concorrenza Vocabolari controllati

Il design Ipotesi : sito x, due fasce di utenza principale: Tecnica Generalista Soluzioni : Creare un vocabolario bianciato per entrambe le categorie Creare due vocabolari specifici per ogni categoria Vocabolari controllati: quanti?

Il design I vocabolari controllati servono molto durante la progettazione di motori di ricerca interni al nostro sito. Ad esempio un mdr interno potrebbe considerare “micro onde” e “microonde” come parole diverse e fornire quindi risultati diversi. I vocabolari controllati intervengono classificando le due parole come sinonimi e facendo restituire al sistema risultati identici per entrambe le query. Vocabolari controllati: motori di ricerca

Il design Le etichette sono tutte le intestazioni , voci di menù e i link del sito. Il sito che parla, le etichette

Il design Nella creazione delle etichette dovremmo porci diverse domande: La parole o le parole che ho scelto sono chiare per tutti (o quantomeno la maggior parte dei miei utenti)? Se non sono chiare, perché? Sono previste delle spiegazioni per aa queste etichette? Le etichette sono coerenti in tutto il sito oppure diverse pagine usano diversi sistemi di etichettatura? Perché non sono standardizzate? Domande da farsi sulle etichette

Il design Generalmente categorizziamo 4 categorie di etichette: Etichette come link Etichette come titoli Etichette come icone Etichette come menù Forme di etichette

Il design Le etichette usate come link nei contenuti , ovviamente diverse da quelle usate nei menù, sono tutti i link che sono presenti nel contenuto di una pagina. I link devono: Basarsi sul contesto Essere esplicativi Etichette come link

Il design Le etichette usate come titoli sono tutte quelle etichette che rappresentano intestazioni e blocchi di testo. Si definiscono etichette gerarchiche, poiché partono da grandi e importanti fino ad arrivare a piccole e poco rilevanti. Etichette come titoli

Il design Le etichette usate come menù di navigazione sono tutte quelle etichette che rappresentano link di sezioni e pagine non nel contenuto. Le etichette usate come menù dovrebbero essere uguali in tutte le pagine, e quelle principali raggruppate sempre nello stesso posto. Etichette come menu di navigazione

Il design Le etichette grafiche sono quelle che invece del testo vengono rappresentate da immagini. Vanno usate solo nel caso la convenzione sia nota a tutti (home > homepage | mail/@ > contatti). Se mal interpretate generano frustrazione e portano più facilmente l’utente ad abbandonare il sito. Etichette come icone grafiche

Il design I personaggi sono modelli di utente , con un loro background. Possono basarsi su persone reali , descrivere particolari categorie di utenti, oppure essere completamente inventati. I personaggi ci permettono di prendere le giuste decisioni di design . Stiamo progettando per i nostri utenti, non per noi stessi. Personaggi

Il design Mario Bianchi Possiede una piccola attività e ha una mentalità non portata alle nuove tecnologie. La sua azienda conta 6 dipendenti. Non naviga moltissimo su internet, a malapena sa come cercare una cosa su google e puntualmente scrive query chilometriche, e spesso salta il primo risultato per il secondo o il terzo se li ritiene più soddisfacenti. Clicca sugli annunci a pagamento purchè siano in prima posizione e appaganti. Esempio di personaggio

Il design Gli scenari invece sono dei modelli di comportamento, delle situazioni in cui gli utenti si possono venire a trovare visitando il sito che stiamo progettando. Mario sta cercando di comprare un gioco per sua nipote, e non conoscendo la terminologia di internet è un po’ confuso da tutte le icone colorate, sta solo cercando qualcosa che gli possa fornire rapidamente le informazioni che cerca. Scenari

Il design Mario vuole comprare un gioco per bambine. Mario vuole sapere che tipo di gioco andrà a comprare (descrizione, ecc) Mario ha bisogno di essere guidato nella scelta, ovvero cerca di capire se c'è una sezione dedicata ai giochi per bambine, non conosce le categorie dei giochi (logica a faccette). Mario ha bisogno di essere rassicurato su ogni passaggio, e non bisogna nascondergli nulla. Non ha intenzione di registrarsi al sito, e probabilmente non comprerà più sul sito o su internet in generale. Requisiti di scenario

Il design Basandoci sul lavoro dei vocabolari ed etichette, andiamo a creare tutto il sistema di navigazione del sito. Distinguiamo due categorie: Gerarchica Classica navigazione web, tassonomica Faccette Navigazione per argomento, aree di interesse... La navigazione

Il design È utile, data spesso la complessità dei siti, utilizzare diversi modi per raggiungere la stessa informazione (linkare due volte in maniera e categoria differente la stessa pagina). Quando creiamo un sistema gerarchico (fondamentale in ogni sito) dobbiamo considerare se creare un sistema profondo oppure superficiale . La navigazione gerarchica

Il design Sistema profondo o superficiale?

Il design Le faccette possono essere divise: Per argomento Prodotto Tipo di documento Utenza Geografia Prezzo Ecc.. La navigazione a faccette

Il design Le faccette vanno utilizzate quando abbiamo la necessità che gli utenti scorrano il contenuto in maniere diverse , saltando vari livelli di navigazione e anche la nostra impostazione. Quando usare le faccette

Il design Dopo che abbiamo creato le nostre categorie, andiamo a creare i diagrammi che mostrano le relazioni che le pagine hanno tra di loro. Ma questi diagrammi non mostrano solo le pagine, mostrano anche e soprattutto i percorsi degli utenti attraverso il sito. Possiamo creare quindi diagrammi che spiegheranno come usare un particolare servizio del sito, e fornire quindi diverse soluzioni al suo utilizzo. Diagrammi

Il design Diagramma dell’uso del sito Steve Krug

Il design Diagramma di un sito con relazioni di pagine Marco Olivetti

Il design Gli schemi vanno fatti vedere al cliente, perché può portare delle nuove idee e un nuovo modo di vedere le cose a cui voi non avreste pensato. Sono anche utili per determinare dei punti fissi nel progetto, da far approvare al cliente. Far vedere gli schemi al cliente

Il design A questo punto è utile per testare idee o quello che avete fatto finora (come il sistema di navigazione) piuttosto che l’intero sito. I prototipi non sono wireframes , non rappresentano il sito, ma vi aiutano a vedere come l’ai interagisce nel contesto della pagina. Vi aiutano a vedere come gli utenti usano i vostri modelli, e se sono corretti. Testare le idee

Il design I wireframe sono delle bozze che dispongono il contenuto e le funzioni del sito per blocchi. I wireframe ci indicano come vestire un sito , ovvero come e dove posizionare tutti gli elementi (grafici e non) nel sito vero e proprio. I wireframe

Il design Fedeltà dei wireframe

Il design Sono molto importanti per il sito perché per la prima volta abbiamo una struttura legata all'architettura dell'informazione, è la prima volta che vediamo il sito vero , dal vivo. L’importanza dei wireframe

Il design I contenuti sono tutti i file multimediali (video, immagini, ecc..) e non (testi). In questo momento andiamo a creare i contenuti e correlarli secondo le pagine. I contenuti possono presentare problemi di accessibilità nella misura in cui non utilizziamo il linguaggio del nostro pubblico. I contenuti

Implementazione Dal design alla grafica

Implementazione Adesso è arrivato il momento di parlare della grafica. Anche in questa fase però non dobbiamo abbassare la guardia, gli errori possono esserci sempre. Colori HTML/CSS Programmazione Grafica!

Rilascio Pubblicazione del sito e misurazione UX

Rilascio Fine?

Rilascio Feedback Ovvero raccogliere informazioni direttamenti dagli utenti su come migliorare il sito Sondaggi Chiedere agli utenti se un servizio funziona o meno Controllo statistiche Utile soprattutto per le etichette e i vocabolari controllati Test utenti Quale occasione migliore per testare il sito se non quando è online e funzionante? Heatmap Mappe di calore, per vedere quali aree del sito sono da migliorare Misurazione UX

Rilascio Heatmap http://usableworld.com.au

Risultati test d’usabilità 10 domande su ia, accessibilità e usabilità

Risultati test d’usabilità Quanto conta per te l’usabilità in un progetto?

Risultati test d’usabilità Quali metodi utilizzi per creare un sito?

Risultati test d’usabilità Usi i wireframe durante lo sviluppo del sito?

Risultati test d’usabilità Usi personaggi e scenari durante la creazione di un sito

Risultati test d’usabilità Quando inserisci i testi

Risultati test d’usabilità Controlli mai le statistiche durante il redesign di un sito?

Risultati test d’usabilità Fai mai test con gli utenti nel progettare un sito?

Risultati test d’usabilità Misuri mai l’user experience (UX) in un sito dopo averlo pubblicato?

Risultati test d’usabilità Quanto conta per te l’accessibilità

Risultati test d’usabilità Conosci e rispetti le varie leggi e guidelines per l’accessibiità che ci sono?

FINE Marco Olivetti [email_address] www.marcolivetti.com

http://www.marcolivetti.com	137
http://www.italianwebdesign.it	64
http://www.slideshare.net	13
http://www.pentagono.it	2
http://onwebdev.blogspot.com	2

Dal Wireframe alla pubblicazione: sviluppo usabile di un sito

by Cultura Senza Barriere on Feb 17, 2010

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 218

Statistics

Dal Wireframe alla pubblicazione: sviluppo usabile di un sito — Presentation Transcript