UX in Motion Manifest

Eine deutschsprachige Version des UX in Motion Manifests

Im März 2017 formulierte der kalifornische Entwickler und Webdesigner Issara Willenskomer das UX in Motion Manifest. In ihm befasst er sich mit Bewegung und bewegten Elementen als Mittel des modernen Webdesigns. Willenskomer arbeitet als Webdesigner mit den Schwerpunkten User Interface und User Experience. Sein Wissen gibt er im Rahmen von Coachings und Seminaren weiter, zu deren Teilnehmern Topentwickler nahezu aller bekannten Webservices aus über 40 Ländern gehören. Wir finden Willenskomers Arbeit so bedeutend, dass wir Ihnen eine Übertragung des Manifests ins Deutsche anbieten möchten:

Mobile Elemente in Webseiten - Ein Manifest für eine bessere Nutzererfahrung

Das folgende Manifest ist meine Antwort auf die Frage: "Wie kann ich als Webdesigner wissen, wann ein bewegtes Element auf einer Webseite für eine bessere Nutzererfahrung sorgt?" In meiner Tätigkeit als Designer bin ich zu dem Schluss gekommen, dass es 12 Fälle gibt, in denen Bewegung tatsächlich die User Experience positiv beeinflussen kann. Ich habe diese Fälle in den "12 Prinzipien für bewegte User Interfaces" zusammengefasst. Keins dieser Prinzipien soll für sich alleine stehen, vielmehr können und sollen diese Prinzipien frei miteinander kombiniert werden, um damit faszinierende und neue Webservices zu realisieren.

Zur besseren Übersicht gliedert sich das Manifest in fünf Teile:

1. UI Animation ist nicht das, was Sie denken
2. Echtzeit-Interaktion vs Nicht-Echtzeit-Interaktion - eine wichtige Unterscheidung
3. Wie Bewegung die Nutzerfreundlichkeit verbessern kann
4. Prinzipien, Techniken, Eigenschaften und Werte
5. Die 12 Prinzipien für bewegte User Interfaces

UI Animation ist nicht das, was Sie denken

Es scheint, als gäbe es keine wirklich saubere Definition von Animation in der Benutzeroberfläche (englisch User Interface, kurz: UI). Deshalb könnte es hilfreich sein, auf diesen Punkt einmal etwas genauer zu schauen, bevor wir uns tatsächlich mit den 12 Prinzipien beschäftigen.

Eine ganze Reihe von Entwicklern tendiert dazu, Animationen der Benutzeroberfläche lediglich als zusätzlichen optischen Anreiz zu verwenden. Animation als eine Art Eyecandy, das lediglich darauf abzielt, dem Nutzer einer Seite ein gutes Gefühl zu verschaffen. Mit diesem Denken sind die reinen Inhalte einer Seite vollkommen ohne bewegte Elemente rezipierbar. Animationen wirken in einem solchen Kontext schnell als unnötig und aufgesetzt. Verärgerte Nutzer tun sie mit den Begriffen "Klicki Bunti" oder "Augenkrampf" ab. Wen wundern solche Zuschreibungen, wenn die Animation der Nutzeroberfläche lediglich wie das ungewollte schmuddelige Stiefkind der Nutzererfahrung behandelt wird!

Sinn und Zweck des UX in Motion Manifests ist es, die Animation aus dieser Schmuddelecke herauszuholen und ihr einen neuen Stellenwert zukommen zu lassen. Einen gleichberechtigten Stellenwert neben der Verbesserung der Nutzererfahrung.

Um ein Beispiel aus der analogen Welt heranzuziehen:

Kein Mensch käme auf den Gedanken, dass ein Bauwesen ohne Architektur möglich wäre. Natürlich ist es möglich, Bretter und Steine auf einen Haufen zu werfen, oder einfach drauflos zu bauen. Aber wäre das Ergebnis tatsächlich ein stabiles, womöglich sogar ansehnliches Haus? Wohl kaum. Irgendeine Art von Plan muss vor dem Bau existieren.

Natürlich handelt es sich um eine wechselseitige Beziehung. Architekten können die kühnsten Schlösser zeichnen, ohne eine Baukolonne bleibt es lediglich ein Luftschloss, eine Vision auf Papier. Irgendjemand muss diese Idee in Stein und Stahl realisieren.

