Dieter Petereit 28. Februar 2018

Design: Mikrointeraktionen machen den Unterschied

Du glaubst, es kommt auf das große Ganze an? Ja, aber nur solange es sich insgesamt ausreichend differenziert. Heutzutage sind die kleinen UI-Elemente und Features weitaus wichtiger. Deshalb solltest du beim Design deiner Projekte besonders auf die Mikrointeraktionen achten.

Was sind Mikrointeraktionen?

Mikrointeraktionen definieren die eigentliche Mensch-Maschine-Schnittstelle. Wenn du deinen Wecker ausschaltest oder dein Auto per Funkfernbedienung auf- oder abschließt, die Klospülung drückst oder das Licht ein- oder ausschaltest – all das sind Mikrointeraktionen.

Anhand der Beispiele kannst du schon erkennen, dass es sich um zwar nur kurze Aktionen, die schnell erledigt sind, handelt, diese aber ganz wesentlich für die jeweilige Nutzererfahrung sind (in einem Falle sogar für die Nutzererfahrung nachkommender Nutzer). Es ist also nicht übertrieben, Mikrointeraktionen als wichtigste Elemente im Design von Produkten zu bezeichnen.

Dabei liegen die wesentlichen Vorteile gelungener Mikrointeraktionen geradezu auf der Hand. Denn Mikrointeraktionen, speziell wenn sie mit kleinen Animationen kombiniert werden, können dem Benutzer den Eindruck vermitteln, dass sich sein digitales ganz ähnlich wie ein analoges Produkt verhält. Das erzielst du durch unmittelbares Feedback, wie etwa den Eindruck eines gedrückten Buttons, eines gezogenen Sliders oder indem du unmittelbares Feedback gibst, wie etwa einen sich drehenden Spinner bei einem Download oder einen sich beim Klick auf Kaufen füllenden Einkaufswagen in einem Online-Shop.

Durch den gezielten Einsatz unmittelbaren Feedbacks kannst du Benutzerfehler vermeiden, weil du eine deutlich bessere Steuerung der Klickpfade durch visuelle Unterstützung ermöglichst. Psychologisch wirkt sich positiv aus, dass das Produkt auf den Nutzer gleichsam reagiert. Wer möchte nicht gern Beachtung finden, bei dem was er/sie tut?

Mikrointeraktionen 1.0: Skeuomorphismus als Designprinzip

In der Vergangenheit verließen sich Designer gerne auf Skeuomorphismen, also möglichst detailgetreue Nachbildungen aus dem realen Leben, wenn sie Interaktionen gestalteten. Mancher Designer ging so weit, das gesamte Produkt einem realen Beispiel nachzuempfinden, um sicherzustellen, dass der Nutzer in der Bedienung desselben keine Schwierigkeiten haben würde.

Das Problem mit den Skeuomorphismen ist ihre hohe Geschmacks-, aber auch Kulturabhängigkeit. Zudem werden zu detailgetreue Darstellungen schnell langweilig.

Switch Animation | Eugene Cheporov

Seit einigen Jahren setzen sich daher Oberflächenelemente durch, die durch minimalistische Gestaltung und integrierte Interaktion überzeugen. Logischerweise sind Skeuomorphismen durch die Limitierungen ihrer realen Vorbilder beschränkt, wenn man nicht aus dem Bild fallen will.

Modernere Ansätze unterliegen nicht solchen Konventionen. Besonders Googles Material Design weist hier den Weg. Gern wird dann auch von Microexperiences, also Mikroerfahrungen, als Synonym für Mikrointeraktionen gesprochen.

Mikrointeraktionen 2.0: Nutze die modernen Möglichkeiten

Heutzutage, nach zehn+ Smartphone-Jahren, ist es weniger wichtig, Elemente so zu gestalten, dass der Nutzer einen Bezug zur analogen Welt herstellen kann. Das Digitale an sich hat sich im Alltag weitgehend durchgesetzt und benötigt keine Erklärung per Holzhammer-Methode mehr. Dennoch steigt die Bedeutung von Mikrointeraktionen stetig. Die Begründung ist einfach.

Durch eine einheitliche Designsprache werden sich digitale Produkte immer ähnlicher. Manches Produkt lässt sich vom anderen nur noch dadurch unterscheiden, dass man gezielt nach dem Namen schaut. Hier siehst du einen Auszug aus dem Suchergebnis, wenn du im Google-Play-Store nach Apps der Kategorie “Todo” suchst:

Ich sags ja. Du musst schon gezielt nach dem Namen schauen, um die Produkte voneinander zu unterscheiden. (Screenshot: Dr. Web)

Innovation geht sicherlich anders. Oberflächlich betrachtet wirst du natürlich jetzt versucht sein, zu fragen, wie denn die diversen Anbieter ihre Todo-App sonst als solche hätten kenntlich machen sollen. Klar, die Antwort ist nicht einfach. Aber, das ist keine Begründung, sie sich einfach zu machen.

Differenzierung kann offenbar nicht mehr auf der Ebene des grundlegenden Designs erfolgen. Es sind die Mikrointeraktionen, mit denen du als Designer dein Produkt von anderen absetzen musst. Denn im Grunde interagiert der Nutzer mit deinem Produkt immer nur über Mikrointeraktionen.

Je überzeugender du diese also gestaltest, desto flüssiger fühlt sich die Nutzung an und desto lieber wird der Nutzer dein Produkt verwenden. Eine einzige gut gemachte Interaktion kann schon den Kampf um die Nutzer zwischen Produkt A und Produkt B entscheiden, was bei Millionen konkurrierender Apps und viel mehr Millionen konkurrierender Websites überlebenswichtig ist.

Download Button | Alex Pronsky

Die Aufgabe alter Designmuster befreit dich und lässt dich die Möglichkeiten moderner Technologien nutzen. Bei Mikrointeraktionen kommt es stets darauf an, dem Nutzer nicht nur einen klaren Trigger, also einen etwa als solchen erkennbaren Button, Schieberegler oder ähnliches, zu bieten.

Vielmehr musst du sicherstellen, dass der Nutzer ein klares Feedback erhält. Dieses muss zuverlässig über Erfolg, Misserfolg oder die Dauer der Aktion informieren.

Progress Circle | Leo Zakour

Bewährt hat sich hier die Verwendung von Bewegung im Element, also der Einbau kleiner Animationen. In den Richtlinien zu Material Design findest du detaillierte Tipps zum Thema. Aber gerade beim Einsatz von Animation ist Vorsicht geboten. Denn was bei der ersten Benutzung noch wie eine gern genommene Überraschung wirken kann, wird spätestens bei der zehnten Verwendung langweilig oder gar störend.

Fluid Switch | Leo Zakour

Bei der Verwendung von Animationen kommt es darauf an, dass diese so kurz wie möglich sind. Google empfiehlt nichts länger als 400 Millisekunden. Die Animation darf nicht zu einer Verzögerung in der Verwendung deiner Oberfläche führen. Verzögerungen im Sekundenbereich wären schon zu lang und würden das Produkt behäbig wirken lassen.

Form Flow | Leo Zakour

Hast du sichergestellt, dass der Nutzer nach der Verwendung deiner Mikrointeraktion ein klares Feedback bekommen hat, dann ist es Zeit für den nächsten Schritt. Du musst dir darüber klar werden, ob es sich bei der Mikrointeraktion um eine handelt, die der Nutzer wiederholt verwenden wird.

Wenn ja, gilt es darüber nachzudenken, inwieweit die erstmalige Benutzung Veränderungen für die wiederholte Nutzung erforderlich machen. So könntest du etwa aus dem Button mit der Aufschrift “Kaufen” bei dem eben gekauften Produkt nach dem Kauf den Button mit der Aufschrift “Nochmal kaufen” machen und hättest deinem Nutzer damit eine wichtige Information quasi im Vorbeigehen gegeben.

Bei der Entwicklung der Mikrointeraktion kommt es zudem darauf an, ausschließlich das abzubilden, was unbedingt erforderlich ist, um die bevorstehende Aufgabe erfolgreich bearbeiten zu können. Sicherlich kannst du Animationen mit einer Prise Humor würzen, wenn du sie ganz dosiert einsetzt. Das rate ich dir aber nur für diejenigen Animationen, die der Nutzer nicht ständig zu sehen bekommt. Also bau keinen lustigen Play-Button in deine Musik-App.

Denn jeder Witz ist, selbst wenn er gut ist, nur einmal lustig. Bei Mikrointeraktionen setzt du deine Nutzer jedoch hundert- oder gar tausendfach demselben Element aus. Es ist besser, die Nutzer nicht zu nerven. Die beste Mikorinteraktion ist sogar jene, die so subtil ist, dass sie gar nicht als solche auffällt, sondern einfach wie selbstverständlich da ist.

Natürlich darfst du auch bei der Gestaltung von Mikrointeraktionen allgemeingültige Prinzipien nicht vergessen. Welcher Designer hätte noch nie von Don’t Make Me Think gehört? Alle UI-Elemente müssen natürlich im Kontext zueinander existieren und zumindest in diesem Kontext selbsterklärend sein.

Die Farbsprache muss homogen sein, ebenso die Typografie. Texte müssen in verständlicher, einfacher Sprache formuliert sein. Aber das weißt du ja alles. Wenn du dich nochmal kompakt über essenzielle Typografie informieren möchtest, dann lies diesen Beitrag, den wir erst kürzlich an dieser Stelle veröffentlichten.

Wenn du mehr über Mikrointeraktionen lernen willst und der englischen Sprache mächtig bist, solltest du Dan Saffers Website Microinteractions – Designing with Details besuchen.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.