Loading...
User Interaction Visualization
Work in Progress

User Interaction Visualization

Die Bedienung digitaler Oberflächen bedingt ein adäquates Feedback. Eine visuelle Brücke zwischen physischer Interaktion und virtuellem Raum.

Im virtuellen Raum fehlt jegliche Mechanik, Form, physischer Raum, oder Haptik.

Alles muss bewusst erschaffen werden, damit wir begreifen können.

Grenzerfahrungen

Realität und Virtueller Raum

Eine Interaktion verbindet die reale mit der virtuellen Welt. Der Bildschirm widerspiegelt den virtuellen Raum, auf dem diese Interaktion stattfindet.

Jede Input-Möglichkeit ist ein physisches Signal, welches in Binären-Code umgewandelt wird. 

Es gibt verschiedene Möglichkeiten, wie wir mit einer Maschine interagieren können.

Die Input-Möglichkeiten

Aus dem Kapitel Devices & Displays kennen wir gängige Typen:

Keyboard, Mouse & Cursor, Trackpad, Touch, Audio, Camera, Orientation & Bewegung.

Seitliche Finger-Silhouette die auf eine Glasscheibe (physische Grenze) eines Devices drückt, um eine Interaktion im virtuellen Raum zu tätigen.
© Webdesign Essentials
Seitliche Finger-Silhouette die auf eine Glasscheibe (physische Grenze) eines Devices drückt, um eine Interaktion im virtuellen Raum zu tätigen.
1

Interaktion & Feedback

Die Visuelle Antwort auf die Eingabe

Jeder Input, jede Interaktion braucht eine Rückmeldung. Diese Feedbacks helfen die haptische Grenze zwischen Bildschirm und User-Interaktion zu überbrücken.

Doch der zwei dimensionale Screen und sein Inhalt bleibt physisch nicht zugänglich. 

Es braucht klare Feedbacks zur jeweiligen Interaktion, damit wir lernen und verstehen, was wir tun.

Ohne diese klare Führung ist eine saubere Usability nicht gewährleistet.

Diese Führung baut auf verschiedenen Komponenten auf.

© Keiichi Matsuda - Hyper Reality
2

Inszenierung

Motion & Behaviour

Um Interfaces bedienbar zu machen, müssen diese Interaktionsmöglichkeiten visuell inszeniert werden.

Es gibt 3 Aspekte zur Inszenierung einer Interaktion.

1. Inhalt

Das wichtigste Element der Inszenierung ist ein inhaltliches Feedback: Nach dem Usability Prinzip von: Reveal or Inform, Wait or Show, Notify.

2. Anordnung

Ein Trick ist, das 2-dimensionalen Webdesigns gedanklich in eine räumliche (3D) Logik umzuwandeln.

3. ZEIT & Bewegung

Das richtige Timing sowie ein intuitives Verhalten, welche die Interaktion visuell erfahrbar macht.

Drei Grafiken, Eine Dialog-Box, ein 3D-iPhone und ein animiertes Loading-Wheel.
© Wedesign Essentials
Drei Grafiken, Eine Dialog-Box, ein 3D-iPhone und ein animiertes Loading-Wheel.
3

Anordnung

Die Beschaffenheit des Virtuellen Raumes

Die physikalische Logik eines virtuellen Raumes, sollte in sich konsistent sein.

Die drei Bausteine worauf die Anordnung einer visuellen User-Interaktion aufbaut:

Raum, Form und Beziehung

Die Analogie zum Raum lässt sich sehr gut mit der Atomic Design Theorie einer Webseitenanatomie und dem Aufbau von Code mit seinem Box-Model (Verschachtelung, Vererbung) kombinieren.

Die gedankliche Umwandlung eines 2D-Layouts in einen 3D-Raum mit Ebenen, Vor- und Hintergründen hilft ein besseres Verständnis über das Layout zu erhalten.

SVG-Animation. grafisches 3D Mobile mit App Design, welches sich 3D aus dem Screen hinaus bewegt, um die verschiedenen Ebenen zu zeigen.
© Webdesign Essentials
SVG-Animation. grafisches 3D Mobile mit App Design, welches sich 3D aus dem Screen hinaus bewegt, um die verschiedenen Ebenen zu zeigen.
4

Raum

X, Y und Z

Definieren wir unsere Gestaltung als dreidimensionale Fläche, können wir uns diese Räumlichkeit in der Interaktion zu nutze machen.

z-Achse

X und Y dienen der Höhe und Breite des Raumes. Ein Z-Wert definiert die Position im Raum. Elemente können sich so überlagern. 

Viewport-Camera

Der aktuelle Inhalt einer Webseite wird mit dem Browserfenster eingerahmt. Man kann diese Ansicht als Kamera deuten. z. B. in Parallax-Scrolling zu sehen.

Hyper Link

Links können innerhalb einer Webseite sein oder ausserhalb. Sie können neue Tabs oder neue Browserfenster öffnen. Hyper Space sozusagen.

Drei Grafiken. Darstellung der 3D Achsen x, y und z. Räumliche Darstellung eines Screens mit dahinterliegendem Inhalt. Hyperlink der zwei unabhängige Seiten miteinander verbindet.
© Webedesign Essentials
Drei Grafiken. Darstellung der 3D Achsen x, y und z. Räumliche Darstellung eines Screens mit dahinterliegendem Inhalt. Hyperlink der zwei unabhängige Seiten miteinander verbindet.
5

Form

Materialität

Jedes Element kann in verschiedenen Zuständen angezeigt werden und sich für Interaktionen verändern.

Transformation

Die Veränderung der physischen Form oder Grösse.

Value Change

Die Veränderung des Wertes (Zahlwert, Farbwert, Bildeinstellungen, Inhalt) eines Elements.

Cloning

Ein Element wird kopiert oder geteilt.

Hide & Appear

Elemente können verschwinden und wieder auftauchen.

Vier Grafiken. Kreis transformiert zum Rechteck. Farb- und Zahlenwert des Kreises ändern. Element wird geklont und ein Element erscheint.
© Webdesign Essentials
Vier Grafiken. Kreis transformiert zum Rechteck. Farb- und Zahlenwert des Kreises ändern. Element wird geklont und ein Element erscheint.
6

Beziehung

Abhängigkeiten

Elemente können miteinander in Beziehung stehen.

Parenting

Analog dem Parent-Child Prinzip verhalten sich Child-Elemente entsprechend ihrer Parent Elemente auch während einer Interaktion oder Animation.

Aktion-Reaktion

Trigger-Elemente die eine Reaktion bei anderen Elementen auslösen. Sehr oft in Spielen verwendet, wenn virtuelle Buttons zur Steuerung genutzt werden.

Masking

Ähnlich wie die Transformation, doch der Container verändert die Aussenform des Inhaltes.

Drei Grafiken, die das Parenting, Aktion-Reaktion sowie Masking verdeutlichen.
© Webdesign Essentials
Drei Grafiken, die das Parenting, Aktion-Reaktion sowie Masking verdeutlichen.
7

Zeit

Der richtige Moment

Bei Interaktionen spielt die Zeit eine wichtige Rolle. Zeit vermittelt Verständnis und verschafft Fokus.

Realtime

Elemente die sich während der Interaktion selbst verdeutlichen. Typing, Scrolling, Swiping oder Hover sind solche Interaktionselemente.

Non-Realtime

Elemente oder Animationen die erst nach einer Interaktion meist ein Klick/Tab ausgelöst werden. Das Löschen des Papierkorbs, nachdem man den Befehl gegeben hat.

Timing

Interaktionen sind wie Animationen. Sie leben vom Momentum. Das Timing muss stimmen, damit sich die Handlung natürlich und intuitiv anfühlt.

Drei Grafiken die Realtime, Non-Real-Time und Timing verdeutlichen.
© Webdesign Essentials
Drei Grafiken die Realtime, Non-Real-Time und Timing verdeutlichen.
8

Bewegung

Von A zu B

Die Zeit sowie die Anordnung ermöglicht es Interaktionen oder Elemente in verschiedenen Zuständen oder Orten zu platzieren.

Die Bewegung selbst hat ebenfalls verschiedene Zustände

Die Bewegungskurve (Easing)

Linear oder Non-Linear. Wie beschleunigt sich ein Element beim Start und bremst es wieder ab am Ziel.

Bewegungsbeziehung (Offset & Delay)

Eine Bewegung mehrerer Elemente kann durch einen verspäteten Start/Ende eines Elementes sowie durch die Orchestrierung der Bewegungsabfolge die gehenden oder kommenden Elemente besser erklären.

Zwei Grafiken, welche die Bewegungskurve (Easying) sowie das Offset und Delay verdeutlichen.
© Webdesign Essentials
Zwei Grafiken, welche die Bewegungskurve (Easying) sowie das Offset und Delay verdeutlichen.

Signifiers

Wie, was wo?

Interaktionen benötigen immer einen Trigger (Abzug/Auslöser). Signifiers sind visuelle Triggers.

Ein Signifiers kann durch verschiedene Arten verdeutlicht werden.

Intuitive Designs, setzen die Signifiers so ein, dass wir sie wahrnehmen, ohne dass wir sie suchen müssen oder sie uns bedrängen.

Signifiers weisen oft Erkennungsmerkmale auf, die auf semiotischen Grundlagen beruhen. So, dass wir intuitiv wissen. Hier soll man klicken.

© Little Art Talks
10

Skeuomorphismus in Design

