• Deutsch
  • Englisch

Designtrends 2022 – Mit Micro Interactions zur verbesserten User Experience

Designtrend

Micro Interactions

Wie sie zu einer optimierten User Experience beitragen

Die kleinen Dinge sind es, die das Leben schöner machen. Ein Lächeln, ein gutes Gespräch oder der Kaffee am Morgen. Denn ohne diese Kleinigkeiten, würde etwas Bedeutendes fehlen. Und genau dasselbe gilt für unsere Webseiten.

Natürlich sind Apps und Webseiten auch ohne irgendwelche Animationen oder Interaktionen nett anzuschauen. Jedoch können schon die kleinsten Details die User Experience auf ein neues Level bringen. Dazu trägt besonders ein neuer Trend bei: Micro Interactions.

Was sind überhaupt Micro Interactions?

Micro Interactions sind kurze animierte Ereignisse, die einen einzigen Zweck erfüllen und die mittlerweile – auf verschiedensten Devices und Apps – vermehrt zu finden sind. Ihr tieferer Sinn ist es, den Nutzer zu erfreuen und kleine emotionale Erlebnisse zu schaffen.

Die Social Media Plattform Facebook zeigt, wie gewitzt Micro Interactions Benutzung finden: Ein kurzes stolpern über den berühmten „Like-Button“ oder die „Gefällt-Mir“ Schaltfläche ruft sechs Emojis hervor, die ihre Emotionen in Bewegung ausdrücken und dem ein oder anderen Nutzer mit Sicherheit ein kleines Schmunzeln entlockt. Vor allem beim Klick auf das „HAHA“.

Quelle: Giphy

Wir sehen, konsumieren und interagieren täglich mit diesen kleinen Animationen, ohne bewusst darüber nachzudenken. Neben dem berühmten Like-Button, gibt es noch einige weitere Beispiele:

Eine Scrollbar, die erscheint, wenn man den Mauszeiger bewegt

Die Möglichkeit zu sehen, dass eine andere Person tippt

Ein Swipe nach links, um eine Benachrichtigung zu schließen

Eine Progressbar, die den Fortschritt eines Downloads anzeigt

Warum sind Micro Interactions auf Webseiten so besonders wichtig?

Wenn Mikrointeraktionen nur winzige Designelemente sind, warum sind sie dann überhaupt wichtig?

Es ist die Liebe zum Detail, die eine außergewöhnliche Webseite von einer gewöhnlichen unterscheidet.

„Geschmack ist die Kunst, sich auf Kleinigkeiten zu verstehen“

Jean-Jacques Rousseau

Micro Interactions verbessern die Navigation innerhalb einer Webseite und ermöglichen es dem User leichter damit zu interagieren. Sie geben dem Besucher sofortige Rückmeldung über dessen ausgeführte Aktionen und die Information, ob Elemente interaktiv zu Nutzen sind oder nicht.

Sie animieren dazu Inhalte zu teilen, zu liken oder zu kommentieren, lenken die Aufmerksamkeit des Betrachters auf wichtige Elemente der Webseite und vermitteln Emotionen. Alles in Allem schaffen es Micro Interactions das Nutzererlebnis viel interessanter zu gestalten.

 

Gut durchdachte Micro Interactions sind ein klares Zeichen für die durchdachte User Experience eines Nutzers. Deshalb sind sie auch so wertvoll. Ein Benutzer erfährt, was er zu tun hat und ob seine Aktion korrekt war – eine App oder Website bietet ein unmittelbares visuelles Feedback und vermittelt dem Benutzer, wie er mit dem System arbeiten kann.

 

Der Vergleich einer Benutzeroberfläche mit und ohne Micro Interactions zeigt deutlich, welch enormen Unterschied in der Nutzerfreundlichkeit diese bewirken.

Welche Mehrwerte bietet der Einsatz von Micro Interactions?

Das primäre Ziel der Verwendung von Micro Interactions ist es den Nutzer zu einer Handlung zu bewegen. Der erste Schritt dafür ist sich in die Lage des Nutzers zu versetzen. Sprich: Wohin soll der Betrachter zuerst blicken?

 

Weiter ist die Funktion einer Micro Interaction ein wichtiger Bestandteil. Sie sollen nicht nur ästhetisch schöne Animationen sein, sondern auch das Nutzererlebnis signifikant verbessern. Unter anderem der Unterhaltungswert einer Webseite kann ein Grund dafür sein, sie immer wieder zu besuchen. Wenn der User den Gebrauch einer Webseite genießt und diese als angenehm empfindet, kommt er immer gerne wieder. Von Vorteil ist es hierbei eine „menschliche“ und nicht allzu technische „Sprache“ der Micro Interactions zu benutzen, damit die Handhabung so einfach wie möglich gehalten wird.

 

Aber wichtig: Zu viele Animationen haben einen gegenteiligen Effekt auf die Nutzer. Deshalb empfehlen wir Interaktionen lieber gezielt einzusetzen, als dass die Nutzeroberfläche zu überladen wirkt.

Best Practices für Micro Interactions

Bei der Erstellung von Websiten, Apps und Landingpages Micro Interactions mit einzubeziehen zahlt sich aus – denn die Details machen den Unterschied. Wir haben ein paar Beispiele zusammengefasst, an welchen Stellen sich der Einsatz besonders lohnt!

Zum Öffnen und Schließen eines Popup- bzw. Burger-Menüs

Als Slider-Element für Bilder und Texte

Ein Hover-Effekt bei Buttons

Zur Individualisierung von Daten und Einstellungen

Sie möchten mehr Input zu dem Thema erhalten? In unserem Webinar „Design in Social Media“, das im Rahmen unserer #MC22 Academy stattfindet, zeigt Ihnen unsere Senior Communication Designerin Julia Leuenberger, warum gutes Design auf Social Media besonders wichtig ist, wie Sie durch Design Conversions erhöhen und Ihre Marke ins beste Licht rücken. Mehr Infos dazu & die Möglichkeit zur Anmeldung finden Sie gleich hier: https://aktionen.evg-media.com/webinar-design-social-media

EVG_Julia-Leuenberger
Julia Leuenberger, Senior Communication Designerin

Bildquellen: Evernine