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.
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.
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.
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.
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.
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.
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
12
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.
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.
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.
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
15
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.
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.
.svg)
