Web

Techniken und Umsetzung von Context-Shifting UX

Context-Shifting im Webdesign
1 Kommentar

Den meisten dürfte das folgende Problem bekannt sein: man arbeitet gerade konzentriert an einer wichtigen Aufgabe, wenn der Chef oder Kollege direkt mit einer neuen Aufgabe daherkommt, die doch bitte direkt jetzt erledigt werden möchte – auch wenn man mit der anderen noch gar nicht fertig war. Das ist allerdings nicht nur meist frustrierend, sondern oft auch eine große Zeitverschwendung, weil alles einfach länger dauert.

Dieses sogenannte Context-Shifting ist allerdings nicht nur im Arbeitsalltag ein großes Problem, auch im UX-Design spielt es eine immer wichtigere Rolle. Viele Websites folgen mit ihrem UI mittlerweile den gleichen Pattern, weil sie für den Großteil der User leicht nachzuvollziehen sind und sie sich bereits daran gewöhnt haben. Ändert man aber die Platzierung von einzelnen UI-Elementen, wenn der User mit ihnen interagiert, bedeutet das, dass er sich an eine neue Ansicht gewöhnen muss.

Sarah Drasner nennt diese Art von Interaktionen „Context-Shifting UX“ und zeigt in ihrem Artikel The Importance of Context-Shifting in UX Patterns, mit welchen Techniken eine solche Änderung der Element-Platzierung besonders fluide und intuitiv umgesetzt werden kann.

IT Security Summit 2019

Sichere Logins sind doch ganz einfach!

mit Arne Blankerts (thePHP.cc)

Hands-on workshop – Hansel & Gretel do TLS

mit Marcus Bointon (Synchromedia Limited)

Techniken zur Umsetzung von Context-Shifting UX

Das menschliche Gehirn nimmt vor allem Dinge wahr, die sich bewegen. Im Webdesign sind daher Animationen ein gutes Mittel, um den User auf ein bestimmtes Element aufmerksam zu machen. Wie so oft im Webdesign gilt aber auch hier: weniger ist mehr und „subtlety is key“. Damit eine User-Interaktion fluider und intuitiver erscheint, spielt vor allem die Platzierung eines Elements auf der Website eine wichtige Rolle. Mithilfe verschiedener Techniken lässt sich die Änderung der Element-Platzierung bei der entsprechenden User-Interaktion beispielsweise umsetzen und gleichzeitig für eine gute User Experience sorgen:

  • Revealing
  • Morphing
  • Isolation

Während alle Techniken zwar auch für sich selbst genommen funktionieren, entfalten sie ihre wahre Wirkung allerdings erst in ihrer Kombination miteinander. Drasner erklärt die einzelnen Methoden folgendermaßen:
1.

Revealing


Jedes Element, das plötzlich aus dem Nichts auf dem Bildschirm auftaucht, hat das Potenzial, ein Unwohlsein beim User hervorzurufen. Deswegen sind gerade Modals bei vielen Usern unbeliebt. Wird das Modal aber auf eine subtilere Art und Weise enthüllt – etwa durch dessen Erweitern, Skalieren oder Umdrehen – bieten sich für Webdesigner plötzlich viele neue Möglichkeiten, den User von einem Modal-Status zum anderen zu begleiten.

Solche Enthüllungsstatus sind vor allem dann nützlich, wenn die Änderung eines Elements möglichst nahtlos erscheinen soll – auch wenn im Hintergrund auf Lazy-Loading-Techniken zurückgegriffen wird, um für eine bessere Performance zu sorgen.
2.

Morphing


Ein Element in ein anderes umzuwandeln, ist wohl eine der visuell eindeutigsten Techniken, mit der Elemente verändert werden können – und gleichzeitig auch eine der entspanntesten für das Auge des Users. Umsetzen lässt sich ein solcher Morphing-Effekt zum Beispiel mit SVG oder CSS, wobei beides seine Vor- und Nachteile hat. Vor allem in der Kombination mit der Revealing-Technik lassen sich so effektvolle UI-Animationen erstellen, bei denen das User Interface auf den Aufruf durch ein Klick- oder Touch-Event erscheint.
3.

Isolation


Egal, wie gründlich man bei seinem UX-Design auch arbeitet, kaum ein User schafft es, seinen Fokus unverwandt auf das User Interface zu richten. Das ist ganz natürlich, denn unsere Augen bewegen sich hin- und her und erstellen dabei eine Art dreidimensionale mentale Karte, bei der sie sich vor allem auf besonders eindrückliche Punkte fokussieren. Dieses Phänomen nennt sich Saccade, und Webdesigner können es sich leicht in ihrem Design zu Nutze machen.

So lässt sich der Umfang der zu betrachtenden Elemente reduzieren und die Aufmerksamkeit des Users mithilfe von Designänderungen auf die wichtigsten Elemente lenken. Dabei werden einzelne Bereiche hervorgehoben, während andere eher in den Hintergrund rücken – ohne dabei jedoch vollständig aus dem Design zu verschwinden.

