{"id":5589,"date":"2009-03-16T09:20:42","date_gmt":"2009-03-16T07:20:42","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=5589"},"modified":"2016-05-17T12:30:21","modified_gmt":"2016-05-17T10:30:21","slug":"costruire-un-tema-il-layout","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2009-03-16\/costruire-un-tema-il-layout\/","title":{"rendered":"Costruire un tema: il layout."},"content":{"rendered":"

Vorrei iniziare a raccontarvi un po’ il lavoro svolto in questi mesi che non si \u00e8 limitato ad un semplice restyling<\/strong> del vecchio template.<\/p>\n

Ho anche studiato<\/em> un po’ quella che vien definita user-experience<\/em> di un visitatore<\/strong> sul blog.<\/p>\n

La semplicit\u00e0 nella navigazione \u00e8 importante, ma non \u00e8 solo quella a contare. L’impatto visivo, la velocit\u00e0 di caricamento, l’organizzazione delle informazioni<\/strong> contano altrettanto.<\/p>\n

E’ proprio di quest’ultima che parler\u00f2 in questo post, perch\u00e9 credo sia la base<\/em> del lavoro che \u00e8 nato dopo.<\/p>\n

L’occhio umano<\/strong>, durante la ricerca di informazioni, si comporta come una macchina da scrivere. Non vaga a casaccio<\/strong> 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.<\/p>\n

La visibilit\u00e0 delle informazioni<\/strong> cos\u00ec, soprattutto durante i primi istanti<\/strong> dopo l’ingresso in un sito, dipende principalmente dalla loro posizione<\/strong> all’interno della pagina.<\/p>\n

\"Zone<\/a>Jakob Nielsen<\/a>, esperto di usabilit\u00e0 nel web, ha pubblicato nel 2006 una ricerca<\/a> sulle “zone calde”<\/em>, ossia, i punti della pagina<\/strong> fissati maggiormente dai visitatori. Per far questo si \u00e8 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<\/em> delle persone coinvolte).<\/p>\n

Ne \u00e8 uscito fuori che il percorso seguito in percentuale maggiore dagli utenti era a forma di F<\/strong>.<\/p>\n

L’occhio umano, durante la visita effettua dapprima\u00a0 una scansione in orizzontale<\/strong> della sezione superiore della pagina, poi scende verticalmente e muove lo sguardo nuovamente in orizzontale e, infine, scorre verticalmente andando a disegnare<\/strong>, appunto, una F<\/em>.<\/p>\n

Tutto ci\u00f2 che sta dentro quel percorso<\/strong> viene dunque recepito<\/em> per prima dal cervello. Ovviamente alcuni secondi dopo l’intera pagina viene scansionata ed entrano in gioco altri meccanismi<\/strong> che non erano oggetto dello studio.<\/p>\n

Cos\u00ec, durante la scelta del layout, ho cercato di rispettare questa struttura.<\/p>\n

Niente temi a 30 colonne<\/strong> con riquadri centrali, box inferiori, tabelle laterali, widget e cose del genere.<\/p>\n

Pulizia significa anche questo<\/strong>. L’occhio deve essere catturato da ci\u00f2 che conta<\/strong>.<\/p>\n

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<\/strong> la mia “materia prima”, le informazioni che io voglio diffondere<\/em> principalmente. I box iper-annidati lateralmente hanno poco senso. Cerchiamo di avere ben chiaro cosa vogliamo mostrare agli utenti<\/strong> e impostiamo la pagina di in base a questo.<\/p>\n

\"Apple<\/p>\n

Guardate ad esempio il sito della Apple<\/a> (i cui studi sul layout sicuramente non son mancati considerata la cura maniacale dei designer della Mela morsicata…<\/em>): due barre superiori contenenti le informazioni principali e i contenuti di met\u00e0 pagina con la zona sinistra pi\u00f9 carica<\/strong> di quella destra.<\/p>\n

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

Teniamo in considerazione il target d’utenza<\/strong> e lavoriamo di conseguenza.<\/p>\n

Emanuele<\/strong><\/p>\n

PS: gioved\u00ec si continua! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"

Vorrei iniziare a raccontarvi un po’ il lavoro svolto in questi mesi che non si \u00e8 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 … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4],"tags":[524,544,542,527,543,530,529,490,491,525,526,528,493],"class_list":["post-5589","post","type-post","status-publish","format-standard","hentry","category-internet","tag-accessibilita","tag-attenzione","tag-blog-design","tag-layout","tag-occhio","tag-psicologia","tag-siti-web","tag-tema","tag-template","tag-usabilita","tag-user-experience","tag-web-design","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=5589"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5589\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=5589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=5589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=5589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}