Visuelle Hierarchie für Anfänger

Visuelle Hierarchie ist die Organisation von Objekten in einer bestimmten Reihenfolge, um die Aufmerksamkeit auf beabsichtigte Bereiche zu lenken.

Die im UX-Design häufig verwendete visuelle Hierarchie erleichtert dem Leser die Navigation und hilft, seine Aufmerksamkeit dorthin zu lenken, wo Sie sie haben möchten.

Unsachgemäße Verwendung oder fehlende visuelle Hierarchie können Website-Besucher verwirren und verloren machen.

Visuelle Hierarchien sind in Postern und Anzeigen weit verbreitet, um die Aufmerksamkeit auf die beabsichtigten Elemente zu lenken.

Dieser Blog vermittelt Anfängern die Grundlagen der visuellen Hierarchie.

Visuelle Hierarchie aufgeschlüsselt

Die Aufschlüsselung der visuellen Hierarchie in einfachere Teile hilft zu erklären, wie Designer das Designkonzept angehen.

Drei sind drei primäre Rollen in der visuellen Hierarchie, von denen zwei stark miteinander verwandt sind.

Größe

Das Ändern der Größe von Objekten kann entweder dazu beitragen, die Aufmerksamkeit auf sie zu lenken oder von ihnen abzulenken.

Es ist wichtig, die größte Größe für die wichtigsten Informationen zu belassen, die Sie ausdrücken möchten. Wenn Sie zu viele ähnlich große Elemente verwenden, wird dieser Effekt beeinträchtigt, da nichts so stark hervorsticht.

Das Skalieren von Größen ist wichtig, um zu zeigen, wie es mit anderen Objekten verglichen wird. Das Schaffen eines Gleichgewichtsgefühls hilft beim Skalieren, um hervorzuheben, wie Ihr größtes Objekt im Vergleich zu kleineren abschneidet.

Wenn Sie Informationen haben, die nicht wichtig sind, werden sie durch eine kleine Größe aus dem Weg geräumt und dort gelassen, wo die Benutzer sie zuletzt sehen.

Farben & Kontrast

Hellere Farben ziehen die Aufmerksamkeit besser auf sich als andere. Dieser Effekt verstärkt sich, wenn Sie helle Farben mit dunkleren Hintergründen kombinieren. Das Ergebnis lässt Ihre Informationen besser hervortreten und erregt mit Leichtigkeit die Aufmerksamkeit.

Farbe und Kontrast sind zwei Teile der visuellen Hierarchie, aber beide arbeiten einwandfrei zusammen, um Aufmerksamkeit zu erregen.

Eine Möglichkeit, diese Methode zu verwenden, besteht darin, die Farbe eines Textes zu ändern, indem Sie ihn mit einer auffälligen Farbe hervorheben. es wird Aufmerksamkeit vor jedem anderen stumpffarbigen Text erregen.

Je größer der Kontrast, desto stärker die Aufmerksamkeit. Das Hinzufügen drastischer Farbunterschiede wie ein dunkler Hintergrund mit einer leuchtend roten Schrift wird die Aufmerksamkeit der Benutzer auf sich ziehen und sie zum ersten machen, was sie auf jedem Bild oder jeder Webseite bemerken.

Wenn Sie kontrastierende Farben kreieren, um Aufmerksamkeit zu erregen, ist es am besten, sie auf ein Minimum zu beschränken. Zu viele kontrastierende Objekte verwirren den Leser und erzeugen einen unerwünschten und abstoßenden Effekt.

Eine andere Möglichkeit, Farben zu verwenden, besteht darin, ähnliche Paletten auszuwählen, um eine Korrelation zwischen bestimmten Objekten herzustellen.

Es ist am besten, diese Taktik nur für die notwendigsten Elemente auf einer Seite zu reservieren, da Sie die ganze Aufmerksamkeit zuerst darauf lenken möchten.

Gutes UX-Design beinhaltet viel Kontrast, wobei die meisten Ästhetiken starke Kontraste verwenden, um atemberaubende Werke zu schaffen.

Die F & Z-Muster

Wenn es darum geht, Informationen hauptsächlich über Text bereitzustellen, gibt es zwei Hauptmuster, die am besten davon profitieren, wie wir visuelle Informationen verarbeiten.

