Share
La parola metafora è probabilmente più simile a un pezzo di scrittura, quando è usato come figura letteraria per effetto descrittivo. Tuttavia, oggi parleremo di un diverso tipo di metafora: uno visivo che possiamo usare nel web design.
metafora: una figura retorica in cui un'espressione è usata per riferirsi a qualcosa che non denota letteralmente per suggerire una somiglianza - WolframAlpha
Sul web, usiamo molto le immagini e le icone per simboleggiare cose diverse. Quando visitiamo una pagina Web, eseguiamo la scansione per cercare di trovare ciò di cui abbiamo bisogno il più rapidamente possibile e le immagini vengono utilizzate per accelerare tale processo. Possiamo interpretare qualcosa molto più velocemente con stili e immagini familiari. Ad esempio, possiamo riconoscere immediatamente un errore quando c'è qualcosa come un punto esclamativo o un colore giallo o rosso. È tutto merito della familiarità.
Soprattutto negli ultimi tempi, abbiamo iniziato a vedere le metafore urbane apparire nel web design, usando elementi familiari come una libreria o un muro all'interno di un disegno. Tuttavia, ci sono un sacco di altre metafore che vengono utilizzate nel web design per colmare il divario tra effettivo e virtuale vita.
La definizione "ufficiale" di una metafora non è cambiata dalla sezione precedente: una figura retorica in cui un'espressione viene usata per riferirsi a qualcosa che non denota letteralmente per suggerire una somiglianza. Questo è molto vero quando guardiamo il web e l'uso di metafore su quella piattaforma. Lì, utilizziamo i pixel come rappresentanti di oggetti del mondo reale per colmare un certo senso di familiarità tra la vita virtuale e quella reale.
Ci sono diversi tipi di metafore che usiamo anche sul web: quelli su scala più piccola che imitano oggetti della vita reale come pulsanti, metafore iconiche che copiano le associazioni di vita reale e li usano sul web e quelli estesi in cui un intero disegno può ruotare attorno a una metafora.
Un pulsante sul web non è in realtà il pulsante vero? No, è un mucchio di pixel creati per sembrare un pulsante perché (a) ce l'abbiamo fatta e (b) i nostri utenti lo riconosceranno e sapranno che è qualcosa da premere (o, più correttamente, cliccato). Rendiamo questo collegamento simile a un pulsante perché siamo abituati a riconoscere un pulsante come punto di interazione nella vita reale e saremo in grado di distinguere quel particolare collegamento dal resto della pagina con poco sforzo.
Imitare le convenzioni della vita reale ci aiuta a interagire con il mondo virtuale. Migliora la nostra esperienza utente perché il web non risulta essere un'interfaccia straniera che richiede un sacco di apprendimento con cui interagire. Sappiamo che i pulsanti sono pulsanti perché sembrano praticamente uguali ovunque, sono a spunto visivo e gli utenti interagiscono con loro istintivamente.
Lo stesso vale per Windows, desktop e schede nella progettazione dell'interfaccia utente. Steve Krug, nel suo libro di usabilità Do not Make Me Think utilizza notoriamente l'esempio delle schede di cartella come un grande uso di metafore nella progettazione dell'interfaccia.
Non sono stato in grado di dimostrarlo (ancora), ma sospetto fortemente che Leonardo da Vinci abbia inventato i separatori di schede qualche volta verso la fine del XV secolo. Come dispositivi di interfaccia, sono chiaramente un prodotto geniale. - Steve Krug
Le schede sono il classico esempio di una metafora dell'interfaccia intuitiva.
Le metafore identiche leggermente diverse sono icone, proprio come abbiamo detto prima. Ad esempio, i punti esclamativi vengono utilizzati per rappresentare uno stato di importanza o avviso in modo da utilizzare tale icona nello stesso contesto sul web. Inoltre, potremmo usare il simbolo di un telefono o una lettera per indicare il contatto.
Per un esempio perfetto, possiamo guardare il dashboard di WordPress. Ognuna delle voci del menu sul lato sinistro presenta una sorta di metafora, come il pulsante per rappresentare i post e il fumetto per i commenti.
L'incoraggiamento a usare tali metafore è identico a quello della sezione precedente: crea una certa familiarità - un "collegamento" se vuoi - al mondo reale che aiuta il lettore a interpretare e navigare in una pagina con relativa facilità.
Abbiamo fatto un breve tour per replicare oggetti di vita reale e usare icone per formare collegamenti, ma c'è un altro tipo importante di metafora: quelli che si estendono oltre un singolo elemento. L'esempio più eclatante che riesco a pensare non è un sito web, ma un'app. iBook non sembra una normale app per iPad perché ha lo scopo di imitare l'aspetto di una vera libreria per aggiungere quel senso di familiarità per il lettore. Guardi iBooks e capisci immediatamente che ha qualcosa a che fare con i libri. Se fatto bene, questi tipi di siti web possono rivelarsi davvero fantastici!
Le metafore estese sono meno comuni degli altri tipi che vengono utilizzati nella maggior parte dei progetti di siti Web sul Web.
Anche se "metafora estesa" potrebbe essere la terminologia sbagliata, questo tipo di metafora è ancora il tipo più ampio che puoi ottenere. Offrono una piccola finestra del browser nella vita reale e possono essere un metodo istantaneo per creare una prima impressione di ciò che il sito è tutto su.
Nello scrivere, usiamo una metafora per esprimere, spiegare e descrivere. Le metafore possono essere un modo utile per connettere un'idea con una che non è letteralmente simile a (dove una similitudine sarebbe molto probabilmente usata al suo posto), ma dove i due possono essere usati insieme per rappresentarsi l'un l'altro.
Le metafore nel web design, come la scrittura, sono usate come un meccanismo descrittivo collegando oggetti e idee della vita reale ai pixel in un sito web. Può sembrare molto piccolo e qualcosa che può essere trascurato, ma i lettori web hanno una capacità di attenzione più breve rispetto ai lettori di stampa, quindi il tempo è essenziale quando si naviga in un sito web. E, in quelle circostanze, le metafore diventano utili copiando le associazioni di vita reale (come il colore rosso con pericolo, o una lente di ingrandimento con ricerca) e usandole sul web in modo che il processo di scansione di una pagina Web sia accelerato.
Come designer, possiamo sfruttare le metafore per aumentare l'attrazione per il design e rendere i nostri progetti memorabili. Vogliamo che gli utenti si colleghino con il sito Web e, già, la maggior parte dei siti Web ha una qualche forma di metafore in uso per adattarsi al proprio pubblico di destinazione. I siti web riflettono concetti di vita reale, aziende, persone e oggetti, e gli stili scelti non differiscono da quelli nella vita reale. Non solo le metafore creano un senso di familiarità tra i pixel su una pagina web e la materia della vita reale, ma possono anche essere utilizzati per connettersi a un pubblico specifico.
Prendiamo ad esempio la homepage CBeebies della BBC. Il sito è costruito intorno a uno sfondo raffigurante un giardino con alberi e arcobaleni, un'immagine idealistica del mondo che è comune a molti media orientati ai bambini. La metafora di un giardino online accoglie i bambini nell'uso del sito, mentre se fosse progettato come la homepage di Microsoft, non sarebbe così attraente per i bambini.
Le metafore sono usate su tutti i media per esprimere qualcosa come qualcos'altro, e, sui siti web, sono un ottimo modo per comunicare familiarità e attirare i lettori verso un design. Quando consideriamo questo nella scala dei 4,5 miliardi di anni del mondo, il web è ancora un mezzo molto nuovo, quindi creare collegamenti tra reale e virtuale è una misura di transizione ma che funziona.
Flourish è un'agenzia di web design che prende sul serio il suo nome. Con un rigoglio definito come "crescere o svilupparsi in modo sano o vigoroso", viene presentato il concetto di un albero in crescita in una terra altrimenti sterile e un progetto a base naturale basato sulla natura.
Il modello "Interior Design" è un oggetto ThemeForest in grado di rappresentare un ufficio, un perfetto esempio di metafora in gioco.
Il lancio è un altro oggetto ThemeForest, ma questo simula il rilascio di un sito Web per il lancio di un razzo, così come molti altri progetti simili.
Mutant Labs, una società di sviluppo software, prende la parte "laboratorio" del loro nome in un contesto scientifico per il design del proprio sito.
Accentsconagua