Costruire un tema: lunghezza e dimensione testo.

Nella prima puntata vi avevo parlato della posizione dei contenuti, importante perché gli occhi vengono attratti principalmente da alcune sezioni durante i primi istanti della visita di un sito.

Tutto, durante la permanenza su un sito continuerà a ruotare intorno a loro. Gli occhi.

La lunghezza e la dimensione del testo infatti, saranno i diretti responsabili dei movimenti delle nostre pupille.

Maggiore è la lunghezza di una riga, maggiore sarà il movimento orizzontale necessario per percorrerla con conseguente affaticamento dei muscoli e maggiori possibilità che venga persa la riga quando si torna accapo.

Questo si traduce in difficoltà di lettura che può portare gli utenti ad abbandonare il sito perché distratti, infastiditi o affaticati.

La domanda che sorge spontanea è dunque: qual è la lunghezza ottimale di una riga di testo?

Per rispondere a questa domanda bisogna iniziare a tenere in considerazione vari aspetti.

In primis, come al solito, lo strumento hardware utilizzato dal visitatore: computer portatile? Monitor di un computer fisso? Palmare?

Il campo visivo di un osservatoreIl perché è presto detto: la distanza più o meno accentuata dell’occhio del lettore dal monitor allarga o restringe il campo visivo, sia verticalmente che orizzontalmente e questi strumenti hanno una distanza d’uso media abbastanza diversa fra loro. Non ho mai visto utilizzare un palmare a braccia tese, mentre – verosimilmente – un monitor di una scrivania può distare 60-70 cm dal nostro viso.

Grazie ad alcuni test comunque, si è calcolato che la lunghezza ideale del testo su web è di 70-80 caratteri (12-14 parole circa).

Inizialmente, quando ho iniziato a costruire il blog, il corpo centrale (destinato ad ospitare i post) aveva una larghezza di 720px (vi ho già raccontato della mia necessità di “maggiore spazio”). Volendo seguire questa raccomandazione, ho ristretto lo spazio ad un più modesto valore di 640px. Una via di mezzo tra i 520px del layout precedente e i 720px che avevo sognato di raggiungere. Si tratta del 30% di caratteri in più rispetto a quelli raccomandati. Andare oltre potrebbe risultare faticoso da seguire.

Fortunatamente a venirci parzialmente incontro c’è la spaziatura e la larghezza dei caratteri. Ogni font infatti, ha caratteristiche differenti.

Volendo fare un po’ di storia, il courier, ad esempio, è un carattere “monospace” che divenne di uso comune nelle vecchie macchine da scrivere che non potevano gestire la spaziatura variabile (la i e la w in un font a spaziatura variabile hanno una “larghezza” o “occupazione di spazio” diversa). I computer possono agevolmente gestire la spaziatura variabile e per questo si può giocare con font e dimensioni.

Confronto larghezza fontOvviamente la spaziatura più o meno accentuata può risultare più o meno gradevole all’occhio, tanto quanto l’essere “sans serif” (o “senza grazie”) e cioè privo di una serie di particolari che “arricchiscono” il carattere. Un carattere “sans serif” d’uso comune è il Verdana.

Il Verdana è un font pubblicato nel 1996 da Microsoft progettato per garantire grande leggibilità anche a basse risoluzioni grazie alla sua pulizia (“sans serif”), la sua larghezza e la spaziatura considerevole. L’ultima qualità, inoltre, viene incontro alla mia necessità di allargare lo spazio destinato ai post, salvando in qualche modo capra e cavoli. Per maggiori informazioni a riguardo vi mando alla relativa pagina su Wikipedia.

La dimensione dei caratteri infine, diventa un discriminante fondamentale in caso d’accesso da parte di persone con problemi alla vista. Un buon contrasto, unito ad una dimensione non troppo piccola può risultare la chiave vincente per catturare l’attenzione ed evitare che i lettori scappino ancor prima di completare la prima frase.

Tenere questi aspetti in considerazione quando si costruisce una pagina web è importante quasi quanto la validità dei contenuti. 🙂

Si continua lunedi prossimo…

Emanuele

2760889966649.

Poi aveva cominciato a scrivere al centro esatto del foglio, senza bisogno di contare i quadretti.