Diese Muster funktionieren für die meisten Sprachen, eignen sich aber hervorragend für Englisch, da Wörter von links nach rechts und von oben nach unten gelesen werden.

Das F-Muster

Das F-Muster ist die perfekte Wahl für Designs mit umfangreichem Text. Das Design folgt dem nach ihm benannten Buchstaben, beginnend oben links und nach rechts gehend.

Danach scannt der Betrachter den Buchrücken nach Unterüberschriften oder Schlagzeilen ab.

Das Muster wird alternativ als E-Muster bezeichnet, obwohl das F-Muster ikonischer ist.

Um das F-Muster zu verwenden, müssen Sie alle wichtigen Informationen auf der linken Seite in kleinen Überschriften platzieren, um Aufmerksamkeit zu erregen.

Dieses Design ist hervorragend geeignet, um die Langeweile zu beseitigen, die mit dem Lesen von Text aus großen Blöcken von Absätzen verbunden ist.

Benutzer können Schlagzeilen scannen, um auffällige Schlagzeilen oder Stichpunkte zu erkennen, da sie dazu dienen, Aufmerksamkeit zu erregen.

Das Z-Muster

Während sich das F-Muster für textlastige Websites eignet, ist das Z-Muster anders.

Das Z-Muster eignet sich perfekt für Websites oder Anzeigen, die nicht aus mehreren Textabsätzen bestehen.

Das Design beginnt damit, dass die Informationen mit der höchsten Priorität oben links liegen, dann wird die Wichtigkeit nach oben rechts, unten links und unten rechts kaskadiert.

Benutzer werden sich leicht durch das Z-Muster navigieren, da es sich um ein häufig verwendetes Design handelt, das einfach zu verstehen ist.

Der obere linke Bereich ist normalerweise für ein Logo reserviert, da es das Erste ist, was die Leute bemerken. Oben rechts befindet sich ein Call-to-Action, der platziert wird, nachdem Benutzer das Firmenlogo gesehen haben. Der Aufruf zum Handeln in dieser Situation ist normalerweise eine Registrierungsaufforderung.

Die Mitte des Designs enthält normalerweise ein Bild, um den leeren Teil zu füllen.

Unten links und rechts befinden sich alle beabsichtigten Texte oder Informationen, die Sie Ihrem Besucher zeigen möchten.

Typografie verstehen

Die typografische Hierarchie ist leicht verständlich und auf jedes Design anwendbar, das viel Text enthält, was die überwiegende Mehrheit ist. Es kann in drei Teile unterteilt werden, wobei die Reihenfolge Überschrift, Unterüberschriften und schließlich Ihr Text ist.

Ihre Überschriften enthalten wichtige Informationen, werden in Ihrem Design am höchsten platziert und sind der sichtbarste Inhalt.

Ihre Unterüberschriften dienen dazu, Ihren gesamten Text zu sortieren und Ordnung in das Durcheinander von Absätzen zu bringen. Halten Sie Ihre Unterüberschriften immer kleiner als Ihre Überschriften, da sie nicht vorrangig konkurrieren sollten.

Unterüberschriften bieten Benutzern eine einfache Navigation, um bestimmte Informationen zu finden.

Ihr letztes Stück ist Ihr Text, der normalerweise Absätze umfasst. Die Schriftgröße sollte klein sein, aber die Lesbarkeit bewahren. Die beiden vorherigen Abschnitte dienen dazu, Benutzern das Navigieren in Ihren dichten Texten zu erleichtern.

Die Bedeutung des Abstands

Bei Websites, die nur minimale Informationen enthalten, wird die Aufmerksamkeit auf die Mitte gelenkt, in der sich der gesamte Platz befindet, wenn viel Platz um wichtige Informationen herum gelassen wird.

Dieses Konzept sollte auch für alle Ihre anderen Designs gelten, da das Hinzufügen zu vieler Informationen zu einer unangenehmen Benutzererfahrung führt.

Das Umgeben von Inhalten mit Platz bietet ein einfaches und leicht verständliches UX-Design.

Wenn Sie zu viele Informationen stopfen und wenig Platz um Bereiche herum lassen, erhalten Sie ein Design, das sich überwältigend anfühlt und die Menschen verwirrt zurücklässt. Wenn Benutzer verwirrt sind, haben sie immer die Möglichkeit, Ihre Website zu verlassen. Stellen Sie sicher, dass Sie nur wichtige Informationen wiedergeben.

