Was ist eine visuelle Hierarchie?
Bei einer visuellen Hierarchie werden die Elemente nach Wichtigkeit angeordnet und priorisiert. Bei der grafischen Umsetzung wird darauf geachtet, dass die wichtigsten Inhalte zuerst ins Auge fallen.
Die Vorteile der Priorisierung.
Mit der Priorisierung gibt man den Nutzern eine Blickrichtung vor und führt sie zielgerichtet durch das Design. Dadurch erhalten die Inhalte eine Struktur und werden übersichtlich dargestellt. Gleichzeitig fällt es leichter, die einzelnen Elemente zu erfassen.
Das Ziel einer Hierarchie.
Im besten Fall wissen Betrachter einer Website, Anzeige oder eines Profils direkt, um welches Thema es geht. Die Blicke der User fallen dann automatisch zuerst auf das Element, dem grafisch die höchste Priorität zugewiesen ist.
Ein Lösungsweg.
Es gibt eine einfache Strategie, um die Elemente in ein Verhältnis zueinander zu setzen: In welcher Reihenfolge sollen sich die Benutzer worauf konzentrieren? Bei der Umsetzung sind Faktoren wie Größe, Kontrast, Abstände oder Anordnung entscheidend.
Das Design ist eine Aussage.
Eine gute visuelle Hierarchie sollte die Antwort auf die folgenden drei Fragen liefern:
• Um was geht es?
• Wie kann ich es nutzen?
• Warum betrifft es mich?
Deshalb ist die Struktur wichtig.
Wir haben für bestimmte Dinge oft nur eine sehr kurze Aufmerksamkeitsspanne. Umso wichtiger ist es, die Aufmerksamkeit zu erfassen und vor allem auch zu halten. Ein Blick muss reichen, um einen Inhalt wahrzunehmen und als relevant einzustufen. Die visuelle Hierarchie unterstützt dabei.
Erstes Ziel: Information.
Eine visuelle Hierarchie hilft in mehreren Hinsichten: Eine visuelle Hierarchie lenkt den Blick und führt durch den Inhalt. Das unterstützt dabei, relevante Informationen erfassen und verarbeiten zu können.
Zweites Ziel: Relation.
Die Benutzeroberfläche einer Website sollte den Inhalt möglichst so darstellen, wie der Nutzer ihn selbst priorisieren würde. Deshalb werden mit einer visuellen Hierarchie wichtige Informationen hervorgehoben.
Drittes Ziel: Emotion.
Die Präsentation der Inhalte hat einen großen Einfluss darauf, ob Betrachter diese gerne konsumieren oder im nächsten Moment wieder abspringen. Eine visuelle Hierarchie kann eine positive emotionale Reaktion hervorrufen.
Eine schlechte Hierarchie.
Merkmale einer schlechten visuellen Hierarchie:
• nur eine Schriftgröße
• zu viele Schriftarten
• keine Farbkontraste oder
• Hervorhebungen
• keine Abstände oder
• Gruppierungen
• unstrukturierte Anordnung
Erster Tipp: Größe.
Die erste Möglichkeit, wie man eine visuelle Hierarchie erstellen kann, ist die Größe. Über die Größe der Elemente, kann ganz klar festgelegt werden, auf welches Element der Nutzer seinen Blick zuerst richten soll.
Zweiter Tipp: Farbe.
Wichtige Elemente können farblich hervorgehoben werden, damit der User leichter mit ihnen interagieren kann. Ein häufiges Beispiel sind Buttons, die mit einem auffälligen Farbton direkt ins Auge fallen und zum Klicken animieren.
Dritter Tipp: Typografie.
• Überschrift
Worum geht es? Die Überschrift sollte direkt ins Auge fallen.
• Zwischenüberschrift
Unterüberschriften werden genutzt, um einen Text in mehrere Blöcke zu unterteilen und nähere Informationen zum Inhalt preiszugeben.
• Fließtext
Der Fließtext enthält alle ausführlichen Informationen, die relevant für das entsprechende Thema sind. Der Fließtext sollte kleiner als die Überschriften sein, jedoch nicht so klein, dass er nicht mehr gut gelesen werden kann.
Vierter Tipp: Weißraum.
Design mit viel Weißraum schafft einen klaren Fokus für die eingebundenen Bilder und Textblöcke. Zusätzlich hat der Inhalt Raum zum Atmen und zur wirkungsvollen Entfaltung. Dadurch wird man nicht abgelenkt und kann die Informationen in Ruhe verarbeiten.
Zusammenfassung
Eine visuelle Hierarchie führt den Nutzer gezielt durch das Design. Das hilft, um schnell an relevante Informationen zu kommen. Außerdem kann man User zu einer Handlung bewegen, dadurch einen Mehrwert generieren und einen Wiedererkennungswert erzeugen.
Andreas Gärtner
Designer
Was ist eine visuelle Hierarchie?
Bei einer visuellen Hierarchie werden die Elemente nach Wichtigkeit angeordnet und priorisiert. Bei der grafischen Umsetzung wird darauf geachtet, dass die wichtigsten Inhalte zuerst ins Auge fallen.
Die Vorteile der Priorisierung.
Mit der Priorisierung gibt man den Nutzern eine Blickrichtung vor und führt sie zielgerichtet durch das Design. Dadurch erhalten die Inhalte eine Struktur und werden übersichtlich dargestellt. Gleichzeitig fällt es leichter, die einzelnen Elemente zu erfassen.
Das Ziel einer Hierarchie.
Im besten Fall wissen Betrachter einer Website, Anzeige oder eines Profils direkt, um welches Thema es geht. Die Blicke der User fallen dann automatisch zuerst auf das Element, dem grafisch die höchste Priorität zugewiesen ist.
Ein Lösungsweg.
Es gibt eine einfache Strategie, um die Elemente in ein Verhältnis zueinander zu setzen: In welcher Reihenfolge sollen sich die Benutzer worauf konzentrieren? Bei der Umsetzung sind Faktoren wie Größe, Kontrast, Abstände oder Anordnung entscheidend.
Das Design ist eine Aussage.
Eine gute visuelle Hierarchie sollte die Antwort auf die folgenden drei Fragen liefern:
• Um was geht es?
• Wie kann ich es nutzen?
• Warum betrifft es mich?
Deshalb ist die Struktur wichtig.
Wir haben für bestimmte Dinge oft nur eine sehr kurze Aufmerksamkeitsspanne. Umso wichtiger ist es, die Aufmerksamkeit zu erfassen und vor allem auch zu halten. Ein Blick muss reichen, um einen Inhalt wahrzunehmen und als relevant einzustufen. Die visuelle Hierarchie unterstützt dabei.
Erstes Ziel: Information.
Eine visuelle Hierarchie hilft in mehreren Hinsichten: Eine visuelle Hierarchie lenkt den Blick und führt durch den Inhalt. Das unterstützt dabei, relevante Informationen erfassen und verarbeiten zu können.
Zweites Ziel: Relation.
Die Benutzeroberfläche einer Website sollte den Inhalt möglichst so darstellen, wie der Nutzer ihn selbst priorisieren würde. Deshalb werden mit einer visuellen Hierarchie wichtige Informationen hervorgehoben.
Drittes Ziel: Emotion.
Die Präsentation der Inhalte hat einen großen Einfluss darauf, ob Betrachter diese gerne konsumieren oder im nächsten Moment wieder abspringen. Eine visuelle Hierarchie kann eine positive emotionale Reaktion hervorrufen.
Eine schlechte Hierarchie.
Merkmale einer schlechten visuellen Hierarchie:
• nur eine Schriftgröße
• zu viele Schriftarten
• keine Farbkontraste oder
• Hervorhebungen
• keine Abstände oder
• Gruppierungen
• unstrukturierte Anordnung
Erster Tipp: Größe.
Die erste Möglichkeit, wie man eine visuelle Hierarchie erstellen kann, ist die Größe. Über die Größe der Elemente, kann ganz klar festgelegt werden, auf welches Element der Nutzer seinen Blick zuerst richten soll.
Zweiter Tipp: Farbe.
Wichtige Elemente können farblich hervorgehoben werden, damit der User leichter mit ihnen interagieren kann. Ein häufiges Beispiel sind Buttons, die mit einem auffälligen Farbton direkt ins Auge fallen und zum Klicken animieren.
Dritter Tipp: Typografie.
• Überschrift
Worum geht es? Die Überschrift sollte direkt ins Auge fallen.
• Zwischenüberschrift
Unterüberschriften werden genutzt, um einen Text in mehrere Blöcke zu unterteilen und nähere Informationen zum Inhalt preiszugeben.
• Fließtext
Der Fließtext enthält alle ausführlichen Informationen, die relevant für das entsprechende Thema sind. Der Fließtext sollte kleiner als die Überschriften sein, jedoch nicht so klein, dass er nicht mehr gut gelesen werden kann.
Vierter Tipp: Weißraum.
Design mit viel Weißraum schafft einen klaren Fokus für die eingebundenen Bilder und Textblöcke. Zusätzlich hat der Inhalt Raum zum Atmen und zur wirkungsvollen Entfaltung. Dadurch wird man nicht abgelenkt und kann die Informationen in Ruhe verarbeiten.
Zusammenfassung
Eine visuelle Hierarchie führt den Nutzer gezielt durch das Design. Das hilft, um schnell an relevante Informationen zu kommen. Außerdem kann man User zu einer Handlung bewegen, dadurch einen Mehrwert generieren und einen Wiedererkennungswert erzeugen.
Andreas Gärtner
Designer
Was ist eine visuelle Hierarchie?
Bei einer visuellen Hierarchie werden die Elemente nach Wichtigkeit angeordnet und priorisiert. Bei der grafischen Umsetzung wird darauf geachtet, dass die wichtigsten Inhalte zuerst ins Auge fallen.
Die Vorteile der Priorisierung.
Mit der Priorisierung gibt man den Nutzern eine Blickrichtung vor und führt sie zielgerichtet durch das Design. Dadurch erhalten die Inhalte eine Struktur und werden übersichtlich dargestellt. Gleichzeitig fällt es leichter, die einzelnen Elemente zu erfassen.
Das Ziel einer Hierarchie.
Im besten Fall wissen Betrachter einer Website, Anzeige oder eines Profils direkt, um welches Thema es geht. Die Blicke der User fallen dann automatisch zuerst auf das Element, dem grafisch die höchste Priorität zugewiesen ist.
Ein Lösungsweg.
Es gibt eine einfache Strategie, um die Elemente in ein Verhältnis zueinander zu setzen: In welcher Reihenfolge sollen sich die Benutzer worauf konzentrieren? Bei der Umsetzung sind Faktoren wie Größe, Kontrast, Abstände oder Anordnung entscheidend.
Das Design ist eine Aussage.
Eine gute visuelle Hierarchie sollte die Antwort auf die folgenden drei Fragen liefern:
• Um was geht es?
• Wie kann ich es nutzen?
• Warum betrifft es mich?
Deshalb ist die Struktur wichtig.
Wir haben für bestimmte Dinge oft nur eine sehr kurze Aufmerksamkeitsspanne. Umso wichtiger ist es, die Aufmerksamkeit zu erfassen und vor allem auch zu halten. Ein Blick muss reichen, um einen Inhalt wahrzunehmen und als relevant einzustufen. Die visuelle Hierarchie unterstützt dabei.
Erstes Ziel: Information.
Eine visuelle Hierarchie hilft in mehreren Hinsichten: Eine visuelle Hierarchie lenkt den Blick und führt durch den Inhalt. Das unterstützt dabei, relevante Informationen erfassen und verarbeiten zu können.
Zweites Ziel: Relation.
Die Benutzeroberfläche einer Website sollte den Inhalt möglichst so darstellen, wie der Nutzer ihn selbst priorisieren würde. Deshalb werden mit einer visuellen Hierarchie wichtige Informationen hervorgehoben.
Drittes Ziel: Emotion.
Die Präsentation der Inhalte hat einen großen Einfluss darauf, ob Betrachter diese gerne konsumieren oder im nächsten Moment wieder abspringen. Eine visuelle Hierarchie kann eine positive emotionale Reaktion hervorrufen.
Eine schlechte Hierarchie.
Merkmale einer schlechten visuellen Hierarchie:
• nur eine Schriftgröße
• zu viele Schriftarten
• keine Farbkontraste oder
• Hervorhebungen
• keine Abstände oder
• Gruppierungen
• unstrukturierte Anordnung
Erster Tipp: Größe.
Die erste Möglichkeit, wie man eine visuelle Hierarchie erstellen kann, ist die Größe. Über die Größe der Elemente, kann ganz klar festgelegt werden, auf welches Element der Nutzer seinen Blick zuerst richten soll.
Zweiter Tipp: Farbe.
Wichtige Elemente können farblich hervorgehoben werden, damit der User leichter mit ihnen interagieren kann. Ein häufiges Beispiel sind Buttons, die mit einem auffälligen Farbton direkt ins Auge fallen und zum Klicken animieren.
Dritter Tipp: Typografie.
• Überschrift
Worum geht es? Die Überschrift sollte direkt ins Auge fallen.
• Zwischenüberschrift
Unterüberschriften werden genutzt, um einen Text in mehrere Blöcke zu unterteilen und nähere Informationen zum Inhalt preiszugeben.
• Fließtext
Der Fließtext enthält alle ausführlichen Informationen, die relevant für das entsprechende Thema sind. Der Fließtext sollte kleiner als die Überschriften sein, jedoch nicht so klein, dass er nicht mehr gut gelesen werden kann.
Vierter Tipp: Weißraum.
Design mit viel Weißraum schafft einen klaren Fokus für die eingebundenen Bilder und Textblöcke. Zusätzlich hat der Inhalt Raum zum Atmen und zur wirkungsvollen Entfaltung. Dadurch wird man nicht abgelenkt und kann die Informationen in Ruhe verarbeiten.
Zusammenfassung
Eine visuelle Hierarchie führt den Nutzer gezielt durch das Design. Das hilft, um schnell an relevante Informationen zu kommen. Außerdem kann man User zu einer Handlung bewegen, dadurch einen Mehrwert generieren und einen Wiedererkennungswert erzeugen.
Andreas Gärtner
Designer
