Home > Blog > Architetture millefoglie, ovvero: tab che passione

Architetture millefoglie, ovvero: tab che passione

Come conciliare l’esigenza di organizzare item complessi in piani o strati capaci di soddisfare differenti esigenze con quella (apparentemente opposta) di non sovraffollare la pagina o la navigazione primaria? In alcuni progetti recenti, l’impiego della navigazione a schede o tab mi ha permesso di risolvere il problema.

Il problema

Recentemente, in più di un caso, mi sono spesso trovato di fronte a queste esigenze:

  • smembrare un item complesso (un contenuto, una pagina, o più oggetti legati fra loro) in più unità, ciascuna corrispondente a un diverso stadio di consultazione o approfondimento (e a un diverso tipo di esigenza o obiettivo)
  • viceversa, accorpare elementi che sono fra loro connessi ma evitando di sovraffollare troppo la pagina o la navigazione;

parallelamente a questi vincoli:

  • collocare l’insieme di item senza intervenire sulla navigazione principale del sito (vale a dire, impossibilità di collocarli come nodi di secondo o terzo livello nel menu principale), agendo invece sulla navigazione contestuale
  • non superare un certo numero di clic nel menu principale per raggiungere un certo contenuto (concordo con Krug che non è la quantità di clic che conta, ma la qualità; tuttavia a volte, per vari motivi, ci si trova ancora a fare i conti con questo vincolo).

Questo insieme di esigenze e vincoli mi appaiono oggi come varianti di un medesimo problema più generale che li comprende tutti. Quale? Lo spiega bene la metafora del millefoglie di Luisa Carrada.

L’ispirazione: il millefoglie

Devo infatti a Luisa Carrada il titolo di questo articoletto, in particolare alla sua idea del testo come millefoglie sviluppata nel suo libro Il mestiere di scrivere (già sottolineata nella mia recensione):

[… Il web è] un millefoglie, che ci attrae dalla ciliegina o dal fiocchetto di panna e che poi possiamo assaporare in tutte le sue sfoglie. Scegliete la metafora che preferite, inventatene una nuova, ma cambiate il vostro modo di pensare il testo, sul web e sulla carta. Provate a pensarlo “a strati” (Carrada, Il mestiere di scrivere, 54-55).

Lo stesso concetto è ripreso da Luisa nel post Testi che esplodono, e si ricompongono:

Qualche anno fa le due autrici del sito E-write pubblicarono un articolo che si intitolava Il morso, lo spuntino e il pasto. […]

La metafora mangereccia era per dirci che un testo in rete deve sfamare diversi appetiti: per chi vuole sapere solo la notizia c’è il morso, cioè il titolo. Per chi vuole sapere qualcosa di più, ma alla svelta, c’è l’abstract. Per chi vuole sapere tutto, c’è il testo intero. E infine, per chi vuole un piatto ben condito ci sono le spezie, cioè i link per approfondire e andare oltre.

[… È importante] organizzare bene i contenuti lungo tanti piani o strati che si espandono in larghezza o scendono in profondità. Da un testo brevissimo, ma informativo e autonomo, a testi più ricchi e profondi.

[…] I redattori del sito di AT&T ci offrono […] un esempio piuttosto ben riuscito: un’unica notizia prende tanti formati, lunghezze, forme diverse, ma con una bella coerenza generale:

  • la prima pagina del media kit con il titolo, l’abstract, e i key finding, cioè i principali risultati della ricerca […]
  • l’executive summary, nella doppia versione abstract e slide/album orizzontale, scaricabile in pdf
  • il white paper The business impacts of social networking, di sole 8 pagine, ma impaginato con cura come un libro […]
  • le immagini nella Multimedia Gallery, per illustrare articoli

(Carrada, Il blog del Mestiere di Scrivere, Testi che esplodono, e si ricompongono).

La soluzione: le tab

Spesso per risolvere il mix di esigenze e vincoli descritto sopra non basta la classica navigazione contestuale realizzata come box di link correlati o approfondimenti (tipicamente in fondo o lateralmente al contenuto principale).

In alcuni progetti recenti, l’adozione di una navigazione interna alla pagina mediante schede o tab mi ha permesso di risolvere molte difficoltà e ottenere diversi vantaggi:

  • limita il fenomeno della cecità alla navigazione
  • permette di mantenere sullo stesso piano i diversi item (dalla opposizione item principale vs item correlati si passa alla distinzione tab di default + tab sorelle)
  • suggerisce meglio l’idea degli strati o punti di vista di un medesimo insieme complesso
  • permette di gestire meglio eventuali sottolivelli o ulteriori stratificazioni interne di ciascun item.

Si tratta quindi di espandere l’approccio millefoglie dal singolo testo all’ipertesto, alla pagina, alla collezione: vale a dire all’architettura dell’informazione nel suo complesso.

Alcuni esempi

Il sito della AT&T, citato da Luisa Carrada, usa le tab per scomporre in diversi strati i suoi Media Kits.

Le tab hanno permesso di risolvere uno spinoso problema nel redesign del sito di PeopleSoft svolto da Adaptive Path. Lo racconta Chiara Fox nell’articolo Re-architecting PeopleSoft.com from the bottom-up.

A goal for the new site was to support both types of users. We began by combing through the content inventory and the sites themselves to find all information related to products, no matter where they lived in the sites. Examples of content we found are support information, consulting services, training classes, and industry reports. We wrote each item down on a sticky note.

[…] These groupings formed the basic structure of the product module pages. Because there was so much information related to the products, we decided to divide the module pages into different tabs. The public would see three tabs— “Features,” “Technical Information,” and “Next Steps.” Customers and partners would see two additional tabs—“Support” and “Upgrade”—once they had logged into the site
(Fox, Re-architecting PeopleSoft.com from the bottom-up).

Anche il sito Apple fa ampio ricorso alle tab come navigazione interna alla pagina. In figura, due esempi relativi alla presentazione dei prodotti MacBook, e iTunes.