Visuelle Hierarchie

Das unwichtige vom wichtigen Trennen. Eine Hierarchie macht es möglich.



Ohne Variation von Schriftgröße und Schriftstärke (links) fehlt ein wichtiges Orientierungsmerkmal. Alle Teile erscheinen gleich unwichtig und bieten kein Impuls, um das Auge über die Seite zu führen.

Schriftgröße

Je wichtiger die Überschrift, desto größer die Schriftgröße. Durch stark sichtbare und kontrahierende Zeichen wird die Aufmerksamkeit des Users auf die Titelüberschrift gezwungen. Zur Orientierung ist das natürlich ein sehr sinnvolles Vorgehen, denn es muss entschieden werden, ob das weitere Scannen der Seite thematisch lohnend erscheint.

Schriftstärke Font Weight

Variationen der visuellen Schwere gelingt auch durch Wahl der Schriftstärke. Während in den normalen Office-Programmen nur zwischen Normal-, Fett- und Kursiv-Schrift umschaltbar ist, bieten moderne Layoutprogramme und Webseiten eine mehrstufige Auswahl. Hierdurch entstehen fein abgestimmte visuelle Hilfsmittel.

Großschreibweise CAPITALIZED LETTERS

Zum Abtrennen von Inhaltsbereichen können Zwischenüberschriften eingezogen werden. Durch Verwendung der Großschreibweise heben sich diese vom eigentlichen Detailtext ab, ziehen aber durch das geringe Gewicht (Font-Weight) keine übermäßige Aufmerksamkeit auf sich.

Ähnliche Beiträge

  • Grid Raster

    Ordnung ist das halbe Leben. Mit Raster & Bündigkeit wird sogar ein ganzes Daraus. Nicht eingezeichnete Ordnungsstrukturen werden unbewusst erkannt, wenn alle Elemente innerhalb eines regelmäßigen Grids (Raster) angeordnet sind. Unbewusst wird diese gerasterte Ordnung positiv vom User wahrgenommen. Das Raster besteht aus gleichbreiten bzw. gleichhohen Reihen und Spalten mit einem gleichbleibenden Abstand (engl. Gutter)…

  • Evil UX worst practices

    „Don’t be evil“ war bis 20181 ein Teil von Google’s Code of Conduct. Die damalige Version des Verhaltenskodex liest sich ganz im Sinne des Dienstes am User „Yes, it’s about providing our users unbiased access to information, focusing on their needs and giving them the best products and services that we can …“ (der volle…

  • Weissraum

    Man sieht oft den Wald vor Bäumen nicht. Stünde ein einzelner Baum auf einer sonst baumfreien Lichtung fällt er sofort ins Auge. Weißraum bietet den Elementen eine Bühne, damit diese Platz haben, atmen und entfalten können. Der Weissraum muss nicht unbedingt weiß sein, sondern wird in der Primärfarbe oder mit einem subtilen Farbverlauf eingefärbt. Fehlt…

  • Leveling & Cards

    Google’s Material Design macht interaktive Elemente subtil sichtbar. Die Zeit stark verschatteter Elemente ist eigentlich lange vorbei. Das stimmt jedoch nicht ganz, da der Schatten durch das Google Material Design in einer sehr subtilen Weise als Hilfsmittel fungiert, um interaktive Elemente zu erkennen. Die Idee: alles, was durch Klicken weitere Optionen offenbaren würde, wird vom…

  • Typographie

    Die Schriftart vermittelt Emotionen durch Form und Schwung der Buchstaben und wird dementsprechend sorgfältig zum Thema passend ausgewählt. Informationen werden nicht nur durch den lexikographischen kargen Text selbst vermittelt, sondern auch die Zeichnung, der Steg-Verlauf, die Serifen und die Ausrichtung von Buchstaben in einer Schriftart kommunizieren Infos und erzeugen Stimmungen. Abhängig vom Thema der Webseite…