Intuitive Mikrointeraktionen entwickeln

"Warte! Was hast du da gerade gemacht?"

So wird ein STD weitergegeben. In diesem Fall hatte ich nur mein iPhone entsperrt, indem ich das Icon einer Benachrichtigung nach rechts geschoben habe.

In iOS6 lässt sich das iPhone durch das Schieben eines Benachrichtigungssymbols entsperren.

Man berührt die Benachrichtigung und schiebt das Icon nach rechts. Das iPhone springt direkt in die entsprechende App.

Die Person neben mir hatte noch nie gesehen, wie jemand sein iPhone auf diese Art entsperrt. Sie war iPhone-Nutzerin der ersten Stunde und hatte keine Ahnung, dass man das so machen kann.

Natürlich, woher auch? Es gibt keine visuellen Hinweise, die einem sagen, dass das Benachrichtigungssymbol geschoben werden kann. Und wenn es einem gesagt wurde, als man das iPhone bekommen hat, erinnert man sich wahrscheinlich nicht mehr daran, außer man nutzt diese Operation ständig.

STD: Socially-Transmitted Detail

Ich habe herausgefunden, dass ich das Telefon auch auf diese Weise entsperren kann, weil ich es bei jemand anderem gesehen habe. Neben mir stand jemand, schob das Icon nach rechts und entlockte mir den Ausruf: "Warte! Was hast du da gerade gemacht?"

Wir haben dem einen Namen gegeben: Socially-Transmitted Detail. (Tatsächlich hatten wir es erst Socially-Transmitted Functionality genannt, aber STD ist lustiger als STF.)

STDs sind Design-Interaktionen, die Nutzer von anderen Nutzern lernen. Es gibt keine Instruktionen oder Hinweise auf der Oberfläche, die uns etwas über diese Interaktion sagen.

Das klassische sozial vermittelte Detail ist etwas, das man per Drag & Drop tut. Das Bewegen einer Datei in eine Anwendung beispielsweise. Das Wissen, dass man ein Bild auf das Icon eines Fotoeditors ziehen kann, um es in diesem zu öffnen, gehört zu den Dingen, die man wahrscheinlich nicht von allein entdecken würde. Man muss es erzählt bekommen.

Auf der Magischen Rolltreppe des gewonnenen Wissens

Per Definition sind Features, die hinter STDs versteckt sind, nicht intuitiv. Solange die User nichts von ihnen wissen, können sie sie nicht nutzen.

Die meisten dieser Funktionen sind in Mikrointeraktionen begraben, wie das Entsperren durch das Ziehen des Benachrichtigungssymbols. Dan Saffer, der ein ganzes Buch über Mikrointeraktionen geschrieben hat, sagt, es handele sich dabei um die separaten Produktmomente um einen bestimmten Anwendungsfall herum – sie dienen einer Hauptaufgabe. Die Hauptaufgabe des Ziehens um zu entsperren ist die, das Telefon eben zu entsperren und den User zu dieser Nachricht in der App zu bringen.

Damit Mikrointeraktionen Vorteile bringen, müssen sie für den User intuitiv sein. Woher wissen wir, ob wir etwas Intuitives entwickeln? Hier kommen die Faktoren der Magischen Rolltreppe des gewonnenen Wissens ins Spiel.

Vor einer Weile haben wir diese Rolltreppe eingeführt, um zu erläutern, wie intuitives Design funktioniert. Wenn wir Mikrointeraktionen entwickeln, sind die Punkte auf der Rolltreppe, die uns am meisten interessieren, der des gegenwärtigen Wissens des Users und der des erforderlichen Zielwissens.

Gegenwärtiges Wissen haben unsere Nutzer, wenn sie mit der Anwendung anfangen. Es könnte frühere Erfahrungen mit ähnlichen Oberflächen beinhalten oder auch Wissen, das wir in der echten Welt aufgelesen haben (etwa wie ein Buch funktioniert oder das Armaturenbrett eines Autos).

Zielwissen müssen unsere Nutzer haben, um zu wissen, wie sie ihre Ziele erreichen. Was auch immer unsere Anwendung vom User verlangt, das er nicht bereits weiß – es bildet den Unterschied zwischen beiden Punkten.

Die Magische Rolltreppe des gewonnenen Wissens hilft zu erklären, wie man Mikrointeraktionen intuitiv machen kann.

Damit unsere Mikrointeraktionen für die Nutzer intuitiv sind, müssen wir Vorteile aus ihrem gegenwärtigen Wissen ziehen. Eine Oberfläche ist intuitiv, wenn gegenwärtiges und Zielwissen nahe beieinander sind. Also müssen wir für das entwickeln, was unsere User wissen. Leider bewegen wir uns von intuitivem Design weg, wenn wie ein STD entwickeln.

Intuitiv denken

Wenn Sie Luke Wroblewskis Polar-App nutzen, wollen sie vielleicht nachschauen, ob Ihre Freunde irgendwelche neuen Polls hinzugefügt haben. Wie bei vielen anderen Apps gibt es für die Aktualisierung die Ziehen-Interaktion.

