Le persone sono istintivamente attratte dalle immagini di altre persone.
Per quanto riguarda le pagine web, si è riscontrata una tendenza a focalizzare l’attenzione su volti ed occhi, che, quindi, si sono rivelati degli elementi utili per dirigere lo sguardo e l’interesse degli utenti. Tale risultato è deducibile anche dall’immagine seguente, in cui la scala di colore, che va dal verde al rosso, rappresenta l’intensità dei click degli utenti.

Mappa dell'intensità dello sguardo relativa all'immagine di un bambino che guarda direttamente verso di noi.

L’immagine in basso, invece, mostra un altro risultato interessante, ovvero che non solo i volti umani sono in grado di attrarre gli utenti, ma riescono anche a dirigere l’attenzione nella direzione in cui stanno guardando.

Mappa dell'intensità dello sguardo relativa all'immagine di un bambino che guarda verso il testo.

Per quanto ci riguarda…Daresti uno sguardo alla nostra Vision?

Questo articolo è tratto da: ‘10 Useful Usability Findings and Guidelines’ , le immagini sono tratte da ‘You look where they look’. Per ulteriori informazioni sull’argomento: ‘You look where they look’, ‘Mixing eye tracking and qualitative user testing’, ‘10 Useful Usability Findings and Guidelines’ .

Un Tag Cloud è un set di etichette (tags) la cui grandezza è direttamente proporzionale al peso, ovvero alla frequenza con cui ogni etichetta è utilizzata. I tag, infatti, vengono rappresentati con un carattere di dimensione crescente con il numero di volte che sono associati ad un elemento e, in genere, sono ordinati alfabeticamente. Selezionando un’etichetta all’interno del tag cloud viene visualizzata una collezione di elementi associati con quella partcolare etichetta.

I Tag Cloud rappresentano un supporto molto utile alla navigazione, in quanto forniscono all’utente un quadro generale degli argomenti principali, e lo indirizzano verso specifici contenuti del sito. Uno dei principali vantaggi dei Tag Coud riesiede, infatti, nella loro capacità di evidenziare gli argomenti più trattati o più popolari, cosa che non avviene nei menu di navigazione ordinari. Queste “nuvole di etichette” offrono, quindi, un approccio interessante alla navigazione di un sito web e, anche se non possono sostituire la navigazione “ordinaria”, sono in grado di supportare l’utente, fornendo informazioni aggiuntive relative al contenuto del sito.

La particolare struttura dei Tag Cloud non ne permette una grande libertà di personalizzazione, ma ci sono, comunque, casi in cui designers sono riusciti a strutturarli in modo particolarmente creativo ed efficiente.
Di seguito riportiamo una breve lista di siti, in cui i Tag Cloud sono rappresentati in modo particolarmente accattivante, originale o efficace.

• webdesignerwall.com Nel limitato spazio della sidebar, il Tag Cloud attira l’attenzione per gli elementi grafici e la dimensione dei caratteri.
• bureausla.nl Il Tag Cloud rappresenta l’unico elemento di design della home page.
• ogilvy.com ogilvy.com è un sito in Flash che basa tutta la propria struttura sui Tag Cloud.
• tagspage.com Quella di tagspage.com rappresenta una soluzione alquanto rara, ovvero il Tag Cloud occupa l’intera pagina ed è caratterizzato da una soluzione di design molto particolare.
• tag-clouds.com Questo sito è una sorta di links directory, ed il colore del singolo tag è relativo all’argomento al quale è associato (ad esempio il marrone è associato all’etichetta “legno”).
• bigmediadaily.com In questo sito il Tag Cloud si trova in fondo alla pagina ed è caratterizzato dalla presenza di elementi di design studiati ad hoc.
• slingphotography.com/blog/ Il Tag Cloud, in fondo alla pagina, presenta una particolare colorazione a gradiente di colore.

Fonte immagine

Traduzione dell’articolo “Better Writing Through Design“, scritto da Bronwyn Jones e pubblicato nel numero 242 di A List Apart.

Un buon Web Design si distingue per la presenza di determinati elementi stilistici: è facilmente accessibile, facile da comprendere, dispone di una quantità tale di elementi da attirare l’occhio errante anche del visitatore più indeciso. I Web Designers sanno che tutto questo non accade per caso, ma è il risultato di un processo finemente curato, in cui si analizzano una serie di aspetti, legati al pubblico desiderato per il sito web. Puoi chiamare questo insieme di fattori “linguaggio visivo” o “gergo del design”. In ogni modo, quello che viene percepito come buon design è una prospettiva. Un punto di vista. Una voce.

Non è un caso che utilizziamo termini legati al linguaggio per identificare un design efficace sul web. Il web riguarda essenzialmente la comunicazione – dalla posizione di un elemento di navigazione alla dimensione e forma di un pulsante, ogni dettaglio favorisce la conversazione. Allora perchè il vero elemento fondatore del web, il testo scritto, ha assunto un ruolo marginale rispetto al design?

Fai delle ricerche. Escogiti una strategia nitida e ben focalizzata. Lavori sui dettagli. Tutto per creare un design che sia veramente in grado di comunicare con l’utente. Ma dedichi altrettanto sforzo alla stesura dei testi? Applica lo stesso procedimento che riservi alle immagini anche alle parole e potrai trovare la tua voce.

Dillo, non mostrarlo.

Una cosa è scrivere contenuto che riempia un sito web, un’altra cosa è scrivere testi coerenti con il sito web. Non inseriresti mai un’immagine stilisticamente incongruente in un design finemente progettato. Lo stesso va fatto per quanto riguarda il contenuto. Anche se hai progettato nel dettaglio una struttura web intorno ai testi che questo contiene, tale testo potrebbe risultare adeguato per quanto riguarda lo spazio fisico da riempire, ma potrebbe risultare non convincente al pubblico di riferimento.

Idealmente dovresti lavorare in collaborazione con uno scrittore dal primo giorno, in modo tale da sviluppare testi e design in maniera coerente. Coinvolgere, inoltre, uno scrittore dal principio potrebbe aiutarti a risolvere molti problemi – dalle questioni relative al contenuto, fino a intoppi riguardanti il flusso delle informazioni. Ricorda che anche gli scrittori sono creativi, e sono, in molti casi, i detentori di ciò che serve per ultimare il tuo design.

Se semplicemente non hai le risorse per assumere uno scrittore, dovrai fare tu stesso molta attenzione al linguaggio. E questo è il punto in cui la ricerca fatta durante la fase di stesura della bozza del design e relativa all’esperienza dell’utente (user experience) torna ad essere utile. Ti aiuta a progettare i tuoi testi.

Fai in modo che l’utente sia il benvenuto.

Tieni a mente le domande scottanti. Proprio quelle che ti fai ogni volta che dai inizio ad un nuovo progetto e che probabilmente sono:

• Chi visita il sito?
• Cosa cerca?
• Cosa vuole fare?

Se ci hai mai lavorato, sai quanto possono essere preziose le persone nel rispondere a queste domande. Probabilmente queste persone non appartengono alla categoria nickname-con-faccetta-scintillante, ma anche le persone più semplici (come “mia mamma” o “lo scettico”) trasformano il tuo pubblico in persone reali. Persone vere con un lavoro, esigenze complicate riguardanti il caffè, e senza tempo da perdere a cercare cose piuttosto che a trovarle.

In un certo senso, tu crei dei personaggi da queste persone. Stabilisci a cosa rispondono in maniera positiva, progetti il sito relativamente a differenti esigenze, e ti muovi nella direzione di un design efficace. Non a caso, un buon racconto fa la stessa cosa. Dimostra come differenti personaggi rispondono in modi differenti ad una determinata situazione. L’unica cosa che manca in quest’analogia è il narratore, e, quindi, è tempo di scrivere il tuo ruolo nella storia.

Chiamatemi Ismaele

Se chiedi alle persone perchè amano le storie che scrivono, otterrai sempre la stessa risposta: “perchè mi identifico con i personaggi”. Crea un punto di vista convincente per il tuo sito web, in modo da dare agli utenti qualcuno con cui identificarsi: Una prima persona “narrante” con una personalità distinta e cordiale. Sviluppare questa personalità non dovrebbe essere molto difficile. Hai già fatto il lavoro duro quando hai definito il tuo pubblico, ora ti serve solo di aggiungere un personaggio.

Prima di tutto aggiungi queste domande alla tua lista:

• Come voglio che l’utente si senta?
• Come porterei avanti una conversazione faccia a faccia con questo utente?

Quindi immagina l’utente come un tuo pari, qualcuno “con il quale parlare” e non “al quale rivolgersi”. Un video editor professionale. Un commensale raffinato. Un amante di auto sportive. Questo è colui al quale indirizzerai la tua voce nel passo successivo del processo di progettazione: il brainstorming.

Sing in the rain

Ah, quel momento magico in cui le Moleskine si riempiono, le persone escono dal tunnel della carenza di idee, e non ci sono cattive idee (a parte quella…). L’onorato momento del brainstorming (anche se delegato ad un’unica mente), ti aiuta a costruire concetti intorno alle strategie. Non c’è nessuna ragione per cui la stesura dei tuoi testi non partecipi a questo processo.

Mentre abbozzi il design, butta giù una frase o due. Colleziona parole come collezioni immagini. Dai la caccia ad i video di chi, a tuo parere, è un perfetto relatore. Ricorda che introducendo la tua figura narrante, tu stai creando un esperto dal quale i tuoi utenti torneranno per un consigli, informazioni ed ispirazione. Quindi vale la pena di spenderci un po’ di tempo. Questo semplificherà anche il lavoro della stesura dei testi nello specifico. Impara il linguaggio, quindi racconta la tua storia – non girarci intorno.

Lavora sul linguaggio

Progetta una voce per il tuo sito web e fai più che mettere insieme parole ed immagini in modo che appaiano gradevoli. Introduci il tuo utente in discussioni che entrambi volete portare avanti. Se ti trovi in difficoltà nella ricerca della perfetta frase, improvvisa. Parla di quello che vorresti esprimere, dopo di che scrivilo. Invialo per email ad un collega. Discutine. Mandalo tramite sms.

Un Web Design di successo riflette il modo in cui interagiamo, e il mezzo primario dell’interazione resta il testo. Noi condividiamo, chattiamo, commentiamo, associamo dei tag, e facciamo tutto questo utilizzando la parola scritta. Il web è Una Grande Conversazione. Let’s talk.

Tradotto con il gentile permesso di A List Apart Magazine e dell’autore.

L’attività tipografica è l’equilibrio e la relazione correlata tra la forma dei caratteri tipografici sviluppati sulla pagina. Questo equilibrio richiede delle competenze specifiche che talvolta possono essere particolarmente impegnative, tanto da giustificare il termine di arte tipografica come la capacità di fornire al lettore gli strumenti necessari per comprendere la forma ma allo stesso tempo assimilare la sostanza dei contenuti.

Possiamo quindi parlare di capacità estetico-contenutistica di una pagina web quando il designer riesce tramite la scelta opportuna dei caratteri tipografici a trasmettere una comunicazione verbale e visiva che diventa parte del lettore a mano a mano che si addentra nell’analisi della pagina stessa.

Una gerarchia visiva basata sull’uso di caratteri tipografici come un’adeguata punteggiatura, titoli, sottotitoli, utilizzo appropriato delle immagini  facilitano il visitatore del nostro sito a integrarsi  in esso e a percepire con consapevolezza il messaggio principale che da esso ne deriva. Le regole di base della tipografia per le pagine web sono pressoché simili a quelle comunemente usate per la stampa ma ci sono alcune piccole differenze non del tutto trascurabili come l’enorme differenza di risoluzione tra le due varianti. Mentre per la maggior parte delle riviste, magazine e giornali stampati la risoluzione comune è di circa 1200 dpi (acronimo di dots per inch,  punti per pollici)  raramente il monitor del nostro computer mostra più di 80 dpi. Questo elemento associato all’area utilizzabile per i nostri contenuti, molto inferiore a quella di una rivista stampata, influisce moltissimo sulla quantità di elementi che il copywriter può inserire nella pagina. La tipografia per il web inoltre soffre di fattori esterni che dovrebbero essere presi in considerazione dal designer prima e dallo sviluppatore poi per rendere quanto più uniforme il risultato finale che sarà visualizzato dai nostri lettori.

Nella tipografia di una rivista stampata i fattori esterni che influiscono sul risultato finale della nostra opera dipendono in maggior parte da noi, nel caso del web le pagine create vengono rielaborate volta per volta rigo per rigo, titoli, sottotitoli e contenuti dall’interazione tra il browser in esecuzione, server web e sistema operativo dell’utente. Si comprende quindi che un autore web non potrà mai essere sicuro al 100% che il lettore visualizzi le pagine nello stesso modo in cui lui le ha progettate, cause ricorrenti possono essere un carattere mancante sulla macchina dell’utente, un browser obsoleto o semplicemente diverso dal nostro.
Come accennato precedentemente affinché un font sia visibile dal nostro lettore questo deve essere installato sul computer dell’utente, riducendo così la scelta del designer per il suo “atto creativo” a pochi font, definiti come web-safe installati su tutti i computer come Arial, Georgia, Times New Roman, Verdana e pochi altri.  Eppure i caratteri tipografici contribuiscono a supportare la comunicazione di un sito web al pari, per esempio, dei colori. Esistono varie alternative percorribili dal designer per risolvere questo problema.  La prima soluzione, forse la più comune usata finora, è quella di sostituire un titolo testuale per noi rappresentativo con un immagine contenente il titolo con il font da noi desiderato. Questa soluzione, anche se appare a prima vista la più facile, non è del tutto conveniente per diversi motivi. Il primo su tutti è la difficoltà nel cambiare il titolo qualora ci fosse la necessità di farlo, implicherebbe un cambiamento a livello grafico e non una semplice digitazione del nuovo contenuto testuale.  L’altro motivo non secondo al primo è l’impossibilità da parte dei motori di ricerca di leggere il testo delle immagine, perdendo così in coerenza ed ottimizzazione del nostro lavoro.