Das Prinzip Achtsamkeit im UX-Design

Um User Experience und User Interface eines Produktes sachlich bewerten zu können, können die zehn Heuristiken (auch die Heuristische Evaluationsmethode genannt) nach Nielsen helfen, objektive Aussagen über die Benutzerfreundlichkeit treffen zu können.

.... schon seit den 80er Jahren zu einem benutzerfreundlichen UI und sind ein fester Bestandteil für eine reibungslose Kommunikation zwischen Benutzer und System. Das menschliche Gehirn verarbeitet simple Grafiken einfach schneller als Text. Diese leicht verständliche und selbsterklärende Darstellung kommt aber in der Kreation nicht immer so unkompliziert daher - oftmals sind genau diese Kriterien eine echte Herausforderung für den Designer. Die große Aufgabe, keiner weiteren Erklärung zu bedürfen und außerdem klar und unmittelbar Ideen zu kommunizieren, lösen Icons mit Ihrer visuellen Nähe zu Objekten, die Menschen bereits aus dem echten Leben kennen. So wird das Icon zu einer visuellen Metapher. Manchmal überdauert es sogar den sich wandelnden Zeitgeist und etabliert sich trotz schnell voranschreitender technischer Entwicklung. Schaut man beispielsweise das verbreitete und universell gebräuchliche Icon für "save/speichern" an, findet man immer noch die Floppy Disk, die im echten Leben bereits längst ersetzt wurde und heute eher einen Platz in der Computerhistorie einnimmt. 

Viele hitzige Diskussionen wurden bereits über den Sinn und Unsinn von In-App Animationen geführt. Befolgt man allerdings einige Grundregeln, können sie, gut gemacht und smart platziert, ein echter Mehrwert für ein mobiles Produkt sein. Möchte man also die allgemeine Usability verbessern und gleichzeitig auch den logischen Aufbau intuitiver vermitteln, können Animationen helfen und ein Produkt abrunden. Eine Animation schafft direkte Aufmerksamkeit. Das sollte man sich immer bewusst machen, wenn man mit diesem Element arbeiten möchte, damit ein UI nicht überfrachtet und im schlimmsten Fall anstrengend und irritierend für den User wird. Nutzt man das Potential aber bedacht, kann aus einem flachen Bildschirm eine lebendige und greifbare Welt werden. Außerdem kann eine Animation auf direkt erfassbare Art und Weise Zusammmenhänge aufzeigen und eine Verbindung zwischen Benutzer und System herstellen. Wichtig ist vor allem, den Fokus auf selbsterklärende Kraft zu legen und damit zu arbeiten. Eine gute Animation unterstützt die Funktion und sollte kein Dekor-Element sein. Folgende Produkte zeigen, wie eine gut platzierte (und manchmal auch subtile) Animation einer App zu einer insgesamt herausragenden Usability verhelfen kann:

