5 perfekte Anwendungsbeispiele für Micro-Interactions

Illustration einer Micro-Interaction

Die Möglichkeiten, Micro-Interactions einzusetzen, sind nahezu unbegrenzt. Richtig dosiert und genutzt, haben Micro-Interactions auf Websites und in Apps enorme Vorteile. Sie lenken den Fokus und die Aufmerksamkeit von Nutzerinnen und Nutzern, sie geben ein unmittelbares Feedback, z.B. nach dem Klicken eines Buttons oder Sie helfen Nutzerinnen und Nutzern, eine App besser zu verstehen. Was Micro-Interactions genau sind und Tipps wie man sie am besten einsetzt, finden Sie in unserem Beitrag: Micro-Interactions – kleine UI-Elemente mit großer Wirkung

Wir haben Ihnen 5 perfekte Beispiele für Micro-Interactions in diesem Artikel zusammengestellt.

1. Aufmerksamkeit der Benutzer durch Bewegung erregen

Bewegung eines der ansprechensten Dinge für unser Gehirn. Daher scheint es durchaus sinnvoll, sie als Gestaltungselement bei wichtigen Objekten anzuwenden.
Beispiel einer Micro-Interaction zur Aufmerksamkeitsgewinnung

2. Angeben, was eine bestimmte Aktion bewirken wird

Google wendet Mikroanimationen bei seinem mobilen Betriebssystem (Android) recht gut an. Wie in diesem Beispiel, in dem das aufleuchtende Papierkorbsymbol anzeigt, dass ein Streichen nach rechts dieses Element löschen wird.

Quelle: material.io

3. Buttons und Call-To-Actions

Ein normaler Button ist ziemlich langweilig. Sie können ihn jedoch mit Hilfe von Micro-Interactions in etwas wirklich Ansehnliches verwandeln.

Der Zweck eines CTA (Buttons) ist ziemlich offensichtlich; er soll dazu anregen, eine bestimmte Aktion durchzuführen (z.B. etwas zu kaufen). Die Verdeutlichung, was diese Aktion ist, kann jedoch nicht nur durch Text erfolgen.

Button Interaktionsbeispiel
Quelle: uxdesign.cc

4. Fortschritte anzeigen

Es ist sehr wichtig, Benutzerinnen und Benutzern eine Rückmeldung über den Stand eines bestimmten Fortschritts zu geben. Wenn dies auch noch schön anzusehen ist, ist es umso besser. In Zeiten von super schnellen Web Applikationen können solche künstlichen visuellen Ladezeiten zudem zum Nutzervertrauen beitragen. Prozesse werden greifbar und verständlich.

Fortschritt Interaktion

5. Wertvolles Feedback geben

Ähnlich wie bei der Fortschrittsanzeige können Mikroanimationen auch dazu verwendet werden, wichtige Informationen zu vermitteln. Zum Beispiel die Anzeige der Stärke eines Passworts beim Einrichten eines Kontos.

Formular Interaktion
Quelle: uxdesign.cc
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
Kenne deine Zeilgruppe - Perssonas by freshcells.de
Design

Kenne deine Zielgruppe – Personas

Eine Persona zu definieren, ist erstmal nicht schwierig. Es kostet aber etwas Zeit und Aufwand. Der Nutzen von Personas  für die Konzeption und die spätere Entwicklung einer Applikation machen den Aufwand auf jeden Fall wett.

Wie Kühnen in seiner Definition formuliert, beschreibt eine Persona einen Menschen mit allen Facetten, Vorlieben und Abneigungen. Sie beschreibt Gewohnheiten, Erfahrungen und teilweise nicht in direktem Zusammenhang zur konkreten Aufgabenstellung stehende Überzeugungen.

Read More

Save your free initial consultation now

    Was ist Ihre Challenge?