Ohne geht es nicht: der richtige Style

Wie bereits erwähnt, entfalten die vorgestellten Techniken ihr volles Potenzial erst, wenn man sie kombiniert. Dabei ist aber auch der richtige Style nicht außer Acht zu lassen, denn ohne den geht es nicht. So müssen die UI-Animationen zum gesamten Design passen, erklärt Drasner:

The motion language in context-shifting has to be married with the rest of the design. If it didn’t, it would seem out of place.

Ebenso trägt der Style einer Animation dazu bei, wie die Context-Shifting-Aktion vom Gehirn des Users wahrgenommen wird. Hat man beispielsweise eine Website, bei der alle Änderungen an Elementen eher linear erfolgen, fällt eine Animation, die schwungvoll auf dem Display aufspringt, deutlich mehr ins Auge.

Auch Drag-and-Drop-UX-Pattern lassen sich unter einem Context-Shifting-Gesichtspunkt umsetzen. Das erklärt Drasner etwa folgendermaßen:

Rather than simply selecting an item and having it transition before the viewer’s eyes, interconnectivity between states of a UI can be reinforced very strongly when the user themselves are the one that carry the action forward.

Element-Platzierung vs. Animation

Nahtloses Context-Shifting kann aber nicht nur mit Animationen erreicht werden, sondern auch mithilfe eines durchgeplanten Platzierens von Objekten. Am verständlichsten ist dabei natürlich das Platzieren von Elementen nahe beieinander, etwa in einem einklappbaren Navigationsmenü.

Was aber einfach klingt, kann schnell kompliziert werden und bedeutet in vielen Fällen zunächst eine Neuorganisation des Designs. Idealerweise wird für das UX-Design bereits bedacht, wie User üblicherweise eine Seite benutzen und wie die Navigation der eigenen Website aussehen soll.

Generell empfiehlt Drasner aber keine Placement-only-Implementierung von Context-Shifting, weil Webdesigner dabei schnell Gefahr laufen, das UI zu einer Art Puzzle zu machen, bei dem die Interaktion abgehakt und stockend erfolgt, weil die einzelnen Elemente aussehen, als gehörten sie nicht zueinander.

Context-Shifting mit vielen Facetten

Context-Shifting gibt es auch im Webdesign in vielen Facetten. So ist der Übergang von einer Ansicht in eine andere nicht das einzige wichtige Context-Shifting-Verhalten. So gibt es noch andere Aktionen, die dem User symbolisieren, dass sich auf der Website gerade etwas tut – oder noch tun wird. Einige Beispiele dafür sind etwa:

  • Die Veränderung anderer Kontexte einer Seite durch ein Dropdown-Menü
  • Ein Lade-Status
  • Pressen eines Buttons
  • Verweigerung des Logins
  • Einreichung eines Formulars, die noch nicht abgeschlossen ist
  • Speichervorgang

All das sind keine großen Veränderungen, trotzdem ist es ratsam, sie dem User mithilfe von Context-Shifting anzuzeigen. Ob man dabei nun eine einzelne Technik nutzt oder mehrere Techniken kombiniert, bleibt dem Webdesigner selbst überlassen; es kommt auch immer auf das Projekt an, welche Umsetzungsmöglichkeiten gewählt werden sollten.

Die vorgestellten Techniken sind dabei aber noch längst nicht alles, was Context-Shifting zu bieten hat. Context-Shifting spielt beim Erstellen von intuitiven Designs eine immer wichtigere Rolle – insbesondere, weil UI-Designs schnell langweilig werden, wenn sie zu oft wiederholt werden. Dazu erklärt Drasner abschließend:

There is a lot of space between humdrum hide and show and a confusing popup zooming around the screen. There is space for invention, where thoughtful design meets interactivity.

IT Security Summit 2019

Sichere Logins sind doch ganz einfach!

mit Arne Blankerts (thePHP.cc)

Hands-on workshop – Hansel & Gretel do TLS

mit Marcus Bointon (Synchromedia Limited)

Aufmacherbild: 3d render of Tetris Shelf Unit on a green wall von Shutterstock / Urheberrecht: Dandesign86

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

1 Kommentar auf "Context-Shifting im Webdesign"

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] Das sogenannte Context-Switching reißt einen jedoch immer wieder aus der vorliegenden Aufgabe und dem Workflow und es dauert oft einige Zeit, bis man sich wieder auf die anstehenden Prozesse konzentrieren kann. Allerdings kann man meist – insbesondere, wenn man in größeren Teams arbeitet – auch nicht einfach seine Kopfhörer aufsetzen und ein „Bitte nicht stören“-Schild sichtbar auf dem Tisch platzieren, denn in jedem Team gibt es Abhängigkeiten zwischen den einzelnen Teammitgliedern, die sich nicht ignorieren lassen. […]

X
- Gib Deinen Standort ein -
- or -