Zeige Offline-Version
Details machen
den Unterschied
Designer sind Problemlöser – und Probleme lassen sich am Besten lösen, indem sie in kleinere Probleme unterteilt werden. Leider steht in den wenigsten Fällen genug Budget und Zeit zur Verfügung, um sämtliche Interaktionen eines Produktes zu perfektionieren. Daher sollten die kritischen Microinteractions identifiziert werden: Was sind die Schritte, die ein Nutzer meist unternimmt, um das Ziel des Produktes zu erreichen? Was ist die Haupt-Microinteraction des Haupt-Features (z. B. der Datepicker einer Flugsuchmaschine)? Was sind die bewussten und unbewussten ›pain points‹ der Nutzer? Wie kann die Einsteigerfreundlichkeit und wie die Produktivität für erfahrene Nutzer verbessert werden?
Häufig ist es sinnvoll, das zu optimieren, was von den meisten Nutzern am meisten genutzt wird. Außerdem sollten eine Registrierung und andere Hürden, die genommen werden müssen, um das Produkt zu nutzen, möglichst reibungslos gestaltet werden.
Microinteractions sollten nicht blind kopiert werden, nur weil sie gerade in Mode oder einfach üblich sind. Nur weil sich eine Microinteraction durchsetzt, heißt das nicht, dass sie perfekt ist. Beispielsweise wird von vielen Nutzern nicht verstanden, wann ein Doppel- und wann ein einfacher Klick verwendet wird.
Die Frage, wann eine geläufige Microinteraction überarbeitet bzw. ersetzt werden sollte, lässt sich nicht leicht beantworten. Die Ergänzung einer vorhandenen und daher bekannten Eingabemöglichkeit durch eine neuartige, scheint eine gute Herangehensweise zu sein.
Think of everything as a Microinteraction.
Dan Saffer
Seit der Schaffung des Begriffes Microinteractions durch Dan Saffer scheint dieser zum festen Bestandteil der Kommunikation im Bereich des digitalen Design geworden zu sein.
Vitaly Friedmann, Gründer des ›Smashing Magazine‹, beschreibt in der Artikelreihe ›Designing the Perfect …‹ detaillierte Einblicke in die Gestaltung ausgeklügelter Features, UI-Elemente und Microinteractions.
Ein Konzept zur übersichtlichen Darstellung und Erläuterung von Microinteractions wurde von Havana Nguyen entwickelt: Interaction Flows.
Zahlreiche Artikel und Blog-Einträge, die das Thema erwähnen, scheinen jedoch gespickt von Halbwissen oder falschem Verständnis der Intention Saffers (in etwa: »Eine Interaktion durch zahlreiche, üppige Animationen verschönern«).
Trotz dieser regen Diskussion scheinen Microinteractions in der Praxis häufig noch immer vernachlässigt zu werden. Von Nutzern empfundene Simplizität bedeutet nicht immer operative Simplizität, häufig wird also der hohe technische Aufwand ein Grund für mittelmäßige Umsetzung sein. Doch die Werkzeuge zur Erschaffung digitaler Produkte werden immer ausgefeilter. Letztendlich wird die bewusste Gestaltung von Microinteractions zum neuen Maßstab und mehr denn je zum Grundpfeiler der Mensch-Maschine-Interaktion.
—
Appendix
Empfehlenswerte Tools für die Gestaltung von Microinteractions
- Framer – Prototyping bis ins Detail, Perfekt für Microinteractions, aber steile Lernkurve
- Flinto – Unkompliziert Interaktionen gestalten und ausprobieren
- Principle: Gutes Tool für animierte Interaktionen
- Invision + Invision Studio – Vielversprechendes Allround-Paket
- Übersichtlicher Vergleich zahlreicher Prototyping-Tools
- Sketch.systems – Erstellung interaktiver Logik-Diagramme, gut zur Ausarbeitung komplexer Regeln
Weitere überaus nützliche Links:
- Videoserie: UX How-To with Luke Wroblewski
- Artikel: Designing for Fingers, Touch and People von Steven Hoober
- Nielsen and Molich’s 10 User Interface Design Guidelines
- Dieter Rams’ Zehn Thesen für gutes Design
- Pdf: Microinteractions -small but mighty- Quick Reference with Official Saffer Seal
- Sammlung inspirierender Microinteractions und anderer UI-Details: littlebigdetails.com