Steigern Sie Ihre UX mit einer klaren visuellen Hierarchie

Das Konzept der visuellen Hierarchie wird im Design angewendet, seit das Internet eine ferne Fantasie war, und es ist im modernen Produktdesign genauso wichtig wie in der Blütezeit der Printwerbung.

Die visuelle Hierarchie bestimmt die Reihenfolge, in der Personen Informationen auf einer Seite aufnehmen und verarbeiten, unabhängig davon, ob es sich um eine digitale oder gedruckte Seite handelt. Dies ist ein wesentlicher Bestandteil der Schaffung einer optimalen Benutzererfahrung.

Einfach gesagt, ein klares Gefühl der visuellen Hierarchie führt Menschen zu wichtigen Inhalten oder Aktionen. In einer Printwerbung wäre dies der Slogan, während es in einem digitalen Produkt eine Markenbotschaft oder ein primärer Aufruf zum Handeln sein könnte.

Es ist eine unglaublich nützliche Methode, um ein geordnetes und zielgerichtetes Kundenerlebnis zu schaffen und gleichzeitig die Chancen zu verbessern, ein strategisches Ergebnis zu erzielen.

Hier sind ein paar Schritte, die UX-Designer unternehmen können, um ein klares Gefühl der visuellen Hierarchie in digitalen Produkten zu erreichen und Kundenerlebnisse auf die nächste Ebene zu heben.

Definieren Sie UX- und Markenziele

Mit einer Vielzahl von Methoden definieren viele Produktteams bereits die UX-Ziele für jeden Abschnitt ihres Produkts.

Die Gestaltung der Definition von UX-Zielen durch Erfüllung der Kriterien für die SMART-Methodik ( spezifisch , messbar, umsetzbar , relevant , nachverfolgbar ) ist ein beliebter Weg, dies zu tun. Hier gibt es einen guten Artikel darüber.

Ebenso wichtig sind Markenziele. Diese spiegeln die übergeordneten Ziele des Unternehmens wider, sowohl aus Marken- als auch aus kommerzieller Sicht. Ein Beispiel für Markenziele für eine Landing Page für einen Automobilservice wäre: a) die Marke als Premium-Service zu etablieren und b) die Suche nach Autos zu fördern.

Der einfachste und effektivste Weg, die UX- und Markenziele der verschiedenen Phasen der Customer Journey zu dokumentieren, ist die Durchführung eines kollaborativen Visual-Hierarchie-Workshops.

Mit einem Wide-Canvas-Collaboration-Tool wie Milanote oder sogar Sketch können Sie die Prototyp-Bildschirme in grob chronologischer Reihenfolge anordnen. Laden Sie die wichtigsten Praktiker zu einem Online- oder physischen Treffen ein und stellen Sie sicher, dass sowohl die UX- als auch die Markenperspektive vertreten sind.

Geben Sie dann den Bildschirm frei (oder schließen Sie ihn an einen Monitor an) und beginnen Sie mit dem Kommentieren!

Dies startet den Prozess der Identifizierung der UX- und Markenziele für jeden Abschnitt des Kundenerlebnisses und setzt einen strategischen Workflow in Gang, der während des restlichen Designprozesses genutzt werden kann.

Ordnen Sie Aktionen und Inhalte für eine klare visuelle Hierarchie

Nachdem die UX- und Markenziele festgelegt sind, ist es an der Zeit, die entsprechende visuelle Hierarchie jeder Aktion oder jedes Inhaltselements zu definieren und diese als Referenz für die spätere Designarbeit zu dokumentieren.

Zunächst wird eine Taxonomie benötigt. Verwenden Sie am besten eine Skala von 1 bis 3 – 1 ist am wichtigsten, 3 am wenigsten.

Beginnen Sie unter Verwendung des zuvor beschriebenen Wide-Canvas-Formats gemeinsam mit dem Kommentieren des Prototyp-Layouts.

In diesem Beispiel gibt es ein UX-Ziel: „ Ich möchte mehr über den Service dieser Marke erfahren, um festzustellen, ob er meinem Budget, meinen Bedürfnissen und Vorlieben entspricht .“ Die Markenziele sind a) die Marke als Premium-Service zu etablieren und b) die Autosuche zu fördern.

Vor diesem Hintergrund wurde der Markenbotschaft Finden Sie Ihr ideales Auto aus über 500 Autos eine Hierarchie von 1 zugewiesen, ebenso wie das begleitende Formular und der CTA.