Genauso wie Architektur und Bauwesen sollten sich Animation und Nutzererfahrung verhalten. Animation darf nie zum Selbstzweck werden, sondern muss immer die Verbesserung der Nutzererfahrung zum Ziel haben. Animierte Nutzeroberflächen müssen essenziell für ein großartiges Benutzererlebnis werden.

Leider verstehen viele Webentwickler unter Animation immer noch lediglich das schmückende Beiwerk, mit dem die Seite bei einer Interaktion aufgehübscht werden soll. Deshalb wird es Zeit, einen kurzen Blick auf verschiedene Arten der Interaktion zu werfen.

Echtzeit-Interaktion vs. Nicht-Echtzeit-Interaktion - eine wichtige Unterscheidung

Zum Verständnis der unterschiedlichen Interaktionsformen ist es wichtig, zwischen "Zustand" und "Handlung" zu unterscheiden. Der Zustand eines Design- oder besser Webseitenelementes ist immer statisch. Eine Handlung hingegen impliziert immer Bewegung und Veränderung.
Nehmen wir ein beliebiges Designobjekt als Beispiel. Dieses Designobjekt kann unsichtbar sein. Es befindet sich statisch im Zustand der Unsichtbarkeit, bis der Nutzer eine Handlung ausführt. Diese Handlung kann das Objekt sichtbar machen, also seinen Zustand ändern. Das Objekt wird durch die Handlung sichtbar, es wird von der Unsichtbarkeit in die Sichtbarkeit überführt. Allein unser Sprachgebrauch macht diesen Unterschied deutlich. Ein Element "ist" unsichtbar und "wird" durch eine Handlung sichtbar "gemacht". Allein der Gebrauch der Hilfsverben "sein" und "werden" impliziert Statik oder Ruhe.

Werfen wir einen genaueren Blick auf die Handlung, also auf den beweglichen Teil. Hier unterscheiden wir zwischen Handlungen in Echtzeit und in Nicht-Echtzeit.

Bei einer Echtzeit-Interaktion tritt der Nutzer direkt in einen Dialog mit einem Objekt. Seine Handlungen rufen unmittelbar eine Zustandsänderung, also eine Bewegung hervor. Klickt der Nutzer beispielsweise auf einen Button, der daraufhin unmittelbar reagiert, haben wir es mit Echtzeit-Interaktion zu tun. Ein Objekt kann sich beispielsweise bei Interaktion zur Seite bewegen, nach oben fahren oder ein weiteres Objekt freigeben.

Nicht Echtzeit-Interaktion erfolgt seriell. Zuerst tritt der Nutzer in Interaktion mit einem Objekt, das erst nach Abschluss der Interaktion seinen Zustand ändert. Ein Klick auf einen Button zieht zum Beispiel eine Bewegung nach sich.

Echtzeit-Interaktion gibt dem Benutzer das Gefühl direkter Manipulation. Die Reaktion der Webseite erfolgt gleichzeitig mit der Nutzeraktion, sodass der Nutzer das Gefühl bekommt, die Seite wirklich zu benutzen.

Nicht-Echtzeitinteraktionen erzeugen jedes Mal einen kurzen Augenblick, in dem der Nutzer nichts tun kann, sich wie ausgesperrt aus der Seite fühlt. Er benutzt die Seite nicht, sondern bekommt das Gefühl vermittelt, kurz auf und dann erst wieder in die Seite einzutauchen. Die Nutzererfahrung wird also bei jeder Handlung für einen winzigen Moment unterbrochen. Hierdurch wirkt die Interaktion distanzierter, weniger direkt und unnatürlich.

Diese Unterscheidung zwischen Gleichzeitigkeit und seriellem Ablauf, so trivial sie auch erscheinen mag, ist von fundamentaler Wichtigkeit für das spätere Verständnis der 12 Prinzipien.

Wie Bewegung die Nutzerfreundlichkeit verbessern kann

Erinnern wir uns noch einmal kurz daran, dass der Sinn jeder Bewegung nicht Eyecandy, sondern die Verbesserung der Nutzererfahrung sein muss. Nachdem wir uns unterschiedliche Bewegungen und die Auswirkungen auf die Nutzererfahrungen angeschaut haben, wird es Zeit, sich zu fragen, wie genau Bewegung auf einer Webseite die Nutzererfahrung tatsächlich verbessern kann. Hierzu möchte ich Ihnen vier Leitlinien vorstellen:

Erwartung

Eins der zentralen Paradigmen guten Webdesigns, ist die Erfüllung von Nutzererwartungen. Mit allem, was wir sehen, hören oder fühlen, verbinden wir Menschen gewisse Erwartungen. Von einem schwarz-weiß gefleckten Tier mit Hörnern, das auf einer Weide steht, erwarten wir, dass es muht. Würde das Tier plötzlich bellen oder zwitschern widerspräche das unseren Erwartungen und würde zu großer Verwirrung führen. Mit dem bestimmten Aussehen eines Objektes auf einer Homepage ist also automatisch eine gewisse Erwartung an seine Funktionalität verknüpft. Aufgabe guten Webdesigns muss es sein, die Diskrepanz zwischen Erwartung und tatsächlicher Erfahrung möglichst gering zu halten.

Kontinuität

Menschen lieben vertraute Umgebungen; sie schaffen sich ihre eigene Kontinuität in dieser Umgebung. Große Brüche werden in der Regel vermieden, dafür kommt vorhandenen Brüchen in der Regel eine herausragende Bedeutung zu. Jemand, der sein Haus vollständig im skandinavischen Stil einrichtet, wird sich normalerweise keine Schwarzwälder Kuckucksuhr an die Wand hängen. Tut er es dennoch, so liegt der Schluss nah, dass eben jener Uhr eine wichtige Stellung innerhalb des Zimmers zukommt, sei es, dass der geliebte Großvater Uhrmacher war, oder die Ehepartnerin aus Titsee-Neustadt stammt.

Übertragen auf eine Webseite bedeutet das, dass starke optische Brüche zu vermeiden sind, um so eine kontinuierliche Nutzererfahrung zu ermöglichen.

Narrativ

Unter dem Narrativ versteht man im Webdesign eine lineare Abfolge einzelner Nutzererlebnisse, die sich harmonisch zu einem Ganzen zusammenfügen. Dabei kann der sich ergebende Rahmen zeitliche und räumliche Dimensionen ausweisen.

Beziehungen

Alle Elemente, die zum Narrativ und damit zu einer konsistenten Benutzererfahrung beitragen stehen in irgendeiner Art von Beziehung zueinander. Diese Beziehung kann ebenfalls in räumlicher und zeitlicher Dimension bestehen. Objekte, die in keinerlei Beziehung zu anderen Objekten stehen, also vollständig isoliert auf einer Webseite auftauchen, stören das Narrativ, die Kontinuität und widersprechen den Nutzererwartungen. Und damit wirken sie verstörend. Vielleicht erinnern Sie sich an die eröffnende Kamerafahrt im Film "Blue Velvet", in der inmitten idyllischster Naturaufnahmen plötzlich ein abgetrenntes Ohr bildfüllend auftaucht. Dieses Ohr bricht innerhalb von Sekundenbruchteilen mit allen sorgsam aufgebauten Zuschauererwartungen und wirkt extrem verstörend. Der weitere Film zieht seine Faszination aus dieser Verstörung, auf Webseiten sollten Sie solche Experimente allerdings unterlassen, wenn Sie Ihre Nutzer nicht abschrecken wollen.

Prinzipien, Techniken, Eigenschaften und Werte

Der US-amerikanische Couch und Berater Tyler Waye drückt es so aus:

"Prinzipien sind die zugrunde liegenden Prämissen und Regeln der Funktion, die zu einer beliebigen Anzahl von Techniken führen. Diese Elemente bleiben gleichbleibend, egal was passiert."

Sucht man nach der tieferen Bedeutung dieses Satzes, kann es hilfreich sein, die erwähnten Konzepte hierarchisch in einer Pyramide-Struktur anzuordnen. Die Spitze der Pyramide bilden die Prinzipien. Eine Ebene darunter sind die Techniken angeordnet. Dann folgen Eigenschaften und die Basis schließlich bilden die Werte.

Techniken können wir uns zur unterschiedlichen und unbegrenzten Ausführungen eines oder mehrerer Prinzipien notwendig vorstellen. Damit entsprechen Techniken im Wayeschen Sinne am ehesten dem, was man gemeinhin unter Stil versteht.

Eigenschaften sind spezifische Objektparameter, die sich animieren lassen, um eine bestimmte Technik zu verwirklichen. Wichtige Eigenschaften von Objekten auf Webseiten sind etwa Position, Deckkraft, Skala, Rotation, Ankerpunkt, Farbe, Strichbreite oder Form. Werte sind die eigentlichen numerischen Eigenschaftswerte, die sich im Verlauf der Zeit ändern, und so das hervorrufen, was wir unter einer Animation verstehen.

So! Ich denke, jetzt haben wir endlich alle Werkzeuge beisammen, mit denen sich die 12 Prinzipien für bewegte User Interfaces formulieren lassen.

Also bitte: Vorhang auf!

Die 12 Prinzipien für bewegte User Interfaces

Alle 12 Prinzipien lassen sich einer der folgenden fünf Dimensionen zuordnen:

• Timing
• Objektbeziehungen
• Objekt-Kontinuität
• Zeitliche Hierarchie
• Räumliche Kontinuität

Beginnen wir mit der Dimension "Timing"

Prinzip 1) Easing

Easing lässt sich in unserem Kontext in etwa mit "Ausweichen" übersetzen. Alle bewegten Objekte weichen aus, machen also Ihren Platz frei, für ein neues Objekt. Denken Sie nur an die berühmt gewordene Schnitttechnik der Star Wars Filme. Hier kommt es fast nie zu einem harten Bruch bei einem Szenenwechsel. Vielmehr werden die einzelnen Sequenzen sanft ineinander übergeführt, indem eine Szene aus dem Bildschirm herauswandert und Ihren Platz für die nächste Szene freimacht. Innerhalb der Star Wars Filme wird meist mit linearen Bewegungen gearbeitet. Natürlicher wirken allerdings elastische Bewegungen, die schnell beginnen, um sich dann zu verlangsamen.

Prinzip 2) Offset und Delay

Easing bezieht sich auf ein bewegtes Objekt, wohingegen bei mehreren bewegten Objekten mit Offset und Delay, also zeitlichem und räumlichem Versatz gearbeitet werden kann. Stellen Sie sich drei Objekte vor, die von links ins Blickfeld des Nutzers wandern. Die beiden oberen Objekte bewegen sich mit der gleichen Geschwindigkeit, das letzte Objekt folgt etwas langsamer oder räumlich versetzt.

Noch bevor der Nutzer die Objekte identifiziert hat, ist ihm klar, dass die Objekte zwar auf eine gewisse Weise zusammenhängen, aber das untere sich irgendwie unterscheiden muss. Auf diese Weise hat der Entwickler die Wahrnehmung des Nutzers bereits manipuliert, ehe dieser schon genau weiß, was ihn erwartet.

Der Dimension "Objektbeziehungen" lässt sich nur ein einziges Prinzip zuordnen:

Prinzip 3) Parenting

Objekte können bestimmte Eigenschaften auf andere, untergeordnete Objekte übertragen. Sieht der Nutzer beispielsweise ein Objekt, aus dem ein kleineres Objekt gleicher Form erwächst, so ist sehr schnell klar, dass beide Objekte voneinander abhängig sind und dass das größere, zuerst dargestellte Objekt, das grundlegendere ist, wohingegen das andere, kleinere eher ergänzende Funktion hat.

Wieder ist die Wahrnehmung des Nutzers in definierte Bahnen gelenkt, bevor auch nur ein einziges inhaltliches Detail enthüllt ist.

Die Dimension "Objekt-Kontinuität" enthält fünf Gestaltungsprinzipien

Prinzip 4) Transformation

Transformation ist vermutlich das offensichtlichste Gestaltungsprinzip. Wenn aus einem Rechteck nach einer Aktion ein Kreis wird, so ist klar, dass sich die Funktionalität des Objektes geändert hat. So befindet sich am Ende jedes Formulars der Absenden-Button. Wie oft haben Sie schon versucht, ein Formular mehrfach zu senden, weil Sie aufgrund fehlender optischer Rückmeldung unsicher darüber waren, ob das Formular versendet wurde, oder nicht? Mit einer simplen Änderung der Button Form nach dem Absendevorgang ist dieses Problem aus der Welt geschafft.