Bekanntes ist vertrauter

Das Bindeglied zwischen der realen und der virtuellen Welt, sind realen Objekten nachempfundene Interaktionselemente.

Diese Analogie zur realen Welt ist aus Usability-Sicht besonders in der digitalen Transformationsphase unserer Gesellschaft wichtig.

Vieler App- und Webdesigns wenden sich heutzutage wieder dem «Swiss Graphic Design» zu. Sie bezeichnen sich als «Flat-Design» oder «Minimalism» und weisen visuell nicht mehr die Materialitätstreue auf, die besonders zwischen 2004 und 2013 sehr prägend war.

Doch ihre interaktiven Elemente sind zwar in ihrer Optik nicht mehr Skeuomorph, aber noch immer Analogien davon. Buttons sind noch Buttons – nur Flat. Sie haben ihre Charaktereigenschaft (Affordance) nicht verloren.

© Inquisitive Fish
11

Nebenbemerkung

Der grösste Vorteil des «Flat-Design» ist die Performance. Da Flat-Design nur mit geringen Verläufen, Texturen und Bildern auskommt, kann das Design aus reinem Code geschrieben werden. Somit wird die Datenmenge per Webseite reduziert und die Geschwindigkeit erhöht.

Interaktions-Arten

Die Klassiker

Es gibt verschiedene visuelle Interaktionsarten auf dem Screen die wir tätigen.

Die Klassiker

Typing, Klick/Tab, Scroll/Swipe, Drag 'n' Drop & Gestures.

Sie sind oft auf unseren Umgang mit Elementen in der realen Welt abgestimmt und nachempfunden.

Schauen wir uns diese visuellen Klassiker der Interaktion an.

Fünf verschiedene Interaktions-Arten die oft genutzt werden als kleine Grafiken dargestellt: Typing, Klick & Tab, Scroll & Swipe, Drag 'n' Drop und Advanced Gestures.
© Webdesign Essentials
Fünf verschiedene Interaktions-Arten die oft genutzt werden als kleine Grafiken dargestellt: Typing, Klick & Tab, Scroll & Swipe, Drag 'n' Drop und Advanced Gestures.
12

Typing

Der Blinkende Balken

Wir kennen das Signal des blinkenden Balkens/Cursors, es ist ein gelerntes Interaktion-Feedback.

Mittels einer Tastatur werden Zahlen, Buchstaben oder Befehle eingegeben. Wenn wir schreiben wollen, signalisiert uns der Computer mittels dem blinkenden Balken, wo man schreibt.

Wissen wir um die Shortcuts oder Eingabe-Befehle Bescheid, können wir auch mit Feedback arbeiten, die nicht Real-Time, sondern als Reaktion auf unseren Befehl aufwarten.

SVG-Animation. Text «Type here» mit dem animierten blinkenden Balken.
© Webdesign Essentials
SVG-Animation. Text «Type here» mit dem animierten blinkenden Balken.

Click & Tab

Hyperlinks

Wir nutzen den Mausklick oder den Finger-Tab extrem oft. Er hilft Inhalte gezielt anzuklicken.

Inhalte miteinander verknüpfen ist die Essenz des Internets. Durch den Klick aktiviert man Hyperlinks oder kurz Links. Dies sind Referenzpunkte zu anderen Daten.

Visuell werden klickbare Elemente sinnigerweise, also solche Hervorgehoben.

Dabei handelt es sich immer um einen Link der eine Interaktion auslöst.

Es gibt 6 verschiedene Zustände für einen Link und 3 Typen wie Links aussehen.

Eine Auflistung der sechs Zustände (Default, Hover, Pressed, Active, Visited, Disabled) und drei Typen (Textlink, Button und Area).
© Webdesign Essentials
Eine Auflistung der sechs Zustände (Default, Hover, Pressed, Active, Visited, Disabled) und drei Typen (Textlink, Button und Area).
14
Links im Detail

Die Sechs Zustände

Default (Standard)

Ein ruhender Link sollte als Interaktionsfläche erkennbar sein. Daher sind Buttons beliebte Designelemente, da ihr Zweck im Design gelernt worden ist.

Hover

Der Zustand, wenn der Cursor über einem interaktiven Element ist. Hover gibt es bei Touch-Devices nicht. Er darf daher nur als visuelle Verstärkung einer User-Interaktion auf einem Desktop genutzt werden, nicht aber als Interaktion selbst.

Pressed

Der Zustand während des Klicks oder dem Tab selbst. Ein sehr kurzer Moment eines Linkzustandes.

Active

Ein Link-Zustand, der z. B. in einer Navigation genutzt wird, um zu zeigen, in welchem Menüpunkt man gerade verweilt.

Visited

