La struttura dei layout: togliere il superfluo e aggiungere ciò che è significativo.

La ricerca della semplicità

Introduzione

I nuovi sviluppi del web degli ultimi 3-4 anni, conosciuti come web 2.0, hanno portato una nuova ventata di funzionalità, nuovi contenuti con fattori di crescita esponenziali, e anche nuovi stili, nuove tendenze e design più accattivanti e usabili con una tendenza generale verso la semplificazione.
Tuttavia molti layout dei siti e servizi web non hanno seguito questa tendenza e si sono indirizzati verso strutture apparentemente moderne ma poco utilizzabili e talvolta inaccessibili.

Anche lo sviluppo di nuovi servizi web ha subito una crescita esponenziale, ma spesso in maniera caotica e poco attenta ai temi di usabilità e accessibilità, introducendo un livello di complessità generale nelle funzionalità e nei layout. Basti pensare alle migliaia di piattaforme di condivisione dei contenuti per gli utenti (Splinder, Flickr, Blogger, MySpace, Youtube, ecc), o al proliferare dei servizi di Home Banking ora messi a disposizione dalla quasi totalità degli istituti di credito, anche i più piccoli, che molto spesso sono tutt’altro che facili e intuitivi.

In ogni progetto web, sito internet o web-application che sia, la scelta del layout e degli elementi che lo compongono è determinante per arrivare a un prodotto finale che sia usabile e accessibile.
Progettare con l’accessibilità in testa, come si sente dire sempre più spesso nel nostro ambiente, è un approccio fondamentale per arrivare a buoni risultati, ma l’altra parola chiave che dovrebbe essere presente nella testa degli sviluppatori e dei project manager è semplicità.

Non bisogna però confondere il concetto di semplice con il concetto di elementare o marginale.

Semplificare non significa togliere, ma eliminare il superfluo e aggiungere le cose che contano, o quelle che fanno capire e funzionare meglio un progetto.
Spesso quindi la semplificazione finale offerta all’utente può corrispondere a un maggior lavoro a carico di progettisti e sviluppatori.
Lo sanno bene le aziende che intorno ai concetti di semplicità hanno costruito una filosofia di lavoro, come la Apple per esempio.
Semplificare un layout non è affatto un gioco al ribasso ma un lungo e consapevole lavoro di definizione di ogni singola struttura presente in una pagina web.

Il processo di semplificazione di un layout è tutt’altro che banale perché prevede una profonda conoscenza di ogni aspetto del progetto web: contenuti, tecnologia, funzionalità, target degli utenti, ecc. Fare la scelta migliore per ogni ambito non è necessariamente l’unica scelta possibile, ma si dovrebbe avere una visione olistica delle cose, dove layout, funzionalità e contenuti dovrebbero integrarsi in un unicum il più semplice possibile.

La semplicità è strettamente legata all’accessibilità, perché nessun progetto realmente accessibile può essere presentato da un layout che non sia semplice e lineare o avere dei contenuti difficili da comprendere o da legare al contesto in cui sono visualizzati.
Non si può dimenticare infatti che l’accessibilità non è affatto (o non è solo) una questione di codice.
Dopo un estenuante lavoro di realizzazione di un progetto web accessibile per un comune, il primo contenuto inserito dall’amministrazione fu il seguente: “AI SENSI DELLA DELIBERAZIONE DEL CONSIGLIO REGIONALE 20 DICEMBRE 1999 N. 755 COME MODIFICATO CON DELIBERAZIONE DEL CONSIGLIO REGIONALE 15 FEBBRAIO 2006 N.235, PER LA FORMAZIONE DELLE GRADUATORIE PER L’ASSEGNAZIONE DEI CONTRIBUTI DEL FONDO AZIONALE DI CUI ALL’ART. 11 DELLA LEGGE 9 DICEMBRE 1998 N. 431 ED AL DECRETO DEL MINISTRO DEI LAVORI PUBBLICI DEL 7 GIUGNO 1999, PER IL SOSTEGNO ALL’ACCESSO ALLE ABITAZIONI IN LOCAZIONE.”, che tradotto in linguaggio semplice e accessibile da un redattore professionista per il web, dopo aver letto il contenuto divenne: “Contributi per le abitazioni in locazione. Entro il 22 febbraio le domande.

Questo stupendo esempio di “burocratese” (per fortuna degli utenti tradotto) ci serve per dire che se la semplificazione è eseguita in maniera non riduttiva non toglie valore il contenuto, ma ne elimina il superfluo migliorandone l’accessibilità per una fetta molto più ampia di utilizzatori, rendendo un progetto web più accessibile non soltanto per il codice ma anche per i contenuti.

Solo un approccio olistico quindi può produrre risultati soddisfacenti nei processi di semplificazione, ma tornando alla progettazione, i web design che si occupano in maniera esclusiva della definizione dei layout possono comunque attivare delle strategie valide nella maggioranza dei casi. Vediamo alcuni buoni consigli che si possono seguire.

Eliminare i doppioni.

Nei progetti per il web, la tendenza a duplicare i contenuti (compresi i link) è stata spesso un elemento chiave per l’abbellimento estetico.
In un’analisi che feci qualche tempo fa sul sito internet di Vodafone (quello precedente all’attuale) rilevai che le decine di sezioni disponibili in home page potevano essere ricondotte a 6 o 7 attraverso una riduzione ragionata degli elementi e l’eliminazione di tutti gli elementi doppi (i cui link conducevano a una stessa destinazione).

In molti progetti, tanto per esemplificare, si effettua la duplicazione dei menù al solo scopo di riproporre in modalità testuale una precedente soluzione realizzata con le immagini. Questo crea una doppia struttura che affolla inutilmente il campo visivo degli utenti e obbliga per esempio gli utilizzatori di screen reader all’ascolto ripetuto delle stesse liste di menù.

Evitare per quanto possibile i doppioni nelle strutture dei layout è senz’altro un primo passo.

Eliminare le abbondanze

Un layout colmo di elementi, colonne, riquadri, immagini, testi, può risultare confusionario e non attirare l’attenzione del visitatore sugli elementi fondamentali.
Eliminare tutto ciò che non è strettamente necessario potrebbe essere una giusta operazione, ma bisogna stare attenti alle valutazioni. Per esempio è naturale che un giornale online come repubblica.it abbia una homepage più complessa della homepage di Google, i due prodotti non sono comparabili.
Ma proviamo a dare uno sguardo alla homepage di Firefox e a quella di Internet Explorer.
Lasciamo per un attimo da parte le impressioni sull’estetica e sul codice e concentriamoci solo sulla struttura del layout.
La homepage di Firefox comunica subito l’essenziale: un logo dominante, un claim (sottotitolo) immediatamente esplicativo e un pulsante per scaricare il software in evidenza sia come posizione che come colori. Il tutto concentrato in una parte centrale della pagina che praticamente non è costituita da nessun box e nessuna colonna. Lo spazio per gli altri contenuti è stato ricavato in una barra di menù superiore e in spazi secondari nella parte bassa della pagina.
Tutto chiaro, inequivocabile.
La homepage di Explorer invece è decisamente meno intuitiva. Gli elementi presenti nella pagina sono molto uniformi, le dimensioni dei titolo e dei menù molto simili ai testi e l’unico elemento grafico riconducibile al software è situato in una piccola colonna di destra che più che un logo caratterizzante la pagina sembra un banner pubblicitario.
Il pulsante per scaricare il software è ben nascosto nella parte centrale del sito.
Insomma, nonostante il primo tab di descrizione di Explorer dica proprio “Elimina il superfluo”, a mio avviso questo processo di semplificazione non è stato fatto per la homepage del sito.

Poche colonne

C’erano una volta i siti a 3 colonne, un header e un footer.
Fin dagli albori della progettazione dei siti internet la suddivisione dello schermo in ideali colonne è stata una tecnica vincente e lo schema a tre colonne verticali era diventato uno standard che sembrava intramontabile.
Negli ultimi periodi, grazie anche all’introduzione di template appositamente studiati per i blog, si è assistito a una rivisitazione di questa modalità progettuale a vantaggio di strutture più semplici e flessibili.
Una riduzione del numero delle colonne è sempre auspicabile, perché conferisce al progetto un’interfaccia più semplice da consultare. Abbiamo già visto nell’esempio del paragrafo precedente come i progettisti di Firefox siano riusciti a ridurre al minimo gli elementi strutturali rendendoli quasi impercettibili. Altro esempio di utilizzo molto efficace di un layout non troppo strutturato è il sito di Skype, che presenta per la homepage un layout praticamente a colonna unica e per le pagine interne sostanzialmente solo due colonne.
Lo stesso non si può dire per Vodafone (riprendendo l’esempio di prima), che nel nuovo restyling fatto recentemente ha (forse) corretto gli evidenti errori di progettazione del progetto precedente rimuovendo i doppioni, ma ha introdotto uno schema di layout complesso che addirittura divide la homepage in 5 ipotetiche colonne che sono state riempite di decine di link e contenuti diversi.
Magari dietro a questo lavoro ci sono studi pubblicitari e di marketing complessi ma in ogni caso questo tipo di progetti non possono essere certo presi come esempio di semplificazione.

Conclusione

Il web è uno strumento formidabile di comunicazione.
Accessibilità, al di là delle linee guida e delle leggi, significa raggiungere il maggior numero possibile di utenti.
Per far questo ci si deve sforzare a produrre contenuti e presentarli in maniera facilmente consultabile.
Questi processi possono essere controllati avendo bene in testa una parola chiave, semplicità, e con l’applicarla a partire dai disegni dei propri layout.
Semplicità non significa togliere qualcosa, ma eliminare il superfluo e dare maggiore enfasi alle cose che contano.

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Fabrizio Caccavello
Fabrizio Caccavello

Web Accessibility Expert - User Experience Designer. Mi occupo di standard, accessibilità e strategie per il web, di HTML/CSS e di sviluppo di applicazioni desktop e mobile. Mi impegno nello studio della semplificazione dei layout come valore aggiunto e imprescindibile nello sviluppo di progetti accessibili e conformi agli standard.
Mi occupo di Responsive Web Design, tecnica di progettazione per il web multipiattaforma e multi device.
Consulente Super Senior in Accessibilità in Agenzia per l'Italia Digitale
Membro della commissione e-Accessibility di UNINFO e coordinatore del gruppo di lavoro "Traduzioni e adozioni"
Membro del Consiglio direttivo di IWA-Italy
Fondatore di Akebia - internet experience

Commenti

È presente 1 commento:

  1. […] precedente articolo ho evidenziato come un progetto accessibile, oltre a partire da un codice valido e a rispettare le […]

Rispondi

Link e informazioni