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! 😉

9 commenti » Scrivi un commento

  1. :dogarf: Cavoli che rivoluzione! Pensavo di aver sbagliato blog!
    Complimenti davvero! E meno male che ti lamentavi di aver poco tempo! 😆

    • Ti piace?! Sono stato ad immaginarlo per mesi interi. Sapevo come lo volevo ma era difficile trovare qualcosa che vi assomigliasse. Poi ho iniziato a lavorarci da solo… ne ho parlato nel post “kiss me”! 😉
      Il tempo è sempre poco perché non è normale fare le 2 di notte costantemente e doversi alzare comunque la mattina per studiare o per andare a lezione. Sapevo che non dovevo toglier tempo allo studio e… la notte era l’unico momento in cui di studiare mi andava veramente poco. 🙂
      E poi… in realtà avrei mille altre idee che se avessi più tempo farei nascere e curerei. Il problema è che non ho ancora imparato a muovermi alla velocità della luce (o quanto meno a quella del suono! :-D).
      Ciao,
      Emanuele

  2. Beh, prima di tutto complimenti per la rivoluzione. Ora finalmente capisco cosa volesse significare il tuo commento sul mio blog! E complimenti anche per lo studio che hai svolto per capire come risistemare i componenti della pagina a seconda del percorso visivo degli utenti, cose che neppure in grossi siti spesso fanno 🙂 Sicuramente il nuovo tema è più gradevole alla vista, ed offre maggiore accessibilità. E poi vedo che hai usato lo stesso “spacciatore” di fumetti, per farti disegnare l’intestazione. Mi sa che di questo passo RX si monterà la testa, e diventerà peggio di uno stilista rinomato, tipo Valentino, con l’abbronzatura perpetua eh eh.

    • Essì… la cosa bella è che durante l’ultimo mese di lavoro ho letto in giro per la blogosfera una miriade di post su blog restyling, attenzione ai particolari e cose di questo tipo. Puntualmente mi fremevano le mani… avrei voluto parlare, rispondere sul mio blog, dire la mia in maniera più approfondita ma non volevo “destar sospetti”. Doveva essere una sorpresa a tutti gli effetti. 🙂
      Riguardo a Roberto… è stato davvero molto gentile e puntuale, non posso che consigliarlo in giro. E… magari diventasse uno stilista rinomato: io e te saremmo i primi (o tra i primi…) ad aver ricevuto una sua opera! 😛
      Ciao,
      Emanuele

  3. Eh eh questo è vero, a quel punto credo che i nostri siti varrebbero un sacco di soldi. Allora non ci resta che sperare che Roberto diventi famoso! 🙂 Comunque ho notato una cosa, non capisco perché ma Firefox per Linux mi rimane in perenne caricamento cercando di trasferire qualcosa (che forse non trova) da dreamsworld.it.woopra-ns.com … boh!

  4. Mi piace parecchio, si vede che c’èp stato parecchio lavoro dietro! Magari sapessi dove mettere le mani per farmi un template tutto mio, ma ignoro troppe cose.
    Non so se ti serve come informazione, ma con Opera funziona molto bene, e a differenza di Mozilla non carica all’infinito!
    Ma tu e Camu avete mai pensato di unire le forze? Probabilmente ne verrebbe fuori un tema molto molto bello e curato! 🙂
    Ancora complimenti.

  5. Pingback: Costruire un tema: lunghezza e dimensione testo. - …time is what you make of it…

  6. Pingback: Costruire un tema: scelta dei colori. - …time is what you make of it…

  7. Pingback: Costruire un tema: ottimizzazione del codice. - …time is what you make of it…

Lascia un commento

I campi richiesti sono marcati con *.


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.