Die Gestaltung einer Benutzeroberfläche (UI) und die Schaffung einer optimalen Benutzererfahrung (UX) sind entscheidend für den Erfolg jeder digitalen Anwendung. Der richtige Einsatz von Transitions kann dabei spannende Möglichkeiten bieten, um eine intuitive Benutzererfahrung zu schaffen. In diesem Beitrag stellen wir – ein Team aus den Bereichen Frontend und UI/UX bei inovex – einen praxisorientierten Leitfaden am Beispiel einer datengetriebenen Anwendung vor. Erfahre, wie du mit durchdachten Transitions und bewährten Designprinzipien die Interaktion in deiner Anwendungen optimieren kannst. Im Folgenden präsentieren wir konkrete Best Practices, die du in deinen Projekten anwenden kannst, um eine ansprechende Benutzererfahrung zu schaffen.„Auf dem CSS-Day haben wir Interessantes über die View-Transition-API und Design-Patterns erfahren. Wollen wir zusammen passende Use Cases finden, um das Konzept verständlich zu erklären?“
Das war der glückliche Anfang einer spannenden Kollaboration zwischen Frontend-Entwicklung und UX-Design.
UI/UX Best Practices
In unserem Artikel „Motion im UX-Design – Ein praktischer Guide“ haben wir bereits die Grundlagen effektiver UX-Prinzipien im Zusammenhang mit UX-Motion beleuchtet. In diesem Leitfaden präsentieren wir verschiedene Transition-Beispiele anhand eines konkreten Use Cases.
Um die geeignete Animation für einen bestimmten Anwendungsfall zu finden, ist es zunächst wichtig, den Kontext und die Zielgruppe der Anwendung zu verstehen. Anschließend müssen die Ziele der Animation klar definiert und die passenden Bewegungseffekte (Timing & Easing) ausgewählt werden. Dieser Prozess erfordert eine individuelle Evaluation für jeden Anwendungsfall, um eine optimale Nutzer:innenerfahrung zu gewährleisten. Dieser Bereich wird in der Softwareentwicklung oft vernachlässigt oder unzureichend umgesetzt. Es gibt keine allgemeingültigen Regeln oder Schemata, da die Auswahl der Transition stark von den Nutzer:innen und deren mentalen Modellen des Einsatzszenarios abhängt.
Use Case
Stell Dir vor, Du betreibst einen hippen Kaffeeladen namens byte & brew und möchtest ein Kassensystem, das es dir ermöglicht, Bestellungen als Historie zu verwalten und Details zu jedem Auftrag anzeigen zu lassen.
Im folgenden stellen wir dir 3 Umsetzungs-Alternativen vor. Sie sind mit HTML, CSS und bewusst mit Vanilla JavaScript implementiert, um grundlegende native Browser-Funktionalitäten aufzuzeigen.
Beispiel: Überlappende Detailansicht
Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.
https://inovex.github.io/blog-design-patterns/overlapping/index.html
Eine überlappende Detail-Ansicht kann sinnvoll sein, wenn folgende Punkte wichtig sind:
- Kontextbewahrung: Nutzer:innen müssen die Detailinformationen einsehen, ohne den Kontext der Hauptanwendung zu verlieren. Ein Overlay ermöglicht es den Nutzer:innen, die Detailinformationen zu überprüfen und dann schnell zur Hauptansicht zurückzukehren.
- Fokussierung: Wenn die Aufmerksamkeit der Nutzer:innen auf spezifische Informationen gelenkt werden soll, kann ein Overlay hilfreich sein, um Ablenkungen durch andere UI-Elemente zu minimieren.
Einsatz: E-Commerce-Websites verwenden oft seitlich einblendbare Panels für Filter und Einstellungen. Der User kann die Filter einblenden, die gewünschten Optionen auswählen und das Panel dann wieder ausblenden.
Beispiele: Analyse-Tools wie z. B. DataDog verwenden häufig die überlappende Detail-Ansicht für ihre Logs. In mobilen Ansichten wie bei Amazon und eBay Kleinanzeigen z. B. nutzen solche überlappenden Panels, um Nutzer:innen zu ermöglichen, ihre Suchergebnisse zu verfeinern, ohne die aktuelle Seite zu verlassen.
UX-Fazit: Das Prinzip der Fokuslenkung stellt sicher, dass Nutzer:innen ihre Aufmerksamkeit auf die wichtigsten Inhalte richten können. Durch das Überblenden wird die Detailseite hervorgehoben, was die Benutzerführung verbessert und eine klare Informationshierarchie schafft.
(UX-Prinzip: Fokus & Aufmerksamkeit)
Technische Umsetzung: In dem dargestellten Beispiel wird ein Raster-Layoutsystem, bestehend aus Grid und Subgrid, für die Anordnung der Tabellenelemente verwendet. Die Inhalte der Seitenleiste werden mit Vanilla JavaScript erstellt, wobei das HTML-Element <dialog> zur Anwendung kommt. Für die Animationen der Benutzeroberfläche werden hauptsächlich CSS-Animationen und Transitions genutzt. Zusätzlich verwenden wir Container-Queries, um die Inhalte abhängig der eigenen Element-Breite anzupassen und dem User so in jeder Layout-Konstellation die maximale Übersicht geben zu können.
Beispiel: Verdrängende Detailansicht
⚠️ Vorsicht: Funktioniert zum Stand der Erstellung nur in Chromium-basierten Browsern
Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.
https://inovex.github.io/blog-design-patterns/condensing/index.html
Eine verdrängende Detailansicht kann sinnvoll sein, wenn folgende Punkte gegeben sind:
- Dauerhafte Sichtbarkeit: Wenn User häufig zwischen der Hauptansicht und den Detailinformationen wechseln müssen, ist es sinnvoll, die Details direkt in die Hauptansicht zu integrieren, um den Wechsel zu erleichtern.
- Vergleich von Daten: Wenn Nutzer:innen Details verschiedener Elemente vergleichen müssen, ist eine verdrängende Ansicht vorteilhaft, da sie die gleichzeitige Sichtbarkeit mehrerer Detailbereiche ermöglicht.
- Raumoptimierung: Bei Anwendungen, die auf Geräten mit begrenztem Bildschirmplatz verwendet werden, kann eine verdrängende Ansicht den verfügbaren Raum effizienter nutzen, um beide Ansichten beibehalten zu können.
Einsatz: Beim Umschalten von Schaltern (Toggles) oder beim Ändern des Status von Elementen (z. B. Lesezeichen setzen/entfernen).
Beispiel: Apps wie Spotify, Google Mail, Jira und Slack verwenden verdrängende Detailansicht, um schnell visuelles Feedback zu geben, wenn User zwischen Inhalten wechseln. So können die Apps Detailinformationen zu bspw. den Künstler:innen oder einem weiteren Song einblenden.
UX-Fazit: Unnötige Schritte beim Öffnen und Schließen von Overlays können vermieden werden, indem der Fokus zur Detailseite verschoben wird und der Kontext in komprimierter Form beibehalten wird, wird die Effizienz der Informationsaufnahme verbessert.
(UX-Prinzip: Effizienz | DIN EN ISO 9241-11:2018)
Technische Umsetzung: In diesem Beispiel wird ein Grid-Layout einschließlich Subgrid-Funktionalität für die visuelle Aufbereitung der Tabelle genutzt. Die Seitenleiste wird mit purem JavaScript (Vanilla JS) dynamisch befüllt. Für die Animation der Seitenleiste kommt die View Transition API zum Einsatz. Anpassungen basierend auf dem verfügbaren Platz werden mit der CSS @container Regel realisiert.
Beispiel: Platzreservierende Detailansicht
Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.
https://inovex.github.io/blog-design-patterns/reserved/index.html
Eine platzreservierende Detailansicht kann sinnvoll sein, wenn folgende Punkte eine Rolle spielen:
- Benutzer:innenfreundlichkeit und Konsistenz: Eine klare und konsistente Struktur sorgt dafür, dass Benutzer:innen leicht verstehen, wo sie Detailinformationen finden. Dies erhöht die Vorhersehbarkeit und erleichtert die Nutzung.
- Kontinuität und Kontext: Nutzer:innen behalten den Kontext der Hauptansicht bei, während sie Details einsehen. Dies verhindert, dass Nutzer den Überblick verlieren, wenn sie zwischen Haupt- und Detailansicht wechseln.
Einsatz: In Desktop Apps, wenn User schnell zwischen verschiedenen Listeninhalten wechseln müssen, ohne lange Wartezeiten oder aufwendige Animationen. Dies kann beispielsweise beim Wechseln zwischen verschiedenen Tabs oder Listen in einer App verwendet werden.
Beispiel: Messaging Apps wie WhatsApp oder Telegram oder Mail Services wie macOS Mail verwenden einen reservierten Bereich für Detailansicht, um schnelle Wechsel zwischen Chats, Anrufen und Einstellungen zu ermöglichen.
UX-Fazit: Die in dem reservierten Platz eingeblendeten Inhalte verlagern den Aufmerksamkeitsfokus auf die Detailansicht, wodurch diese wichtiger erscheint. Ein fest definierter Bereich für Detailansichten erleichtert den Usern das Auffinden detaillierter Informationen, was die Vorhersehbarkeit und Nutzer:innenzufriedenheit erhöhen kann.
(UX-Prinzip: Selbstbeschreibungsfähigkeit | DIN EN ISO 9241-110:2010)
Technische Umsetzung: In diesem Beispiel wird für die Darstellung der Tabelle ein Rasterlayout (Grid) mit Unterstützung von Unter-Rastern (Subgrid) verwendet. Für das Befüllen der Seitenleiste wird reines JavaScript (Vanilla JS) eingesetzt.
Fazit
Die Wahl des geeigneten Layouts und der passenden Transitions hängt stark von den spezifischen Anforderungen und Zielen der datengetriebenen Anwendung ab. Neben dem offensichtlichsten Grund, dem der Bildschirmgröße und dem damit einhergehenden Platz für Content, ist ein entscheidender Faktor die kontinuierliche Beobachtung des Nutzer:innenverhaltens und das Sammeln von Feedback, um die Nutzungserfahrung stetig zu verbessern. Nutzer:innenfeedback bspw. durch Usability-Tests, können wertvolle Einblicke liefern, die zur Optimierung der UI/UX-Entscheidungen beitragen und sicherstellen, dass die entwickelte Oberfläche den Bedürfnissen und Präferenzen der Nutzer:innen entspricht.
Darüber hinaus ist die Berücksichtigung etablierter Interaktionsprinzipien, wie sie in der DIN-Norm (DIN EN ISO 9241 Gebrauchstauglichkeit & Ergonomie interaktiver Systeme) und den Usability-Heuristiken nach Jakob Nielsen festgelegt sind, entscheidend. Diese Prinzipien und Normen bieten einen Leitfaden für die Bewertung der Qualität und Benutzer:innenfreundlichkeit von Transitions und tragen zur Entwicklung eines qualitativ hochwertigen UI-Designs. Sie helfen dabei, visuell ansprechende und funktionale Übergänge zu gestalten, die den Erwartungen der Benutzer gerecht werden und eine positive Benutzererfahrung sicherstellen.
Wichtig sind hier immer beide Sichtweisen der Entwickler:innen (Was ist gut umsetzbar?) und der UX-Designer:innen (Was ist für den Use Case sinnvoll?) entscheidend, um die Potentiale aus beiden Bereichen in der Ausarbeitung auszuschöpfen.
Quellen:
Logo Kreation byte & brew. Made with ♥️ by inovex.
Mockup Kaffeebohnen Moodimage by berlionemore_contributor. Freepik.
Smashing Magazine. (29. Oktober 2013). Smart Transitions In User Experience Design. Abgerufen von https://www.smashingmagazine.com/2013/10/smart-transitions-in-user-experience-design/
Material Design. (n.d.). Applying Transitions. Aufgerufen von https://m3.material.io/styles/motion/transitions/applying-transitions
ISO. (2010). ISO 9241-210:2010 – Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems. Verfügbar über ISO Online Browsing Platform: ISO 9241-210:2010
ISO. (2018). ISO 9241-11:2018 – Ergonomics of human-system interaction — Part 11: Usability: Definitions and concepts. Verfügbar über ISO Online Browsing Platform: ISO 9241-11:2018
Nielsen, J. (1994). Enhancing the explanatory power of usability heuristics. Verfügbar über Nielsen Norman Group: Enhancing the explanatory power of usability heuristics