Ausrichtung verwenden

Es ist wichtig, dass Sie Ihre Designs ausrichten, da eine zufällige Textposition ein hektisches Bild erzeugt, das Sie betrachten können.

F-Muster- und Z-Muster-Designs verkörpern beide die Verwendung von Ausrichtung. F-Muster-Designs verwenden eine linke Ausrichtung, während Z-Muster-Designs eine linke und rechte Ausrichtung und eine zentrierte Ausrichtung verwenden.

Wenn Sie ein visuelles Design mit Text als Fokus erstellen, ist es am besten, es links auszurichten.

Bei streng visuellen Designs mit einem simplen Fokus führt die Ausrichtung aller Elemente zur Mitte tendenziell zu einem attraktiven Design.

Verwenden von Rastern

Beim Erstellen von Entwürfen sind Raster eine gängige Methode, um den Erstellungsprozess zu unterstützen. Die Verwendung der Drittelregel ermöglicht es Ihnen, Ihren Designs Ausgewogenheit zu verleihen.

Um die Drittel-Regel zu verwenden, fügen Sie Ihrem Design ein Gitter hinzu und lassen Sie es auf zwei horizontalen und vertikalen Linien ruhen. Das Ergebnis ist ein angenehmes und augenfreundlicheres Design.

Objekte, die näher am Zentrum liegen, ziehen die Aufmerksamkeit auf sich, während die weit entfernten zuletzt die Aufmerksamkeit auf sich ziehen.

Nähe und Beziehung

Wenn Elemente näher beieinander liegen, wird Ihr Leser davon ausgehen, dass sie verwandt sind.

Dies kann Ihnen helfen, viele Informationen zu organisieren und sie für Ihren Betrachter leichter verständlich zu machen.

Das Gruppieren von Bildern mit Text bedeutet, dass beide verwandt sind, und die Leser werden die beiden miteinander in Verbindung bringen. Wenn ein Bild und der Text weit voneinander entfernt sind, wird der Leser davon ausgehen, dass beide Elemente nicht miteinander verbunden sind und nichts miteinander zu tun haben.

Schriftarten und visuelle Hierarchie

Ändern Sie die Größe Ihrer Schriftart mit größeren Schriftarten, die für wichtige Informationen reserviert sind, um die Aufmerksamkeit auf sie zu lenken.

Für ein Poster sollten Namen in einer der größeren Schriftarten sein, während Elemente wie eine Adresse in einer kleinen Schriftart geschrieben werden sollten.

Abseits der Schriftgröße hilft die Verwendung verschiedener Schriftarten, die Aufmerksamkeit des Benutzers zu lenken. Verwenden Sie für Titel, Zwischenüberschriften und Informationstext eine andere Schriftart. Diese Designmethode wird dazu beitragen, Ihrer Arbeit den nötigen Schwung zu verleihen, um die Aufmerksamkeit der Leser zu gewinnen und aufrechtzuerhalten.

Tipps zur visuellen Hierarchie

Bevor Sie mit der Erstellung Ihres Designs beginnen, können Sie sich einige Notizen machen, um Ihr Design zu organisieren und sogar ästhetischere Designs zu erstellen.

Notieren Sie die wichtigsten Informationen, die Sie zur Priorisierung benötigen, und welche Methoden Sie dabei anwenden werden.

Versuchen Sie auch, sich die Reise des Lesers vorzustellen und versuchen Sie, das UX-Design zu verbessern und störende Details zu entfernen.

Der ROI eines guten UX-Designs ist immer die zusätzliche Arbeit wert, also unterschätzen Sie seine Bedeutung nicht.

Einpacken

Bei der visuellen Hierarchie geht es darum, vorzugeben, in welcher Reihenfolge die Aufmerksamkeit Ihres Lesers sein soll. Sie möchten, dass die wichtigen Informationen zuerst angezeigt werden, gefolgt von allem anderen.

Die Verwendung von Kontrasten kann knallige Farben erzeugen, die das erste sind, was der Leser in einem Design wahrnimmt.

Wenn Sie wissen, welche Informationen von den Lesern zuerst gesehen werden sollen, können Sie alle Elemente der visuellen Hierarchie nutzen, um anderen ein gutes UX-Design zu bieten.