Um zu signalisieren, dass ein Besucher bereits den Inhalt des Linkes besucht hat. Dies kann der User-Führung dienen, damit Inhalte entweder bewusst nochmals angesehen oder ausgelassen werden können.

Disabled

Es gibt Momente, da funktionieren gewisse Links (noch) nicht. So signalisiert man, dass ein Link vorhanden ist, aber er entweder zurzeit nicht verfügbar oder erst nach einer anderen Interaktion freigeschaltet wird.

Die Drei Typen

Textlink

Der Textlink ist das Urgestein von Webseiten. Er kann in allen Text-Elementen vorkommen. Im Normalfall ist ein Link Unterstrichen.

Button

Der Button ist eine skeuomorphische Adaption von realen Schaltflächen, wie sie in elektronischen Geräten vorkommen. Buttons führen User durch eine Webseite. Sie sind die Ankerpunkte zwischen den Inhalten.

Area

Der Unterschied zwischen einem Button und einer Area liegt nur im Design. Buttons sind im Grunde auch einfach Link-Flächen. Doch aus visueller Sicht, sind Areas Elemente, die Inhalt oder Layout bezogen eine eigene Gestaltung haben, aber dennoch als Interaktionsflächen Daten miteinander verknüpfen.

Das Styling

Grundsätzlich ist die Gestaltung der unterschiedlichen Zustände und Typen frei. Es lohnt sich jedoch die gestalterischen Konventionen von Links, als Klick- & Tab-Flächen zu übernehmen. Dies aus Usability wie Accessibility-Sicht.

Scrolling

Verdrängen von Inhalt

Der effektivste Weg um Inhalte auf einer Seite anzusehen ist das scrollen oder swipen.

Der Vorteil von digitalen Geräten ist der unendliche Raum den sie kreieren können.

Digitale Räume sind Formlos und passen sich dem Device und dem Inhalt an.

Durch scrollen oder swipen können wir diese Inhalte in den sichtbaren Bereich ziehen.

Scrolling oder Swipen muss nicht nur vertikal oder Browserfenster bezogen sein. Es darf sich auch auf Elemente beziehen. z. B. Eine Bildergalerie.

GIF-Animation. Looping Filmsequenz einer Katze die mit ihrer Pfote einen Webseite auf einem Desktop scrollt.
© gurl.tumblr.com
GIF-Animation. Looping Filmsequenz einer Katze die mit ihrer Pfote einen Webseite auf einem Desktop scrollt.
15

Drag 'n' Drop

Daten Bewegen

Elemente packen, irgendwo hinziehen um es dort zu deponieren wird gerne bei skeuomorphischen Inhalten genutzt.

Das Apple Betriebssystem nutzt die Drag and Drop Interaktion schon seit 1984.

In HTML 5 ist Drag and Drop ein Standard, der genutzt werden kann. Meistens um Inhalte (Files) auf eine Webseite zu laden oder um spielerisch mit Elementen einer Webseite zu interagieren.

GIF-Animation. Ein alter Mann sitzt am Computer und zieht mit der Maus sein Folder «My Computer» in die «Trashcan». Danach verschwindet der reale Computer.
© Imgur User patrrric
GIF-Animation. Ein alter Mann sitzt am Computer und zieht mit der Maus sein Folder «My Computer» in die «Trashcan». Danach verschwindet der reale Computer.
16

Advanced Gestures

Zwei, drei Finger Gestures

Berührungssensitive Oberflächen (Touchscreens) können immer feinere Interaktionen unterscheiden.

So können mehrere Finger oder die Druckstärke genutzt werden um mit den virtuellen Inhalten zu interagieren.

© Lifehacker
17

Behaviour

Bewegung erklärt die Interaktion

Die Bausteine Zeit, Form, Raum und Beziehung setzen die Parameter für die Animation einer Interaktion.

Diese Parameter helfen ein Behaviour Konzept zur Animation aufzustellen.

12 Priniciples of Motion in UX

Issara Willenskomer hat eine wunderbare Zusammenstellung von Bewegungsprinzipien erarbeitet.

Ein Behaviour Konzept verhilft der bewussten Inszenierung von Interaktionen.

From Good to Great UX Motion Tips

© Issara Willenskomer
18

Animation Principles

Far Far Away?

Wer sich um Motion in Design kümmert, kommt um den Grundkurs in Sachen Bewegung nicht drum herum.

Walt Disney's Schule hilft sich eine dynamische Grundlage zu schaffen und die Grundfehler schlechter Animation zu verhindern.

Diese Grundprinzipien sind aber für Animationsfilme gedacht und somit auch etwas ausserhalb des Anwendungsgebietes von User-Interactions.

Diese Grundlagen sind erst der Anfang eines sich öffnenden Universums.

There is more to come.

Design Fundamentals

Eine Reise durch eine sich stetig veränderbare Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.

Scroll Snap
On
Off