Die Bedeutung von Kontextwechseln in UX-Mustern

Hatten Sie schon einmal einen Arbeitstag, an dem Sie ständig mit einer neuen Aufgabe konfrontiert wurden, während Sie sich noch in die aktuelle einarbeiteten? Im besten Fall ist es störend, im schlimmsten Fall völlig frustrierend und zeitraubend. In den letzten Jahren haben Arbeitgeber großer Unternehmen begonnen, die Kosten für Kontextwechsel zu berücksichtigen – die Zeit, die benötigt wird, um das Gehirn auf eine andere Aufgabe umzustellen, summiert sich, verursacht Frustration bei den Mitarbeitern und kostet somit Geld. Es liegt nahe, dass die Benutzererfahrung auf einer Website genauso funktioniert.

Jedes Mal, wenn ein neuer Benutzer Ihre Website besucht, tut er dies mit einer gewissen Vorsicht. Aus diesem Grund verwenden alle Websites im Laufe der Zeit die gleichen Muster. Zum Beispiel weiß man im Allgemeinen, wie eine Gruppe von Radiobuttons funktioniert. Sie geben Ihren Benutzern eine Interaktion, die sie bereits verstehen. Aber viele große Websites bedenken nicht, dass Sie von Ihrem Benutzer verlangen, sich wieder an diese neue Ansicht zu gewöhnen, indem Sie die Platzierung von Elementen in der Benutzeroberfläche bei jeder Interaktion komplett ändern. Dieser Mangel an Kontext ist ein Anti-Muster: Wir zeigen dem Benutzer nicht auf elegante Weise, was sich geändert hat und warum.

Die Assoziationen von Raum, Zeit und Platzierung können dazu beitragen, dass eine Interaktion flüssiger und intuitiver erscheint. Es muss nicht übertrieben sein. Denken Sie an klare, minimalistische UI-Designs. Sie können einfach zu navigieren sein und sehr elegant aussehen, aber das bedeutet nicht, dass sie einfacher zu erstellen sind.

Geben wir diesen Interaktionen, die die Platzierung ändern, einen Namen: Context-Shifting UX. Dann versuchen wir, sie mit einigen Beispielen und Techniken zu entmystifizieren.

Bevor wir uns mit Lösungen beschäftigen, ist es wichtig zu beachten, dass jede dieser Techniken übertrieben sein kann. Unser Gehirn (und damit die meisten Lebewesen) hat sich so entwickelt, dass es besonders auf etwas in Bewegung achtet. Diese evolutionäre Eigenschaft dient unserer Sicherheit und Wachsamkeit. Allerdings wird der Teil Ihres Gehirns, der instinktiv Adrenalin für das Überleben ausschüttet, dann ausgelöst, wenn sich etwas Unerwartetes bewegt. Animation ist fantastisch! Ohne sie ist das Web eine statische, langweilige Kiste. Aber wenn es um UX-Animationen geht, ist Subtilität der Schlüssel.

Die Stärke der meisten Techniken, die wir behandeln werden, liegt in ihrer Kombination. Im gesamten Artikel werde ich dies mit ergänzenden Ansätzen wie dem folgenden Pen veranschaulichen. Es wird empfohlen, die vollständige Demo anzusehen.

Siehe den Pen map 30 von Sarah Drasner (@sdras) auf CodePen.

Offenlegung

Stellen Sie sich ein modales Fenster vor, das sich beim Klicken öffnet. Alles, was wir ohne Vorwarnung auf den Bildschirm projizieren, kann Unbehagen verursachen. Modale Fenster sind wirkungsvoll, da sie einen dominanten und aufmerksamkeitsstarken Zustand haben, werden aber oft missfallen, teilweise weil sie so jarring sein können.