Polar versucht, das gegenwärtige Wissen des Users zu stärken, indem es einen kleinen Tipp gibt: "Zum Aktualisieren herunterziehen". Tut man das weit genug, wird man mit einer süßen Grafik belohnt (die sich ständig ändert) und erhält neue Anweisungen: "Zum Aktualisieren freigeben". Diese Interaktion, die nur eine Sekunde oder so dauert, macht klar, was zu tun ist; sie fühlt sich intuitiv an.

In der Polar-App startet das Herunterziehen der Seite die Aktualisierung.

Hat der User weit genug gezogen, dass er die Grafik sehen kann, startet das Freigeben das Update.

Polar hat immer noch das Problem, dass die Nutzer erstmal wissen müssen, dass sie ziehen müssen. Wenn sie schon viele andere Apps genutzt haben, gehört dies zu ihrem gegenwärtigen Wissen. Zahlreiche User tun es vielleicht fast unbewusst. Wir nennen das Fingergedächtnis, denn unsere Finger scheinen es von allein zu tun.

Allerdings wissen vielleicht Leute, für die Apps etwas Neues sind, nichts davon und niemand hat es ihnen gesagt. Sie kommen nicht in den Genuss der Aktualisieren-Mikrointeraktion.

Ein längerer Normalweg für jede Abkürzung (meistens)

Es ist sinnvoll, sich ein STD als Abkürzung zu der Funktionalität zu denken. Das heißt, dass es auch einen komplementären (längeren) Normalweg zur selben Funktion geben muss. Wir können eine Datei auf das App-Icon ziehen, um sie zu öffnen, aber wir können auch die App aufrufen und die Befehle Datei > Öffnen nutzen, um dieses Ziel zu erreichen. Das Schieben des Benachrichtigungssymbols, um das iPhone zu entsperren, ist die Abkürzung, während der Standard-Schieber zum Entsperren und das Öffnen der App den Normalweg bilden.

Ein anderer Ansatz besteht darin, die Abkürzung ganz zu umgehen. Die iPhone-App von United Airlines nutzte eine Ziehen-um-zu-aktualisieren-Mikrointeraktion für Updates zum Flugstatus und zu Reservierungsinfos. In einer kürzlich vorgenommenen Überarbeitung haben sie stattdessen ein Aktualisieren-Icon integriert, das oben auf dem Bildschirm stets sichtbar ist.

Die App von United Airlines hat die Ziehen-um-zu-aktualisieren-Mikrointeraktion durch einen Button ersetzt.

Sensibles Feedback

Was tut die Mikrointeraktion? Wenn wir Sie intuitiv machen wollen, muss sie tun, was die Nutzer erwarten. Diese Erwartungen basieren ebenfalls auf ihrem gegenwärtigen Wissen.

In vielen Apps prallt die Ziehen-um-zu-aktualisieren-Mikrointeraktion sofort wieder zurück an ihren Platz. Wenn die Daten schnurstracks aktualisiert werden, sind die User glücklich. Das ist es, was sie erwarten.

Aber was, wenn sich nichts ändert? Heißt das, dass der Befehl nicht funktioniert hat? (Vielleicht denkt der Nutzer, er hat nicht weit genug nach unten gezogen.) Oder antwortet der Server nur langsam?

Einige Apps nutzen animierte Aktivitätsindikatoren (wie dieses drehende Rädchen), um anzuzeigen, dass die Anwendung noch Daten bezieht. Andere schnappen nicht zurück, ehe der Server geantwortet hat, sondern bleiben geöffnet, um zu verdeutlichen, dass die Daten auf dem Weg sind. In einigen Fällen erscheint eine Textnachricht wie "Prüfe auf Aktualisierungen" oder so ähnlich.

Gut designte Mikrointeraktionen versorgen den User mit sensiblem Feedback. Sie fügen sich in die bestehenden Erwartungen ein, auch wenn sie sich auf eine dem Nutzer bisher unbekannte Art präsentieren. Das ist die Basis eines mentalen Modells: Ursache und Wirkung. Die Aktion des Users hat das erwartete Ergebnis produziert.

Klare Mikroskopie

In die meisten Mikrointeraktionen sind Wörter eingebettet. Nehmen wir zum Beispiel eine Online-Banking-App. In so einer App muss der Nutzer natürlich auch die Möglichkeit haben, einen Dauerauftrag abzubrechen. Weil das eine ernsthafte Angelegenheit ist, muss das System mit dem User verifizieren, dass dieser Dauerauftrag für immer verschwinden soll. Diese Verifizierung ist ein weiterer Mikrointeraktionstyp – einer, der intuitiv sein muss.

Eine schlecht designte Verifikations-Mikrointeraktion stellt die Frage mithilfe der Standard Okay- und Abbrechen-Buttons. Aber was bedeutet Abbrechen, wenn wir einen Abbruch verifizieren? Eliminiert Abbrechen den Dauerauftrag oder bricht es den Abbruch ab?

Was macht Cancel in diesem Fall?

Eine besser gestaltete Verifikations-Mikrointeraktion könnte eine klarere Sprache nutzen, die dem Nutzer hilft, seine Optionen zu verstehen. Buttons mit einer verfeinerten Mikroskopie würden komplette Sätze wie "Ja, fahren Sie fort und brechen Sie den Dauerauftrag ab" verwenden.

Eine verfeinerte Mikroskopie kann dem User helfen, die richtige Entscheidung zu treffen.