Wir begegnen Micro-Interactions täglich – meist ohne es zu wirklich mitzubekommen. Micro-Interactions folgen uns durch den Alltag und sind fester Bestandteil unseres modernen Web- und App-Designs. Warum das so ist und wie Sie Micro-Interactions zu Ihrem Vorteil nutzen können, wird Thema dieses Artikels sein.
Sie sind wahrscheinlich schon unzählige Male in dieser Situation gewesen: Sie schauen auf Ihr Smartphone und bemerken eine Push-Benachrichtigung. Vermutlich ist Ihr erster Impuls, das Rechteck zur Seite zu streichen, um es loszuwerden. Und bevor Sie es überhaupt merken, haben Sie schon eine Micro-Interaction genutzt.
Eine Micro-Interaction also ein Designelement, das auf eine bestimmte Weise reagiert, wenn man damit interagiert. Es tut dies, um entweder den Blick des Nutzers zu lenken oder einfach, um Sie zu unterhalten.
Das sind die wichtigsten Micro-Interactions, denen wir immer wieder begegnen:
Gerade in Native Apps, aber auch bei immer mehr Web-Designs treten die Scrollbars optisch in den Hintergrund und erscheinen nur, wenn man entweder über einen bestimmten Bereich - z.B. den rechten Bildschirmrand - mit der Maus fährt oder wenn man auf einem Touchpad scrollt.
Ob, Telegram, Facebook Messenger, WhatsApp. In den meisten Messenger-Apps können Sie sehen, ob in einem Chat gerade jemand eine Nachricht schreibt, ob Ihre Nachricht gelesen wurde und ähnliches mehr.
Sie starten eine aufwendige Interaktion, z.B. einen Download, und sehen eine Anzeige, oft mit einem dynamischen Prozentwert, wie weit der Download ist.
Um eine Webseite oder eine Ansicht in einer App auf Ihrem Smartphone zu aktualisieren, können Sie einfach am oberen Bildrand nach unten streichen und die Seite oder Ansicht wird neu geladen.
Wer kennt es nicht: wenn Ihnen in Google Chrome die Fehlerseite angezeigt wird, haben sie gleich auch Gelegenheit, eine Runde mit dem Dinosaurier zu spielen, um sich die Wartezeit zu verkürzen.
Auch wenn diese Features als Micro-Interactions bezeichnet werden, ist ihr Einfluss alles andere als klein. Sie ziehen Aufmerksamkeit auf ein bestimmtes Element oder eine Interaktionsmöglichkeit und motivieren Benutzerinnen und Benutzer, länger auf Ihrer Seite zu bleiben.
Dazu nutzen Micro-Interactions eine Eigenart der menschlichen Wahrnehmung: da unser Hirn Bewegungen sehr schnell wahrnimmt, ziehen eben Diese auch unsere Aufmerksamkeit schnell auf sich. Dies gilt insbesondere für Animationen. Diese können auch dazu verwendet werden, Benutzerinnen und Benutzer für bestimmte Aktionen zu belohnen und Feedback zu geben. Zum Beispiel, wenn man über ein Objekt hovert und es sich auf eine ansprechende Weise verhält.
Micro-Interactions können aber auch subtile Animationen sein, die dazu dienen, die Aufmerksamkeit des Benutzers auf sich zu ziehen. Obwohl die Animationen kaum bewusst ins Auge fallen, können Designerinnen und Designer mit Ihnen den Fokus auf bestimmte Objekte lenken und so ein intensiveres Nutzungserlebnis schaffen.
Ein gutes Beispiel dafür sind die Hover-Effekte auf der Website von Mercedes: Der Teaser verwendet eine kleine Animation, um beim Hovern weitere Informationen einzublenden. Ohne diese Animation wäre ein Klick erforderlich, um mehr zu erfahren. Aufgrund der kleinen Animation reicht es, den Cursor zu bewegen, um die gleich Anzahl an Informationen zu erhalten. Auf diese Weise ist es weitaus angenehmer, die Website zu durchstöbern und mit ihr zu interagieren.
Mikroanimationen können außerdem:
• Tipps an den Nutzer geben
• zeigen, ob ein Element interaktiv ist
• unmittelbar Rückmeldung für eine Aktion geben
• Hilfe bei der Anzeige der Ergebnisse von Benutzeraktionen geben
• Das Gefühl der Kontrolle beim Nutzer steigern
• Ihre Website persönlicher und emotionaler gestalten
• Transformierende Elemente verwenden, wie bei einem Burger-Menü, das sich in ein geschlossenes Symbol verwandelt
Wenn Sie mit coding vertraut sind:
Mobile: Xcode, Android studio
Mobile / Web: Framer
Web: CSS & JS animation
Wenn Sie eine Interaktion zwischen Layouts und einzelnen Modulen zeigen wollen um das Seitenverhalten zu skizzieren:
Invision and Marvel
Wenn Sie detailliertere Interaktionen erstellen möchten:
Figma (mit Plugins), Principle, Adobe XD, origami Studio and Protopie
Wenn Sie detaillierte Interaktionen + Animationen erstellen möchten:
After Effects
Mikro-Interaktionen sind zu einem unverzichtbaren Bestandteil des modernen Web- und App-Designs geworden. Sie können das Nutzungserlebnis erheblich verbessern und geben Designerinnen und Designern mehr Kontrolle darüber, wie Nutzerinnen und Nutzer mit ihrer Webseite interagieren. Außerdem verleihen sie der Website eine persönliche Note und zu einem gewissen grad sogar eine Persönlichkeit.
Übertreiben Sie es jedoch nicht. Wenn zu viel auf der Seite vor sich geht, kann es schnell überwältigend oder frustrierend werden. Versuchen Sie also einfach, sich in die Perspektive der Benutzerinnen und Benutzer hineinzuversetzen und fügen Sie Animationen nur dort ein, wo Sie sie selbst erwarten würden.
In unserer agilen Welt gibt es einen zentralen Aspekt, um echten Mehrwert für unsere Kunden zu verstehen und zu liefern – User Stories. Lesen Sie mehr
Wie UX/UI Design Unternehmensziele und exzellente Nutzererfahrung vereinen kann, warum KI nicht immer die Antwort für neue Projekte ist und wie Unternehmen die User Experience ihrer
In der heutigen digitalen Ära ist die Präsenz im Internet für Unternehmen von entscheidender Bedeutung. Eine gut durchdachte Online-Strategie kann den Unterschied zwischen Erfolg und Misserfolg