Wenn wir das modale Fenster auf nuanciertere Weise offenlegen können, zum Beispiel durch Erweitern, Skalieren oder Umklappen, schaffen wir plötzlich die Möglichkeit, unsere Benutzer von einem Zustand zum nächsten zu führen. Wir erhalten genauso viel Aufmerksamkeit wie ein jarring modales Fenster, oder vielleicht sogar mehr, weil unser Gehirn so entwickelt ist, dass es Bewegung wahrnimmt.

Offenlegende Zustände (betrachten Sie ein modales Fenster als einen „Zustand“) sind besonders nützlich, da wir einige Tricks der Fingerfertigkeit anwenden können, die alles sehr schnell erscheinen lassen. Wir können den ausgeblendeten Zustand lazy-loaden, nachdem der Rest der Seite fertig ist, aber ihn ruhend und pausiert halten, sodass er leicht aufgerufen werden kann, wenn er von einem Auslöser wie einer Schaltfläche oder sogar einem Scroll-Ereignis aufgerufen wird. Dies hat das Potenzial, diese Technik nahtlos und intuitiv erscheinen zu lassen. Ich bin nicht die einzige Person, die UX und offenlegende Zustände in Animationen berücksichtigt. Schauen Sie sich auch diesen großartigen Artikel von Val Head auf A List Apart an.

Morphing

Eine visuell offensichtliche Übergangstechnik ist das Morphing. Wenn Sie von einem Zustand in einen anderen gelangen müssen, ist die einfachste Sache, die Sie tun können, um den Übergang zu glätten, eine Form in eine andere zu verwandeln. Es kann ein sehr schöner Effekt sein!

Sowohl SVG als auch CSS sind gute Optionen für diese Art von UI-Animationen. Ich habe aus der Arbeit mit beiden festgestellt, dass jede ihre Stärken und Schwächen hat. CSS kann leicht von rund zu quadratisch und wieder zurück mit border-radius überblenden. Es kann auch große Mengen von Skalierungstransformationen anmutig verarbeiten, während SVG, über wenige Vielfache hinaus, pixelig erscheint, bevor es sich erholt. SVG ist jedoch für das Zeichnen konzipiert. Es eignet sich gut für komplexe Formen. Sie können Pfad- oder sogar Formdaten mit JavaScript überblenden, früher mit SMIL (wegen eingestellter Unterstützung nicht mehr empfohlen) und bald mit CSS mit einigen neuen SVG Styling Properties im Entwurfsstadium beim W3C. Snap.svg ist bekannt für das anmutige Überblenden von Pfaddaten mit ähnlicher Anzahl von Punkten, und GSAP bietet ähnliche Funktionen mit seinem Attr-Plugin. Sie können auch ein SVG so aussehen lassen, als ob es sich selbst zeichnet, für Morphing-Effekte, indem Sie stroke-dashoffset animieren, wie Sie im Demo sehen, wenn der Schließen-Button verschwindet.

Die Kombination von Effekten bedeutet, dass die Benutzeroberfläche auf Abruf erscheinen kann.

Alles ist bereits auf der Seite und wartet darauf, aktiviert zu werden.

Isolation

Menschen halten ihren Fokus nicht konstant auf Ihrer Benutzeroberfläche, egal wie sauber Ihre UX ist. Augen bewegen sich in einem Phänomen namens Sakkade, wodurch eine dreidimensionale mentale Karte einer Szene erstellt wird, während sie sich auf interessante Punkte konzentriert. Wenn man bedenkt, dass Ihre Website eine breite Nutzerbasis idealerweise in kleinere Bereiche je nach Interesse leitet, ist es hilfreich, den Umfang dessen, was sie scannen, einzugrenzen.

Hier illustrieren wir, wie das Design sich anpasst, um den Benutzer zu leiten, sobald er seinen relativen Interessenpfad bestimmt hat, wodurch er weniger Bereiche zum Scannen hat und klarer wird, wo seine Aufmerksamkeit liegen sollte (siehe vollständigen Pen hier)

Siehe den Pen map 30 von Sarah Drasner (@sdras) auf CodePen.

Stil

Jede dieser Techniken muss mit dem passenden Stil kombiniert werden. Ich habe bereits darüber geschrieben, wie man angemessene Stil- und Markenkommunikation innerhalb einer Bewegungsdesignsprache erreicht. Der Morphing/Revealing Pen, den ich zuvor gezeigt habe, hat ein Sinus/einfaches Kurven-Easing. Vergleichen Sie dies mit dem hüpfenden Easing in diesem Pen

Siehe den Pen map 30 von Sarah Drasner (@sdras) auf CodePen.

Das hüpfende Easing verleiht den Dingen einen ausdrucksstärkeren und elastischeren Ton. Sowohl das obige Beispiel als auch das Kartenbeispiel ergänzen die Farbpalette und den Typ des Designs. Die Bewegungssprache im Context-Shifting muss mit dem Rest des Designs verheiratet sein. Wenn nicht, würde sie fehl am Platz wirken. Stellen Sie sich das hüpfende Gefühl im schlanken Kartendesign vor – das wäre seltsam. Wir haben in jedem Beispiel unterschiedliche Context-Shifting-Techniken verwendet, um die Markenbotschaft der Website zu unterstützen.

Der Stil kann auch die Art und Weise verändern, wie die Context-Shifting-Aktion in unseren Köpfen registriert wird. Dieses klebrige Menü von Lucas Bebber ist eine einprägsamere und einzigartigere Art, zu registrieren, wohin Elemente gehen und wo sie hingegangen sind, als andere Möglichkeiten, dieselben Anfangs- und Endzustände zu erreichen. Einprägsam für Kreativität und Stil zu sein ist immer gut. Lucas' Reihe von Pens, die diese relativ einfache Technik demonstrieren, haben zusammen fast 320.000 Aufrufe!

Der relative Stil des Easing kann auf die gleiche Weise verwendet werden, wie man an eine Farbpalette denkt. Die meisten Unternehmen verwenden Akzentfarben sparsam, um eine vollständige Farbpalette auszugleichen und auf bestimmte Schlüsselpunkte aufmerksam zu machen

Nehmen wir an, alle Easing-Elemente auf Ihrer Website sind eher linear, und etwas, auf das Sie Aufmerksamkeit lenken möchten, schnappt oder hüpft auf den Bildschirm. Das hebt es in seiner Bedeutung hervor. In der früheren Demo war das einzige Bounce-Easing auf dem Häkchen, nach der Bestätigung des Erfolgs.

tl.fromTo(check, 0.2, {
    scale: 0,
    rotation: -30
  }, {
    scale: 1,
    rotation: 0, 
    transformOrigin: "50% 50%",
    // ease out with back ease which has a single exaggerated bounce
    ease: Back.easeOut
    // begin according to a relative label
  }, "done+=7.1");

Dies ist nur ein Beispiel für diese Art von Logik in der gesamten Interaktion.

Drag and Drop

Man lernt mehr durch Tun. Das ist ein altes Sprichwort, aber ein zutreffendes. Lassen Sie uns diese alte Weisheit anwenden und sie mit Blick auf Kontextwechsel auf unsere UX-Muster übertragen.

Anstatt einfach ein Element auszuwählen und es vor den Augen des Betrachters übergehen zu lassen, kann die Interkonnektivität zwischen Zuständen einer Benutzeroberfläche sehr stark verstärkt werden, wenn die Benutzer selbst die Handlung vorantreiben. Betrachten Sie diese sehr gut gemachten Drag and Drop Interactions von Mary Lou (Manoela Ilic) auf Codrops.

Die Schubladen fahren heraus und werden weggeräumt, wenn der Benutzer seine Auswahl getroffen hat. Es wäre schwierig, ein Teil in ein separates Fach zu bewegen, ohne dass sich der Benutzer daran erinnert, dass er es dort platziert hat – viel schwieriger, als wenn es eingeklappt oder einfach von selbst verschwunden wäre.

