[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"QKfJ7Pl0rrQBhqdmzzanauzVfcDvg6vK7Se1TW00t88":75,"jdxz6xbQSYOAiQAcYbgHV4YMkfOwCf3Smnuaxag_src":200,"_apollo:default":242},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__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},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__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":178,"wpHeaderImage":13,"wpHeaderImageOld":181,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":193,"author":194},"NodeWpPost","926","Microinteractions - All the small things",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1442309225,"UTC","+00:00","2015-09-15T09:27:05+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/microinteractions-all-the-small-things",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Microinteractions - All the small things | 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/microinteractions-all-the-small-things","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,150,154,158,162,166,170,174],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","82","Animation","/tag/animation",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"325","design","/tag/design",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"334","detail","/tag/detail",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"425","experience","/tag/experience",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"507","frontend","/tag/frontend",{"__typename":138,"id":159,"name":160,"path":161,"weight":116},"649","interaction","/tag/interaction",{"__typename":138,"id":163,"name":164,"path":165,"weight":116},"806","micro","/tag/micro",{"__typename":138,"id":167,"name":168,"path":169,"weight":116},"807","microinteraction","/tag/microinteraction",{"__typename":138,"id":171,"name":172,"path":173,"weight":116},"835","Motion","/tag/motion",{"__typename":138,"id":175,"name":176,"path":177,"weight":116},"1405","UX","/tag/ux",{"__typename":179,"processed":180,"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\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Es sind meist die kleinen feinen Dinge, die es ausmachen, ob wir etwas lieben oder nicht. Was einst Tom DeLonge von Blink 182 im Song „All the small things“ –\u003C/span> \u003Cspan class=\"s1\">eine schnuckelige Liebeserklärung an seine damalige Freundin und heutige Frau – besang, ist heute von äußerst hoher Bedeutung für uns Designer und Developer und meist ein entscheidender Faktor, wenn es um die User Experience unserer Produkte geht. Denn gerade heute – wo wir eine Überflutung durch Webseiten, Apps und digitale Geräte erleben – ist es umso wichtiger, mit scharfem Auge für das Minimale und mit großer Liebe zum Detail, Nutzer mit Liebeserklärungen für unser Produkt zu gewinnen.\u003C/span>\u003C/p>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png?itok=JWA26hmD\" data-rel=\"lightbox-gallery-PJ59nBGN\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"lie_blogbeitrag_kreis_vorlage\" data-entity-type=\"media\" data-entity-uuid=\"c3013d9e-d27e-4faa-8a7b-d1b70f0f2abc\" 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/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=qMIckwt2 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=ijJSOKI- 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=J6rpRclO 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=JL2qFNbK 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=43MUiaMo 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=TgfTOTkV 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=Yoa3unnl 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=3BjGj_Tz 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=Wy3YV2RU 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.webp?itok=Ool7LWVG 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_kreis_vorlage-1.png.jpg?itok=Ool7LWVG\" alt=\"lie_blogbeitrag_kreis_vorlage\" title=\"lie_blogbeitrag_kreis_vorlage\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp class=\"p1\">\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Die Magie liegt in den Details\u003C/b>\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Fitness-Apps, Todo-Lists, Portfolio-Websites, Online-Shops, Smartphones, Tablets, Mp3-Player – digitale Produkte gibt es heute wie Sand am Meer und der Großteil davon tut das, wofür sie gemacht wurden, auch wirklich gut. Wie soll also das eigene Produkt aus dieser Masse herausstechen? Wie bringen wir die Nutzer dazu, sich für unser Produkt zu entscheiden und auch bei diesem zu bleiben? Eine Antwort liegt in der Liebe zum Detail, in fein durchdachten und raffiniert umgesetzten Microinteractions, mit denen wir unsere Produkte versehen und den Usern damit im besten Fall Glücksgefühle bescheren.\u003C/span>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Microinteractions, was ist das?\u003C/b>\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Microinteractions sind im Konkreten einzelne, äußerst simple Interaktionen mit einem Produkt, die sich einzig und allein um genau einen Anwendungsfall drehen. Dazu zählen beispielsweise das Entsperren des Tablets, das Hochfahren des Betriebssystems, das Versenden einer Mail, das Stummschalten des Telefons oder das Refreshen von Daten. Microinteractions gibt es nicht nur in unseren Computern und Smartphones, die wir täglich benutzen. Wir finden sie in sämtlichen Geräten, die wir bei uns tragen, in unseren Wohnräumen und Einrichtungsgegenständen (Ein/Ausschalten einer Lampe bspw.). Sie sind überall integriert, in der Umgebung in der wir leben und arbeiten. Es sind meist Dinge, die für uns selbstverständlich sind und gar nicht wahrgenommen werden. Genau hier besteht die Kunst, solche Use Cases zu identifizieren und gekonnt in Szene zu setzen.\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Microinteractions können beispielsweise folgende Aktionen auslösen:\u003C/span>\u003C/p>\n\u003Cul>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Ein/Ausschalten von Geräten\u003C/span>\u003C/li>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Öffnen/Schließen von Programmen\u003C/span>\u003C/li>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Steuern von laufenden Prozessen, zb. das switchen auf den nächsten Musik-Track\u003C/span>\u003C/li>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Konfiguration von Einstellungen\u003C/span>\u003C/li>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Erledigen eines konkreten Tasks\u003C/span>\u003C/li>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Verbinden von Geräten\u003C/span>\u003C/li>\n\u003Cli class=\"p1\">\u003Cspan class=\"s1\">Interaktion mit einzelnen Informationen\u003C/span>\u003C/li>\n\u003C/ul>\n\u003Cp class=\"p1\">Folgende Beispiele zeigen, was alles in den Bereich Microinteractions fällt, damit ihr ein genauere Vorstellung davon bekommt:\u003C/p>\n\u003Cp>https://vine.co/v/bEblaqQrxm0\u003Cbr>\nhttps://vine.co/v/bErUwzMJZPH\u003Cbr>\nhttps://vine.co/v/bEgwDAZ3Jeh\u003Cbr>\nhttps://vine.co/v/b9QQtwQhqFj\u003C/p>\n\u003Cp class=\"p1\">(Bilder sind von http://microinteractions.com/what-is-a-microinteraction/)\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">Und hier ein paar Beispiele für wirklich toll gemachte Microinteractions:\u003C/p>\n\u003Cp class=\"p1\">Reload Animation der Yelp-App:\u003C/p>\n\u003Cp>https://youtu.be/K5kgjHvMIGA\u003Cbr>\nUpload Animation:\u003C/p>\n\u003Cp class=\"p1\">\u003Ca href=\"https://dribbble.com/shots/1429143-Upload\" target=\"_blank\" rel=\"https://dribbble.com/shots/1429143-upload noopener noreferrer\">\u003Cdiv alt=\"upload\" data-entity-type=\"media\" data-entity-uuid=\"57d2be81-ed55-4ff6-9d0f-4c17fa56c7f4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>  \u003Cimg title=\"upload\" alt=\"upload\" loading=\"lazy\" src=\"/sites/default/files/wp-migration/wordpress-media-image/2015/09/upload-1.gif\" width=\"800\" height=\"600\">\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">Float Button Animation:\u003C/p>\n\u003Cp class=\"p1\">\u003Ca href=\"https://dribbble.com/shots/1999539-Circle-menu\" target=\"_blank\" rel=\"https://dribbble.com/shots/1999539-circle-menu noopener noreferrer\">\u003Cdiv alt=\"circle_menu\" data-entity-type=\"media\" data-entity-uuid=\"dee3cf12-3fc5-4531-83e1-aa9e18b39540\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>  \u003Cimg title=\"circle_menu\" alt=\"circle_menu\" loading=\"lazy\" src=\"/sites/default/files/wp-migration/wordpress-media-image/2015/09/circle_menu-1.gif\" width=\"800\" height=\"600\">\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">Animation für Pull & Refresh:\u003C/p>\n\u003Cp class=\"p1\">\u003Ca href=\"https://www.behance.net/gallery/24541501/Gear-Powered-Pull-to-Refresh-UI-animation\" target=\"_blank\" rel=\"https://www.behance.net/gallery/24541501/gear-powered-pull-to-refresh-ui-animation noopener noreferrer\">\u003Cdiv alt=\"reload\" data-entity-type=\"media\" data-entity-uuid=\"956efd19-606a-4f6c-934b-2b8ecafb6a7f\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>  \u003Cimg title=\"reload\" alt=\"reload\" loading=\"lazy\" src=\"/sites/default/files/wp-migration/wordpress-media-image/2015/09/reload-1.gif\" width=\"600\" height=\"450\">\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">Beispiel für eine Download Animation:\u003C/p>\n\u003Cp class=\"p1\">\u003Ca href=\"https://dribbble.com/shots/1853526-Download\" target=\"_blank\" rel=\"https://dribbble.com/shots/1853526-download noopener noreferrer\">\u003Cdiv alt=\"download\" data-entity-type=\"media\" data-entity-uuid=\"977f2445-cc2d-4a3d-aed8-f831fc9b857c\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>  \u003Cimg title=\"download\" alt=\"download\" loading=\"lazy\" src=\"/sites/default/files/wp-migration/wordpress-media-image/2015/09/download-1.gif\" width=\"800\" height=\"600\">\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Das Microinteractions Model\u003C/b>\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Um effektive und nützliche Microinteractions zu designen, hat uns der bedeutende Interaktionsdesigner Dan Saffer in seinem Buch zu dieser Thematik ein Model beschrieben, nach welchem jede Microinteraction aufgebaut sein sollte.\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Microinteractions bestehen demnach aus 4 Teilen.\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Trigger: \u003C/b>\u003C/span>Trigger starten die Microinteraction. Ein Trigger kann User (Klick)- und Systemgesteuert (Eingang einer Textmessage) sein.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Rules: \u003C/b>\u003C/span>Unter Rules versteht man eine Sequenz von Vorgängen, die definiert, was in der Interaktion passiert. Rules sind die Logik hinter der Microinteraction.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Feedback: \u003C/b>\u003C/span>Das Feedback ist das Resultat der Interaktion, sprich was der Nutzer am Ende der Interaktion wahrnimmt, das „Feel“ im „Look and Feel“.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Loops and Modes: \u003C/b>\u003C/span>Loops beschreiben wie lange eine Interaction anhält. Wann endet sie oder wiederholt sie sich? Modes definieren einen alternativen Weg der Microinteraction bspw. der „Passwort vergessen“-Modus in Login Forms.\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Guidelines für das Design von Microinteractions\u003C/b>\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Zusätzlich zum 4-teiligen Model gibt uns Dan Suffer auch einige Design-Prinzipien mit auf den Weg, die wir beim Entwerfen von Microinteractions im Hinterkopf haben sollten.\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Nicht von Null starten: \u003C/b>\u003C/span>In den meisten Fällen wissen wir immer etwas über die Nutzer unserer Produkte und in welchem Kontext sie verwendet werden. Dieses Wissen gilt es zu analysieren um daraus entsprechende Möglichkeiten für Microinteractions abzuleiten.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Information on the Top: \u003C/b>\u003C/span>Wenn möglich sollten wir Informationen, die in unseren Produkten stecken und die Nutzer am meisten interessieren, nach außen kehren. Das App-Icon einer Wetter-app ist hier ein typisches Beispiel.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Verhindere Fehler durch die Nutzer: \u003C/b>\u003C/span>Es darf nicht passieren, dass eine Microinteraction fehlerhaft ausgeführt wird. Alle Anwendungsfälle durch die Nutzer müssen genau durchdacht und Fehlausführungen abgefangen werden.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Verwende das Übersehene: \u003C/b>\u003C/span>Um Feedback zu geben, sollen wir jene Interface Elemente nutzen, die bereits vorhanden sind, Cursor, Scrollbar, Button States, Vibration etc. Wir sollten nur neue Elemente hinzufügen, wenn es unbedingt notwendig ist.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Sprich wie ein Mensch: \u003C/b>\u003C/span>Texte sollten immer so konzipiert sein, dass sie sich lesen lassen, als würde ein Mensch mit einem sprechen. Einfach und direkt lautet die Devise.\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Lange Loops: \u003C/b>\u003C/span>Wir sollten auch daran denken was passieren soll, wenn die Microinteractions ein zweites Mal ausgeführt wird, das zehnte mal usw.\u003C/p>\n\u003Cp> \u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">\u003Cb>Conclusio\u003C/b>\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Um exzellente Microinteractions zu entwickeln bedarf es ein ausgereiftes Einfühlungsvermögen in die Nutzer der eigenen Produkte. Man muss verstehen was sie versuchen mit dem Produkt zu erreichen, wie sie es anwenden, wie und in welchem Kontext die Interaktion zu Stande kommt. Es ist notwendig Empathie zu entwickeln, sich vorzustellen welche Ansprüche der User an das Produkt und seine Bedienung hat um daraus sinnvolle, einzelne Microinteractions abzuleiten, die den Nutzer in seinem Vorhaben unterstützen und gleichzeitig Vergnügen bereiten.\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Mit sinnvoll eingesetzten Microinteractions verleihen wir unseren Produkten Persönlichkeit, Charme und Sympathie, heben uns ab von der Masse und geben den Nutzern die Möglichkeit sich in unsere Produkte zu verlieben.\u003C/span>\u003C/p>\n\u003Cp class=\"p1\">\u003Cspan class=\"s1\">Wer sich noch tiefer in die Materie Microinteractions einlesen möchte, dem möchte ich das bereits angesprochene Buch „Microinteractions – Designing with Details“ von Dan Saffer ans Herz legen.\u003C/span>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":182,"id":183,"excludeFromScreenreader":13,"mediaImage":184,"name":189,"path":192,"status":20},"MediaImage","1820",{"__typename":185,"url":186,"width":187,"height":188,"alt":13,"title":189,"size":190,"mime":191},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2015/09/lie_blogbeitrag_hg_vorlage-1.jpg",1920,1280,"lie_blogbeitrag_hg_vorlage",324561,"image/jpeg","/media/1820/edit","\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://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Microinteractions - All the small things - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Es sind meist die kleinen feinen Dinge, die es ausmachen, ob wir etwas lieben oder nicht. Was einst Tom DeLonge von Blink 182 im Song „All the small things“ – eine schnuckelige Liebeserklärung an seine damalige Freundin und heutige Frau – besang, ist heute von äußerst hoher Bedeutung für uns Designer und Developer und meist ein […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2015-09-15T11:27:05+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/09/lie_blogbeitrag_kreis_vorlage-1-300x300.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=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/09/lie_blogbeitrag_kreis_vorlage-1.png\",\"width\":500,\"height\":500},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/\",\"name\":\"Microinteractions - All the small things - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/#primaryimage\"},\"datePublished\":\"2015-09-15T11:27:05+00:00\",\"dateModified\":\"2015-09-15T11:27:05+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/96539caff2708284ff325a379697db94\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/microinteractions-all-the-small-things/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/96539caff2708284ff325a379697db94\",\"name\":\"Stefan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/6f2ffd22131a63da8504909cff0a7fce?s=96&d=mm&r=g\",\"caption\":\"Stefan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":195,"id":196,"myRole":197,"name":198,"nickname":199},"User","22","Experience & Visual Designer, hauseigener Fitness & Strength Coach, steirischer Märchenprinz","s-blumauer","Stefan",{"latestKnowhow":201},[202,217,230],{"__typename":79,"id":203,"title":204,"path":205,"wpTeaserText":206,"wpPromotedTeaserImage":13,"wpHeaderImage":207},"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":182,"id":208,"excludeFromScreenreader":13,"mediaImage":209,"name":215,"path":216,"status":20},"3364",{"__typename":185,"url":210,"width":211,"height":212,"alt":213,"title":13,"size":214,"mime":191},"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,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":218,"title":219,"path":220,"wpTeaserText":221,"wpPromotedTeaserImage":13,"wpHeaderImage":222},"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":182,"id":223,"excludeFromScreenreader":13,"mediaImage":224,"name":228,"path":229,"status":20},"3355",{"__typename":185,"url":225,"width":211,"height":212,"alt":226,"title":13,"size":227,"mime":191},"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":231,"title":232,"path":233,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":234},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":182,"id":235,"excludeFromScreenreader":21,"mediaImage":236,"name":240,"path":241,"status":20},"3303",{"__typename":185,"url":237,"width":211,"height":212,"alt":238,"title":13,"size":239,"mime":191},"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":243,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":244,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":248,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":251,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":254,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":257,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":260,"Menu:nuxt-main-menu":263,"ROOT_QUERY":277,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":293,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":296,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":299,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":302,"Menu:footer":305,"TermCategories:8":315,"TermTags:82":326,"TermTags:325":327,"TermTags:334":328,"TermTags:425":329,"TermTags:507":330,"TermTags:649":331,"TermTags:806":332,"TermTags:807":333,"TermTags:835":334,"TermTags:1405":335,"MediaImage:1820":336,"User:22":338,"NodeWpPost:926":339,"MediaImage:3364":378,"NodeWpPost:1619":380,"MediaImage:3355":383,"NodeWpPost:1616":385,"MediaImage:3303":388,"NodeWpPost:1606":390},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",245,"internal",20,"expanded",21,"attributes",247],{"__ref":246},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",249,"internal",20,"expanded",21,"attributes",250],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",252,"internal",20,"expanded",21,"attributes",253],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",255,"internal",20,"expanded",21,"attributes",256],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",258,"internal",20,"expanded",21,"attributes",259],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",261,"internal",20,"expanded",21,"attributes",262],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",264],[265,267,269,271,273,275],{"__ref":266},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":268},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":270},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":272},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":274},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":276},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",278,"menu({\"name\":\"NUXT_MAIN_MENU\"})",279,"menu({\"name\":\"FOOTER\"})",281,"route({\"path\":\"/blog/microinteractions-all-the-small-things\"})",283,"latestKnowhow({\"excludeId\":\"926\",\"limit\":3})",286],"Query",{"__ref":280},"Menu:nuxt-main-menu",{"__ref":282},"Menu:footer",["null","__typename",77,"entity",284],{"__ref":285},"NodeWpPost:926",[287,289,291],{"__ref":288},"NodeWpPost:1619",{"__ref":290},"NodeWpPost:1616",{"__ref":292},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",294,"internal",20,"expanded",21,"attributes",295],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",297,"internal",20,"expanded",21,"attributes",298],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",300,"internal",20,"expanded",21,"attributes",301],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",303,"internal",21,"expanded",21,"attributes",304],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",306],[307,309,311,313],{"__ref":308},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":310},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":312},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":314},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",316,"langcode",317,"changed",318,"metatag",319],["null","__typename",118,"processed",119,"format",120],{"__ref":246},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[320,322,324],["null","__typename",93,"tag",94,"attributes",321],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",323],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",325],["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",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",138,"id",159,"name",160,"path",161,"weight",116],["null","__typename",138,"id",163,"name",164,"path",165,"weight",116],["null","__typename",138,"id",167,"name",168,"path",169,"weight",116],["null","__typename",138,"id",171,"name",172,"path",173,"weight",116],["null","__typename",138,"id",175,"name",176,"path",177,"weight",116],["null","__typename",182,"id",183,"excludeFromScreenreader",13,"mediaImage",337,"name",189,"path",192,"status",20],["null","__typename",185,"url",186,"width",187,"height",188,"alt",13,"title",189,"size",190,"mime",191],["null","__typename",195,"id",196,"myRole",197,"name",198,"nickname",199],["null","__typename",79,"id",80,"title",81,"changed",340,"created",341,"langcode",342,"path",90,"promote",21,"status",20,"sticky",21,"metatag",343,"category",350,"contentElements",13,"evergreen",13,"tags",352,"wpBody",373,"wpHeaderImage",13,"wpHeaderImageOld",374,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",193,"author",376],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":246},[344,346,348],["null","__typename",93,"tag",94,"attributes",345],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",347],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",349],["null","__typename",109,"property",110,"content",81],{"__ref":351},"TermCategories:8",[353,355,357,359,361,363,365,367,369,371],{"__ref":354},"TermTags:82",{"__ref":356},"TermTags:325",{"__ref":358},"TermTags:334",{"__ref":360},"TermTags:425",{"__ref":362},"TermTags:507",{"__ref":364},"TermTags:649",{"__ref":366},"TermTags:806",{"__ref":368},"TermTags:807",{"__ref":370},"TermTags:835",{"__ref":372},"TermTags:1405",["null","__typename",179,"processed",180,"format",120,"summary",13],{"__ref":375},"MediaImage:1820",{"__ref":377},"User:22",["null","__typename",182,"id",208,"excludeFromScreenreader",13,"mediaImage",379,"name",215,"path",216,"status",20],["null","__typename",185,"url",210,"width",211,"height",212,"alt",213,"title",13,"size",214,"mime",191],["null","__typename",79,"id",203,"title",204,"path",205,"wpTeaserText",206,"wpPromotedTeaserImage",13,"wpHeaderImage",381],{"__ref":382},"MediaImage:3364",["null","__typename",182,"id",223,"excludeFromScreenreader",13,"mediaImage",384,"name",228,"path",229,"status",20],["null","__typename",185,"url",225,"width",211,"height",212,"alt",226,"title",13,"size",227,"mime",191],["null","__typename",79,"id",218,"title",219,"path",220,"wpTeaserText",221,"wpPromotedTeaserImage",13,"wpHeaderImage",386],{"__ref":387},"MediaImage:3355",["null","__typename",182,"id",235,"excludeFromScreenreader",21,"mediaImage",389,"name",240,"path",241,"status",20],["null","__typename",185,"url",237,"width",211,"height",212,"alt",238,"title",13,"size",239,"mime",191],["null","__typename",79,"id",231,"title",232,"path",233,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",391],{"__ref":392},"MediaImage:3303"]