Ascolta la versione audio di questo articolo
Come parte standard del processo UX, i designer creano l’architettura dell’informazione quando costruiscono prodotti. Definendo ogni strada e percorso che gli utenti possono intraprendere attraverso un’applicazione o un sito web, l’architettura dell’informazione è molto più di una semplice mappa del sito per mostrare quale pagina porta dove.
Simile agli architetti edili che usano un progetto per costruire ogni parte di una casa, dalle strutture fisiche ai meccanismi interni più complessi come l’impianto elettrico e idraulico, l’architettura dell’informazione descrive la gerarchia, la navigazione, le caratteristiche e le interazioni di un sito web o un’applicazione. E proprio come le cianografie sono il documento più prezioso che un architetto può utilizzare nella costruzione di un edificio, l’architettura dell’informazione può essere lo strumento più potente nell’arsenale di un designer.
Tuttavia, svilupparne una non è così semplice come mettere insieme una lista di caratteristiche e mappare il loro funzionamento – analizziamo il processo.
Cos’è l’architettura dell’informazione e perché è importante?
L’architettura dell’informazione (IA) è, come un progetto, una rappresentazione visiva dell’infrastruttura, delle caratteristiche e della gerarchia del prodotto. Il livello di dettaglio dipende dal designer, quindi l’IA può anche includere la navigazione, le funzioni e i comportamenti dell’applicazione, il contenuto e i flussi. Non c’è un limite prestabilito alla dimensione o alla forma dell’IA; tuttavia, dovrebbe comprendere la struttura generalizzata del prodotto così che chiunque (teoricamente) dovrebbe essere in grado di leggerlo e capire come funziona il prodotto.
Useremo spesso il riferimento al blueprint perché lo scopo di entrambi i documenti è quasi identico. Proprio come un blueprint, l’IA fornisce ai designer (così come ai team di sviluppo del prodotto e di ingegneria) una visione a volo d’uccello dell’intero prodotto. Avere un unico documento che fornisce una rappresentazione semplice e comprensibile di come funziona l’applicazione o il sito web è vitale per sviluppare nuove funzionalità, aggiornare quelle esistenti, e per vedere cosa è possibile considerando il prodotto esistente.
Con l’IA disponibile, diventa significativamente più facile prendere decisioni chiave per nuove caratteristiche e implementazioni, capire le tempistiche per i cambiamenti del prodotto e seguire il comportamento dell’utente attraverso processi multipli.
Tuffiamoci in un video di base per vedere come viene costruita un’IA.
Come progettare l’architettura dell’informazione
Come parte del processo UX, il design IA segue modelli molto simili al flowcharting: Aggiungere forme e collegarle con linee in modo organizzato in un unico documento. La sfida quando si costruisce l’IA sta nel capire come la tua app o il tuo sito web funzionano dalla prospettiva dell’utente, e come organizzare queste informazioni in un formato leggibile e leggibile.
Ci sono due requisiti principali per costruire effettivamente l’IA: organizzarla attraverso una gerarchia visiva (cioè, una gerarchia di caratteristiche, funzioni e comportamenti) e creare una legenda per visualizzare diversi tipi di caratteristiche, interazioni e flussi. Con un diagramma di flusso standard, le forme seguono requisiti specifici (i rettangoli sono processi, i diamanti sono punti di decisione, ecc.); tuttavia, seguire quella nomenclatura non è un requisito.
In altre parole, i fattori più importanti per costruire la vostra IA sono dove i singoli componenti dell’architettura sono collocati (gerarchicamente), e come sono etichettati e visualizzati.
Comprendere e mostrare la gerarchia visiva
L’aspetto più impegnativo della creazione di una nuova architettura dell’informazione è quasi sempre la sua costruzione gerarchica. È un malinteso comune che l’IA debba essere costruita “dall’alto verso il basso”. Questo è quasi sempre più difficile da fare a meno che non si tratti di un prodotto esistente, come nel video qui sopra.
Quando si costruisce l’IA da zero, a meno che il tuo sito web o l’applicazione segua un formato standard, disegnare qualsiasi cosa dopo il livello superiore è molto difficile. È come chiedere a un meccanico di costruire un’auto dall’alto verso il basso invece che per parti. Ogni pezzo deve essere costruito in anticipo con la sua ricerca, il tempo per la progettazione e lo sviluppo. Lo stesso vale per l’IA.
Il mostrare la gerarchia visiva è un bene prezioso per l’IA, non solo perché fornisce un contesto migliore per il lettore, ma generalizza anche le regioni chiave del prodotto. Se la caratteristica più significativa della vostra app è ordinare una corsa (come Uber o Lyft) che può essere fatta dalla homepage, allora quella pagina avrà il maggior numero di punti di contatto e il maggior valore del prodotto. Lo stesso sarà vero per la gerarchia visiva.
Le mappe del sito sono utili per capire la gerarchia poiché organizzano le pagine numericamente (come 1.0 Home, 2.0 Payment, 2.1 Add Pay Method, ecc.) Oppure si consideri l’esempio nell’immagine qui sotto per il sito web della biblioteca della Duke University, dove la navigazione superiore non è solo in cima ma anche evidenziata per essere visibile in tutta l’applicazione.
Gerarchia di forme, colori e altri elementi visivi
A parte la gerarchia, l’architettura di cui sopra fa un’altra cosa bene: Mostra ogni punto di impegno in modo univoco come necessario attraverso una semplice legenda e alcune frasi chiave. La legenda denota il tipo di pagina e di contenuto, e segnala le variazioni tra i colori delle forme. Questo è importante perché, anche se il sito di Duke sembra abbastanza semplice, l’IA va solo a tre livelli di profondità. Ogni rettangolo giallo denota un’applicazione, quindi i processi all’interno di ciascuna di queste caselle non sono inclusi in questo documento!
Anche senza quelle parti disponibili, la struttura è tale che possiamo capire come navigare il sito web attraverso la sola IA. Questo si ferma quando raggiungiamo un’applicazione all’interno del sito – non è necessario.
L’IA qui sotto è per un gioco. Usando quattro forme, nessun colore, e frammenti di testo posizionati in modo intelligente, ogni interazione principale è comprensibile senza prototipi, e più importante, può essere capita da chiunque ci lavori.
Questo modello non è perfetto, ma organizza chiaramente la gerarchia delle app e delinea ciò che l’utente vede o fa in qualsiasi punto.
I migliori strumenti di architettura dell’informazione
Ci sono molte applicazioni software che permettono di costruire una IA, ma poche sono abbastanza semplici e veloci da rendere l’esperienza piacevole. O almeno, facile da gestire.
Draw.io, usato nel video qui sopra, è completamente gratuito per uso personale e professionale e si collega automaticamente a Google Drive. Ha anche integrazioni con Confluence e JIRA, che sono a pagamento. Draw.io è eccellente per il flowcharting, la creazione di flussi di utenti e l’architettura delle informazioni, e con la funzionalità Drive, più persone possono lavorare sullo stesso documento e vedere le modifiche in diretta. C’è anche una versione offline gratuita.
Lucidchart è un altro grande strumento che fornisce un’esperienza leggermente migliore di Draw.io e ha vantaggi aggiuntivi come modelli pre-costruiti, molte più integrazioni, un’applicazione mobile (valutata a 2,5 stelle su App Store), e il supporto per le imprese.
Omnigraffle e Visio sono da tempo pilastri del settore e funzionano in modo eccellente per costruire e mantenere un design IA, anche se Visio è solo online (la vecchia versione offline è solo per Windows) mentre Omnigraffle è solo per Mac e richiede acquisti separati per le versioni MacOS e iOS. OmniGraffle ha un vantaggio rispetto ai principali concorrenti in quanto fornisce l’automazione JavaScript e AppleScript, che per la maggior parte dei designer può essere inutile, ma tipicamente, gli architetti dell’informazione a tempo pieno lo apprezzano.
Tutti gli strumenti elencati sopra sono fatti per la velocità e la facilità d’uso, in particolare per il flowcharting, che segue principi quasi identici all’architettura dell’informazione. Altre applicazioni come Balsamiq, MindMeister, MindManager, o XMind offrono un comportamento simile ma sono costruite per altri scopi principali, come la prototipazione o la mappatura mentale.
Buone pratiche per l’architettura dell’informazione
Sebbene ci siano poche regole definite per ciò che costituisce l’architettura dell’informazione, quando si procede, considerare quanto segue:
Non concentrarsi sulla gerarchia, concentrarsi sulla struttura
La gerarchia è regolabile. La homepage sarà sempre la homepage, ma dove porta, come gli utenti arrivano a quei posti, e tutto quello che c’è in mezzo e oltre è determinato in seguito.
Tutti i processi dovrebbero essere logici
Anche se l’IA nel processo UX è per le interazioni con gli utenti, ogni passo del percorso deve avere un senso. Le schermate di registrazione non dovrebbero portare alle impostazioni, una funzione della macchina fotografica non dovrebbe saltare ad una vista della mappa… la lista continua.
Ricorda il processo UX
Un errore comune è quello di fare solo IA, senza risorse, ricerca, o altre risorse o lavoro. Questo è come dire a un autore di scrivere un libro senza una bozza, o a un programmatore di codificare un’applicazione senza prototipi.
Tu sei il cartografo
I cartografi prendono in considerazione tutto ciò che riguarda una mappa, dalle catene montuose ai confini di stato. Proprio come i cartografi, i designer determinano cosa va nel design dell’IA. Pagine individuali, comportamenti specifici dell’utente, contesto per i punti di decisione… e così via.
In definitiva, il cartografo decide cosa va sulla mappa in base alle esigenze dell’utente. Lo stesso vale per i designer, quindi costruite l’IA per l’utente finale, cioè i team di sviluppo del prodotto e di progettazione.
Information Architecture Is Ever-Changing and Evolving
Per ribadire ancora una volta il punto, tutte le IA sono costruite per il cambiamento. I prodotti si evolvono, il design cambia, gli utenti si adattano, e il ciclo continua, ancora e ancora. Non prendetelo troppo sul serio e sappiate che ci sarà sempre spazio per migliorare. Non puntate alla perfezione; costruite una IA semplice e adattabile.
La mia architettura dell’informazione è finita… E adesso?
È una concezione comune che qualsiasi lavoro di design non sia mai veramente finito, e questo è certamente il caso dell’architettura dell’informazione. Crescono e si restringono e cambiano come i nostri prodotti. A differenza di un progetto per un edificio, l’IA si evolverà sempre in base a qualsiasi cosa, dai bisogni degli utenti alle nuove funzionalità o alla revisione di un prodotto. Gran parte della struttura può rimanere la stessa e fornire coerenza tra le versioni in modo che gli utenti non si confondano.
E questa è una buona cosa. Sapere che l’IA è un documento fluido, che probabilmente cambia settimanalmente, e a volte anche quotidianamente, è un modo potente per mantenere la struttura generale della vostra app o sito web senza mai toccare il codice o creare nuovi prototipi. Meglio l’intero team di sviluppo del prodotto conosce l’IA, più velocemente tutti sapranno cosa è e cosa non è possibile, e quanto è serio ogni presunto “lavoro facile”.
Che ci porta alla vera bellezza dell’architettura dell’informazione: Non c’è un punto di partenza predefinito. Mentre il tradizionale processo di UX design impone che l’IA sia costruita dopo aver completato un numero sufficiente di flussi di utenti; armati di un sacco di ricerche sugli utenti e sulla concorrenza, può anche essere la prima cosa fatta… o l’ultima. Il processo di prototipazione spesso fa emergere informazioni su come certi comportamenti o azioni dovrebbero verificarsi che sarebbero difficili da immaginare da una IA logica o priva di immaginazione.
Come pratica in continua evoluzione, il design della IA è un’arte tanto quanto un’abilità, che è in parte il motivo per cui le grandi aziende hanno posizioni di architetto dell’informazione. Questi designer sono i guardiani di sistemi massicci, e con la loro comprensione della crescita del prodotto nel tempo, aiutano a guidare i team di prodotto, design e ingegneria a prendere le giuste decisioni nel corso degli anni. Questa scala di organizzazione non è per tutti i designer, ma ogni designer può costruire un’architettura dell’informazione semplice e comprensibile.
– – –
Lettura consigliata sull’architettura dell’informazione
IA per il Web e oltre
Come dare un senso a qualsiasi casino: Architettura dell’informazione per tutti
Fondamenti di architettura dell’informazione
La differenza tra architettura dell’informazione e design UX