Die Verwendung von Hierarchien in der Datenvisualisierung
Ein gutes Design ist mehr als kreativ, es muss strategisch sein.
Ein erfahrener Designer sollte ein gutes Verständnis für die natürlichen Neigungen des menschlichen Auges haben. Anstatt Datenblöcke zu sehen, sieht das Auge Informationen in der Regel auf visuelle Weise. Das ist der Grund, warum die ersten Bücher, die wir als Kinder lasen, mehr Bilder und Wörter mit einem großen Druck enthielten. Andere Arten von Büchern, wie z. B. Comics, sind eher von Bildern als von Texten geprägt; Visuelles steht im Mittelpunkt der erzählenden Abfolge des Geschehens, Texte dienen nur als Begleitung. Das Ergebnis sind Inhalte, die für das menschliche Gehirn leicht zu lesen und schneller zu verdauen sind.
Kurz gesagt, Inhalte müssen nach Priorität organisiert werdenoder fügen Sie eine “Hierarchie” von der höchsten zur niedrigsten Priorität ein. Designer müssen ein scharfes Auge auf die Organisation von Inhalten haben, mit dem Ziel, die Augen der Zuschauer so zu lenken, dass Informationen von höchster Priorität zuerst gesehen werden. Wie machen wir das genau?
Hierarchie-Muster
Wenn eine neue Seite präsentiert wird, gibt es zwei gängige Muster, bei denen das menschliche Auge die Seite scannt und liest – das Z-Muster und das F-Muster.
Wann sollte man welche verwenden?
- Das Z-Muster wird am häufigsten verwendet, wenn ein geringer Textinhalt vorhanden ist. Die Benutzer überflogen die Seite von links oben nach rechts, blickten durch den Inhalt und bewegten sich nach links unten nach rechts unten. Um die Verwendung dieses Musters zu maximieren, kann der Designer den wichtigsten Inhalt innerhalb der “Z”-Form platzieren.
- Das F-Muster wird in der Regel für textlastige Inhalte oder Videoinhalte verwendet. Die Benutzer begannen, die Seite von oben links nach oben rechts zu scannen und gingen dann immer wieder von der linken Seite zur rechten Seite der Seite, auf der Suche nach visuellen Elementen, die ihnen helfen würden, den geschriebenen Inhalt zu verstehen. Dieses Muster setzt sich fort, bis sie den unteren Rand der Seite erreichen, wodurch eine Heatmap erstellt wird, die wie der Buchstabe “F” aussieht.
Prinzipien der Hierarchie
Unabhängig davon, für welches Muster Sie sich entscheiden, ist es wichtig zu wissen, was und wie Sie die Elemente hervorheben, die ganz oben in der Hierarchieliste stehen. Im Design, insbesondere bei der Datenvisualisierung, können nicht alle Aspekte hervorgehoben werden. Damit ein Element hervorsticht, müssen andere in den Hintergrund treten. Feinheiten wie die Größe, Farben, Formen oder welche Informationen einbezogen und – vielleicht noch wichtiger – ausgeschlossen werden sollen, beeinflussen die Hierarchie des Designs. Lassen Sie es uns aufschlüsseln, ja?
1. Größe
Genau wie bei einer Zeitungsüberschrift gilt: Je größer das Element, desto mehr Aufmerksamkeit erregt es. Je mehr Aufmerksamkeit es auf sich zieht, desto mehr Zuschauer werden damit interagieren, denn es ist das Erste, was sie sehen.
Im Webdesign besagt das Fitts’sche Gesetz , dass größere Objekte einfacher zu bedienen sind, da die Benutzer weniger Aufwand betreiben müssen, um auf sie zu klicken. In Bezug auf Text und Typografie berechnet das Smashing Magazine einige durchschnittliche Größen, die für Überschriften und Fließtext geeignet sind:
- Überschrift → 18-29 Pixel
- Fließtext → 12-14 Pixel
2. Farbe
Wie wir in diesem Blogbeitrag ausführlich erläutert haben, haben verschiedene Farben unterschiedliche psychologische Verbindungen, die sich auf die Wahrnehmung der Objekte durch den Betrachter auswirken. Helle Farben sind von Natur aus aufmerksamkeitsstärker, gefolgt von satten, dunkleren und helleren Farbtönen. Gedeckte, gedämpfte Farben stehen am unteren Ende der Farbhierarchie.
3. Layout und Ausrichtung
Layout und Ausrichtung spielen eine wichtige Rolle, um den Benutzern visuell zu erklären, was am wichtigsten ist. Wenn Sie beispielsweise einen Textkörper und eine Seitenleiste daneben haben, werden die Augen der Benutzer durch den Text geführt. dann die Sidebar als Follow-up-CTA (das gilt vor allem im Webdesign). Auch Objekte, die oben oder in der Mitte platziert sind, ziehen auf den ersten Blick die meiste Aufmerksamkeit auf sich.
4. Wiederholung
Sich wiederholende Stile teilen den Betrachtern mit, dass es sich bei dem Inhalt um eine Einheit handelt. Zum Beispiel ist dieser Blogbeitrag in einem zusammenhängenden Stil geschrieben. Nehmen wir an, wir stören das organisierte Layout und verwenden roten Text in diesem Absatz, dann würde dies die Wiederholung unterbrechen und sofort die Aufmerksamkeit auf das Element lenken, das anders ist – das heißt, den roten Text. Ein weiteres Beispiel ist die Verwendung von Hyperlinks. Links sind in der Regel unterstrichen, und Sie wissen sofort, dass sie anklickbar sind.
5. Nähe/Abstand
Die Platzierung von Designelementen sagt den Benutzern, wie wahrscheinlich es ist, dass sie miteinander in Verbindung stehen. Diese Liste hat z. B. eine Überschrift/einen Titel, und jeder der Punkte wird durch eine Zeile Leerzeichen getrennt. Diese Nähe oder Entfernung zeigt, dass diese Listenelemente getrennt, aber nicht unabhängig voneinander sind.
6. Textur und Stil
Die Verwendung verschiedener Stile und Texturen kann dazu beitragen, die Inhaltshierarchie visuell zu diversifizieren. Die Verwendung verschiedener Schriftarten in einem Projekt oder texturierte Hintergründe, die sich gegenüberstellen, kann den Blick der Benutzer auf das dominanteste der Elemente lenken.
7. Kontrast
Der Kontrast bezieht sich auf den Wertunterschied zwischen Farben. Der stärkste Kontrast, den Sie zwischen zwei Farben erzielen können, ist Schwarz und Weiß. Ein starker Kontrast kann wichtige Elemente hervorheben, während ein schwacher Kontrast dazu führt, dass Elemente miteinander verschmelzen. Ein starker Kontrast mag auffällig sein und ist notwendig, um die Hierarchie zu bestimmen, aber im Gegenzug ist ein schwacher Kontrast weniger konfrontativ und wird oft von Designern genutzt, um ein harmonischeres Design zu schaffen, das sich die Benutzer vielleicht länger ansehen möchten.
___
Hierarchie ist ein relativ unterschätzter Aspekt des Designs und ein wichtiges Werkzeug, wenn Sie den Betrachtern auf den ersten Blick wichtige Informationen liefern möchten. Denken Sie daran, dass ein gutes Design nicht nur Kreativität, sondern auch die Strategie dahinter erfordert.
