Wenn die meisten Menschen den Begriff hören, denken sie vielleicht an auffällige Animationen, bewegende Ladescreens, Header, die hin und her springen, und die Liste könnte endlos weitergehen. Jedoch sind Microinteraktionen viel mehr als nur ein visuelles Element. Sie sind konkreter als typische Animationen und nützlicher als visuell bewegende Elemente, die aus einer Laune heraus angetrieben werden.
Microinteraktionen helfen den Benutzern, die Schnittstelle zu navigieren, machen sie intuitiver nutzbar und heben dadurch die Benutzererfahrung auf ein höheres Niveau. Sie erreichen dies durch kurze Animationen, Soundeffekte oder sogar haptisches Feedback.
Wenn wir es definieren sollten, könnte es vielleicht am besten so ausgedrückt werden:
"Eine Microinteraktion ist eine kleine Reaktion, die durch einen Auslöser (eine Aktion?) an der Schnittstelle ausgelöst wird. In den meisten Fällen ist sie visuell, kann aber auch auf Sound basieren. Damit sie stattfindet, muss der Benutzer mit der Schnittstelle interagieren oder die Schnittstelle muss zur Interaktion auffordern."
Anfangs mag es kompliziert klingen, aber lassen Sie uns genauer hinsehen:
AUSLÖSER ➡ MICROINTERAKTION ➡ RÜCKMELDUNG
Das sind die drei Komponenten einer guten Microinteraktion.
In jedem Fall ist ein auslösendes Ereignis (Auslöser) notwendig, um die Ausführung der Microinteraktion zu initiieren. Dann muss die Microinteraktion ablaufen und dem Benutzer relevante Rückmeldung geben.
Der Auslöser kann vom Benutzer oder vom System bereitgestellt werden. Ohne einen Auslöser können wir jedoch nicht von einer Microinteraktion sprechen. Dies wird später wichtiger, wenn wir diskutieren, was eine Microinteraktion von einer bloßen Animation unterscheidet.
Lassen Sie uns ein praktisches Beispiel betrachten:
Wenn ein Benutzer mit der Maus über einen Knopf fährt, ändert sich die Farbe des Knopfes. In diesem Fall ist das auslösende Ereignis das Überfahren des Knopfes mit der Maus. Die Microinteraktion ist die Farbänderung des Knopfes, die dem Benutzer suggeriert, dass der Knopf interagiert werden kann, nicht nur ein grafisches Element. Das ist die Rückmeldung.
Oder stellen Sie sich ein E-Mail-Programm vor. Sie schreiben Ihre E-Mail, klicken auf den Senden-Knopf, und das System spielt ein zischendes Geräusch, das betont, dass die E-Mail tatsächlich gesendet wurde.
Auslöser: Klicken auf den Senden-Knopf,
Microinteraktion: Zischendes Geräusch,
Rückmeldung: Die E-Mail wurde gesendet.
Ein weiterer bekannter Fall ist, wenn in einer Anwendung eine neue Nachricht ankommt und ein roter Kreis mit einer Zahl auf dem Anwendungssymbol erscheint. In diesem Fall ist der Auslöser das Eintreffen einer neuen E-Mail, die Microinteraktion ist der rote Kreis mit der Zahl, und die Rückmeldung ist, dass eine neue E-Mail angekommen ist.
Also, können wir sie in verschiedenen Fällen verwenden, aber was sind diese Fälle genau?
Rückmeldung über den Systemstatus:
- Ladescreens (System lädt, ist nicht eingefroren)
- Gesendete E-Mail (zischendes Geräusch oder kurze Animation)
- Anzeige getippter Zeichen (z. B., beim Eingeben eines Passworts)
Hervorheben von Änderungen:
- Ankreuzen eines Kästchens (visuell anzeigen, dass etwas ausgewählt wurde)
- Umschalten eines Schalters (anzeigen, dass ein anderer Zustand eingestellt wurde)
- Empfangene neue Nachricht (rotes Abzeichen mit einer Zahl)
Aufforderung zur Aktion:
- Zustimmung erforderlich (obligatorischer Abschnitt auf der Schnittstelle hervorgehoben, der anzeigt, dass der Benutzer nicht fortfahren kann, bis er akzeptiert wird)
- Führung durch einen Prozess (wenn der Benutzer während eines Prozesses zu lange wartet, auf der Schnittstelle anzeigen, wie sie fortfahren können. Z. B., der Weiter-Knopf bewegt sich/ändert die Farbe usw.)
Nach all diesen Beispielen könnten wir vielleicht die Frage selbst beantworten:
Was unterscheidet eine Microinteraktion von einer Animation?
"Was Benutzerinteraktion erfordert und das Verständnis erleichtert, ist eine Microinteraktion. Was ausschließlich für das visuelle Erlebnis dient, ist eine Animation."
Das bedeutet, wenn wir ein Element nur deshalb animieren, weil wir denken, dass es die Seite besser aussehen lässt, wird es keine Microinteraktion sein.
Viele von uns erinnern sich sicherlich an die frühen 2000er Jahre, als begeisterte Webdesigner Seiten mit GIF-Animationen füllten und so viel auf der Schnittstelle bewegte, dass es schwer war, den eigentlichen Inhalt zwischen den Animationen zu erkennen. Das ist nicht das Ziel von irgendjemandem, also sollten wir selbstverliebte Animationen mit Vorsicht behandeln!
Okay, aber was ist mit Microinteraktionen? Können wir sie übertreiben? Die kurze Antwort: ja, weshalb hier einige Richtlinien zu beachten sind, wenn Sie Microinteraktionen entwerfen.
Wie man Microinteraktionen gestaltet?
- Verwenden Sie Microinteraktionen mit einem Zweck; sie sollten das Erlebnis unterstützen, nicht überschatten!
- Etwas sollte sich nicht nur bewegen, um „cool“ auszusehen. Zielloses Bewegen verwirrt nur.
- Verwenden Sie kurze, zweckmäßige Animationen, die Informationen effizient vermitteln.
- Microinteraktion ist auch ein Designelement; es sollte zur Markenidentität passen und Teil des Designsystems sein.
Und vielleicht die wichtigste Regel:
"Microinteraktionen ersetzen kein sorgfältiges Design; ein Prozess/eine Schnittstelle muss auch ohne Microinteraktionen leicht verständlich, intuitiv und einfach zu bedienen sein. Wenn die Grundlage gut ist, können wir das Erlebnis nur dann mit Microinteraktionen auf ein höheres Niveau heben."
Beste Wünsche für gutes Design!
Artikel produziert von unserer Tochtergesellschaft @works.