Man kann sie leicht übersehen und unterschätzen, aber Microinteractions sind essentielle Bausteine des UI Design. Beinahe jeder nutzt sie regelmäßig, aber eben oftmals unbewusst. In digitalen Anwendungen und Systemen inzwischen überall zu finden und unverzichtbar, funktionieren sie gerade dann am besten, wenn sie sich nahtlos einfügen und unangestrengt genau das tun, was sie sollen: sie geben dem Benutzer Feedback und machen die Kommunikation zwischen ihm und der Anwendung so natürlich und angenehm wie möglich. Wenn das Benutzen einer App also intuitiv ist und sich gut anfühlt, bewirken nicht zuletzt auch die Microinteractions genau das. Gut gemacht sorgen sie auf subtile Art und Weise für eine angenehme und reibungslose Usability, indem sie es schaffen, eine einzelne Interaktion mit einer App zu visualisieren und ein kleines Belohnungserlebnis zu generieren. Nicht zuletzt beeinflussen sie damit stark, wie ein Produkt insgesamt wahrgenommen wird; Microinteractions können genau den feinen Unterschied machen - ist eine App gut, oder ist sie großartig? Was genau versteht man also unter Microinteractions? „Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible.“ In diesem Zitat fasst Dan Saffer, Designer und Autor („Microinteractions“, 2013) die Anforderung an Microinteractions perfekt zusammen. Wenn man das Ganze noch näher betrachtet, sollten sie die folgenden drei Funktionen beinhalten - User Interaction fördern - direktes Feedback geben - die UX zu einem angenehmen und gelungenen Erlebnis zu machen, ohne von der eigentlichen Aufgabe abzulenken Ein Beispiel hierfür ist der Facebook-Daumen, der all das vereint: er gibt direktes Feedback, schafft es, dem Nutzer das Gefühl zu geben, die Kontrolle zu haben, und sorgt gleichzeitig für eine gute und angenehme Experience. Gute Microinteractions sorgen außerdem dafür, dass sich die Kommunikation zwischen Mensch und App natürlicher und menschlicher anfühlt. So weit, so gut, aber sind Microinteractions wirklich so wichtig? Ja! - Wirklich durchdachte Microinteractions sind die Grundlage dafür, dass ein Benutzer eine App gern verwendet, denn sie schaffen es, ein Gefühl zu vermitteln und eine Connection zwischen Mensch und System herzustellen. Sie schaffen die unaufgeregte, essentielle Basis für eine herausragende User Experience. Hinzu kommt, dass intelligente Microinteractions es schaffen, den User zum Mitmachen zu animieren, ihn sozusagen “bei der Stange” zu halten, während sie ihn gleichzeitig durch das Produkt leiten und für Belohnungsmomente sorgen. Im besten Fall begeistert das den User so sehr, dass er das Produkt immer wieder gern und oft nutzt und sich im besten Fall fragt, warum er vorher so lange ohne es auskam. Unterteilt man eine Microinteraction nun in Action, Reaction und Feedback, kann man schnell feststellen, wie gut diese Schritte es schaffen, einen Nutzer in eine App einzubinden - so schafft man auch eine gute Grundlage, um zu untersuchen, wie sich ein Produkt optimieren ließe. Am besten gleicht man in diesem Zusammenhang ab, ob die verwendeten oder angedachten Microinteractions auch zur Zielgruppe passen, ob sie themen- und inhaltsrelevant sind und zusätzlich selbsterklärend, intuitiv und subtil einen Mehrwert schaffen, damit sie begeistern und das Potential haben, loyale Nutzer oder sogar Fans zu gewinnen. Bestandteile der Microinteractions Eine App, die begeistert, sollte selbstverständlich zielgruppenrelevante Designtrends aufgreifen, damit sie den Nerv der Nutzer trifft; gerade aber für die Gestaltung der Microinteractions bedeutet das, dass man sich wirklich ausreichend mit der Welt der User beschäftigt hat, um diese auf den Punkt zu bringen. Um Microinteractions noch besser zu verstehen, lassen sie sich nach Dan Saffer in vier Komponenten unterteilen: 1. Trigger Trigger sind meist der Startpunkt der Microinteraction. Sie zeigen an, wenn eine App startet oder ein Gerät eingeschaltet wird. Beispiele sind der Refresh Button, der An/Aus Button und andere GUI Elemente (Tap, Click, etc.). Triggers können sowohl benutzerinitiiert oder systeminitiiert sein. 2. Rules Rules bestimmen, was nach der Ausführung eines Trigger geschehen soll. 3. Feedback Der Nutzer bekommt hier eine direkte Rückmeldung und bezieht ihn so weiter mit ein und zeigt ihm, das etwas geschehen ist, geschieht und in manchen Fällen auch, was gerade passiert. Beispiele sind Ladebalken, Pop-Ups, farbliche Veränderungen und andere animierte Elemente. 4. Loops and Modes Loops bestimmen die Länge der Microinteraction und ob diese wiederholt werden oder sich ändern (Beispiel: der aktivierte Wecker). Modes erfordern keine Wiederholung und können daher leicht zum Ende einer Interaktion führen. Dan Saffer empfiehlt daher, Modes lieber nur spärlich einzusetzen. Beispiele für Microinteractions im App Design Wir wissen, das die Hauptaufgabe einer Microinteraction darin besteht, den Nutzer subtil in den Prozess einzubinden, ihn mit Feedback zu versorgen und das so angenehm wie möglich zu gestalten, während er im besten Fall intuitiv interagiert, ohne jemals über eine Microinteraction “stolpern” zu müssen. Ein Trigger initiiert eine Aktion, darauf gibt es eine Antwort, die darin mündet, den User zu belohnen. Einige Beispiele für gelungene Microinteractions: 1. Swipe Elegante Alternative zu Tap. Stark verbreitet, akzeptiert und beliebt, macht es eine Spaß und sorgt gleichzeitig für ein abhängig-machendes Erlebnis. 2. Data Input Wichtiger Bereich, um mit durchdachten Microinteractions dafür zu sorgen, den User bei Laune zu halten. Kaum jemand füllt gern Formulare aus, um beispielsweise einen Account zu kreieren oder ein Passwort zu erstellen. Um zu verhindern, das der Nutzer den Prozess abbricht, braucht man gelungene, interaktive Microinteractions. 3. Call to Action Um den Benutzer dazu zu bringen, mit der App zu interagieren, sind Call to action Microinteractions geeignet. Sie sorgen für ein gutes, befriedigendes Gefühl beim Nutzer und helfen so, ein Belohnungsmoment zu kreieren und den User zusätzlich zu binden. 4. Animations Animationen sind ein Microinteraction Key Element, um ein Produkt spannend, bereichernd und fesselnd zu gestalten und den Nutzer an das Produkt zu binden und für das Produkt zu begeistern. (Warte-)zeit wird hier im besten Fall visualisiert und verkürzt. 5. Current System Status Um zu verhindern, dass ein User sich von einer App abwendet, weil er nicht versteht, was genau vor sich geht und er den Eindruck hat, keine Kontrolle über bestimmte Aktionen und Funktionen zu haben, sollte man passende Microinteractions integrieren. So hat der Nutzer im besten Fall niemals das Gefühl, den Überblick über den Systemstatus oder vor sich gehende Aktivitäten zu verlieren. 6. Tutorials Das Beispiel der In-App Tutorials zeigt, wie stark Microinteractions die gesamte Wahrnehmung und UI einer App beeinflussen können. Wenn nicht wirklich klar wird, wie ein Produkt funktioniert, wendet sich ein Nutzer schnell ab. Microinteractions tragen also einen großen Teil dazu bei, ob eine Produkt ein Erfolg wird oder nicht. Links dazu: http://microinteractions.com/ (+ Buch von Dan Saffer https://microinteractions.com/about-the-book/ https://www.nngroup.com/articles/microinteractions/

