Web Design: Micro-Interaktionen
Micro interaction has plays a very important role in both UI & UX designs.
Bewegung erregt Aufmerksamkeit. Unsere geringe Aufmerksamkeitsspanne macht es nicht leichter. Unterhaltung und hochwertige Signale rücken stark in den Fokus – auch bei Websites. Die Lösung: Micro-Interaktionen.
Micro-Interaktionen: Was ist das?
Micro-Interaktionen begleiten uns tagtäglich: Beitrag auf Facebook mit „Gefällt mir“ markiert, Weckerklingeln per Schlummer-Taste weggeschaltet oder „Swipe up“ bei Instagram genutzt. Das Web Design setzt vermehrt auf dezente Micro-Animationen. Sie sind als Designelemente in die Seite integriert und sollen auf diese Weise die Aufmerksamkeit der User:innen erregen.
Als Weiterentwicklung von Infografiken informieren Micro-Interaktionen Benutzer:innen über eine erfolgreich abgeschlossene Ausführung. Das kann über gedrückte Schaltflächen, verschobene Umschalttasten, vorausgefüllte Felder, etc. erfolgen. Wir kennen es alle: Beim Eintragen der E-Mail-Adresse während eines Logins fehlt das @-Zeichen. Durch eine Micro-Animation werden wir aufgefordert, unsere Adresse erneut zu prüfen und zu korrigieren.
Ein bisschen mehr Leben
Micro-Animationen verleihen einer Website Persönlichkeit. Idealerweise in Kombination mit einem funktionalen Nutzen und Freude beim Besucher. Besonders clever setzt Facebook Micro-Interaktionen ein. Zu Beginn wurden Beiträge mit einem schlichten „Like“ markiert. Heute erlauben Emojis jeden Beitrag mit geringstem Aufwand persönlich zu bewerten. Die Nutzer:innen können ihren Emotionen mit nur einem Klick Ausdruck verleihen.
Damit überzeugen Micro-Interaktionen
- Größere Usability
- Originalität
- Einfache Interaktion
- Erfüllen mehrere Funktionen zeitgleich
- Hohes Potenzial, Interaktionsprozesse zu beschleunigen
- Sichtbare Rückmeldung für Benutzer:innen
Das gilt es zu beachten
- Funktionalität an erster Stelle
Das Konzept ist ausschlaggebend: Micro-Animationen sollten zu ihrer funktionellen Bedeutung passen und nicht negativ aufgefasst werden. Die Elemente sollten daher fast unsichtbar sein. Bei häufigen und kleineren Aktionen erscheinen zurückhaltende Animationen, währenddessen weniger häufige, größere Aktionen eine bedeutsame Animation erhalten sollten. - Langlebigkeit immer im Blick
Die Entwicklung von Micro-Animationen erfolgt für den dauerhaften Gebrauch und im Hinblick auf die Reaktion der Benutzer:innen. Durch Pop-up-Fenster fühlen sich viele gestört. - Angenehm interagieren
Micro-Animationen werden fast nicht wahrgenommen, stattdessen sind sie ein Teil unseres natürlichen Interagierens mit Produkten und Services. Webdesigner können mit überraschenden Elementen die User Experience nachhaltig beeinflussen.
Checkliste
- Status anzeigen (z. B. Prozentanzeige beim Download einer Datei)
- Buttons und Bedienelemente durch visuelles Feedback greifbar machen
- Sinnvolle Übergänge erstellen (z.B. Micro-Animationen als Navigationselemente)
- User:innen unterstützen (Micro-Animationen als Guide für neue Besucher:innen)
Wir sind große Fans von Micro-Animationen! Es ist eine hervorragende Möglichkeit, einer Website Persönlichkeit zu geben. Sie möchten auf Ihrer Website ebenfalls Micro-Animationen haben? Dann kontaktieren Sie uns gerne über unser Kontaktformular!