Architettura delle informazioni del sito Web: come ottimizzare per UX

Che tipo di contenuti dovresti avere sul tuo sito? Come dovresti strutturare il menu? Quali dovrebbero essere le voci del menu di primo livello? Uno o due menu? Come dovrebbero essere chiamati i collegamenti del menu? Questo post ti dà delle risposte.

L'architettura delle informazioni del sito non è uno scherzo, tuttavia la stragrande maggioranza delle aziende struttura il proprio sito usando il metodo IMO ("Secondo me …"). Mentre il buon senso è uno strumento utile e molti siti sono semplici (ad esempio 5 pagine), c'è un modo migliore per farlo.

Se hai già decine di pagine sul tuo sito, dovresti fare una corretta analisi dell'architettura delle informazioni. Guidare le persone attraverso la grande quantità di informazioni in offerta è qualcosa che richiede pensiero e ricerca. La navigazione intuitiva non avviene per caso.

Peep Laja e Brian Massey discutono dell'ottimizzazione della navigazione principale del tuo sito web.

Cos'è l'architettura dell'informazione?

Come per Wikipedia, è "l'arte e la scienza di organizzare e etichettare dati tra cui siti Web, intranet, comunità online, software, libri e altri mezzi di informazione, per supportare l'usabilità." Potremmo semplificarlo a "l'arte e la scienza di organizzare i siti web. "(In questo articolo, ne stiamo parlando solo nel contesto dei siti Web.)

I guru dell'architettura dell'informazione Louis Rosenfeld e Peter Morville (dovresti leggere il loro libro) hanno definito i "tre cerchi dell'architettura dell'informazione" come contenuto, utenti e contesto di utilizzo:

Si tratta di organizzare il contenuto e il flusso di un sito web basato sulla ricerca e la pianificazione. L'obiettivo degli architetti dell'informazione è quello di creare una struttura e un design che bilancia i desideri degli utenti con le esigenze aziendali.

Gli utenti hanno quattro domande fondamentali quando arrivano su un sito web:

1. Sono nel posto giusto?
2. Hanno quello che sto cercando?
3. Hanno qualcosa di meglio (se questo non è quello che voglio)?
4. Cosa faccio ora?

Uno dei tuoi compiti principali è rispondere efficacemente a queste domande su ogni pagina del tuo sito. Per fare ciò, devi:

• Assicurare ai visitatori che si trovano nel posto giusto (chiarire sempre dove si trovano).
• Rendi più facile per i visitatori trovare ciò che stanno cercando (navigazione chiara, ricerca, ecc.).
• Assicurati che i visitatori sappiano quali sono le loro opzioni (link come "Vedi anche" o "Prodotti correlati").
• Lascia che prendano vari tipi di azione (chiari gli inviti all'azione).

Qual è il deliverable per un'analisi dell'architettura delle informazioni?

L'obiettivo è di creare l'architettura del sito. Il deliverable potrebbe includere sitemap, diagrammi di flusso del sito e wireframe per comunicare come funzionerà il sito dal punto di vista pratico.

Dovrebbe determinare il quadro generale, organizzando il contenuto sul sito per supportare le attività che gli utenti desiderano eseguire. L'architettura delle informazioni dovrebbe anche includere piccole cose, come decidere che i prodotti in una pagina di ricerca debbano essere ordinati per prezzo e non per nome.

Tutto dovrebbe basarsi su ricerche e dati reali, non molto spazio per le opinioni qui. Esistono diversi modi per ottenere l'architettura delle informazioni del sito web corretta. Ecco il metodo che ha funzionato per me nel corso degli anni.

Come creare un'architettura dell'informazione in 5 passaggi

Raggiungi i tuoi obiettivi aziendali quando aiuti le persone a raggiungere i loro obiettivi. Puoi farlo solo quando comprendi pienamente gli obiettivi, i problemi e le aspirazioni dei tuoi utenti.

1. Raccogliere dati sugli utenti del tuo sito prima lavorando sulla tua architettura del sito.

È fondamentale entrare nella testa dell'utente. Prima di lavorare sull'architettura delle informazioni, è necessario conoscere le risposte a queste domande:

• Quale problema stiamo risolvendo?
• Chi ne ha bisogno?
• A cosa serve questo sito?

Quanto prima lo scopo e gli obiettivi sono definiti chiaramente (e scritti!), Tanto più facilmente i problemi vengono identificati e risolti; più è facile rimanere concentrati; e migliore è il risultato finale.

Parla con i tuoi utenti. Le interviste personali e le telefonate sono le migliori, ma anche i sondaggi online sono fantastici.

L'obiettivo è capire che cosa i tuoi utenti vogliono e perché lo vogliono Ci saranno diversi intenti e casi d'uso tra i tuoi utenti. Questo è normale.

2. Crea personaggi per i clienti e scrivi storie di utenti per progettare il tuo sito per persone reali.

Il tuo sito web dovrebbe essere progettato per qualcuno, non per tutti. È qui che entrano i clienti.

I personaggi sono basati sui fatti (derivati ​​dalla ricerca dell'utente) ma rappresentano le rappresentazioni fittizie dei tuoi utenti. Rappresentano gli obiettivi, le motivazioni, le caratteristiche e i comportamenti dei gruppi più importanti di persone che visitano il tuo sito.

Ecco una persona campione. Allegare una foto a una persona ci aiuta a immaginare una persona reale per la quale stiamo costruendo il sito:

Il prossimo passo è connettere casi d'uso con personaggi. I casi d'uso sono un modo semplice per decidere e descrivere lo scopo di un progetto. I casi d'uso hanno due componenti: attori e obiettivi.

Gli attori sono persone che usano il sito web. Vuoi concentrarti solo sui gruppi più importanti, i personaggi degli utenti. Gli obiettivi sono ciò che una, alcune o tutte le persone vogliono raggiungere. Ogni caso d'uso deve avere:

1. Un obiettivo specifico;
2. Attori che eseguiranno compiti per raggiungere questo obiettivo.

Gli obiettivi possono essere cose come leggere un post sul blog, controllare un saldo del conto, prenotare un appuntamento, scaricare software, fare un test e così via. I casi d'uso definiscono l'obiettivo e lo scopo: il problema che stiamo cercando di risolvere. (Questo è anche il primo passo per migliorare il lifetime value del cliente.)

Quando ti avvicini all'architettura del sito web pensando alle persone e a ciò che desiderano raggiungere, lavorerai con maggiore sicurezza e chiarezza.

3. Iniziare a costruire l'architettura delle informazioni con metadati, scenari, pagine

Una volta compresi i tuoi utenti, il loro intento, il perché dietro di esso, e su come vorrebbero raggiungere il loro obiettivo, puoi iniziare a capire come presentare i tuoi contenuti in un modo che abbia un senso per i tuoi utenti.

Ci sono molti buoni metodi per farlo, ma ecco il processo in cinque fasi che mi piace usare:

1. Scopri i metadati.

I metadati sono informazioni sulle informazioni. È ciò che aiuta gli utenti a trovare il contenuto che stanno cercando.

Diciamo che vuoi comprare un macinino da caffè, quindi vai su un sito web che li vende. Se navighi e non riesci a trovarne uno, è un segno di metadati sbagliati. Se ottieni correttamente i metadati, hai già eliminato il primo ostacolo alla progettazione efficace del sito.

Per sviluppare metadati utili, devi determinare cosa interessa alla gente. Per le macinacaffè, le persone cercano le dimensioni della lama? Colore? Marca? Conoscere i parametri e le variabili da memorizzare nel sistema è fondamentale per risultati di ricerca eccellenti.

I metadati per un libro potrebbero essere il titolo, la descrizione, l'autore, la data di rilascio, il codice ISBN, i commenti, l'immagine di copertina, ecc. Pianificalo!

2. Creare scenari utente.

Per progettare un'esperienza piacevole, pensa agli scenari che presentano i personaggi degli utenti. Uno scenario è una storia su qualcuno (il tuo personaggio utente) che utilizza il tuo sito web per svolgere uno specifico compito o obiettivo, come prenotare un volo o acquistare pantaloni da yoga.

Gli scenari funzionano con i personaggi. Sono la storia dietro al motivo per cui un personaggio particolare verrebbe sul tuo sito web.

• Che cosa spera di poter realizzare sul tuo sito web?
• Cosa può aiutarli a completare il compito a portata di mano?
• Cosa potrebbe causare l'attrito?

Concentrati sugli utenti e sulle loro attività piuttosto che sull'organizzazione e sulla struttura interna del tuo sito. Se lo fai, otterrai informazioni su quali contenuti deve avere il sito e su come dovrebbe essere organizzato.

Puoi leggere ulteriori informazioni sulla mappatura degli scenari qui.

4. Mappare le attività dell'utente alle singole pagine Web.

Prima di iniziare a pensare al design attuale, è necessario disporre del contenuto.

Il contenuto precede il design. Il design in assenza di contenuti non è design, è decorazione.

Jeffrey Zeldman

Quindi, decidi cosa succede sulle tue pagine web e quante pagine dovrebbero esistere. Ogni pagina deve fare due cose:

1. Aiutare l'utente a svolgere un compito specifico;
2. Fai il prossimo passo facile accesso.

Quando si progetta il sito, è fondamentale assicurarsi che l'utente esegua ogni attività. Tuttavia, il raggiungimento di tale obiettivo di solito consiste di a serie di compiti più piccoli. La relazione tra le attività definisce l'esperienza. Ogni pagina del tuo sito deve aiutare a costruire questa catena di compiti.

Nel complesso, il tuo sito avrà tre tipi di pagine:

1. Pagine di navigazione Questi aiutano gli utenti a determinare dove trovare ciò che vogliono e a dargli accesso. Il loro obiettivo è inviare utenti "da qualche altra parte". In genere si tratta di una pagina di ricerca o di un sito di ricerca.
2. Pagine di consumo Questi sono i "altrove" che di solito vai (articoli, video, informazioni sui prezzi e così via).
3. Pagine di interazione Queste pagine consentono agli utenti di inserire e manipolare i dati. Pensa alla pagina di ricerca o al modulo di registrazione.

Ogni tipo di pagina è ottimizzato per un diverso tipo di attività utente. Capire il tipo di pagina che ti serve ti aiuta a personalizzare il design dell'interfaccia.

Quando si disegna una mappa del sito o si mappano i flussi utente, si noti se una pagina è una pagina di navigazione, una pagina di consumo o una pagina di interazione. Progettare di conseguenza.

5. Offri il giusto aiuto al momento giusto nel modo più discreto possibile.

Alcune pagine Web sono facili da usare. Alcuni potrebbero richiedere un po 'di apprendimento. Pianificare i testi della guida e la microcopia per assicurarsi che gli utenti possano completare le attività senza confusione.

Le informazioni dovrebbero essere offerte nel contesto. Fornisci risposte alle domande relative alla prenotazione nella pagina in cui gli utenti prenotano le cose. Mantenere testimonianze e domande frequenti su pagine separate non è ottimale: le informazioni non vengono offerte quando è necessario.

Le domande frequenti sulla pagina hanno una posizione, quando sono utilizzate per rispondere a domande effettive, non come uno strumento di vendita (ad es. Q: "Devo acquistarlo?" A: "Ovviamente dovresti!").

Mi piace molto il modo in cui R. Stephen Gracey ha affermato: "Una buona FAQ è come l'assicurazione per i tuoi utenti: lì quando ne hanno bisogno, ma si spera che non lo faranno mai".

Ecco Groupon che risponde alle domande nel loro contesto: le domande frequenti in-page sulla loro pagina di checkout:

4. Crea flussi utente per mappare la progressione degli utenti attraverso il tuo sito.

Ora che hai individuato i tipi di pagine che ti servono sul tuo sito, traccia i flussi ottimali degli utenti. (Ho scritto sulla creazione di flussi utente qui.)

Quando si progettano i flussi, è necessario conoscere le quattro modalità di ricerca delle informazioni. C'è un eccellente articolo di Donna Spencer su questo argomento. Secondo lei, i quattro tipi sono:

1. Ricerca di oggetti noti. Spesso, quando le persone sanno esattamente cosa stanno cercando e come si chiamano, per lo più usano la ricerca. Ma alcuni preferiscono la navigazione, quindi deve lavorare con una ricerca per convincere le persone a sapere dove vogliono andare.
2. Ricerca esplorativa. Ciò accade quando gli utenti possono avere un bisogno ma non sono certi di cosa lo realizzerà. Potrebbero essere alla ricerca di una soluzione di remarketing o di un nuovo laptop. Le persone riconosceranno una risposta alla loro domanda ma non sanno se hanno effettivamente trovato la risposta giusta (ad esempio, nota se c'è un'opzione migliore là fuori).
3. Non so cosa ho bisogno di sapere. A volte le persone non sanno cosa devono sapere. Qualcuno che cerca di acquistare gioielli in pietre preziose deve capire metalli preziosi, trattamenti, lucentezza delle pietre preziose, durezza e molte altre cose. Stanno cercando una cosa ma scoprono che hanno davvero bisogno di sapere qualcos'altro.
4. Re-finding. Le persone potrebbero voler tornare a cose che hanno scoperto in passato. Se hanno visto qualcosa che hanno gradito sul tuo sito durante una visita precedente, rendilo facile trovarlo di nuovo. (Modificare il colore dei collegamenti visitati, utilizzare i carrelli della spesa permanenti, ecc.).

Ogni comportamento di ricerca di informazioni si basa su strumenti di navigazione specifici per avere successo.

5. Crea sitemaps, wireframes e ottieni feedback sull'architettura del tuo sito web

Sei solo una persona. Hai bisogno di nuovi set di occhi e cervelli per sfidare il tuo pensiero. Forse ti sei perso qualcosa. Forse hai frainteso l'importanza di qualcosa. Questo è il motivo per cui devi affrontare tutto con i tuoi compagni di squadra (o altri colleghi).

È possibile utilizzare schizzi, diagrammi, sitemap o wireframe per comunicare i risultati e le proposte per andare avanti.

Raccogli feedback, esegui iterazioni e passa alla pianificazione della struttura del tuo sito.

Come creare una struttura di menu ottimale per il tuo sito web

La navigazione intuitiva non avviene per caso. Qui ci sono le tecniche di ricerca e test che i professionisti dell'UX usano per determinare la migliore architettura dell'informazione, i flussi di lavoro, la struttura dei menu o i percorsi di navigazione del sito web.

1. Ordinamento delle carte

Hai un sacco di pagine sul tuo sito web che devono essere categorizzate. Cosa dovrebbe andare dove? L'ordinamento delle carte ti consente di capire dove le persone vorrebbero trovare qualcosa. È un metodo fantastico (e affidabile!) Per la ricerca di modelli nel modo in cui gli utenti si aspettano di trovare contenuti o funzionalità.

Funziona meglio se l'argomento è qualcosa che le persone capiscono (ad esempio apparecchiature audio-video, abbigliamento, ecc.).

Ecco come funziona il metodo di base:

1. Prendi un set di carte indice o post-it) e scrivi un termine (ad esempio il nome della pagina, il contenuto) su ciascuno. Ogni carta rappresenta una pagina (categoria) sul tuo sito web. Se sei un sito di e-commerce audio-video, potresti scrivere cose come "reflex digitali", "obiettivi Canon" o "lettori DVD".
2. I soggetti del test (rappresentanti del tuo cliente ideale che hai reclutato per questo scopo) ricevono un set di schede con termini già scritti su di essi.
3. Chiedi al soggetto del primo test di inserire i termini in raggruppamenti logici e creare un nome di categoria per ogni raggruppamento.
4. Questo processo viene ripetuto con ogni soggetto del test.
5. Dopo aver svolto l'esercizio con tutti i partecipanti al test, si analizzano i risultati e si cercano i modelli.

Ecco un ottimo video che spiega il concetto in 3 minuti:

Esistono tre tipi principali di ordinamento delle carte:

1. Ordinamento a carte aperte. È qui che i partecipanti al test creano i loro nomi per le categorie. Ti dà un'idea di come i tuoi clienti pensano e classificano mentalmente gli oggetti.
2. Ordinamento con carta chiusa Ai partecipanti viene fornita una serie predeterminata di nomi di categorie. Il loro obiettivo è assegnare le carte indice a queste categorie fisse.
3. Metodo Delphi modificato. Questo è diverso dal resto. I partecipanti lavorano uno dopo l'altro, perfezionando un singolo modello. Il primo soggetto di prova fa un ordinamento tradizionale a carte aperte. I tester successivi iniziano con qualsiasi strumento creato dal tester precedente. Possono modificare quell'organizzazione (rinominare o ristrutturare) o ricominciare. Ripeti il ​​processo fino a quando i partecipanti non apporteranno più cambiamenti significativi. Il rischio è che, poiché chiunque può ricominciare da capo, un partecipante esterno potrebbe compromettere l'intero studio.

Ecco un esempio del metodo Modified-Delphi in azione (vedi il nome della categoria modificata):

2. Test dell'albero (smistamento inverso)

Il test dell'albero è il punto in cui crei una struttura di menu (o tu stesso o in base ad altri risultati di ordinamento delle carte), quindi consenti alle persone di trovare elementi dal menu. L'obiettivo del test dell'albero è dimostrare che la struttura del tuo sito funzionerà, prima di entrare nella progettazione dell'interfaccia utente effettiva.

È fatto su una versione di testo semplificata della struttura del tuo sito, senza l'influenza degli aiuti alla navigazione e del design visivo.

Esempio:

In questo esempio, l'utente naviga attraverso la struttura del menu finché non raggiunge il punto in cui si aspetta di trovare casi protettivi:

L'ordinamento delle carte inverso conferma le ipotesi della struttura dei menu (o offre un feedback per riorganizzare).

3. Ordinamento online (remoto) delle carte

Non devi condurre l'ordinamento delle carte di persona. Farlo online è più economico, non richiede pianificazione logistica e può essere fatto senza limitazioni geografiche.

Non puoi essere "li" per moderarlo, anche se potresti avere una chat Skype allo stesso tempo. Una corretta pre-educazione dei partecipanti al test è d'obbligo. Alcuni pro e contro dell'ordinamento delle carte online sono indicati in questo articolo.

La limitazione di questi strumenti di ordinamento delle carte online è che non possono essere utilizzati con il metodo Modified-Delphi.

Gli strumenti online che puoi verificare per questo processo includono:

Questi strumenti ti aiuteranno anche ad analizzare i risultati (anziché farlo manualmente al 100%).

4. Analizzare i risultati di ordinamento delle carte

Due domande vengono spesso sui risultati.

1. Cosa succede se la metà delle persone desidera trovare Pagina X nella Categoria Y, ma l'altra metà preferisce la Categoria Z? Va bene avere lo stesso link sotto due categorie! Se questo aiuta le persone a trovare il contenuto che vogliono, questa è la strada da percorrere.
2. Uso semplicemente i risultati come architettura del mio sito? Non proprio. Dovresti usare i risultati di ordinamento delle carte come a guida all'organizzazione e all'etichettatura. Non utilizzare ciecamente i risultati come la struttura del sito reale. I risultati di ordinamento delle carte possono (e dovrebbero essere) integrati con ulteriori ricerche utente e analisi delle attività.

Mentre progetti il ​​tuo sistema di navigazione, chiediti: "Che cosa vuole la maggior parte dei visitatori che visitano il mio sito?" Fai anche una domanda di follow-up: "Che cosa voglio che i miei visitatori trovino facilmente?"

Quanti utenti dovresti testare?

Tullis e Wood (autori di un importante studio del 2004) raccomandano di testare 20-30 utenti per l'ordinamento delle carte. Tuttavia, basandosi sulla sua ricerca, Jakob Nielsen raccomanda di testare solo 15 utenti (e 30 in grandi progetti con finanziamenti generosi).

Testare con più persone dà più informazioni, ma ci sono rendimenti decrescenti. Quando si testano oltre 15 utenti, i costi sono spesso ingiustificati.

Ulteriori letture: ecco un'ottima guida allo smistamento delle carte.

Principi guida per la progettazione della navigazione del sito web

L'ordinamento delle carte ti aiuterà a capire come strutturare i tuoi menu. Che ne pensi del design del menu di navigazione?

Nella buona navigazione, i link sembrano cliccabili. Hanno etichette chiare che fissano le aspettative su ciò che sta al di sotto. Collegamenti di menu non chiari causano clic su paura.

Dai un'occhiata al menu di navigazione che ho lassù. Ho fatto una buona quantità di test per trovare il perfezionare una formulazione abbastanza buona per quelli. (Se alcuni di questi non sono chiari, fammi sapere).

Eccone un altro:

Le voci del menu sembrano pulsanti, ma direi che "imparare di più" e "ordinare ora" sono scelte piuttosto scarse. Di cosa apprenderò di più? Cosa sto ordinando?

Fornire una navigazione globale coerente e affidabile.Indipendentemente dal link che hai nel menu di navigazione e dal piè di pagina, tienili sempre su ogni pagina del tuo sito. Ovunque vai su MADE, il menu principale rimane invariato:

Dove dovresti mettere il menu? Il menu principale dovrebbe essere orizzontale o verticale? Mentre c'è un forte caso contro i menu a sinistra verticale, due studi (2003 e 2004) affermano che è meglio.

Dico che dovresti optare per un menu orizzontale quando possibile, ma andare per il menu verticale a sinistra se hai un sacco di voci di menu (ad esempio Amazon). Questo studio di tracciamento degli occhi dice che un menu principale è più facile da usare, ma c'è solo così tanto spazio lì.

Se usi i menu verticali, assicurati che siano allineati a sinistra. I menu allineati a destra impediscono la scansionabilità.

Stabilire una chiara gerarchia per la navigazione globale e locale. Quasi tutti i siti Web con più di una pagina hanno una sorta di navigazione globale:

Poi, c'è anche la navigazione locale (un sottomenu). La navigazione locale dovrebbe apparire sotto la navigazione globale. Questo è logico: il menu globale è la categoria principale e la navigazione locale è come una sottocategoria sottostante.

I collegamenti di navigazione locali dovrebbero essere i più vicini a dove l'utente ha bisogno di loro. Il contenuto è il primo, ma una volta che l'utente ha finito di leggere il contenuto, raggiungerà la navigazione locale prima guardando la navigazione globale.

Allo stesso modo, se la pagina non lo fa avere il contenuto che stanno cercando, la navigazione locale è la navigazione che guarderanno prima.

Quanti livelli di navigazione dovresti creare? Di quanti ne hai bisogno, senza impazzire gli utenti. Alcuni siti web con molti contenuti, come Wells Fargo, hanno quattro livelli di contenuto (sotto-sotto-sotto-menu):

Ritengono che ogni livello di navigazione aiuti gli utenti a raggiungere i propri obiettivi. La maggior parte dei siti web ha contenuti sufficienti per due soli livelli di navigazione: la navigazione globale e un livello di navigazione locale.

Strumenti da utilizzare per creare l'architettura delle informazioni del tuo sito

• Balsamiq Mockups. Un fantastico strumento per il wireframing veloce. C'è quasi zero da imparare, e mi piace che si concentri sul quadro generale, non su piccoli elementi di design.
• OmniGraffle. Lo strumento di scelta per molti professionisti di UX. Diagrammi, diagrammi di processo, layout di pagina rapidi, modelli di siti Web e altro (solo Mac).
• Microsoft Visio. Molte persone lo preferiscono per la progettazione di diagrammi e architetture di siti web.
• MindJet MindManager. Lo strumento Mindmapping è ottimo anche per diagrammi e sitemap.
• LovelyCharts. Un'applicazione di diagrammi che consente di creare diagrammi di tutti i tipi, come diagrammi di flusso, sitemap, wireframe e altro.

Conclusione

Le persone comprano solo ciò che riescono a trovare. Gli studi dimostrano che i siti web stanno perdendo denaro perché i loro sistemi di navigazione falliscono e gli utenti non riescono a trovare il prodotto a cui sono interessati.

Ho visto affermare che "fino al 50% delle vendite" sono persi a causa della cattiva navigazione, ma non ho trovato lo studio che lo confermi. Tuttavia, una buona navigazione è fondamentale.

L'architettura delle informazioni funziona mano nella mano con l'usabilità e le conversioni. Se l'architettura delle informazioni del tuo sito web è buona, ma la tua usabilità fa schifo, i visitatori troveranno quello che stanno cercando, ma faticano a completare il flusso di acquisto.

Se l'architettura delle informazioni non è buona (anche se la tua usabilità è buona), la maggior parte dei visitatori non troverà quello che stanno cercando, lasciando il tuo sito prima di entrare nella canalizzazione di vendita.

Il corretto utilizzo dell'architettura delle informazioni del sito garantisce un'esperienza utente ottimale, che a sua volta comporta una maggiore fidelizzazione e un maggior numero di conversioni.