La guida completa all'architettura dell'informazione

Ascolta la versione audio di questo articolo

Come parte standard del processo UX, i designer creano un'architettura dell'informazione durante la creazione di prodotti. Definendo ogni strada e percorso che gli utenti possono intraprendere attraverso un'app o un sito Web, l'architettura delle informazioni è molto più di una semplice mappa del sito per mostrare quale pagina porta a dove.

Simile agli architetti edili che utilizzano un progetto per costruire ogni parte di una casa, dalle strutture fisiche ai meccanismi interni più complessi come elettrici e idraulici, l'architettura dell'informazione descrive la gerarchia, la navigazione, le caratteristiche e le interazioni di un sito Web o di un'applicazione. E proprio come i progetti sono il documento più prezioso da utilizzare per un architetto nella costruzione di un edificio, l'architettura dell'informazione può essere lo strumento più potente nell'arsenale di un designer.

Tuttavia, svilupparne uno non è semplice come mettere insieme un elenco di funzionalità e mappare come funzionano: esaminiamo il processo.

Che 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 progettista, quindi l'IA può includere anche navigazione, funzioni e comportamenti dell'applicazione, contenuto e flussi. Non esiste un limite prestabilito per le dimensioni o la forma di IA; tuttavia, dovrebbe comprendere la struttura generalizzata del prodotto in modo che chiunque (teoricamente) dovrebbe essere in grado di leggerlo e capire come funziona il prodotto.

Useremo spesso il riferimento del progetto perché lo scopo di entrambi i documenti è quasi identico. Proprio come un progetto, IA offre ai designer (oltre ai team di sviluppo prodotto e ingegneria) una visione a volo d'uccello dell'intero prodotto. Avere un unico documento che fornisca una rappresentazione semplice e comprensibile del funzionamento dell'applicazione o del sito Web è fondamentale per lo sviluppo di nuove funzionalità, l'aggiornamento di quelle esistenti e per vedere cosa è possibile considerare il prodotto esistente.

Con l'IA disponibile, diventa molto più facile prendere decisioni chiave per nuove funzionalità e implementazioni, comprendere le tempistiche per le modifiche ai prodotti e seguire il comportamento degli utenti attraverso più processi.

Entriamo in un video di base per vedere come viene costruita una IA.

Come progettare l'architettura dell'informazione

Come parte del processo UX, il design IA segue schemi molto simili ai diagrammi di flusso: aggiungi forme e collegale con linee in modo organizzato a un singolo documento. La sfida durante la creazione di IA consiste nel capire come funziona effettivamente la tua app o il tuo sito Web dal punto di vista dell'utente e come organizzare tali informazioni in un formato leggibile e leggibile.

Esistono due requisiti principali per costruire effettivamente l'IA: organizzarla attraverso una gerarchia visiva (ovvero 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 decisionali, ecc.); tuttavia, seguire quella nomenclatura non è un requisito.

In altre parole, i fattori più importanti per costruire la tua IA sono dove sono posizionati i singoli componenti dell'architettura (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 consiste quasi sempre nel costruirla gerarchicamente. È un malinteso comune che l'IA debba essere costruita "dall'alto verso il basso". È quasi sempre più difficile da fare a meno che non si tratti di un prodotto esistente, come nel video sopra.

Quando si crea l'IA da zero, a meno che il proprio sito Web o applicazione non segua un formato standard, estrarre qualsiasi cosa dopo il livello superiore è molto difficile. È come chiedere a un meccanico di costruire un'auto dall'alto verso il basso anziché in parti. Ogni pezzo deve essere costruito in anticipo con la propria ricerca, tempo per la progettazione e lo sviluppo. Lo stesso vale per IA.

La visualizzazione della gerarchia visiva è una risorsa preziosa per l'IA, non solo perché fornisce un contesto migliore per il lettore, ma generalizza anche le aree chiave del prodotto. Se la caratteristica più significativa della tua app è ordinare un passaggio (alla Uber o Lyft) che può essere fatto dalla home page, quella pagina avrà il maggior numero di punti di contatto e il maggior valore per il prodotto. Lo stesso vale per la gerarchia visiva.

Le mappe del sito sono utili per comprendere la gerarchia poiché organizzano le pagine in modo numerico (come 1.0 Home, 2.0 Pagamento, 2.1 Aggiungi metodo di pagamento, ecc.). Oppure considera l'esempio nell'immagine qui sotto per il sito web della biblioteca della Duke University, dove la navigazione in alto non è solo in alto ma è anche evidenziata per essere visibile nell'intera applicazione.

Gerarchia di forme, colori e altri elementi visivi

A parte la gerarchia, l'architettura sopra fa bene un'altra cosa: mostra ogni punto di coinvolgimento in modo univoco secondo necessità attraverso una semplice legenda e alcune frasi chiave. La legenda indica la pagina e il tipo di contenuto e indica le variazioni tra i colori delle forme. Questo è importante perché, sebbene il sito di Duke appaia abbastanza semplice, l'IA raggiunge solo 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 nel sito solo attraverso l'IA. Ciò si interrompe quando raggiungiamo un'applicazione all'interno del sito Web, non è necessario.

L'IA di seguito è per un gioco. Utilizzando quattro forme, nessun colore e frammenti di testo posizionati in modo intelligente, ogni interazione principale è comprensibile senza prototipi e, cosa più importante, può essere compresa 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 un dato momento.

I migliori strumenti di architettura dell'informazione

Esistono molte applicazioni software che consentono di creare un IA, ma poche sono abbastanza semplici e veloci da rendere l'esperienza piacevole. O perlomeno facile da gestire.

Draw.io, utilizzato nel video 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 creare diagrammi di flusso, creare flussi utente e architettura delle informazioni e, con la funzionalità Drive, più persone possono lavorare sullo stesso documento e vedere le modifiche in tempo reale. C'è anche una versione offline gratuita.

Lucidchart è un altro ottimo strumento che offre un'esperienza leggermente migliore rispetto a Draw.io e offre vantaggi aggiuntivi come modelli predefiniti, molte più integrazioni, un'app mobile (valutata a 2,5 stelle su App Store) e supporto per le imprese.

Omnigraffle e Visio sono pilastri del settore di lunga data e funzionano in modo eccellente per la creazione e il mantenimento di un design IA, sebbene Visio sia solo online (la versione offline precedente è solo per Windows) mentre Omnigraffle è solo per Mac e richiede acquisti separati per MacOS e iOS versioni. OmniGraffle ha un vantaggio rispetto ai principali concorrenti in quanto fornisce l'automazione JavaScript e AppleScript, che per la maggior parte dei progettisti potrebbe non essere necessaria, ma in genere gli architetti dell'informazione a tempo pieno lo apprezzano.

Tutti gli strumenti sopra elencati sono realizzati per velocità e facilità d'uso, in particolare per quanto riguarda il diagramma di flusso, che segue principi quasi identici all'architettura dell'informazione. Altre applicazioni come Balsamiq, MindMeister, MindManager o XMind offrono tutte un comportamento simile ma sono costruite per altri scopi principali, come la prototipazione o la mappatura mentale.

Migliori pratiche di architettura dell'informazione

Sebbene ci siano poche regole definite per ciò che costituisce l'architettura dell'informazione, durante il processo, considerare quanto segue:

Non concentrarti sulla gerarchia, concentrati sulla struttura

La gerarchia è regolabile. La homepage sarà sempre la homepage, ma dove conduce, come gli utenti raggiungono quei luoghi e tutto ciò che c'è in mezzo e oltre è determinato in seguito.

Tutti i processi dovrebbero essere logici

Anche se l'IA nel processo UX riguarda le interazioni dell'utente, ogni fase del processo deve avere un senso. Le schermate di registrazione non dovrebbero portare alle impostazioni, una funzione della fotocamera non dovrebbe passare a una visualizzazione della mappa... l'elenco potrebbe continuare.

Ricorda il processo UX

Un errore comune è fare solo IA, senza risorse, ricerca o altre risorse o lavoro. È come dire a un autore di scrivere un libro senza uno schema oa un programmatore di programmare un'app senza prototipi.

Tu sei il cartografo

I cartografi prendono in considerazione tutto ciò che riguarda una mappa, dalle catene montuose ai confini statali. Proprio come i creatori di mappe, i designer determinano cosa va alla progettazione di IA. Pagine singole, comportamenti specifici dell'utente, contesto per i punti decisionali... 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 costruisci l'IA per l'utente finale, ovvero i team di sviluppo e progettazione del prodotto.

L'architettura dell'informazione è in continua evoluzione ed evoluzione

Per perforare ancora una volta il punto, tutte le IA sono costruite per il cambiamento. I prodotti si evolvono, i design cambiano, gli utenti si adattano e il ciclo continua, ancora e ancora. Non prenderlo troppo sul serio e sappi che ci sarà sempre spazio per migliorare. Non mirare alla perfezione; costruire una IA semplice e adattabile.

La mia architettura dell'informazione è finita... e adesso?

È opinione comune che qualsiasi lavoro di progettazione non sia mai veramente svolto, e questo è certamente il caso dell'architettura dell'informazione. Crescono, si restringono e cambiano come fanno i nostri prodotti. A differenza di un progetto per un edificio, l'IA si evolverà sempre in base a qualsiasi cosa, dalle esigenze degli utenti alle nuove funzionalità o alla revisione del prodotto. Gran parte della struttura potrebbe 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 talvolta anche quotidianamente, è un modo efficace per mantenere la struttura complessiva della tua app o del tuo sito Web senza mai toccare il codice o creare nuovi prototipi. Quanto meglio l'intero team di sviluppo prodotto conosce l'IA, tanto più velocemente tutti sapranno cosa è e non è possibile e quanto è serio qualsiasi presunto "lavoro facile".

Il che ci porta alla vera bellezza dell'architettura dell'informazione: non esiste un punto di partenza predefinito. Mentre il tradizionale processo di progettazione dell'esperienza utente impone che l'IA venga creata dopo aver completato un numero sufficiente di flussi utente; dotato 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 dovrebbero verificarsi determinati comportamenti o azioni che sarebbe difficile da immaginare da un'IA logica o priva di immaginazione.

In quanto pratica in continua evoluzione, il design dell'IA è un'arte tanto quanto un'abilità, motivo per cui le grandi aziende hanno posizioni di architetto dell'informazione. Questi progettisti sono i guardiani di sistemi enormi e, grazie alla loro comprensione della crescita del prodotto nel tempo, aiutano a guidare i team di prodotto, progettazione e ingegneria a prendere le giuste decisioni nell'arco degli anni . Quella scala di organizzazione non è per tutti i progettisti, ma ogni progettista può costruire un'architettura dell'informazione semplice e comprensibile.

• • •

Letture consigliate sull'architettura dell'informazione

IA per il Web e oltre

Come dare un senso a qualsiasi pasticcio: architettura dell'informazione per tutti

Nozioni di base sull'architettura dell'informazione

La differenza tra architettura dell'informazione e UX Design

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche