Vai ai contenuti

LAU



Home > progettare > usabilità: la progettazione utente-centrica > L'imperfezione che colpisce: "errori" calcolati nel web design


L'imperfezione che colpisce: "errori" calcolati nel web design

Da un articolo di A List Apart, una riflessione su come rendere più gradevole e facile da usare una pagina web introducendo piccole imperfezioni nel suo design.

a cura di: Filippo Pusset | 8 aprile 2009


1. Introduzione

Il recente articolo di A List Apart "The Elegance of Imperfection" fornisce un interessante spunto creativo per il web design, a partire dal concetto di wabi-sabi.

Il wabi-sabi è una visione artistica, originaria della cultura giapponese, che rimanda all'accettazione della naturale transitorietà ed imperfezione delle cose:oggetti d'arte e di alto artigianato wabi-sabi saranno quindi volutamente imperfetti, come un bicchiere per il tè in ceramica leggermente asimmetrico in quanto realizzato a mano.

coppa wabi-sabi: un semplice oggetto in materiale chiaro, con alcune granulosità e imperfezioni più scureFig. 1
Una tazza da tè in stile wabi-sabi

Proprio l'accettazione di queste piccole imperfezioni nel processo creativo, tuttavia, consente di ottenere come risultato un prodotto ben diverso da quelli (artificialmente) perfetti, sterili ed omologati tipici della produzione di massa. Al contrario un oggetto (o un sito) che sposa questa filosofia sarà elegante e in grado di comunicare emozioni.

Altre caratteristiche del wabi-sabi sono la semplicità e la sobrietà raggiunte tramite l' economia di mezzi: questi sono attributi verso cui il web design di alto livello è sempre più orientato, con un focus rivolto all'essenza, allo scopo del prodotto, ed a una generale sobrietà grafica.

torna su

2. Sfruttare le imperfezioni

Le premesse finora presentate parrebbero discordanti tra loro: si potrebbe pensare che inserire in un sito sobrio imperfezioni e rimandi al mondo naturale possa distrarre gli utenti che lo usano, facendoli perdere nei dettagli.
In realtà è vero il contrario, almeno quando un sito non subisce le sue imperfezioni e le metafore grafiche in esso contenute ma le utilizza progettualmente in modo consapevole, sia per spostare l'attenzione sugli elementi più importanti della pagina che per rimandare ad un ambiente reale conosciuto, consentendo a chi utilizza il sito di contestualizzare meglio i dati in esso contenuti.

In realtà molto spesso il lavoro del web designer è proprio quello di riprendere, nel proprio sito web, alcuni aspetti concreti dell'istituzione o azienda rappresentata online. Questi concetti possono sembrare astratti, ma in realtà il loro campo di applicazione è molto vasto, tanto che sovente chi realizza pagine web li fa suoi senza rendersene conto.

Ad esempio, nel momento stesso in cui si inserisce una ombreggiatura nel proprio sito, si vuole probabilmente accostare al concetto di "pagina web" quello di "pagina fisica" rappresentata da un foglio di carta. Così facendo si sta inserendo una " contaminazione di realtà" nel processo di design, contaminazione che si esprime ed anzi può essere riconosciuta proprio tramite l'illusione di tridimensionalità data dall'ombreggiatura: ciò consente di dare calore e personalità alle proprie pagine.
Un bottone di un'interfaccia web che dà l'illusione grafica del rilievo è più efficace, in termini di usabilità, di uno che non ha questa caratteristica, in quanto ricorda all'utente un comportamento a cui è abituato nel mondo fisico.

Inoltre, le imperfezioni possono guidare l'occhio nel punto dove si manifestano: ad esempio, l'illusione di un foglio in rilievo o di un post-it "appoggiato" sulla pagina, che rompe il resto dell'ordine che pervade il sito, può portare a concentrarsi sul contenuto che compare nella parte corrispondente. Sempre più siti di web design si affidano ad un design basato sull'uso di griglie, un approccio derivato dalla tipografica cartacea che consiste nel suddividere le pagine in aree predefinite e di adattare a tali aree i contenuti, come immagini e blocchi di testo.

Si tratta di un potente strumento per organizzare i propri contenuti ed evitare che siano organizzati male, che in genere è buona norma utilizzare: il caos fine a sé stesso, non organizzato, è cattivo design che non è utile a nessuno, laddove un'organizzazione dei contenuti ordinata consente di orientarsi e creare dei pattern di fruizione della pagina.
D'altro canto, un design totalmente e rigidamente codificato rischia di risultare asettico e poco gradevole da vedere. Al contrario, l'inserimento di un elemento che spezza la griglia crea discontinuità, rivitalizzando il design e ponendo l'accento sulla parte di rottura.

torna su

3. Esempi pratici

Alcuni esempi possono aiutare a visualizzare i concetti espressi finora: il primo presentato è quello di un sito che richiama al mondo naturale tramite alcune "imperfezioni" inserite nel suo design, utilizzate anche per spezzare la griglia (in alcuni casi in modo forse esagerato rispetto a quello che un sito medio di una pubblica amministrazione può permettersi, ma comunque utile per esemplificare). Il sito scelto, http://www.lakecrackenback.com.au/, è quello di un hotel nel Parco Nazionale di Kosciuszko, in Australia. Andiamo ad analizzare una sua pagina interna.

imamgine del sitoFig. 2
Una pagina interna del sito

Il sito (Fig. 2) è progettato con in mente la metafora della pagina web come pagina catacea fisica. Le immagini sono foto o post-it appoggiati ad un foglio principale; le texture utilizzate ricordano l'ombreggiatura della carta, e ci sono parecchie imperfezioni che rendono più credibile la metafora e consentono di rompere la griglia.

Fig. 3
Il menu di navigazione di sinistra

Una di esse è il menu di navigazione sulla sinistra (Fig. 3): volutamente non uniforme, esso si dispone a cavallo tra il contenitore principale del testo e lo sfondo, spiccando più all'occhio di quanto sarebbe successo se fosse stato inserito totalmente nello spazio del contenitore.

parte del sito Fig. 4
Un elemento del sito

Altre "imperfezioni" (fig. 4) : notare la cornice della foto, ma soprattutto l'andamento discretamente imperfetto della sottolineatura del titolo, che seguendo la metafora fisica rappresenta un filo di spago collegato alla foto.

iscrizione newsletter Fig. 5
Link ad iscrizione newsletter

L'elemento "subscribe" posto in fondo a sinistra nella pagina (fig. 5) ricorda le targhette attaccate alle valigie, ed inoltre essendo posto in modo leggermente inclinato rispetto alle altre componenti della pagina fa sì che l'occhio vi si soffermi sopra anche se è di ridotte dimensioni. Questo è forse l'esempio migliore nel sito di utilizzo non invasivo di una metafora del mondo naturale per rompere l'ordine della pagina.

Logicamente le caratteristiche del contenuto da presentare possono sposarsi più o meno bene con questo tipo di progettazione. Sono molti però i siti che possono trarre beneficio dalla rottura della griglia e dall'inserimento di piccole imperfezioni al loro interno, anche in modi meno evidenti e più discreti.
Prendiamo ad esempio la homepage del sito dell'associazione religiosa americana Right form the Heart.

iscreenshot della pagina
Fig. 6
Il sito Right from the Heart

La colonna centrale è posta in rilievo e quindi leggermente "staccata" dalle altre, creando una sensazione di profondità e tridimensionalità. Soprattutto, essa rompe dallo schema classico formato dal contenitore principale con le due colonne ai lati, tutte allineate tra loro.

dettaglio della colonna centrale
Fig. 7
Dettaglio della colonna centrale di Right from the Heart

Questa asimmetria tutto sommato contenuta è tuttavia sufficiente a creare dinamicità nella pagina ed a mettere la foto, e con essa la colonna centrale che ne è il proseguimento, al centro dell'attenzione: il lettore per prima cosa è spinto a concentrarci sulla foto per poi proseguire nella lettura del contenuto della colonna centrale.

Per concludere possiamo esaminare un sito istituzionale italiano, per renderci conto che c'è la possibilità di operare anche su un sito simile. Abbiamo scelto il sito del corpo di Polizia Municipale della città di Torino.

sito dei Vigili Urbani
Fig. 8
Sito della Polizia Municipale di Torino

Notate la colonna di navigazione sulla sinistra: essa è disposta in modo volutamente asimmetrico rispetto al resto dei contenuti, dando interesse e movimento ad un sito realizzato in modo graficamente semplice ma efficace ("economia di mezzi").

dettaglio menu
Fig. 9
Dettaglio del menu di navigazione di sinistra

Inoltre, il logo cittadino disposto sulla colonna può ricordare uno stemma, o le spalline delle divise dei vigili. Abbiamo comunque un dettaglio che si integra in modo coerente con la grafica e lo "spirito" del sito per creare dinamismo.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]