2760889966649. Aveva rinchiuso la penna e l’aveva posata a fianco del foglio. Duemilasettecentosessantamiliardiottocentottantanovemilioninovecentossesantaseimila
seicentoquarantanove, aveva letto ad alta voce. Poi di nuovo, sottovoce, come per appropriarsi di quello scioglilingua. Decise che quel numero sarebbe stato il suo. Era sicuro che nessun altro al mondo, nessun altro in tutta la storia del mondo, si fosse mai fermato a considerare quel numero. Probabilmente, fino ad allora, nessuno l’aveva neppure mai scritto su un foglio e men che meno pronunciato ad alta voce.

Dopo un attimo di esitazione era andato due righe sotto e aveva scritto 2760889966651. Questo è suo, aveva pensato. Nella sua testa le cifre avevano assunto il colore livido del piede di Alice, stagliato sui bagliori azzurrati del televisore.

Potrebbero anche essere due primi gemelli, aveva pensato Mattia. Se lo sono…

Tratto da: “La solitudine dei numeri primi” di Paolo Giordano

Emanuele

Costruire un tema: scelta dei colori.

Rieccoci con l’ennesimo appuntamento. Ho già parlato di layout e dimensioni, il prossimo passo è capire che tono dare alle nostre pagine.

Inutile farvi la mielosa manfrina sul verde-speranza, rosso-passione, nero-inquieto, arancione-piccante e così via. Lo sappiamo tutti.

Io ad esempio volevo dare al blog un tono fresco, leggero e allegro, così, come psicologia insegna, i colori da usare erano pastelli chiari: azzurro, verde (volevo persino mettere un po’ di giallo ma poi vi spiego un po’ perché non l’ho messo…). Anche il colore del testo non è un semplice nero.

Innanzitutto dobbiamo rispondere ad una semplice domanda: di cosa parleremo nel blog? Stiamo costruendo il nostro tema e abbiamo la possibilità di ottimizzarne ogni suo aspetto. Quali saranno gli argomenti?

Nel mio caso la risposta la conoscevo già, il mio blog va avanti da anni e difficilmente cambierà target. E’ un blog personale e dunque pieno di racconti di giornate più o meno allegre, più o meno pesanti, più o meno storte.

Ecco, l’ultima parola potrà sembrare stupida ma non lo è.

La vita (qualche manfrina mielosa devo pur scriverla da qualche parte) è fatta di alti e bassi, così, come vi sentireste a scrivere dentro un cuoricino frasi inneggianti l’odio?

E’ un esempio drastico di come il contenitore possa risultare in contrasto con il contenuto. Potrà sembrar banale ma non lo è.

Questo periodo della mia vita è particolarmente allegro e questo – è giusto dirlo – volevo farlo risaltare. Sia perché mi rispecchia molto, sia perché i contenuti presumibilmente continueranno ad avere questa linea.

Però, so che non sempre sarà così. Si dice che uno degli errori più grandi degli uomini sia quello di non cercare le nuvole in cielo quando c’è bel tempo. Io voglio esser preparato, così mi son chiesto se non corressi il rischio di odiare (parola grossa) questo posto ogni volta che, arrivando da queste parti di pessimo umore, mi sarei ritrovato un bel sole (ecco il giallo!) stampato in faccia.

Va bene che psicologicamente può persino aiutare, però volevo sentirmi libero di adattare il tema ai contenuti e non il contrario.

Volevo dargli un argomento ma non chiuderlo a doppia mandata su uno specifico. Così, l’header è sì allegro, ma non carico. C’è un bel sorriso, ma… provate a mettergli una mano davanti. Cosa vedete? Un panorama sereno, che tra l’altro incuriosisce per il suo inconsapevole aspetto indeciso.

Bene, dopo questa manfrina sono sicuro che anche voi avrete scelto i vostri colori. Ma… come far combaciare tutto in modo da non essere un pugno nell’occhio, come un verde acceso accanto ad un giallo?

