UX-Prinzipien für die Gestaltung komponentenbasierter Systeme

Webdesign ist ein Phänomen, das sich über Jahre hinweg mit einem sich wandelnden Paradigma von Designsystemen entwickelt hat. Um vielfältige digitale Produkte zu erstellen, die unter einem einzigen Dach zusammengeführt werden können, wurden in der jüngeren Vergangenheit komponentenbasierte Designsysteme eingeführt. Komponenten wie Karten (eine Kombination aus Text und Schaltflächen) und Formulare (eine Kombination aus Eingabefeldern und Schaltflächen) sind viel einfacher und effizienter zu warten und können Designs effektiv in großem Maßstab entwickeln und verwalten. Designer, Entwickler, Produktverantwortliche und Projektmanager nutzen dieses Konzept von Komponenten als Ableger des Atomic Design.

Komponenten (die aus zwei oder mehr Elementen bestehen) entstehen, wenn wir die Benutzeroberfläche in kleine, überschaubare Teile mit definierten Rollen zerlegen, die wiederum Seiten, Bildschirme usw. im Endstadium bilden. Dieser Ansatz, sich Schritt für Schritt der Fertigstellung eines individuellen Designs zu nähern, folgt einem hierarchischen Prozess mit sechs kategorialen Ebenen. Sie können Versionen für die responsiven Breakpoints jedes Projekts im Kontext des Designs erstellen, und eine gegenseitige Vereinbarung über jede einzelne kann vom Kunden eingeholt werden.

Komponentenbasierte Entwicklung (CBD)

Designsysteme beeinflussen das Erscheinungsbild des Endprodukts und die Varianten aller Eigenschaften. Wenn sie von Komponenten gesteuert werden, liegt der Fokus auf der Zerlegung des Designs in funktionale Blöcke, die Schnittstellen mit Methoden, Ereignissen und Eigenschaften darstellen. Mit dem Hauptziel, die Wiederverwendbarkeit von Komponenten zu gewährleisten, kapselt die komponentenbasierte Architektur Funktionalität und Verhalten eines Softwareelements in eine wiederverwendbare und selbstdeployierbare binäre Einheit.

Die Hauptziele von CBD sind:

• Kosten- und Zeiteffizienz beim Aufbau großer und komplexer Systeme. Bei der Entwicklung komplexer Softwaresysteme reduzieren die Standardkomponenten die Zeit drastisch.
• Die Qualität einer Komponente kann einen wichtigen Impuls für die Verbesserung der Softwarequalität geben.
• Die CBD-Systeme testen die Komponenten und nehmen die Herausforderung an, indem sie Fehler innerhalb des Systems erkennen.

Warum brauche ich ein komponentenbasiertes Designsystem?

Komponenten sollen eine bessere Zusammenarbeit zwischen Design und Entwicklung initiieren.

Mit kleinen, wiederverwendbaren Teilen können Komponenten Ihre Benutzeroberfläche mit besserer Konsistenz entwerfen und entwickeln. Es ist eine gängige Praxis bei Giganten wie Uber, Pinterest, Airbnb und Walmart, da sie durch ein komponentenbasiertes Designsystem Konsistenz in ihrer Benutzeroberfläche erreichen.

Lassen Sie uns die wichtigsten Vorteile untersuchen, die diese genannten Organisationen mit CBD-Systemen genießen möchten:

• Da Komponenten atomare Einheiten sind, können sie eine konsistente Erfahrung für die Wiederverwendbarkeit und Konsistenz von UI und UX schaffen, da sie im Laufe der Zeit aktualisiert werden können.
• Wenn große Komponenten aus kleineren Komponenten erstellt werden, sollte das Atomic Design verwendet werden, um ein Gleichgewicht zu erreichen, indem unerwartete Erfahrungen reduziert werden.
• Im Allgemeinen wird gesagt, dass Komponenten eine bessere Zusammenarbeit zwischen Design und Entwicklung initiieren.
• Schriftarten, Typografie, Primär- und Sekundärfarben sind die Designaspekte, die mit dem Komponentendesignsystem spezifiziert werden können.

Prinzipien des UX-Designs

Visuelle Hierarchie

Der Schlüssel zum ersten Eindruck ist die Platzierung und Anordnung von Elementen, die einen Gesamtüberblick über die Website geben, wobei der Fokus auf wichtigen Highlights liegt. Dieser Ansatz wird als visuelle Hierarchie bezeichnet, da er die Reihenfolge beeinflusst, in der unsere Augen eine Webseite scannen, indem er einen visuellen Kontrast zwischen Formen im Wahrnehmungsfeld erzeugt. Die verbesserte Auffindbarkeit durch die Nutzung optimierter Inhalte und deren Präsentation durch den Einsatz von Größe, Farbe, Kontrast und Ausrichtung vermittelt eine Struktur.

