Dal wireframe alla pubblicazione: sviluppo usabile di un sitoDi 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

sitoCapire quali sono le loro esigenzeConoscere 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’informazioneUn processo in continuo movimento

La ricercaLa comprensione come base per lo sviluppo

La ricerca

La parola chiave di questa fase è:

“comprensione”. Comprensione di cosa?

Quali persone gestiranno il sitoQuale è il target al quale si punta Esiste già un sito?Quale è il budget per il progetto?Ecc..

La ricercaUn 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 keywordInterviste con i clienti attuali e potenzialiTest 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 strategiaLa 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 designEntrare 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:

ContenutiMetadatiMotori di ricerca

Come li creiamo?

Attraverso le statisticheAnalizzando i contenutiStudiando la concorrenza

Vocabolari controllati

Il design

Ipotesi:

sito x, due fasce di utenza principale:

TecnicaGeneralista

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 linkEtichette come titoliEtichette come iconeEtichette 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 contestoEssere 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:

GerarchicaClassica navigazione web, tassonomica

FaccetteNavigazione 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 designSistema profondo o superficiale?

Il design

Le faccette possono essere divise:

Per argomentoProdottoTipo di documentoUtenzaGeografiaPrezzoEcc..

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 designDiagramma dell’uso del sito

Steve Krug

Il designDiagramma 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 designFedeltà 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

ImplementazioneDal 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!

RilascioPubblicazione del sito e misurazione UX

RilascioFine?

Rilascio

FeedbackOvvero raccogliere informazioni direttamenti dagli utenti su

come migliorare il sito

SondaggiChiedere agli utenti se un servizio funziona o meno

Controllo statisticheUtile soprattutto per le etichette e i vocabolari controllati

Test utentiQuale occasione migliore per testare il sito se non quando è online e funzionante?

HeatmapMappe di calore, per vedere quali aree del sito sono da migliorare

Misurazione UX

RilascioHeatmap

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 Olivettiinfo@marcolivetti.com

www.marcolivetti.com