Palette coloriIo non sono un bravo grafico (non sono neanche un mago nell’accoppiare scarpe, jeans e maglietta) ma c’è chi ha fatto mezzo lavoro per noi. Quelli di COLOURlovers. Sul sito trovate schemi di colori proposti da utenti (con un pizzico di buon gusto in più di noi) che sono continuamente, scelti, rivisti e votati dalla community. Insomma, scegliete un umore (provate con “happy” ad esempio) e trovate sicuramente un accoppiamento carino. Ah, se ve ne innamorate, hanno persino un feed costantemente aggiornato con gli ultimi inserimenti.

Ovviamente ricordatevi di cosa state facendo: un sito web non è una locandina pubblicitaria, così i colori troppo accesi visti su un monitor (che li illumina) potrebbero dare più fastidio rispetto alla stessa versione stampata. In linea di massima i colori pacati vanno bene per il tema, quelli accesi per dei particolari (piccoli) che volete far risaltare.

Infine, non dimentichiamo la cosa più importante: la leggibilità.

Stiamo costruendo (e lo dico per l’ennesima volta) un blog! La caratteristica che lo contraddistingue è proprio la presenza continua di nuovi contenuti. Un conto è dover leggere una sola volta un testo giallo canarino su sfondo bianco, un conto è doverlo fare ogni giorno per ogni nuovo contenuto. Ricordatevi dei vostri lettori (oppure pagategli la visita dall’oculista).

La scelta del colore del testo (e del suo contrasto con lo sfondo), assume dunque un aspetto fondamentale.

Alcune ricerche sperimentali condotte una decina d’anni fa e volte a valutare la leggibilità di un testo in base ad alcune coppie di colori, hanno mostrato come la migliore leggibilità si ottenga col verde su sfondo giallo (ebbene si, sorpresa per tutti). L’elevato contrasto favorisce la lettura. A seguire immediatamente questo risultato c’era il classico “nero su bianco” (eccolo, ve lo aspettavate…). Il bianco su nero e altre combinazioni mostrarono livelli di leggibilità inferiori.