Prinzip 5) Wertänderung

Auch hierbei handelt es sich um ein recht offensichtliches Prinzip, mit dem die optische Rückmeldung an einen Benutzer verstärkt werden kann. Denken Sie nur an das weitverbreitete Fortschrittssymbol, das den Zustand eines Prozesses durch einen sich immer weiter vervollständigenden Kreis anzeigt. Eine sich verändernde nummerische Prozent-Anzeige informiert den Nutzer auf einer weiteren optischen Ebene und verbessert die Nutzererfahrung erheblich. Beide Symboliken repräsentieren zwar den gleichen Prozess sprechen aber unterschiedliche Hirnareale bei der Wahrnehmung und werden so besser vom Gehirn verarbeitet.

Prinzip 6) Maskierung

Wird ein Objekt auf einer Webseite nach einer Aktion durch ein anderes Objekt überlagert oder verdrängt, so ist schnell klar, dass dem ursprünglich vorhandenen Objekt keine Bedeutung mehr zukommt. Simples Beispiel hierfür ist die Ausgrauung eines Links, der nur einmal funktioniert. Dieses Prinzip kommt etwa bei Abstimmungen zum Einsatz. Mit der Maskierung ist dem Nutzer auch klar, dass seine Aktion nicht mehr rückgängig zu machen ist.

Prinzip 7) Überlagerung

Die Überlagerung eines Objektes durch ein anderes entzieht dieses auch dem Fokus der Nutzeraufmerksamkeit. Anders als bei der Maskierung erwartet der Nutzer hier allerdings nur eine zeitliche begrenzte Aktion, die auch wieder umkehrbar ist.

Prinzip 8) Klonen

Wird ein Objekt aus einem anderen geklont, so lässt die identische Form der beiden neuen Objekte auf eine enge inhaltliche Beziehung schließen. Funktional oder inhaltlich verschiedene Objekte sollten nicht geklont werden, da dies die Nutzererwartungen konterkariert.

Die Dimension der "zeitlichen Hierarchie" enthält wiederum nur ein einzelnes Prinzip:

Prinzip 9) Defokussierung

Die scheinbare Defokussierung, also das Spiel mit gezielter Unschärfe erlaubt dem Nutzer eine gute Räumliche Orientierung. Außerdem eröffnet dieses Prinzip die dritte Dimension für die Anordnung von Objekten. Durch die Defokussierung wird die Aufmerksamkeit des Nutzers auf das fokussierte Objekt im Vordergrund gelenkt. Einige Fenstermanager moderner Betriebssysteme nutzen diesen Effekt beim Verschieben von Fenstern, indem nur das zu bewegende Fenster den Fokus behält, während alle anderen Fenster scheinbar verschwimmen.

Den Abschluss bildet die Dimension "räumliche Kontinuität mit 3 Prinzipien:

Prinzip 10) Parallaxe

Mit dem Parallaxeffekt lässt sich ein dreidimensionaler Eindruck beim Scrollen erwecken. Wie die Defokussierung eröffnet der Parallaxeffekt eine scheinbare dritte Dimension, in der sich weitere Informationen verpacken lassen.

Prinzip 11) Dreidimensionalität

Wir sind das dreidimensionale Sehen gewohnt und können mithilfe der Dimensionalität Rückschlüsse auf die Entfernung von Objekten ziehen. Leider läuft das Flat-Design diesen Seherfahrungen zuwider. Ein dezent eingesetzter 3D-Effekt bricht aber nicht mit den Prinzipien des Flat-Design und erlaubt dem Leser trotzdem die scheinbare räumliche Orientierung.

Prinzip 12) Zoom und Schwenk

Zoom und Schwenk sind klassische Techniken der Kameraführung. Mit ihnen lässt sich der Fokus auf bestimmte Objekte oder Teilbereiche von Objekten lenken. Die Präsentationssoftware Prezi beispielsweise macht von diesem Effekt ausgiebig Gebrauch, um Informationen zu strukturieren.

Willenskomers Originalversion des UX in Motion Manifests können Sie bei medium.com einsehen, wo auch schon eine ganze Reihe lesenswerter Kommentare eingegangen sind. Auf etwaige Rückmeldungen zur deutschen Version des Manifests freuen wir uns.