{"id":418,"date":"2019-02-15T11:24:18","date_gmt":"2019-02-15T10:24:18","guid":{"rendered":"http:\/\/ic-digital.com\/?p=418"},"modified":"2022-12-05T10:35:21","modified_gmt":"2022-12-05T09:35:21","slug":"f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web","status":"publish","type":"post","link":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web","title":{"rendered":"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web"},"content":{"rendered":"

C\u2019era una volta e forse c\u2019\u00e8 ancora\u2026 Il famigerato \u201cF-shaped Pattern<\/strong>\u201d narrato per la prima volta nel 2006<\/a> da Nielsen Norman Group. Serve un ripasso?
\nAttraverso test di eyetracking \u00e8 possibile notare come gli utenti tendano a seguire un percorso<\/strong> standard:<\/p>\n

    \n
  1. A partire dall\u2019header<\/strong> della pagina<\/strong>, iniziano a leggere in senso orizzontale<\/strong>, da sinistra verso destra<\/li>\n
  2. Proseguono tracciando con lo sguardo una<\/strong> linea<\/strong> parallela<\/strong> alla superiore, ad un livello pi\u00f9 basso<\/li>\n
  3. \u201cScannerizzano\u201d il resto della pagina leggendo le prime porzioni di testo, scorrendo verticalmente con lo sguardo<\/strong>, pi\u00f9 velocemente o soffermandosi su alcuni dettagli se qualcosa cattura la loro attenzione.<\/li>\n<\/ol>\n

    E il pattern ad F<\/strong> \u00e8 servito, ma non in tutti i casi: capita che un contenuto a met\u00e0 pagina risulti di particolare appeal, invogliando gli utenti a scannerizzare<\/strong> il paragrafo e le righe che lo compongono senza limitarsi ai primi elementi sulla sinistra, creando quindi un \u201cpattern ad E\u201d (E-Shaped Pattern<\/strong>).<\/p>\n

     <\/p>\n

    \u201cF\u201d come \u201cFretta\u201d: sul web il vero tiranno \u00e8 il tempo<\/strong><\/h2>\n

    Secondo alcuni recenti studi<\/a>,<\/span> la tendenza a scannerizzare<\/strong> seguendo pattern di lettura definiti va ricondotta pi\u00f9 all\u2019ambito<\/strong> comportamentale<\/strong> che al tipo di device o tecnologia utilizzati, resistendo sia su desktop che mobile; le ragioni pi\u00f9 comuni alla base di questa \u201cabitudine del tutto umana<\/strong>\u201d sono essenzialmente tre:<\/p>\n

      \n
    1. Formattazione<\/strong>: chiunque navighi, per mare o nel web, teme i muri – specialmente quelli di testo nel secondo caso. Trovarsi di fronte ad una pagina di \u201cpuro testo\u201d non indurr\u00e0 il nostro utente a leggere e a dedicare qualche secondo in pi\u00f9 al nostro sito.<\/li>\n
    2. Fretta<\/strong>: internet \u00e8 un mare, e il nostro sito una delle tante gocce che lo formano. I nostri utenti sono alla ricerca di risposte e contenuti d\u2019interesse, nel minor tempo possibile.<\/li>\n
    3. Strategia<\/strong> mancata<\/strong>: immaginiamo di trovarci coinvolti in una conversazione di scarso interesse, con un interlocutore che tuttavia pensavamo avrebbe potuto offrirci risposte adatte alle nostre aspettative. Nel mondo reale sfilarsi da circostanze simili \u00e8 pi\u00f9 difficile rispetto al web: il fantasma del \u201cback button\u201d \u00e8 sempre presente, soprattutto se i nostri contenuti non riescono a coinvolgere il nostro pubblico.<\/li>\n<\/ol>\n

      \u00a0<\/strong><\/p>\n

      Prepariamo un percorso, accompagniamo gli utenti per mano<\/h2>\n

      Ogni UX Designer lo sa: l\u2019utente \u00e8 al centro della progettazione, dal wireframe al contenuto. Come possiamo guidarlo attraverso le tappe che abbiamo preparato per lui all\u2019interno del nostro sito?<\/p>\n

        \n
      • Creiamo percorsi<\/strong> ideali all\u2019interno delle pagine: attraverso visual che non siano solo riempitivi ma invitino a proseguire nel viaggio o dividendo il testo in paragrafi titolati.<\/li>\n
      • Utilizziamo titoli<\/strong> e sottotitoli<\/strong> che offrano parole-chiave dalle prime battute: aizziamo la curiosit\u00e0!<\/li>\n
      • Ricorriamo ad elenchi<\/strong> puntati<\/strong> e numerati<\/strong>: le liste piacciono a tutti – non solo a Natale.<\/li>\n
      • Il grassetto<\/strong> \u00e8 un trucco antico ma sempre efficace, in pi\u00f9 \u00e8 anche SEO-friendly: offriamo cos\u00ec una mappa<\/strong> \u201cformattata<\/strong>\u201d interna al testo dei concetti principali.<\/li>\n
      • Sfoltiamo, riduciamo, eliminiamo il superfluo<\/strong>: teniamolo a mente come buon proposito per il nuovo anno nella stesura dei contenuti. Essenzialit\u00e0<\/strong> anzitutto!<\/li>\n<\/ul>\n

         <\/p>\n

        Il nostro approccio: un esempio<\/h3>\n

        Fin qui sembra tutto molto semplice. Ma come lo applichiamo alle diverse tipologie di pagine di cui dobbiamo prenderci cura?<\/p>\n

        Una best practise da uno dei nostri progetti.<\/em><\/p>\n

         <\/p>\n

        \"SelleItalia.com\"

        SelleItalia.com<\/em><\/p><\/div>\n

        <\/h3>\n

        SelleItalia.com<\/h3>\n

        Il problema<\/strong>: come creare engagement e promuovere il nuovo piano editoriale del sito web?<\/p>\n

        La soluzione?<\/strong> Da un visore full screen abbiamo diviso la porzione di home page visibile all\u2019accesso in box verticali e orizzontali, mettendo in primo piano l\u2019identit\u00e0 del brand e la CTA per coinvolgere il pubblico in iniziative social. Sfruttando le linee di navigazione principali abbiamo creato un percorso, dal brand al prodotto, che gli utenti si trovano a seguire in modo naturale. Assecondare i comportamenti comuni – studiati attraverso i nostri tool di user testing e monitoraggio UX – per arrivare a risultati ottimali.<\/p>\n

         <\/p>\n","protected":false},"excerpt":{"rendered":"

        C\u2019era una volta e forse c\u2019\u00e8 ancora\u2026 Il famigerato \u201cF-shaped Pattern\u201d narrato per la prima volta nel 2006 da Nielsen Norman Group. Serve un ripasso? Attraverso test di eyetracking \u00e8 possibile notare come gli utenti tendano a seguire un percorso standard: A partire dall\u2019header della pagina, iniziano a leggere in senso orizzontale, da sinistra verso…<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[12,11],"class_list":["post-418","post","type-post","status-publish","format-standard","hentry","category-user-experience","tag-content","tag-user-experience"],"acf":[],"yoast_head":"\nF-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web - IC Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web - IC Digital\" \/>\n<meta property=\"og:description\" content=\"C\u2019era una volta e forse c\u2019\u00e8 ancora\u2026 Il famigerato \u201cF-shaped Pattern\u201d narrato per la prima volta nel 2006 da Nielsen Norman Group. Serve un ripasso? Attraverso test di eyetracking \u00e8 possibile notare come gli utenti tendano a seguire un percorso standard: A partire dall\u2019header della pagina, iniziano a leggere in senso orizzontale, da sinistra verso...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web\" \/>\n<meta property=\"og:site_name\" content=\"IC Digital\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-15T10:24:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-05T09:35:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2480\" \/>\n\t<meta property=\"og:image:height\" content=\"3509\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Elisabetta Gavetti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Elisabetta Gavetti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web\",\"url\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web\",\"name\":\"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web - IC Digital\",\"isPartOf\":{\"@id\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg\",\"datePublished\":\"2019-02-15T10:24:18+00:00\",\"dateModified\":\"2022-12-05T09:35:21+00:00\",\"author\":{\"@id\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#\/schema\/person\/0b33fb1ff94df69e1719fc4cec12cd8c\"},\"breadcrumb\":{\"@id\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#primaryimage\",\"url\":\"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg\",\"contentUrl\":\"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#website\",\"url\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/\",\"name\":\"IC Digital\",\"description\":\"Imagine, Change.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#\/schema\/person\/0b33fb1ff94df69e1719fc4cec12cd8c\",\"name\":\"Elisabetta Gavetti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/07\/elisabetta-150x150.jpg\",\"contentUrl\":\"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/07\/elisabetta-150x150.jpg\",\"caption\":\"Elisabetta Gavetti\"},\"description\":\"Project manager, UX & user testing specialist\",\"url\":\"https:\/\/ic-digital.com\/it\/author\/elisabetta\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web - IC Digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web","og_locale":"it_IT","og_type":"article","og_title":"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web - IC Digital","og_description":"C\u2019era una volta e forse c\u2019\u00e8 ancora\u2026 Il famigerato \u201cF-shaped Pattern\u201d narrato per la prima volta nel 2006 da Nielsen Norman Group. Serve un ripasso? Attraverso test di eyetracking \u00e8 possibile notare come gli utenti tendano a seguire un percorso standard: A partire dall\u2019header della pagina, iniziano a leggere in senso orizzontale, da sinistra verso...","og_url":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web","og_site_name":"IC Digital","article_published_time":"2019-02-15T10:24:18+00:00","article_modified_time":"2022-12-05T09:35:21+00:00","og_image":[{"width":2480,"height":3509,"url":"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg","type":"image\/jpeg"}],"author":"Elisabetta Gavetti","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Elisabetta Gavetti","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web","url":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web","name":"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web - IC Digital","isPartOf":{"@id":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#primaryimage"},"image":{"@id":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#primaryimage"},"thumbnailUrl":"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg","datePublished":"2019-02-15T10:24:18+00:00","dateModified":"2022-12-05T09:35:21+00:00","author":{"@id":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#\/schema\/person\/0b33fb1ff94df69e1719fc4cec12cd8c"},"breadcrumb":{"@id":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#primaryimage","url":"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg","contentUrl":"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/11\/0001.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/ic-digital.com\/it\/ic-talks\/user-experience\/f-shaped-pattern-si-evoluto-comportamento-sulla-pagine-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it"},{"@type":"ListItem","position":2,"name":"F-Shaped Pattern: come si \u00e8 evoluto il comportamento sulla pagine web"}]},{"@type":"WebSite","@id":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#website","url":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/","name":"IC Digital","description":"Imagine, Change.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#\/schema\/person\/0b33fb1ff94df69e1719fc4cec12cd8c","name":"Elisabetta Gavetti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/lightcoral-quail-812349.hostingersite.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/07\/elisabetta-150x150.jpg","contentUrl":"https:\/\/ic-digital.com\/wp-content\/uploads\/2017\/07\/elisabetta-150x150.jpg","caption":"Elisabetta Gavetti"},"description":"Project manager, UX & user testing specialist","url":"https:\/\/ic-digital.com\/it\/author\/elisabetta"}]}},"_links":{"self":[{"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/posts\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":6,"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/posts\/418\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/posts\/418\/revisions\/425"}],"wp:attachment":[{"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/categories?post=418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ic-digital.com\/it\/wp-json\/wp\/v2\/tags?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}