Zum Beispiel werden Überschriften als "Komponenten" oder "Module" betrachtet. Beim Erstellen einer Webseite können Sie horizontale Blöcke über Seiten hinweg anordnen oder vertikal in Seitenleisten oder auf mobilen Geräten stapeln.

Verwendung von Freiraum

Freiräume gelten als visuelle Hinweise.

Einer der am meisten beachteten Seiten für Design und Zeitlosigkeit, Apples Online-Präsenz, hat ein minimalistisches Design. Sie verwenden viel Freiraum und konzentrieren sich nur auf die Produkte. Die umsichtige Verwendung von Raum zwischen Absätzen und in den Rändern kann das Leseverständnis um bis zu 20 % erhöhen.

Die ideale Nutzung von Raum kann entstehen, indem man zusätzliche Details weglässt und kleinere und attraktive Kopien von Inhalten in verdaulichen Mengen platziert. Die Beibehaltung einer großzügig dimensionierten Schrift in einer breitenbeschränkten Spalte ergibt einen ruhigen visuellen Rhythmus.

Mentale Karten können helfen

Wenn Elemente auf einer Webseite zusammen gruppiert werden, vertiefen sie das Verständnis der Benutzer für den Inhalt. Dies führt zu einem zeilenweisen Lesen und trägt zu einem Gefühl der Orientierung innerhalb der Website bei. Hervorgehobene und definierte Inhaltsstrukturen haben die Fähigkeit, grobe Skizzen im Kurzzeitgedächtnis der Benutzer abzubilden. Eine Website sollte sich beim Navigieren von Punkt A nach B oder beim allgemeinen Scannen nicht belastend anfühlen. Eine geringere kognitive Belastung führt zu einer schnelleren Anpassungsfähigkeit und einem höheren Engagement und damit zu höheren Konversionen.

Nutzung aktueller Daten

Einer der Vorteile der komponentenbasierten Designpraxis ist die Möglichkeit, einen Master-Styleguide zu erstellen, der Elemente einer Webseite enthält. Diese Komponenten können als Referenz beim Erstellen eines zusätzlichen Teils oder einer ähnlichen Website verwendet werden. Entwickler und Designer müssen sie nicht jedes Mal neu erstellen. Dies ermöglicht auch Anpassungen während des Benutzertests, indem Möglichkeiten für Verbesserungen geschaffen werden.

Seien Sie konsistent

Websites sollten darauf abzielen, eine interaktive und konsistente Schnittstelle zu entwickeln.

Es beeinflusst die Art und Weise, wie Sie Ihre Webseiten bearbeiten, speichern, herunterladen oder hochladen. Die Bedeutung der Konsistenz wird für riesige Websites mit mehreren Rollen hervorgehoben. Eine Methode, um dieses Ziel zu erreichen, besteht darin, sich auf die Erstellung einer intuitiven Benutzeroberfläche anstelle von Dokumentation und Tutorials zu konzentrieren.

Seien Sie kontrollfreundlich

Während die Steuerelemente einer Website immer im Befehlsbereich des Entwicklers liegen, sollten die Benutzer das Gefühl haben, die Oberhand über sie zu haben, wenn sie durch Ihre Website browsen. Wenn sich ein Benutzer beispielsweise verirrt hat, sollte es eine Navigation geben, um durch die Hierarchie der Webseiten auf der Website zu scrollen. Sie sollten sich auch ihrer Handlungen bewusst sein, wenn ihnen Optionen zum Abmelden oder Abbrechen einer Aufgabe angeboten werden. Die Schaltfläche "Rückgängig" oder "Abbrechen" ist eine solche Steuerung, die Benutzer immer beim Schaufensterbummel suchen.

Immer Barrierefreiheit

Websites werden nicht nur erstellt, um das Internet mit einem weiteren Bündel von Webseiten zu horten. Sie werden von den Menschen, aber vor allem für die Menschen erstellt. Daher sollte das Design einer Webseite oder der gesamten Website die Vielfalt der Personen berücksichtigen, die darauf stoßen können. Das bedeutet ein inklusives Design, das sich auf die Beseitigung von Hindernissen für Menschen mit besonderen Bedürfnissen (Behinderungen) konzentriert. Richtlinien zur Barrierefreiheit sind daher eine Notwendigkeit für UX-Designer, die die Erfahrung für die Benutzerfreundlichkeit aller Benutzer verbessern.

Abschließende Worte

Ein Augenschmaus-Erlebnis erfordert ein nahtloses und flüssiges Design, das auf einer nahezu transparenten Website angeboten wird, die sich auf ihre Inhalte konzentriert. Viele Faktoren sollten beim Erstellen einer völlig neuen UX-Erfahrung für die Benutzer eine Rolle spielen. Designer und Entwickler tragen gemeinsam diese Verantwortung, um eine vollständige bahnbrechende Tour durch die Website zu liefern, die die Kreativität anregen kann, wenn es sich um eine komponentenbasierte Entwicklung handelt.