Platzierung

Sie stellen vielleicht fest, dass Sie nicht so begeistert von Animationen sind wie ich. Die Ermöglichung eines nahtlosen Kontextwechsels kann auch ohne Animation erreicht werden, stattdessen durch eine durchdachte Platzierung von Objekten. Der klarste Weg ist einfach, Elemente nahe beieinander zu platzieren. Hier ist ein Beispiel dafür in Bezug auf collapsing navigation.

Dies hat das Potenzial, komplexer zu sein, als es klingt. Bei Dutzenden oder mehr Links und Interaktionen auf einer Seite erfordert die Nähe des nächsten Zustands zum vorherigen Übergang eine sorgfältige Planung und könnte eine Umgestaltung des Designs bedeuten.

Jeder gute UX-Benutzerfluss berücksichtigt die relative Flugbahn eines Benutzers, der die Website durchläuft. Diese Art von Organisation sollte auf etwas wie einer Story Map aufgebaut sein, auf der dies bereits berücksichtigt ist. Eine reine Implementierung von Kontextwechseln durch Platzierung ist am wenigsten empfehlenswert, da sie weniger formbar ist, wenn UI-Elemente eher wie Puzzleteile werden, und aufgrund ihrer mangelnden Flüssigkeit die Platzierung der Elemente brüchiger wird.

Dezente Hinweise

Der Wechsel von einer Ansicht zur anderen ist nicht das einzige wichtige Kontextwechsel-Verhalten. Einige symbolisieren etwas, das passiert ist und passieren wird. Kleine Beispiele dafür sind

• Eine Dropdown-Auswahl, die andere Kontexte auf der Seite ändert
• Ein Ladezustand
• Ein gedrückter Knopf
• Eine abgelehnte Anmeldung
• Ein Formular wird gesendet, aber noch nicht verarbeitet
• Etwas wird gespeichert

Wenn diese Art von Änderungen auftreten, macht es vielleicht keinen Sinn, eine große Änderung vorzunehmen, aber dennoch zu signalisieren, dass sich der Zustand der Seite geändert hat oder sich im Übergang befindet – und so einen eigenen Kontext zu schaffen. In Anbetracht der zuvor besprochenen Techniken könnten wir uns fragen

• Fesseln wir den Betrachter während des Übergangszustands, oder ist es nur ein kleines Mittel, um zum Endzustand zu gelangen?
• Wird dieser Übergangszustand für andere Instanzen wiederverwendet? Muss er so gestaltet sein, dass er flexibel genug für mehrere Platzierungen und Fehlerbedingungen ist?
• Muss die Bewegung die Aktivität ausdrücken? Ein Beispiel dafür wäre, wenn der Benutzer etwas speichert, das noch nicht abgeschlossen ist, in welchem Fall eine Anthropomorphisierung von „Warten“ helfen würde, dies zu kommunizieren.

Die Beantwortung von Fragen wie dieser, bevor das Design umgesetzt wird, hilft uns zu erkennen, wie wir wortlos mit unserem Publikum kommunizieren können.

---

Auch hier sind diese Techniken in Kombination stärker. Indem ich diesen Artikel schreibe, schlage ich nicht vor, nur das zu verwenden, was ich dargelegt habe. Ganz im Gegenteil, Kontextwechsel ist ein grundlegender Bestandteil intuitiven Interface-Designs, und wir haben nur die Spitze des Eisbergs erreicht. Der Zweck der detaillierten Darstellung jedes einzelnen ist es, den Leuten einen Ausgangspunkt zu bieten, damit sie sich experimentierfreudig fühlen. Benutzeroberflächendesigns werden langweilig, wenn sie redundant sind. Es gibt viel Raum zwischen dem eintönigen Verstecken und Zeigen und einem verwirrenden Pop-up, das über den Bildschirm zoomt. Es gibt Raum für Erfindungsgabe, wo durchdachtes Design auf Interaktivität trifft.