{"id":834,"date":"2015-10-08T09:00:24","date_gmt":"2015-10-08T07:00:24","guid":{"rendered":"https:\/\/www.intesys.it\/journal\/?p=834"},"modified":"2022-02-28T15:34:36","modified_gmt":"2022-02-28T14:34:36","slug":"come-migliorare-la-user-experience-con-le-transizioni-animate","status":"publish","type":"post","link":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/","title":{"rendered":"Come migliorare la user experience con le transizioni animate"},"content":{"rendered":"

Indice dei contenuti<\/span>
  1. Il movimento, che aiuta l’informazione<\/a><\/li>
  2. Perch\u00e9 le animazioni migliorano la User Experience<\/a><\/li><\/ol><\/div><\/div><\/p>

    Il movimento, che aiuta l’informazione<\/h2>\n

    Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nelle produzioni digitali moderne, non solo per un fattore prettamente estetico, anzi, ma per dare un valore aggiunto importante alla user experience<\/a>.<\/p>\n

    Fermiamoci un attimo e immaginiamo che davanti a noi compaia un oggetto dal nulla. A meno che non siamo in stati psicoattivi alterati, questo avvenimento ci risulter\u00e0 quanto meno strano. Niente infatti \u00e8 percepito in maniera pi\u00f9 innaturale di uno stacco netto, proprio perch\u00e9 questo \u00e8 un fenomeno che non esiste nel mondo reale.<\/p>\n

    Se uno degli obiettivi dei designer \u00e8 tradurre la vita reale all\u2019interno del mondo digitale (lo scheumorfismo<\/a> della apple \u00e8 stato il primo passo, ma era limitato a un fattore puramente estetico), non possiamo non pensare di usare delle animazioni per migliorare il feeling tra questi due mondi e confezionare un’esperienza utente fluida e naturale, senza soluzione di continuit\u00e0.<\/p>\n

    Perch\u00e9 le animazioni migliorano la User Experience<\/h2>\n

    Mantenere il contesto<\/h3>\n

    Con l\u2019aumentare delle possibili interazioni e possibilit\u00e0 pu\u00f2 essere facile perdere il contesto, soprattutto se nell\u2019interfaccia vengono rimossi o spostati degli elementi. Le animazioni possono aiutare ad orientare l\u2019utente, come ad esempio nel caso di siti one page, nei quali il passaggio da un contenuto a un altro, in modo non lineare, pu\u00f2 disorientare.<\/p>\n

    Ricevere feedback<\/h3>\n

    Usando le animazioni, l\u2019utente pu\u00f2 ricevere utili feedback visivi senza che l’ interfaccia venga modificata o popolata ulteriormente. Un esempio \u00e8 il mirino della fotocamera di iOS, che compare e lampeggia velocemente per avvertire l\u2019utente che il il soggetto \u00e8 a fuoco ed \u00e8 pronta a scattare la foto.<\/p>\n

    \"\"<\/p>\n

    Decidere il focus<\/h3>\n

    Se un’interfaccia presenta molti elementi, le animazioni possono aiutare a portare il focus dell\u2019utente \u201cgiocando\u201d con i parametri scala, posizione e opacit\u00e0.<\/p>\n

    \"\"<\/p>\n

    Fluido e leggero<\/h3>\n

    Eccedere con la durata o con la complessit\u00e0 dell\u2019animazione potrebbe ottenere il risultato opposto di quello sperato, confondendo o irritando (anche inconsciamente) l\u2019utente.<\/p>\n

    \u201cGood animation is invisible. You shouldn\u2019t notice that you\u2019re looking at animation.\u201d
    \n\u2014\u200aPasquale D\u2019Silva<\/p><\/blockquote>\n

    \u201cIf you disable animations, the flow should feel broken;
    \nif it is not, this might mean your animations are superfluous.\u200a\u201c
    \n\u2014\u200aMicha\u00ebl Villar<\/p><\/blockquote>\n

    Source:
    \n    https:\/\/medium.com\/@pasql\/transitional-interfaces-926eb80d64e3
    \n<\/a>    http:\/\/www.smashingmagazine.com\/2013\/10\/smart-transitions-in-user-experience-design\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Il movimento, che aiuta l’informazione Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei…<\/p>\n","protected":false},"author":27,"featured_media":872,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[24],"tags":[689],"class_list":{"0":"post-834","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design","8":"tag-user-experience"},"acf":[],"yoast_head":"\nCome migliorare la user experience con le transizioni animate<\/title>\n<meta name=\"description\" content=\"Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nel digital per dare un valore aggiunto importante alla user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come migliorare la user experience con le transizioni animate\" \/>\n<meta property=\"og:description\" content=\"Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nel digital per dare un valore aggiunto importante alla user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/\" \/>\n<meta property=\"og:site_name\" content=\"Intesys Journal\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-08T07:00:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-28T14:34:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alessandro Stefani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alessandro Stefani\" \/>\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:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/\",\"url\":\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/\",\"name\":\"Come migliorare la user experience con le transizioni animate\",\"isPartOf\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg\",\"datePublished\":\"2015-10-08T07:00:24+00:00\",\"dateModified\":\"2022-02-28T14:34:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/039586ec28bef14b5db196ddd4df6d01\"},\"description\":\"Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nel digital per dare un valore aggiunto importante alla user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#primaryimage\",\"url\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg\",\"contentUrl\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg\",\"width\":1280,\"height\":960,\"caption\":\"Animazioni e ux\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intesys.it\/journal\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come migliorare la user experience con le transizioni animate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#website\",\"url\":\"https:\/\/www.intesys.it\/journal\/\",\"name\":\"Intesys\",\"description\":\"Ogni settimana nuovi articoli dedicati al mondo della trasformazione digitale!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intesys.it\/journal\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/039586ec28bef14b5db196ddd4df6d01\",\"name\":\"Alessandro Stefani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b0fb4abdeb39cfe28c694e0bae6595f449d0cdc0dbcdea1855182aa7b3cac5cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b0fb4abdeb39cfe28c694e0bae6595f449d0cdc0dbcdea1855182aa7b3cac5cf?s=96&d=mm&r=g\",\"caption\":\"Alessandro Stefani\"},\"description\":\"UI & motion designer e responsabile media di Intesys, Alessandro progetta interfacce digitali con un occhio all\u2019interaction e all\u2019utilizzo del medium video come supporto per i progetti pi\u00f9 complessi.\",\"url\":\"https:\/\/www.intesys.it\/journal\/autore\/alessandro-stefani\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come migliorare la user experience con le transizioni animate","description":"Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nel digital per dare un valore aggiunto importante alla user experience.","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:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/","og_locale":"it_IT","og_type":"article","og_title":"Come migliorare la user experience con le transizioni animate","og_description":"Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nel digital per dare un valore aggiunto importante alla user experience.","og_url":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/","og_site_name":"Intesys Journal","article_published_time":"2015-10-08T07:00:24+00:00","article_modified_time":"2022-02-28T14:34:36+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg","type":"image\/jpeg"}],"author":"Alessandro Stefani","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Alessandro Stefani","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/","url":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/","name":"Come migliorare la user experience con le transizioni animate","isPartOf":{"@id":"https:\/\/www.intesys.it\/journal\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#primaryimage"},"image":{"@id":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg","datePublished":"2015-10-08T07:00:24+00:00","dateModified":"2022-02-28T14:34:36+00:00","author":{"@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/039586ec28bef14b5db196ddd4df6d01"},"description":"Le interazioni e le animazioni sono sempre pi\u00f9 presenti nei siti web e nel digital per dare un valore aggiunto importante alla user experience.","breadcrumb":{"@id":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#primaryimage","url":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg","contentUrl":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2015\/10\/animation.jpg","width":1280,"height":960,"caption":"Animazioni e ux"},{"@type":"BreadcrumbList","@id":"https:\/\/www.intesys.it\/journal\/design\/come-migliorare-la-user-experience-con-le-transizioni-animate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intesys.it\/journal\/"},{"@type":"ListItem","position":2,"name":"Come migliorare la user experience con le transizioni animate"}]},{"@type":"WebSite","@id":"https:\/\/www.intesys.it\/journal\/#website","url":"https:\/\/www.intesys.it\/journal\/","name":"Intesys","description":"Ogni settimana nuovi articoli dedicati al mondo della trasformazione digitale!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intesys.it\/journal\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/039586ec28bef14b5db196ddd4df6d01","name":"Alessandro Stefani","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b0fb4abdeb39cfe28c694e0bae6595f449d0cdc0dbcdea1855182aa7b3cac5cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b0fb4abdeb39cfe28c694e0bae6595f449d0cdc0dbcdea1855182aa7b3cac5cf?s=96&d=mm&r=g","caption":"Alessandro Stefani"},"description":"UI & motion designer e responsabile media di Intesys, Alessandro progetta interfacce digitali con un occhio all\u2019interaction e all\u2019utilizzo del medium video come supporto per i progetti pi\u00f9 complessi.","url":"https:\/\/www.intesys.it\/journal\/autore\/alessandro-stefani\/"}]}},"_links":{"self":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":1,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/834\/revisions"}],"predecessor-version":[{"id":9768,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/834\/revisions\/9768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/media\/872"}],"wp:attachment":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/categories?post=834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/tags?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}