Microinteractions – UX bewegt sich?

am 24 Nov 2017 in WebDesign von
Bisher unkommentiert »

Leute, die sich mit User Experience beschäftigen, befassen sich im Allgemeinen mit der
Optimierung von technischen Interfaces für deren Nutzern. Initial befasste sich Usability
bislang mit Richtlinien wie Übersichtlichkeit oder Zugehörigkeit von Elementen.
Doch bestimmt ist auch einigen von euch schon aufgefallen, dass sich manche Interfaces
greifbarer und intuitiver anfühlen als andere. Auf den ersten Blick ist es schwer die
Ursache dafür herauszufinden – vor allem, wenn dir der Begriff „Microinteractions“ noch
nie über den Weg gelaufen ist.

Sicher hast du in deinem bisherigen Leben als Digital Native unzählige Geräte ein und
ausgeschalten, die Lautstärke deines Radios oder Walkmans angepasst oder hoffentlich
deinen Laptop ab und an eingeschalten. Als Studenten von Onlinemedien kennen wir
wohl allzu gut das Geräusch eines angehenden Macs oder Windows im Vorlesungsraum,
während der Dozent seinen bedeutungsschwangeren Satz beendet. Oft lacht der Kurs
nun, da es sich anhört, als ob das Geräusch den Worten des Dozenten eine höhere
Bedeutung gegeben hätte. Auch wenn wir es vielleicht, abgesehen von diesen
besonderen Momenten, noch nie bewusst wahrgenommen haben, genau das sind
Microinteractions.

Sie können quasi als ein Stilmittel der Usability verstanden werden, bei welcher ein
Nutzerszenario auf einen bestimmten Moment der Interaktion zwischen Nutzer und
Interface heruntergebrochen wird, damit genau dieser ausgearbeitet werden kann. Der
Fokus liegt dabei auf einer einzigen Interaktion, wie beispielsweise das Entsperren des
iPhones oder das Hochfahren des Laptops. Zudem sind diese genannten Momente eine
der wesentlichen Microinteractions, die ein Nutzer überhaupt mit dem Gerät tätigen wird.
Es ist nämlich die erste Interaktion zwischen dem Nutzer und dem Interface. So werden
jetzt vielleicht einige von euch an das Geräusch zurückdenken, mit welchem sich euer
iPhone entsperrt, oder dem leichten Zoomeffekt, mit welchem euer Homescreen danach
auftaucht (iOS 10, für alles andere ist mein Handy zu schlecht).

Genau solche Gesten lassen uns das Interagieren mit unserem Smartphone viel flüssiger
und effektiver erscheinen, auch wenn wir das bewusst vielleicht noch nie wahrgenommen
haben. Ein Microinteraction ruft dann positive Assoziationen bei uns hervor, wenn er
reizvoll, menschlich und effektiv ist. Solche Microinteractions sammeln und fließen in die
Gesamtwahrnehmung der Usability mit ein. Sie trennen somit ein gutes Produkt von
einem besonders gutem Produkt.

Microinteractions umgeben uns aber nicht nur bei der Interaktion zwischen Lautsprechern
oder Smartphones, sondern sollten uns idealerweise auch die Bedienung von Webseiten
„versüßen“. Denn Microinteractions können die Lücke zwischen Nutzer und Technologie
mithilfe von humaner und emotionaler Bindung schließen. Durch die intuitive und nahezu
unscheinbare Art begleiten uns Microinteractions durch den Webseitenfluss.
Um Micromoments selbst gestalten zu können, ist es wichtig ihren Aufbau zu verstehen.
Dieser setzt sich aus 4 Teilen zusammen:

  1. Trigger
  2. Eine Microinteraction muss zunächst ausgelöst werden. Im Idealfall soll der Trigger den
    Nutzer zur Interaktion animieren. Die besten Trigger sind solche, die dem Nutzer dann zur
    Verfügung stehen wenn er sie benötigt, ohne dass der Nutzer seine Bedürfnisse äußern
    muss.

  3. Rules
  4. Die Regeln bestimmen, was bei einer Microinteraction passiert. Sie müssen sich natürlich
    anfühlen und den Nutzer animieren und keinesfalls bei der Interaktion stören oder
    ablenken.

  5. Feedback
  6. Ganz wichtig ist es dem Nutzer klar zu machen, was durch die Interaktion passiert ist. Ein
    Mensch ist durch natürlich Konditionierung daran gewöhnt, dass auf eine Aktion eine
    Reaktion folgt. So fühlt es sich für einen Nutzer störend und unnatürlich an, wenn auf eine
    Aktion des Nutzers keine Reaktion des Systems folgt. Reaktionen können beispielsweise
    eine Live-Validierung von Nutzerdaten oder Ladeanimationen, die dem Nutzer klar
    machen, dass seine Aktion eine Reaktion hervorgerufen hat, er sich aber noch einen
    Augenblick gedulden muss, sein.

  7. Schleifen und Varianten
  8. Wenn eine Microinteraction mehrfach benutzt wird, sollte sie sich im besten Fall
    anpassen. Ein Unterschied sollte spätestens zwischen der ersten und der siebten Microinteraction
    sichtbar sein, idealerweise sollte sie sich an dem Nutzerverhalten orientieren.