Trotz seiner Bedeutung für das übergreifende Kundenerlebnis wurde dem eigentlichen Logo (und der Navigation) eine 2 zugewiesen, da es keine so große Rolle bei der Erfüllung der UX- und Markenziele spielt.

Unterstützende Inhalte sind mit 3 gekennzeichnet, was kontraintuitiv erscheinen mag. Es hält sich jedoch an den narrativen Fluss, der Gestalt anzunehmen beginnt, mit der Markenbotschaft und der „Erste Schritte“-Funktion als Hauptaugenmerk, dann dem Logo und der Navigation, um die Premium-Identität und -Struktur des Dienstes zu etablieren, und dann den unterstützenden Inhalten den Kunden beruhigen, Kontext liefern und ihn inspirieren.

Wenn sich Designer daran gewöhnen, die visuelle Hierarchie zu berücksichtigen, ist es leicht, die narrativen Möglichkeiten zu schätzen, die sie offenbart, und verleiht den Benutzeroberflächen und den Geschichten, die sie erzählen, echte Tiefe.

Bauen Sie eine visuelle Hierarchie in das Designsystem ein

Nun, da die Ziele und Rangordnungen der visuellen Hierarchie festgelegt sind, kann die visuelle Sprache erstellt werden, die sie zum Leben erwecken wird. Nehmen wir an, dass bereits ein Designsystem vorhanden ist (wenn nicht, sollte dies zuerst getan werden!) und dass bereits eine Reihe von UI-Elementen entworfen wurden.

Der erste Ausgangspunkt ist die Komposition – das Layout der erforderlichen Vorlagen. Überlegen Sie, wo hochrangige Elemente erscheinen sollten (wie zuvor beschrieben, ist dies nicht immer das am meisten erwartete). Es können mehrere Variationen erforderlich sein, um eine Reihe von Szenarien abzudecken. Damit später im Projekt nichts übersehen wird, sollten sich Designer jetzt die Zeit nehmen, sie zu erstellen.

Später im Designprozess können eine Reihe von Beispielmodellen in das Designsystemdokument aufgenommen werden, mit Live-Symbolen von UI-Mustern (so dass Designer, die an dem Projekt arbeiten, über die neuesten Versionen verfügen).

Sobald eine grobe Vorstellung von der Zusammensetzung festgelegt wurde, kann mit der Erstellung von Varianten von UI-Elementen begonnen werden.

Nehmen Sie den bescheidenen Seitenkopf. In diesem Beispiel aus einem aktuellen Projekt für eine Personalberatung gibt es drei Varianten im Gestaltungssystem, um den unterschiedlichen Rängen in der visuellen Hierarchie Rechnung zu tragen.

Designer können dies mit den Bausteinen ihrer Benutzeroberfläche erweitern. Beispielsweise wurde bei einem aktuellen Projekt für eine beliebte Personalbeschaffungs-App die Tiefe verwendet, um Inhaltsfelder zu unterscheiden – je größer die Tiefe, desto höher die visuelle Hierarchie.

Visuelle Hierarchie kann in nahezu jedes Element der visuellen Sprache einer Marke integriert werden: Komposition, Typografie, Tiefe, Bildsprache, Ikonografie und Tonfall. Je tiefer das Design geht, desto kohärenter und fokussierter wird das Kundenerlebnis sein.

Einpacken

Die Integration eines visuellen Hierarchie-Workflows in den Designprozess führt zu erheblich besseren Benutzererlebnissen. Dies geschieht, indem Designern die Möglichkeit gegeben wird, verschiedenen Arten von Inhalten einen Rang zuzuweisen, was zu Benutzeroberflächen führt, die sich nicht nur geordnet und intuitiv anfühlen, sondern auch die Erfüllung der wichtigsten Markenziele ermöglichen.

Eine klare visuelle Hierarchie verbessert nicht nur Ihre UX, sondern sorgt auch für einen nachhaltigen Workflow, der dem Designprozess einen strategischen Fokus verleiht – unerlässlich in einer modernen Produktdesignumgebung.

Weiterführende Literatur im Toptal Design Blog:

• Designprinzipien: Einführung in die Hierarchie
• UI-Design Best Practices und häufige Fehler
• Erforschung der Gestaltungsprinzipien des Designs
• Der umfassende Leitfaden zur Informationsarchitektur
• Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns