Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 28. Februar 2018

Design: Mikrointeraktionen machen den Unterschied

Du glaubst, es kommt auf das gro­ße Ganze an? Ja, aber nur solan­ge es sich ins­ge­samt aus­rei­chend dif­fe­ren­ziert. Heutzutage sind die klei­nen UI-Elemente und Features weit­aus wich­ti­ger. Deshalb soll­test du beim Design dei­ner Projekte beson­ders auf die Mikrointeraktionen ach­ten.

Was sind Mikrointeraktionen?

Mikrointeraktionen defi­nie­ren die eigent­li­che Mensch-Maschine-Schnittstelle. Wenn du dei­nen Wecker aus­schal­test oder dein Auto per Funkfernbedienung auf- oder abschließt, die Klospülung drückst oder das Licht ein- oder aus­schal­test – all das sind Mikrointeraktionen.

Anhand der Beispiele kannst du schon erken­nen, dass es sich um zwar nur kur­ze Aktionen, die schnell erle­digt sind, han­delt, die­se aber ganz wesent­lich für die jewei­li­ge Nutzererfahrung sind (in einem Falle sogar für die Nutzererfahrung nach­kom­men­der Nutzer). Es ist also nicht über­trie­ben, Mikrointeraktionen als wich­tigs­te Elemente im Design von Produkten zu bezeich­nen.

Dabei lie­gen die wesent­li­chen Vorteile gelun­ge­ner Mikrointeraktionen gera­de­zu auf der Hand. Denn Mikrointeraktionen, spe­zi­ell wenn sie mit klei­nen Animationen kom­bi­niert wer­den, kön­nen dem Benutzer den Eindruck ver­mit­teln, dass sich sein digi­ta­les ganz ähn­lich wie ein ana­lo­ges Produkt ver­hält. Das erzielst du durch unmit­tel­ba­res Feedback, wie etwa den Eindruck eines gedrück­ten Buttons, eines gezo­ge­nen Sliders oder indem du unmit­tel­ba­res Feedback gibst, wie etwa einen sich dre­hen­den Spinner bei einem Download oder einen sich beim Klick auf Kaufen fül­len­den Einkaufswagen in einem Online-Shop.

Durch den geziel­ten Einsatz unmit­tel­ba­ren Feedbacks kannst du Benutzerfehler ver­mei­den, weil du eine deut­lich bes­se­re Steuerung der Klickpfade durch visu­el­le Unterstützung ermög­lichst. Psychologisch wirkt sich posi­tiv aus, dass das Produkt auf den Nutzer gleich­sam reagiert. Wer möch­te nicht gern Beachtung fin­den, bei dem was er/sie tut?

Mikrointeraktionen 1.0: Skeuomorphismus als Designprinzip

In der Vergangenheit ver­lie­ßen sich Designer ger­ne auf Skeuomorphismen, also mög­lichst detail­ge­treue Nachbildungen aus dem rea­len Leben, wenn sie Interaktionen gestal­te­ten. Mancher Designer ging so weit, das gesam­te Produkt einem rea­len Beispiel nach­zu­emp­fin­den, um sicher­zu­stel­len, dass der Nutzer in der Bedienung des­sel­ben kei­ne Schwierigkeiten haben wür­de.

Das Problem mit den Skeuomorphismen ist ihre hohe Geschmacks-, aber auch Kulturabhängigkeit. Zudem wer­den zu detail­ge­treue Darstellungen schnell lang­wei­lig.

Switch Animation | Eugene Cheporov

Seit eini­gen Jahren set­zen sich daher Oberflächenelemente durch, die durch mini­ma­lis­ti­sche Gestaltung und inte­grier­te Interaktion über­zeu­gen. Logischerweise sind Skeuomorphismen durch die Limitierungen ihrer rea­len Vorbilder beschränkt, wenn man nicht aus dem Bild fal­len will.

Modernere Ansätze unter­lie­gen nicht sol­chen Konventionen. Besonders Googles Material Design weist hier den Weg. Gern wird dann auch von Microexperiences, also Mikroerfahrungen, als Synonym für Mikrointeraktionen gespro­chen.

Mikrointeraktionen 2.0: Nutze die modernen Möglichkeiten

Heutzutage, nach zehn+ Smartphone-Jahren, ist es weni­ger wich­tig, Elemente so zu gestal­ten, dass der Nutzer einen Bezug zur ana­lo­gen Welt her­stel­len kann. Das Digitale an sich hat sich im Alltag weit­ge­hend durch­ge­setzt und benö­tigt kei­ne Erklärung per Holzhammer-Methode mehr. Dennoch steigt die Bedeutung von Mikrointeraktionen ste­tig. Die Begründung ist ein­fach.

Durch eine ein­heit­li­che Designsprache wer­den sich digi­ta­le Produkte immer ähn­li­cher. Manches Produkt lässt sich vom ande­ren nur noch dadurch unter­schei­den, 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 schau­en, um die Produkte von­ein­an­der zu unter­schei­den. (Screenshot: Dr. Web)

Innovation geht sicher­lich anders. Oberflächlich betrach­tet wirst du natür­lich jetzt ver­sucht sein, zu fra­gen, wie denn die diver­sen Anbieter ihre Todo-App sonst als sol­che hät­ten kennt­lich machen sol­len. Klar, die Antwort ist nicht ein­fach. Aber, das ist kei­ne Begründung, sie sich ein­fach zu machen.

Differenzierung kann offen­bar nicht mehr auf der Ebene des grund­le­gen­den Designs erfol­gen. Es sind die Mikrointeraktionen, mit denen du als Designer dein Produkt von ande­ren abset­zen musst. Denn im Grunde inter­agiert der Nutzer mit dei­nem Produkt immer nur über Mikrointeraktionen.

Je über­zeu­gen­der du die­se also gestal­test, des­to flüs­si­ger fühlt sich die Nutzung an und des­to lie­ber wird der Nutzer dein Produkt ver­wen­den. Eine ein­zi­ge gut gemach­te Interaktion kann schon den Kampf um die Nutzer zwi­schen Produkt A und Produkt B ent­schei­den, was bei Millionen kon­kur­rie­ren­der Apps und viel mehr Millionen kon­kur­rie­ren­der Websites über­le­bens­wich­tig ist.

Download Button | Alex Pronsky

Die Aufgabe alter Designmuster befreit dich und lässt dich die Möglichkeiten moder­ner Technologien nut­zen. Bei Mikrointeraktionen kommt es stets dar­auf an, dem Nutzer nicht nur einen kla­ren Trigger, also einen etwa als sol­chen erkenn­ba­ren Button, Schieberegler oder ähn­li­ches, zu bie­ten.

Vielmehr musst du sicher­stel­len, dass der Nutzer ein kla­res Feedback erhält. Dieses muss zuver­läs­sig über Erfolg, Misserfolg oder die Dauer der Aktion infor­mie­ren.

Progress Circle | Leo Zakour

Bewährt hat sich hier die Verwendung von Bewegung im Element, also der Einbau klei­ner Animationen. In den Richtlinien zu Material Design fin­dest du detail­lier­te Tipps zum Thema. Aber gera­de beim Einsatz von Animation ist Vorsicht gebo­ten. Denn was bei der ers­ten Benutzung noch wie eine gern genom­me­ne Überraschung wir­ken kann, wird spä­tes­tens bei der zehn­ten Verwendung lang­wei­lig oder gar stö­rend.

Fluid Switch | Leo Zakour

Bei der Verwendung von Animationen kommt es dar­auf an, dass die­se so kurz wie mög­lich sind. Google emp­fiehlt nichts län­ger als 400 Millisekunden. Die Animation darf nicht zu einer Verzögerung in der Verwendung dei­ner Oberfläche füh­ren. Verzögerungen im Sekundenbereich wären schon zu lang und wür­den das Produkt behä­big wir­ken las­sen.

Form Flow | Leo Zakour

Hast du sicher­ge­stellt, dass der Nutzer nach der Verwendung dei­ner Mikrointeraktion ein kla­res Feedback bekom­men hat, dann ist es Zeit für den nächs­ten Schritt. Du musst dir dar­über klar wer­den, ob es sich bei der Mikrointeraktion um eine han­delt, die der Nutzer wie­der­holt ver­wen­den wird.

Wenn ja, gilt es dar­über nach­zu­den­ken, inwie­weit die erst­ma­li­ge Benutzung Veränderungen für die wie­der­hol­te Nutzung erfor­der­lich machen. So könn­test du etwa aus dem Button mit der Aufschrift “Kaufen” bei dem eben gekauf­ten Produkt nach dem Kauf den Button mit der Aufschrift “Nochmal kau­fen” machen und hät­test dei­nem Nutzer damit eine wich­ti­ge Information qua­si im Vorbeigehen gege­ben.

Bei der Entwicklung der Mikrointeraktion kommt es zudem dar­auf an, aus­schließ­lich das abzu­bil­den, was unbe­dingt erfor­der­lich ist, um die bevor­ste­hen­de Aufgabe erfolg­reich bear­bei­ten zu kön­nen. Sicherlich kannst du Animationen mit einer Prise Humor wür­zen, wenn du sie ganz dosiert ein­setzt. Das rate ich dir aber nur für die­je­ni­gen Animationen, die der Nutzer nicht stän­dig zu sehen bekommt. Also bau kei­nen lus­ti­gen Play-Button in dei­ne Musik-App.

Denn jeder Witz ist, selbst wenn er gut ist, nur ein­mal lus­tig. Bei Mikrointeraktionen setzt du dei­ne Nutzer jedoch hun­dert- oder gar tau­send­fach dem­sel­ben Element aus. Es ist bes­ser, die Nutzer nicht zu ner­ven. Die bes­te Mikorinteraktion ist sogar jene, die so sub­til ist, dass sie gar nicht als sol­che auf­fällt, son­dern ein­fach wie selbst­ver­ständ­lich da ist.

Natürlich darfst du auch bei der Gestaltung von Mikrointeraktionen all­ge­mein­gül­ti­ge Prinzipien nicht ver­ges­sen. Welcher Designer hät­te noch nie von Don’t Make Me Think gehört? Alle UI-Elemente müs­sen natür­lich im Kontext zuein­an­der exis­tie­ren und zumin­dest in die­sem Kontext selbst­er­klä­rend sein.

Die Farbsprache muss homo­gen sein, eben­so die Typografie. Texte müs­sen in ver­ständ­li­cher, ein­fa­cher Sprache for­mu­liert sein. Aber das weißt du ja alles. Wenn du dich noch­mal kom­pakt über essen­zi­el­le Typografie infor­mie­ren möch­test, dann lies die­sen Beitrag, den wir erst kürz­lich an die­ser Stelle ver­öf­fent­lich­ten.

Wenn du mehr über Mikrointeraktionen ler­nen willst und der eng­li­schen Sprache mäch­tig bist, soll­test du Dan Saffers Website Microinteractions – Designing with Details besu­chen.

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.

Schreibe einen Kommentar

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