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 Luisa Carrada.

L’ispirazione: il millefoglie

Luisa Carrada parla del testo come un millefoglie:

[… 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, pp. 54-55).

Lo stesso concetto è ripreso da Luisa nel suo blog: post :

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 (Luisa Carrada, 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

Encyclopedia of Life

Le pagine della Encyclopedia of Life sono un esempio molto elegante di architettura del contenuto, stratificazione e lottizzazione: tab, indici, personalizzazione del contenuto, correlazioni.

Navigazione a tab: Encyclopedia of Life

Elsevier e Cell Press

Anche il progetto Article of the Future lanciato da Elsevier e Cell Press impiega una architettura a tab.

Article of the Future is an ongoing collaboration with the scientific community to redefine how the scientific article is presented online. The project’s goal is […] allowing readers individualized entry points and routes through the content […]

This organizational structure is a significant departure from the linear-based organization of a traditional print-based article in incorporating the core text and supplemental material within a single unified structure.

Architettura a tab: Cell press

I punti chiave del progetto.

layers of content based on [readers different] level of expertise and interest […]
A graphical abstract allows readers to quickly gain an understanding of the main take-home message of the paper […]
Research highlights provide a bulleted list of the key results of the article […]
A figure that contains clickable areas so that it can be used as a navigation mechanism to directly access specific sub-sections of the results and figures. […]
Real-time reference analyses provide a rich environment to explore the content of the article via the list of citations (Elsevier, Designing the Article of the Future).

Springer Images

Il progetto Springer Images è un modo per rendere accessibili i contenuti di libri o articoli in forma alternativa: attraverso le loro immagini. Per ciascuna figura abbiamo:

  • Caption
  • Extracts from this Article
  • Image Source Details
  • Other Images from this Article
  • Copyright Information
  • Keywords.
Navigazione a tab: Springer Images

Apple

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.

Architettura a tab: Apple

Finale letterario

Ho la mente coltivata
come una piantagione.
A seconda del seme
il suolo si colora
e come nella lingua
ogni zona ha un sapore.
Valerio Magrelli