Dieses Prinzip der Microinetractions spielte bei der Neugestaltung des Microsoft
Designs, welches im Mai 2017 erstmals vorgestellt wurde, eine bedeutende Rolle. Wie es
auf der Seite von Microsoft heißt:
„These are our foundational elements — the moments that will make our designs perform
beautifully across devices, inputs, and dimensions. This is how we build the next era
of Windows.“

Hier wird von Momenten gesprochen, welche das Design geräteübergreifend schöner
darstellen soll. Insgesamt setzt sich Fluent Design aus 5 Elementen zusammen. Licht,
Tiefe, Bewegung, Material und Skalierung.

Dabei spielen Microinteractions im Fluent Design vor allem bei Licht und Bewegung eine
große Rolle. Der Reveal Effekt, welcher größtenteils die Komponente Licht darstellt,
wurde im Rahmen des Creator Updates ausgerollt. Dieser Effekt beleuchtet die Stelle,
über die die Maus gerade fährt. Wenn mit der Maus geklickt wird erscheint ein Lichtkreis.
Die Interaktion stellt hier die Bewegung der Maus dar. Das Feedback, welches der Nutzer
erhält, sind die Lichtreflexe.

Die zweite relevante Komponente Bewegung, soll laut Microsoft nahtlose Übergänge
zwischen Interaktionen bewirken und so dem Nutzer helfen sich zu fokussieren.
Nicht nur Microsoft, sondern auch Apple oder andere Designer und Designguidelines
verwenden schon seit geraumer Zeit Microinteractions. John Pavlus, der zu diesem
Thema ein Kommentar zu Dan Saffers Buch verfasst hat, behauptet sogar, dass jeder
gute Designer Microinteractions genutzt hat. Letztendlich besitzen wir nun allerdings
durch die fortgeschrittenen Fähigkeiten von Webseiten und Endgeräten die Möglichkeit,
Micromoments besser zu entwerfen und umzusetzen. Diese Möglichkeit sollten wir alle in
der Zukunft nutzen, um unseren Nutzern die beste UX zu bieten.

Quellen

https://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details
http://microinteractions.com/
http://microinteractions.com/what-is-a-microinteraction/
http://t3n.de/news/ux-designtrend-478358/
https://blog.proto.io/secret-killer-ux-design-microinteractions/

Atomic Design

am 29 Sep 2017 in Aktuelles von
Bisher unkommentiert »

Atomic Design ist in aller Munde!

Schließlich möchte jeder auf dem neusten Stand
der Entwicklung bleiben. Ein große Rolle spielt dabei natürlich der Zugriff von Webseiten
durch mobile Endgeräte. Wer jetzt noch keine mobile Ausspielung seiner Webseite bietet,
ist eigentlich spät dran. Responsive Web Design spielt dabei natürlich eine große Rolle.
Es bietet eine elegantere Lösung für die Darstellung einer Webseite in verschiedenen
Größen, da eine Seite geladen wird und der Client entscheidet, welche Ansicht
ausgespielt wird. Das heißt, man hat hier nur einen Source-Code.
Natürlich ist das bei einem Redesign einer bestehenden Webseite mit extremem Aufwand
verbunden.

Bei umfangreichen Webseiten mit komplexen Seitenstrukturen explodiert der Aufwand
eines Redesigns. Viele Fehler können sich einschleichen, die das Benutzererlebnis
beeinflussen. Zum Beispiel können wiederkehrende Objekte falsch abgebildet sein oder
Überschriften werden nicht einheitlich gesetzt.
Der Atomic Design Ansatz wurde von Brad Frost entwickelt. Er ist ein amerikanischer
Web Designer, der sich mit der Konzeption von mobilen Webseiten beschäftigt. Beim
Atomic Design beginnt man die kleinsten Komponenten zu designen und baut aus diese
komplexe Seiten. Die kleinste Einheit nennt man Atome. Diese setzten sich zu Molekülen
zusammen, aus denen wiederum Organismen zusammengesetzt werden können. Die
Einheiten im Atomic Design werden in der folgenden Abbildung dargestellt:

Aufbau einer Atomic Webseite

Aufbau einer Atomic Webseite

Durch den atomaren Aufbau des Atomic Designs ist es möglich, verschiedene
Komponenten einzeln zu definieren. D.h. man legt einen Header oder einen Button fest
und verwendet denselben immer wieder. So kann man, anstatt wiederkehrende Elemente
jedes mal neu programmieren, einfach die passenden Atome oder Moleküle einfügen.
Brad Frost selbst sagte über den Atomic Design Ansatz: „We’re not designing pages,
we’re designing systems of components.“
Und das ist es auch das, was Atomic Design so effizient macht, wenn man mit großen und
komplexen Seitenstrukturen arbeitet. Man entwirft nicht mehr Seite für Seite, sondern legt
Komponenten fest und erstellt basierend darauf eine Seite.

Einheitlichliches Erscheinungsbild ist hier also garantiert.