Spettro colori RGBPersonalmente non avevo voglia di inserire uno sfondo verde, però volevo tenere conto di questo aspetto e per questo entra in gioco lo spettro dei colori. E’ infatti consigliabile evitare l’accoppiamento di colori agli estremi dello spettro (ad esempio giallo e viola o rosso e blu) in quanto affaticano la vista. Per questo il testo sul mio blog non è nero (codice RGB #000000 ma un più pacato #444444).

Tale conferma arriva da WordPress stesso: durante lo sviluppo della versione 2.7 una grande attenzione fu posta alla qualità del backend. Fu chiesto il supporto di designer professionisti e… avete notato come il testo, a differenza delle versioni precedenti, non sia in un semplice nero su bianco ma un grigio (codice #333333) su bianco? Tutto torna. 🙂

Ah, un ultimo consiglio: evitate il rosso e il verde per il testo. I daltonici hanno difficoltà a distinguerli e l’accessibilità passa anche da li.

Si continua giovedì…

Emanuele

Nato per gioco.

Viaggiare. Ecco cosa amava fare Elena. Aveva scoperto questa passione da piccola, quando suo padre durante le vacanze estive non perdeva mai occasione per farle conoscere nuovi paesi. Non si allontanava mai tanto dal suo in realtà, però quelle ore passate in auto furono sufficienti per farle capire che il mondo si estendeva ben oltre i 5 chilometri quadrati scarsi che, dalla Chiesa del paese arrivavano fino al cimitero, attraversando un lungo viale con un’unica curva verso sinistra.

Le era entrato nel sangue e l’aria che filtrava in quella vecchia Fiat un po’ arrugginita attraverso un finestrino tenuto sollevato per i tre quarti grazie ad una molletta da bucato, le sembrava qualcosa di incredibile. Come se, fino a quel momento, l’unica aria esistente dovesse essere stata, per una strana congettura della sua mente, quella che le case del suo paese potevano trattenere.

A diciott’anni, un paio di giorni dopo la fine della scuola, l’occasione della sua vita, quella che cambia per sempre la storia di una persona, bussò insistentemente alla sua porta.

Erano le 15, il sole picchiava forte sul paesino sperduto tra le colline e tutto quel che le andava di fare era rimaner sdraiata sul divano guardando fuori dal balcone, con le gambe che pendevano oltre il bracciolo alla ricerca di aria fresca. Il cielo oggi è di un azzurro spettacolare, pensò. Qualche insetto ogni tanto veniva a disturbarla, mentre giocava con una pallina di gomma sul suo ventre, ma sembrava non curarsene più di tanto.

A rompere il silenzio di quel pomeriggio d’inizio estate fu il rumore di una vecchia lambretta, probabilmente poco curata, che si andava avvicinando speditamente verso la palazzina in cui abitava. Via Palmiro, era una delle vie più antiche del paese. Distava circa duecento metri dalla Chiesa e aveva ancora il tipico pavè a pietra larga costruito alla fine del secolo scorso. Il vecchio macinatoio, sito all’inizio della via, era ormai chiuso da tempo. L’industrializzazione aveva portato via ogni speranza di sviluppo nel paese che, di anno in anno, vedeva i giovani partire verso le grandi città. Era strano che un’auto passasse da quelle parti. Le uniche che, dirette da una città all’altra, attraversavano il paese, percorrevano sempre il viale principale che tagliava in due quella macchia di tetti rossi.

La curiosità ebbe la meglio sulla pallina di gomma che cadde sul suo fianco andandosi a nascondere nell’insenatura del divano. Rimase ferma, cercando di risalire al possibile proprietario. In pochissimi secondi, una dozzina di volti attraversarono la sua mente. Nessuno però riuscì ad accenderle qualcosa dentro, così, l’unica soluzione era quella di scollarsi da quel tessuto ormai accaldato e correre verso il balcone. Non ebbe il tempo di razionalizzare la sequenza di azioni che avrebbe dovuto compiere che il motore si spense. Qualcuno era fermo sotto casa sua.

A casa Mitadi vivevano in cinque. La casa, una vecchia palazzina costruita alla fine dell’800, era di loro proprietà da due generazioni ed Elena aveva ereditato la stanza della nonna morta quando aveva appena sei anni. In famiglia non si viveva male. Il nonno, proprietario della farmacia del paese, era un uomo distinto, un po’ stordito dalla senilità. Aveva difficoltà a ricordare le cose ormai, tanto che aveva preso l’abitudine di scrivere, su un foglietto di carta, tutti gli impegni che avrebbe dovuto portare a termine. Le note rigorosamente impilate secondo ordine cronologico, venivano consegnate ad Elena, in un rito che sembrava esser diventato qualcosa di solenne per l’uomo.

Subito dopo pranzo, proprio quando Elena amava andarsi a sdraiare sul divano nel suo dolce far niente, il nonno la chiamava in cucina, le consegnava i foglietti e le ricordava di prestare attenzione affinché non dimenticasse di segnalargli nessuno degli impegni scritti li. Lei rispondeva sempre con un si-signore, un po’ ironico, che al nonno non bastava ma subito dopo uno sguardo negli occhi ed un bel sorriso riuscivano ad infondere quella serenità di cui aveva bisogno. Era sempre così, ogni giorno, da circa tre anni.

Quel giorno era tornato in farmacia subito dopo pranzo. L’attività ormai era gestita dalla figlia ma Ettore amava passare le giornate dietro quel bancone che per anni rappresentò la sua scrivania giornaliera, così Elena era rimasta a casa, da sola, insieme a suo fratello.

Elena era una ragazza responsabile e per questo non avrebbe mai permesso al fratellino di andare ad aprire alla porta, aspettò dunque qualche altro secondo, e senza infilare le ciabatte ai piedi per sconfiggere il caldo, corse giù per le scale.

L’uomo alla porta, dopo aver bussato con dei colpi decisi un paio di volte e rotto il silenzio a casa Mitadi, infilò una piccola busta nella fessura che il marmo creava con il vecchio portoncino, aprì lo sportello della lambretta, mise in moto e partì.

Elena si sorprese nel sentire quel motore ripartire e quando arrivò sulla soglia di casa la lambretta era già scomparsa dietro la curva che riportava al viale principale. Poteva sentirne ancora il rumore ma non era più visibile.

Tutto ciò che le rimaneva era quella piccola busta, che con grande curiosità, prese in mano.

To be continued…

Emanuele

Costruire un tema: scelta delle dimensioni.

Il secondo problema da affrontare durante la costruzione di un blog (o di un sito web in generale) è la fruibilità dei contenuti. Tale concetto viene definito dalla legge 04/2004 (Legge Stanca) come “caratteristica dei servizi di rispondere a criteri di facilità e semplicità d’uso, di efficienza, di rispondenza alle esigenze dell’utente, di gradevolezza e di soddisfazione nell’uso del prodotto”.

Vengono introdotti dei termini chiari e insindacabili: rispondenza alle esigenze e gradevolezza.

Il discorso si traduce, tra le tante cose, nell’ottimizzazione delle pagine per far fronte alle possibilità d’accesso dell’utente.

Uno degli aspetti fondamentali era dunque l’individuazione degli strumenti utilizzati per accedere al mio blog. Cellulari? Palmari? NetBook? NoteBook? Display wide-screen? L’esperienza di una visita è decisamente correlata alla dimensione della pagina.

Fortunatamente i browser mobile di ultima generazione tendono a renderizzare divinamente (qui lo dico e qui lo nego) pagine grandi e interfacce come quella dell’iPhone permettono una navigazione più agevole. Questo però è vero finché si rimane in ambito mobile.

I browser dei moderni portatili, sempre più piccoli e con risoluzioni infime (ma su monitor da 7 pollici non si possono fare miracoli) non godono della stessa usabilità dei cugini mobile, così la scelta della risoluzione torna ad avere una certa importanza.

Fortunatamente non andavo alla cieca. Non dovevo realizzare un sito da zero, senza conoscere il target d’utenza e i relativi usi e costumi.

Google Analytics (o qualsiasi altro strumento di monitoraggio degno del nome) permette di conoscere la risoluzione del browser dei visitatori. Confrontando il risultato medio storico (dal 2007 ad oggi) con quello dell’ultimo periodo (gli ultimi 3 mesi), ho notato una costante diminuzione degli accessi attraverso monitor con risoluzioni pari ad 800×600 (tipica dei vecchi monitor CRT da 15 pollici). Ad oggi, tale risoluzione rappresenta appena il 4,03% degli accessi totali. La risoluzione più diffusa è quella 1024×768 (tipica dei monitor CRT da 17 pollici o degli LCD da 15 pollici) che viene utilizzata dal 39% dei visitatori. La restante porzione viene suddivisa da monitor a risoluzione maggiore.

Era dunque chiaro verso quale risoluzione dovessi concentrarmi. Scorrere orizzontalmente una pagina è qualcosa che trovo disgustoso.

Il vecchio tema (e  i due precenti template) avevano una larghezza ottimizzata per risoluzioni 800×600. Personalmente non sopportavo più quella larghezza. La sentivo stretta.

Vedevo i miei post come in una camicia che fa resistenza quando viene indossata.

Nulla è ancora perso però. Non è detto che per ottimizzare una pagina ad una certa risoluzione vada necessariamente trascurata quella inferiore o viceversa. Esiste la possibilità di costruire layout fluidi in contrapposizione a quelli fissi.

La costruzione di un layout fluido prevede la possibilità di allargare o restringere le aree di testo in maniera proporzionale alle dimensioni dello schermo. Più tecnicamente, la differenza si ottiene utilizzando dimensioni in percentuale invece di fissare il numero dei pixel.

div.fisso {
   height;200px;
   width:50px;
}

div.fluido {
   height:40%;
   width:20%;
}

Le due classi fisso e fluido se associate ad un div produrranno un risultato completamente diverso. Il primo avrà un’area pari a 10.000 pixel, il secondo dipenderà (a sommi capi) dalla risoluzione del monitor (ripeto, a sommi capi, perché ci sono anche altri aspetti da considerare, primo tra tutti l’adesione o meno di un browser a certe indicazioni).

Un altro metodo è quello di sfruttare l’unità di misura em la cui base corrisponde all’altezza media di un dato carattere. Ma qui entrano in gioco i vincoli di parentela tra le varie dichiarazioni di un foglio di stile e così via.

Un terzo metodo, infine, è quello di creare dei fogli di stile ad hoc per risoluzioni/browser particolari. Questa soluzione, che può far storcere il naso ai puristi, consiste nello sfruttare delle funzioni (lato server o lato client) che individuano la risoluzione e indicano al browser quale foglio di stile utilizzare durante il rendering della pagina.

Insomma, tutto questo per dirvi che le dimensioni contano e non va progettato un sito web solamente in base alla risoluzione del proprio monitor (che magari è bello grande e ci da l’impressione di avere metri quadri di pagina da sfruttare…).

Ad esempio, a volerla dir tutta, la dimensione del box che scorre sotto l’immagine del blog mi sembra un tantino eccessiva. 🙂

Continuiamo lunedì prossimo…

Emanuele

Costruire un tema: il layout.

Vorrei iniziare a raccontarvi un po’ il lavoro svolto in questi mesi che non si è limitato ad un semplice restyling del vecchio template.

Ho anche studiato un po’ quella che vien definita user-experience di un visitatore sul blog.

La semplicità nella navigazione è importante, ma non è solo quella a contare. L’impatto visivo, la velocità di caricamento, l’organizzazione delle informazioni contano altrettanto.

E’ proprio di quest’ultima che parlerò in questo post, perché credo sia la base del lavoro che è nato dopo.

L’occhio umano, durante la ricerca di informazioni, si comporta come una macchina da scrivere. Non vaga a casaccio sulla pagina ma si concentra principalmente su alcune sezioni e viene attratto in maniera differente rispetto ad un giornale cartaceo, un libro o una rivista.

La visibilità delle informazioni così, soprattutto durante i primi istanti dopo l’ingresso in un sito, dipende principalmente dalla loro posizione all’interno della pagina.

Zone calde: l'attenzione dell'occhio su una pagina webJakob Nielsen, esperto di usabilità nel web, ha pubblicato nel 2006 una ricerca sulle “zone calde”, ossia, i punti della pagina fissati maggiormente dai visitatori. Per far questo si è servito di qualche webcam ed un rilevatore a raggi infrarossi sistemati in maniera poco visibile ai volontari che si sono offerti durante il test (l’apparecchiatura non doveva disturbare l’esperienza delle persone coinvolte).

Ne è uscito fuori che il percorso seguito in percentuale maggiore dagli utenti era a forma di F.

L’occhio umano, durante la visita effettua dapprima  una scansione in orizzontale della sezione superiore della pagina, poi scende verticalmente e muove lo sguardo nuovamente in orizzontale e, infine, scorre verticalmente andando a disegnare, appunto, una F.

Tutto ciò che sta dentro quel percorso viene dunque recepito per prima dal cervello. Ovviamente alcuni secondi dopo l’intera pagina viene scansionata ed entrano in gioco altri meccanismi che non erano oggetto dello studio.

Così, durante la scelta del layout, ho cercato di rispettare questa struttura.

Niente temi a 30 colonne con riquadri centrali, box inferiori, tabelle laterali, widget e cose del genere.

Pulizia significa anche questo. L’occhio deve essere catturato da ciò che conta.

L’header, un paio di link *utili* e poi il testo. Un blog d’altronde serve principalmente a diffondere contenuti organizzati strutturalmente in “post”. Sono proprio i post la mia “materia prima”, le informazioni che io voglio diffondere principalmente. I box iper-annidati lateralmente hanno poco senso. Cerchiamo di avere ben chiaro cosa vogliamo mostrare agli utenti e impostiamo la pagina di in base a questo.

Apple - Mac website

Guardate ad esempio il sito della Apple (i cui studi sul layout sicuramente non son mancati considerata la cura maniacale dei designer della Mela morsicata…): due barre superiori contenenti le informazioni principali e i contenuti di metà pagina con la zona sinistra più carica di quella destra.

Questa istintiva scansione delle pagine penso sia anche dovuta dal verso della nostra scrittura. Immagino che giapponesi o arabi abbiano dei movimenti oculari leggermente diversi dai nostri ma… stiamo scrivendo un blog in una lingua europea, no?

Teniamo in considerazione il target d’utenza e lavoriamo di conseguenza.

Emanuele

PS: giovedì si continua! 😉