Sei qui: 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:

parallelamente a questi vincoli:

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. Sono andata a ripescarlo.

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:

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.


16.02.2009

Argomenti: Architettura dell'informazione web, Case study, Metodi, User experience


Commenti

24 Blog News

[...] Architetture millefoglie, ovvero: tab che passione [...]

16.02.2009


Ancora sulla navigazione a schede « Web Sapienza

[...] servono a navigare tra i contenuti e non come elementi di navigazione. Luca Rosati ne spiega il possibile utilizzo (smembrare il contenuto in più unità oppure accorpare elementi complessi). Modalità interessante [...]

05.03.2009


I commenti sono chiusi.

Feed dei commenti