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.
Was sind Micro-Interactions?
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:
Scrollbars
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.
Aktivitätsanzeige im Messenger
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.
Fortschrittsanzeige
Sie starten eine aufwendige Interaktion, z.B. einen Download, und sehen eine Anzeige, oft mit einem dynamischen Prozentwert, wie weit der Download ist.
Page Refresh
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.
Interaktive Fehlerseiten
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.
Kleine Interaktion - Maximale Wirkung.
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
Mit diesen Hilfsmitteln können Sie Micro-Interactions selbst erstellen.
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
Fazit.
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.