Designer in Action! Immer wieder gut mal hier rein zu schauen! Vor allem, wer noch Podcasts hört (viel unterwegs ist) kann hier immer mal wieder eine kleine Runde "Sich schlau hören" unterschieben! Die Augen offen halten - links und rechts schauen! ;)

Nach einiger Zeit in Großraumbüros habe ich folgenden Artikel dazu entdeckt. Für mich wie auch für andere haben diese Großraumbüros nicht funktioniert. Wie in einem Bienenstock schwirren dauernd Menschen um einen herum. Laut am diskutieren, über (ohne Zweifel) sehr wichtige Dinge. Manchmal begleitet von einer Heerschar von Mitarbeitern, die auch noch etwas dazu zu sagen haben. Es ist also sehr unruhig. Man wird permanent abgelenkt. habe ich auch noch folgendes entdeckt...

Es kann natürlich immer sein Systeme im Hintergrund nicht korrekt arbeiten. Bei einem solch großen Konzern wie Adobe, sollte das aber nicht passieren. Wenn man böse sein wollte, könnte man hier ein perfektes Beispiel für ein DarkPattern draus machen. Spitze! Immer Interessant was Wikipedia dazu sagt!

Hier etwas zum Thema UX Design ;) Kurz und knackig...

Das Update des neuen AppStores sieht auf den ersten Blick ganz gut aus. Sehr gut strukturiert, einfach zu verstehen. Typographie deutlich. Der neue Font in der Seitenleiste ist fetter geworden Leider verspringt die Zeilenhöhe der linken Leiste im Gegensatz zum weiß hinterlegten Inhaltes. Es würde das Bild beruhigen, wenn Zeilenhöhen identisch wären. Aber das ist in Krümeln picken... ;) Und ungeschickter weise wird die E-Mail-Adresse am Fuß der Seitenleiste (fast immer) mit Punkten gekürzt. Auch eine kurze Adresse hilft da nicht viel. Das ist nicht optimal. Evtl. hätte man das Icon nach oben ,über die Adresse nehmen können, um somit Platz für mehr Zeichen in der Zeile drunter zu haben. Die Texthöhe könnte man ebenso variieren, sodass (bis zu einem gewissen Grad) mehr Zeichen in die Zeile passen könnten. Nur Kleinigkeiten! Soweit von mir zum #UX-Check-Rant!