[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"JFSZ9TFOt5c77BxoWAKSY1kR1ELrg355jnusCj134HI":75,"UQiJZqpUGu4a9owaS9Vanmh7kLTXQxiAXT7_0GQFv2Y":160,"_apollo:default":205},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":150,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":153,"author":154},"NodeWpPost","1074","Motion Experience im Webdesign",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1357631484,"UTC","+00:00","2013-01-08T07:51:24+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/motion-experience-im-webdesign",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Motion Experience im Webdesign | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/motion-experience-im-webdesign","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","837","Motion Experience","/tag/motion-experience",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"1342","trends","/tag/trends",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1489","Webdesign","/tag/webdesign",{"__typename":151,"processed":152,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"8c90ea5b-3767-4ea9-90c7-127975af5e23\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=zpxvPZmS 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=REFwpOL6 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"183\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=4UU52EXV 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=kUd4PBkJ 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"183\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=DVXPnq6b 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=k5kuvktP 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"183\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=Rmyq8_X3 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=s8KttCeT 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"163\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=gcn0Hzvw 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.webp?itok=zh-Z_-UH 2x\" type=\"image/webp\" width=\"540\" height=\"183\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"183\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/12/Motion-Experience1-1.png.jpg?itok=zh-Z_-UH\" alt title=\"Motion Experience\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Seit Jahren ermöglichen Webseiten durch die kontinuierliche Weiterentwicklung von Webtechnologien wie HTML, CSS und Javascript immer anspruchsvollere Formen der Interaktion. Nicht zuletzt durch Webapps, also der Verlagerung von Programmen am Desktop ins Web, wird ein immer komplexer werdender Umgang mit Webseiten möglich und nötig.\u003Cbr>\nNeben Accesibility und Usability rückte damit in den letzten Jahren vor allem der Begriff User Experience ins Rampenlicht. Webseiten und Webapps müssen nicht nur barrierefrei zugänglich sein und sich durch einen schlüssigen Userprozess auszeichnen, sondern sie müssen auch eine hohe User Experience bieten und damit dem Benutzer “Spass” machen. Ein Teil dieser User Experience ist zweifelsfrei die Motion Experience.\u003Cbr>\nMotion Experience bezeichnet subtile und den Userprozess unterstützende Animationen und Bewegungen von Elementen, häufig Interfaceelementen. Sie helfen dem User bei Prozessen auf Webseiten den roten Faden nicht zu verlieren und fokusieren die Aufmerksamkeit auf gerade wichtige Stellen.\u003Cbr>\nBevor ich den Begriff näher erläutere möchte ich zunächst auf die Hintergründe eingehen.\u003Cbr>\n\u003C/p>\n\u003Ch3>Die Hintergründe\u003C/h3>\n\u003Cp>Wie in einem meiner letzten Blogbeiträge (\u003Ca title=\"HTML5 & CSS3 Animationen\" href=\"https://liechtenecker.at/html5-und-css3-animationen/#blog-article\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 & CSS3 Animationen\u003C/a>) beschrieben gab es, abgesehen von Animationen mit Flash oder animierten Gifs, früher kaum Bewegung auf Websites. Bewegung war auch kaum nötig, weil Webseiten früher als reine Informationsquellen dienten, die nicht viel mehr anzeigten als statische Texte und Bilder. Die Interaktion der Benutzer mit einer Website beschränkten sich großteils auf den Klick von Links um von einer Seite zur nächsten zu wechseln. Die Anfänge der Motion Experience sind daher nicht im Web zu finden.\u003Cbr>\nBei klassischen Computerprogrammen sieht dies anders aus. Bald nach der Einführung von GUIs wurden Programme und dadurch auch die Interaktionsmöglichkeiten immer komplexer und Entwickler suchten nach neuen Methoden, diese Komplexität den Benutzern besser zu verdeutlichen.\u003Cbr>\nEin Vorreiter auf diesem Gebiet war Apple.\u003Cbr>\n\u003Ca href=\"http://dropbox.scripting.com/dave/misc/appleHumanInterfaceGuidelines.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"176350aa-ed14-4e50-95b0-475a607658f8\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=LMo0q6A0 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=izKy3X6m 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"267\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=VgwY1Yd1 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=ufHBChHi 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"267\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=8za-AApz 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=69Jak8WM 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"267\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=R9-QhH0D 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=TgvLzuce 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"237\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=PyDvKf8u 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.webp?itok=71SdZjeZ 2x\" type=\"image/webp\" width=\"540\" height=\"267\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"267\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/12/ahig1-1.png.jpg?itok=71SdZjeZ\" alt title=\"ahig\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nIn den \u003Ca href=\"http://dropbox.scripting.com/dave/misc/appleHumanInterfaceGuidelines.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Apple Human Interface Guidelines von 1992\u003C/a> findet sich bereits der Satz:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Cem>„Animation, when used sparingly, is one of the best ways to show a user that a requested action is being carried out.“\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Auch wenn sich der Satz damals noch auf animierte Cursor bezog, die dem User vermittelten, dass eine Datei gerade gespeichert wurde, ist dieser Satz noch immer ein zentrales Credo in der Entwicklung von Apple Betriebssystemen und Software.\u003Cbr>\nÜber die Jahre hat sich die Formulierung in den Guidelines etwas geändert, die Kernaussage bleibt aber bis heute die selbe:\u003C/p>\n\u003Cblockquote>\n\u003Cp style=\"text-align: left\">\u003Cem>„Animation can be one of the best ways to provide feedback and to clarify the results of the user’s actions.“\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>\u003Ca href=\"http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx\">Microsofts UX Guidelines\u003C/a> beeinhalten einen ähnlichen Satz:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Cem>“Show instead of explain. You can use animations and transitions to show relationships, causes, and effects. This technique is best used to provide information that would otherwise require text to explain or might be missed by users.”\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Wie Eingangs beschrieben ist es also kaum verwunderlich, dass mit zunehmender Komplexität von Webseiten & Webapps auch Motion Experience den Weg von Desktop-Programmen langsam ins Web findet.\u003C/p>\n\u003Ch3>Motion Experience im Detail\u003C/h3>\n\u003Cp>Um besser erklären zu können was Motion Experience ist, hilft es vielleicht, sich zunächst anzusehen was gute Motion Experience nicht ist. Motion Experience ist keine lange Intro-Animation auf Webseiten die den Nutzer vom Inhalt abhalten, keine Animationen zum reinen Selbstzweck oder als pure Effekthascherei. Gute Motion Experience verlangsamt die Webseite nicht und, am aller wichtigsten, verlangsamt den Userprozess nicht.\u003Cbr>\nGanz im Gegenteil, sie macht den Prozess effizienter in dem sie die Aufmerksamkeit des Benutzers auf die gerade wichtigen Teile des Prozesses lenkt, ihm Reaktionen des Systems auf sein Handeln verdeutlicht oder auf zusätzliche Informationen aufmerksam macht.\u003Cbr>\n\u003Ca href=\"http://www.icloud.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"34092c86-8bd2-41f1-88be-1b67c22440ea\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=cfv06WUF 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=s8p7dyJ_ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"379\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=T0gBoynb 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=WKTLB66f 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"379\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=sxEUVpge 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=x9vF9kVo 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"379\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=iMvcwOC_ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=-oKhUSaW 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"337\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=gEs5cUFT 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.webp?itok=tT_zki4F 2x\" type=\"image/webp\" width=\"540\" height=\"379\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"379\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/12/icloud1-1.png.jpg?itok=tT_zki4F\" alt title=\"icloud\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nDas kann z.B. ein Passwort Feld sein, das sich bei Falscheingabe schüttelt (z.B. \u003Ca title=\"www.icloud.com\" href=\"http://www.icloud.com\" target=\"_blank\" rel=\"noopener noreferrer\">www.icloud.com\u003C/a>) oder ein Artikel, der nach Klick auf “in den Einkaufswagen” in die Lasche “Einkaufswagen” springt (z.B. \u003Ca title=\"www.sevenly.org\" href=\"http://www.sevenly.org\" target=\"_blank\" rel=\"noopener noreferrer\">www.sevenly.org\u003C/a>).\u003Cbr>\n\u003Ca href=\"http://www.sevenly.org\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"99eb9839-691e-4c6c-b2cc-67519a60911a\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=4eFOkaPf 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=Aj5G5p5c 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"305\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=noD7--SB 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=DXLUkm31 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"305\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=PXiwTZZR 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=TO6VL_ZQ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"305\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=qALM8jZG 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=Ayd0-Xgs 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"271\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=3VibUfta 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.webp?itok=dwxZL1hm 2x\" type=\"image/webp\" width=\"540\" height=\"305\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"305\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/sevenly11-1.png.jpg?itok=dwxZL1hm\" alt title=\"sevenly\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nFür viele “Heavy-User” fallen Themen wie Animationen in Benutzeroberflächen oft in die Kategorie “Schnick-Schnack”, die im schlimmsten Fall den Prozess für erfahrene Benutzer verlangsamen und frustrierend machen. Hier zeigt sich ein weiteres, wichtiges Merkmal für gute Motion Experience: Sie darf den Nutzer nicht blocken. Auch wenn der Artikel gerade in den Einkaufswagen springt oder das Login-Feld wackelt, weil ein Passwort falsch eingegeben wurde, darf der User nicht dazu gezwungen werden, der Animation tatenlos zuzusehen.\u003Cbr>\nDabei zeigt sich, dass ein umfassendes Konzept von Anfang (Wie kann der User im Prozess unterstützt werden? Welche Elemente sind wichtig?) über die Implementierung (Timing der Animation, Länge, …) bis zu Anpassungen nachdem das System von Usern benutzt wird.\u003Cbr>\nAuch aus technischer Sicht steht Motion Experience noch ganz am Anfang. Zunächst müssen noch fundamentale Vorraussetzungen, z.B. die Verwendung moderner Browser mit CSS3 Support bei der Mehrheit von Benutzern im Web, geschaffen werden.\u003Cbr>\nDie Implementierung von guter Motion Experience ist nicht leicht und kann je nach Komplexität des Systems sehr aufwendig werden, die Vorteile für den Benutzer machen diesen Mehraufwand bei der Entwicklung aber um vieles wett.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/motion-experience-im-webdesign/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Motion Experience im Webdesign - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Seit Jahren ermöglichen Webseiten durch die kontinuierliche Weiterentwicklung von Webtechnologien wie HTML, CSS und Javascript immer anspruchsvollere Formen der Interaktion. Nicht zuletzt durch Webapps, also der Verlagerung von Programmen am Desktop ins Web, wird ein immer komplexer werdender Umgang mit Webseiten möglich und nötig. Neben Accesibility und Usability rückte damit in den letzten Jahren vor […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/motion-experience-im-webdesign/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-01-08T08:51:24+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2012/12/Motion-Experience1-1.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/motion-experience-im-webdesign/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2012/12/Motion-Experience1-1.png\",\"width\":540,\"height\":183},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/motion-experience-im-webdesign/#webpage\",\"url\":\"https://liechtenecker.at/blog/motion-experience-im-webdesign/\",\"name\":\"Motion Experience im Webdesign - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/motion-experience-im-webdesign/#primaryimage\"},\"datePublished\":\"2013-01-08T08:51:24+00:00\",\"dateModified\":\"2013-01-08T08:51:24+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/motion-experience-im-webdesign/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":155,"id":156,"myRole":157,"name":158,"nickname":159},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":161},[162,180,193],{"__typename":79,"id":163,"title":164,"path":165,"wpTeaserText":166,"wpPromotedTeaserImage":13,"wpHeaderImage":167},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":168,"id":169,"excludeFromScreenreader":13,"mediaImage":170,"name":178,"path":179,"status":20},"MediaImage","3364",{"__typename":171,"url":172,"width":173,"height":174,"alt":175,"title":13,"size":176,"mime":177},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":181,"title":182,"path":183,"wpTeaserText":184,"wpPromotedTeaserImage":13,"wpHeaderImage":185},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":168,"id":186,"excludeFromScreenreader":13,"mediaImage":187,"name":191,"path":192,"status":20},"3355",{"__typename":171,"url":188,"width":173,"height":174,"alt":189,"title":13,"size":190,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":168,"id":198,"excludeFromScreenreader":21,"mediaImage":199,"name":203,"path":204,"status":20},"3303",{"__typename":171,"url":200,"width":173,"height":174,"alt":201,"title":13,"size":202,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":206,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":207,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":211,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":214,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":217,"Menu:footer":220,"ROOT_QUERY":230,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":246,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":249,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":252,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":255,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":258,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":261,"Menu:nuxt-main-menu":264,"TermCategories:8":278,"TermTags:837":289,"TermTags:1342":290,"TermTags:1489":291,"User:23":292,"NodeWpPost:1074":293,"MediaImage:3364":316,"NodeWpPost:1619":318,"MediaImage:3355":321,"NodeWpPost:1616":323,"MediaImage:3303":326,"NodeWpPost:1606":328},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",208,"internal",20,"expanded",21,"attributes",210],{"__ref":209},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",212,"internal",20,"expanded",21,"attributes",213],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",215,"internal",20,"expanded",21,"attributes",216],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",218,"internal",21,"expanded",21,"attributes",219],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",221],[222,224,226,228],{"__ref":223},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":225},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":227},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":229},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",231,"menu({\"name\":\"FOOTER\"})",232,"menu({\"name\":\"NUXT_MAIN_MENU\"})",234,"route({\"path\":\"/blog/motion-experience-im-webdesign\"})",236,"latestKnowhow({\"excludeId\":\"1074\",\"limit\":3})",239],"Query",{"__ref":233},"Menu:footer",{"__ref":235},"Menu:nuxt-main-menu",["null","__typename",77,"entity",237],{"__ref":238},"NodeWpPost:1074",[240,242,244],{"__ref":241},"NodeWpPost:1619",{"__ref":243},"NodeWpPost:1616",{"__ref":245},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",247,"internal",20,"expanded",21,"attributes",248],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",250,"internal",20,"expanded",21,"attributes",251],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",253,"internal",20,"expanded",21,"attributes",254],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",256,"internal",20,"expanded",21,"attributes",257],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",259,"internal",20,"expanded",21,"attributes",260],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",262,"internal",20,"expanded",21,"attributes",263],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",265],[266,268,270,272,274,276],{"__ref":267},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":269},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":271},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":273},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":275},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":277},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",279,"langcode",280,"changed",281,"metatag",282],["null","__typename",118,"processed",119,"format",120],{"__ref":209},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[283,285,287],["null","__typename",93,"tag",94,"attributes",284],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",286],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",288],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",155,"id",156,"myRole",157,"name",158,"nickname",159],["null","__typename",79,"id",80,"title",81,"changed",294,"created",295,"langcode",296,"path",90,"promote",21,"status",20,"sticky",21,"metatag",297,"category",304,"contentElements",13,"evergreen",13,"tags",306,"wpBody",313,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",153,"author",314],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":209},[298,300,302],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",301],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",303],["null","__typename",109,"property",110,"content",81],{"__ref":305},"TermCategories:8",[307,309,311],{"__ref":308},"TermTags:837",{"__ref":310},"TermTags:1342",{"__ref":312},"TermTags:1489",["null","__typename",151,"processed",152,"format",120,"summary",13],{"__ref":315},"User:23",["null","__typename",168,"id",169,"excludeFromScreenreader",13,"mediaImage",317,"name",178,"path",179,"status",20],["null","__typename",171,"url",172,"width",173,"height",174,"alt",175,"title",13,"size",176,"mime",177],["null","__typename",79,"id",163,"title",164,"path",165,"wpTeaserText",166,"wpPromotedTeaserImage",13,"wpHeaderImage",319],{"__ref":320},"MediaImage:3364",["null","__typename",168,"id",186,"excludeFromScreenreader",13,"mediaImage",322,"name",191,"path",192,"status",20],["null","__typename",171,"url",188,"width",173,"height",174,"alt",189,"title",13,"size",190,"mime",177],["null","__typename",79,"id",181,"title",182,"path",183,"wpTeaserText",184,"wpPromotedTeaserImage",13,"wpHeaderImage",324],{"__ref":325},"MediaImage:3355",["null","__typename",168,"id",198,"excludeFromScreenreader",21,"mediaImage",327,"name",203,"path",204,"status",20],["null","__typename",171,"url",200,"width",173,"height",174,"alt",201,"title",13,"size",202,"mime",177],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",329],{"__ref":330},"MediaImage:3303"]