Share on facebook
Share on linkedin
Share on xing
Share on twitter
Share on whatsapp

Micro-Interactions – kleine UI-Elemente mit großer Wirkung

Florian Scholz

Florian Scholz

Webdesigner at freshcells.
micro interactions cover image
wyzowl.com ®

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.

Teaser hover Interaktion
Quelle: Mercedes Benz

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

Burger Menu Morphing
Quelle: Matthieu Souteyrand

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

Erfahren Sie mehr über Micro-Interactions

5 perfekte Anwendungsbeispiele für Micro-Interactions
Jetzt lesen

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. 

Weitere Artikel
Titelbild für den Artikel
Design

Verwendung von Farben im Webdesign

Farben sind einer der wichtigsten Eindrücke für uns Menschen. Vor Urzeiten halfen sie uns zu überleben. Rote Beeren, zum Beispiel, sollte man meiden, da diese Giftig sein könnten. Genauso wie Fliegenpilze. Grüne Pflanzen hingegen, haben uns das …

Read More
Kontakt
Deutsch

Save your free initial consultation now

    Jetzt kostenlose Erstberatung sichern