Designprinzipien – Eine Einführung in die visuelle Hierarchie

Da sich Technologien und Benutzeroberflächen ändern, wächst der Bedarf an Designfähigkeiten im visuellen Design weiter. Hat sich unser grundlegendes Verständnis von visueller Hierarchie, Wahrnehmung und Komposition geändert, da jedes Jahr neue Beispiele für eine typische Benutzeroberfläche auftauchen?

Das moderne Konzept der visuellen Wahrnehmung hat seine Wurzeln nicht nur in der Wissenschaft, sondern auch in der Psychologie. Folglich wird die Art und Weise, wie wir visuelle Informationen sehen und wahrnehmen, unabhängig von sich ständig ändernden Benutzeroberflächen gleich bleiben. Ist es angesichts dessen möglich, dass zeitgemäßes Interaktionsdesign die Grundlagen der grafischen Komposition und der visuellen Hierarchie verbessert?

Die grundlegenden Regeln der visuellen Wahrnehmung sind für jedes visuelle Design von entscheidender Bedeutung, da sie angeben, wie Informationen mit eingebetteter Bedeutung so schnell wie möglich übermittelt werden können. Da visuelles Design jedoch eng mit Grafikdesign verwandt ist, wurden diese Standards für Printmedien eingeführt und müssen für digitale Medien noch neu definiert werden.

So etwas wie eine „digitale Bauhaus-Schule“, die möglicherweise neue Gestaltungsprinzipien etablieren könnte, hat sich noch nicht herausgebildet. Da die Benutzer eine Benutzeroberfläche auf eine ganz andere Weise erleben als gedruckt, sind die Regeln der visuellen Hierarchie und Komposition nicht nur veraltet, sie fallen einfach in einer Benutzeroberfläche zusammen.

Meistens neigen Designer immer noch dazu, den Bildschirm als statisches, zweidimensionales Objekt zu behandeln, und die Herausforderung für interaktive Designer besteht darin, Innovationen zu entwickeln, die über die einfache Anwendung von Druckformaten auf ihre digitalen Medienprojekte hinausgehen. Aber bevor neue Designs vorankommen können, muss ein grundlegendes Verständnis der visuellen Hierarchie, Wahrnehmung und Komposition überarbeitet werden.

Visuelle Hierarchie: Ein neues Verständnis der visuellen Komposition für interaktive Schnittstellen

Was ist visuelle Hierarchie und warum ist sie wichtig? Visuelle Hierarchie ist die Anordnung von Inhalten in einer Komposition, um Informationen effektiv zu kommunizieren und Bedeutung zu vermitteln. Die visuelle Hierarchie leitet den Betrachter zuerst zu den wichtigsten Informationen und dann zu sekundären Inhalten.

Die Bedeutung, das Konzept und die Stimmung einer Komposition werden durch den angemessenen Einsatz von Größe, Farbe, Form, Abstand, Proportion und Ausrichtung festgelegt und durch den kreativen Einsatz grafischer Elemente vermittelt, die die visuelle Hierarchie bestimmen.

Die visuelle Hierarchie ist für jede Art von visuellem Design von entscheidender Bedeutung, egal ob es sich um eine Zielseite handelt, die das Auge des Besuchers leiten muss, oder um die Navigation einer mobilen Benutzeroberfläche. Das Verständnis des Benutzers für jedes Element basiert auf den anderen Elementen in der Zusammensetzung und ihrem Kontext. Kompositionselemente werden entsprechend behandelt, um visuelle Beziehungen herzustellen und dadurch eine visuelle Hierarchie über ein Design hinweg zu etablieren.

Farbe in der visuellen Hierarchie

Viele der Regeln der visuellen Hierarchie mögen recht einfach und sogar banal erscheinen, aber sie sind eine entscheidende Grundlage für gutes visuelles Design. Farbe ist beispielsweise das wirkungsvollste kreative Element im visuellen Design.

Betrachten Sie die unmittelbaren Konnotationen eines roten Kreuzes gegenüber einem monochromen. Fast überall bedeutet das rote Kreuz Neutralität und Schutz. Dies ist das Potenzial für eine unmittelbare Kommunikation mit der Verwendung von Farbe. Farbe wird auch oft verwendet, um Gruppen zu identifizieren, zum Beispiel, wenn ein rotes Kreuz unter drei einfarbigen irgendwie als signifikanter hervorsticht.

Helle, satte Farben fallen stärker auf als gedeckte und haben daher eine größere optische Wirkung. In einer Benutzeroberfläche könnte Farbe verwendet werden, um einen Eindruck von Struktur zu vermitteln und auf verfügbare Interaktionen hinzuweisen. Eine einzelne Farbe innerhalb einer monochromen Benutzeroberfläche kann eine Auswahl unterscheiden und sogar darauf hindeuten, was sich hinter einer Schaltfläche befindet, über die der Benutzer schwebt.

Farbe ist auch mit Bedeutung und Emotionen gesät, die explizite Informationen an das Unterbewusstsein eines Betrachters übermitteln können. Im Branding wurde viel psychologische Forschung zu Farbe betrieben, da sie bei Verbrauchern eine viszerale Reaktion auslöst, bevor sie eine sinnvolle Interaktion mit einer Marke haben. Beispielsweise werden Blautöne oft als zuverlässig, sicher und beruhigend empfunden, während Rottöne anregend wirken und dafür bekannt sind, die Herzfrequenz der Menschen zu erhöhen. Farben können jedoch je nach Kultur eine andere Bedeutung haben.

Ein gutes Beispiel für einen sinnvollen, strukturellen Einsatz von Farbe im Webdesign ist die Website The Names for Change. Die Website kommuniziert sofort ihre Struktur durch die Verwendung von Farbe; Die Organisation ist standardmäßig verstreut, kann aber nach Thema und/oder Farbe neu angeordnet werden.

Die gewählten Töne helfen jedoch, eine der möglichen Schwierigkeiten für die Bedeutung der Website zu überwinden. Das Sammeln von Spenden für Alltagsgegenstände wie Socken oder Tampons ist nicht aufregend genug, um sich selbst zu verkaufen, daher erhöht der radikale grafische Ton der Website den Wahrnehmungswert von Alltagsgegenständen und schafft gleichzeitig die notwendige zugrunde liegende Organisationsstruktur.

Größe in der visuellen Hierarchie

Stellen wir uns eine Illustration vor, in der ein großer Vogel neben drei kleineren sitzt. Ohne weitere Informationen kommuniziert diese einfache Grafik sofort die Beziehung zwischen ihren Elementen: ein Elternteil und Kinder, die zusammen eine Familie kommunizieren.

Im traditionellen Grafikdesign besteht eine typische Strategie darin, die wichtigsten Elemente zu den größten zu machen und die Elemente dann schrittweise hierarchisch zu verkleinern. Die Größe schafft eine visuelle Hierarchie, weil die größten Elemente zuerst Aufmerksamkeit erregen und daher als die wichtigsten erscheinen.

Unterschiedliche Schriftgrößen werden auch häufig in Textkörpern verwendet, um signifikante Unterschiede anzuzeigen, z. B. Überschriften, Abschnitte und Anführungszeichen. Sekundäre Inhalte wie Bildunterschriften sind normalerweise kleiner, um nicht mit dem Haupttext zu konkurrieren.

Betrachten Sie einige der am häufigsten verwendeten visuellen Schnittstellen wie Instagram. Nichts auf dem Bildschirm konkurriert mit den Bildern und Videos – sie nehmen mehr als 60 Prozent der meisten Bildschirme ein. Der Zweck der Benutzeroberfläche ist unmittelbar.

Ein Beispiel, das die typische Struktur der visuellen Hierarchie im Webdesign auf den Kopf stellt, ist die Portfolio-Site für das Kunst-/Designstudio Ro/Lu. Ihre ungewöhnliche Website ist vielleicht nicht die intuitivste, aber sie fordert die visuelle Anordnung des typischen Online-Kreativportfolios heraus. Aufgrund der absichtlichen Randomisierung ihrer vielfältigen Projekte erscheint jedes Mal, wenn ein Besucher auf die Website kommt, ein anderes als dominant, was jeden Besuch einzigartig und interessant macht.

In den Portfolios der meisten kreativen Designstudios ist die Arbeit nicht hierarchisch organisiert, da jedes Projekt einzigartig ist und als gleich wichtig angesehen wird. Das Design der Ro/Lu-Site schafft eine dynamische Komposition mit unterschiedlichem Interesse bei jedem Besuch und ermutigt die Zuschauer, das umfangreiche Portfolio des Studios zu erkunden. Folglich wird der eklektische, interdisziplinäre Charakter des Designstudios durch die zufällige Anzeige von Inhalten repräsentiert.

Ausrichtung in der visuellen Hierarchie

Die Anordnung in der visuellen Hierarchie vermittelt ein Gefühl der Ordnung, indem Elemente räumlich verbunden werden. Stellen Sie sich wie bei Kapiteln in einem nichtlinearen Roman ein Quadrat vor, das in einer grafischen Komposition aus der Reihe sticht. Wenn ein einzelnes Element eine etablierte Struktur durchbricht, hebt es sich von der Komposition ab und erhält dadurch eine Bedeutung gegenüber dem Rest.

Eine starre Komposition kann stagnierend und visuell uninteressant wirken, es sei denn, ein Element hebt sich vom visuellen Raster, dh von einem Ordnungsgefühl ab. Eine Fehlausrichtung oder das „Durchbrechen des Rasters“ ist eine Gelegenheit, einem grafischen Element mehr visuelles Gewicht zu verleihen. Dieses Konzept ist grundlegend für die visuelle Hierarchie im Design.

Gemäß einem Prinzip der traditionellen visuellen Gestaltung wirken Elemente, die in der Mitte eines Rahmens platziert sind, signifikanter. Beispielsweise können primäre Inhalte oder Elemente der Benutzeroberfläche in der Mitte platziert werden, während Navigation, Menüs und andere sekundäre Inhalte oft an den Seiten bleiben.

Aber wegweisende Designer fordern gerne den Status quo heraus. Wenn interaktives Design grundlegende visuelle Hierarchieprinzipien anwendet und dann die Grenzen in innovative visuelle Kompositionen erweitert, werden interessante neue Erfahrungen geschaffen. Durch die Verwendung einer anderen Ausrichtung werden neue Assoziationen und Bedeutungen zwischen Elementen hergestellt.

Zum Beispiel ist das DNA-Projekt eine Website, die eine Reihe unzusammenhängender Hierarchien verwendet, um die kreative Konstruktion des Albums des Musikers zu kommunizieren. Die Struktur der Site ist komplex, ebenso wie der Aufbau des Albums.

Zunächst werden die Besucher eingeladen, sich die Musik anzuhören, indem sie sich durch die Titel des Albums klicken, die traditionell in einem Albumformat angeordnet sind. Indem es den Besuchern jedoch ermöglicht wird, die DNA-Elemente der Website neu auszurichten, wird das Konzept des Albums nicht nur als eine Reihe von Tracks kommuniziert, sondern als eine nichtlineare Konstruktion fragmentierter Elemente im Laufe der Zeit.

Formen in der visuellen Hierarchie

Wenn es um Formen geht, sollten wir uns überlegen, wie unmittelbar die einfache Herzform ihre potenzielle Verwendung für „Gefällt mir“ in den meisten Benutzeroberflächen für soziale Netzwerke kommuniziert. Um Wichtigkeit oder Gruppen festzulegen, betrachte ein Herz unter vier Kreisen. Geometrische Formen sind insofern wie Farben, als Formen bestimmte Konnotationen tragen, die Elementen Persönlichkeit oder Bedeutung verleihen.

Im interaktiven Design sind geometrische Formen für eine effiziente Kommunikation unerlässlich, da sie Bedeutung schneller und universeller vermitteln als Text. Anstelle von Text sind Icons (Symbole), die oft einfache geometrische Formen sind, zum Analogon für die meisten Navigationssysteme und Benutzeroberflächen geworden.

Das Ziel, ein Bild zu „liken“, eine Datei herunterzuladen, zu telefonieren oder eine Nachricht abzurufen, wird einfach und direkt mit Icons (geometrische Formen) vermittelt. Diese Form der effizienten visuellen Kommunikation wird auf einem globalen Markt immer wichtiger, auf dem digitale Produkte oft ein riesiges internationales Publikum mit mehreren Sprachen bedienen.

Um die verschiedenen Arten der Interaktion zwischen traditionellen gedruckten und digitalen Medien hervorzuheben, betrachten Sie den Unterschied zwischen der Suche in einer echten Zeitung nach dem Kunstteil und der Verwendung des Suchsymbols in den meisten Apps. Bis vor kurzem haben die meisten Zeitungswebsites ihre Seiten so gestaltet, als wären sie gedruckt, und die Erfahrung, Inhalte zu sichten, war ungeschickt und verwirrend.

Die Signes du Quotidien-Website bricht mit traditionellen Web-Layouts und verwendet grundlegende Quadrat- und Kreisformen auf subtile Weise, um eine einzigartige visuelle Hierarchie zu präsentieren, die Besucher durch den Inhalt führt. Das Menü befindet sich in der Mitte der Seite, und wenn Besucher darauf klicken, erscheinen vier farbige Punkte, die die vier Bereiche der Website darstellen. Besucher ziehen dann einen der Punkte in das Quadrat, um zu diesem Abschnitt zu gelangen.

Bewegung in der visuellen Hierarchie

Ein sich bewegendes Element wird in einer Gruppe von stagnierenden Elementen ein größeres visuelles Gewicht haben, und Bewegung in der visuellen Hierarchie ist ein Prinzip, das im Druck unmöglich zu verwenden ist, aber definitiv in das Toolkit des visuellen Designers aufgenommen werden kann.

Was kann Bewegung außer einer wörtlichen Übersetzung ihrer selbst kommunizieren? Bewegung wird in einer Benutzeroberfläche häufig als Hinweis darauf verwendet, dass mit einem Element interagiert werden kann. Kann die Verwendung von Bewegung weiter vorangetrieben und als Mittel verwendet werden, um etwas Einzigartiges zu kommunizieren? Wenn es bei visueller Hierarchie nicht nur um die Effizienz der Kommunikation geht, sondern auch um die eingebettete Bedeutung, wie könnte dann Bewegung als wesentliches visuelles Kommunikationsmittel eingesetzt werden?

Bei der I Remember-Site sticht die (animierte) Hauptoberfläche sofort ins Auge, da sie zur Interaktion einlädt. Obwohl die Bewegung und die Benutzeroberfläche funktionale Navigationswerkzeuge sind, nutzten die visuellen Designer den potenziellen Verlust dieser Elemente, um die zugrunde liegende Mission der Website zu kommunizieren: die Alzheimer-Krankheit. Genau wie die verblassenden Erinnerungen von Patienten, für die die Organisation Spenden sammelt, verschwindet die Website ohne aktive Interaktion langsam im Nichts.

Klang in der Informationshierarchie

Ton ist ein weiteres Werkzeug, das in Printmedien nicht verwendet werden kann, aber innerhalb der Prinzipien der Hierarchie noch entwickelt werden muss. Da Ton völlig nicht-visuell ist, gibt es keine Regeln, auf die man sich beziehen könnte. Aber Sound kann auch ein Designwerkzeug sein, das Inhalte, Stimmungen oder Bedeutungen effektiv kommuniziert. Designelemente, die bestimmte Klänge tragen, können relativ zueinander gruppiert werden, und diejenigen, die am kühnsten sind, scheinen die wichtigsten zu sein oder können eine Trennung von der Gruppe bedeuten.

Die Qualität eines Sounds, der einem Element zugeordnet ist, sollte Inhalte schnell identifizieren, charakterisieren oder bei der Strukturierung helfen. Wie könnte ein Klang, der mit seinem zugehörigen visuellen Element kontrastiert, eine neue Bedeutung vermitteln?

Klänge selbst können so komplex sein, dass sie eine ganze Stimmung oder die Botschaft eines Designs bestimmen, bevor etwas Visuelles wahrgenommen wird. So wie ein farbenfroher Hintergrund eine Stimmung herstellt, kann ein Ton im Hintergrund sitzen oder in einer Benutzeroberfläche Feedback geben, z. B. das Reagieren auf das Antippen einer Schaltfläche auf einem Mobilgerät. Das Prinzip der Technik ist grundlegend, aber die Kreativität, mit der sie eingesetzt werden kann, ist der Ort, an dem Magie geschehen kann.

Aufgrund seiner Bedeutung für die kreative Arbeit des Kollektivs nutzt die Website, die für die Ausstellung der deutschen Künstlergruppe ZERO im Guggenheim erstellt wurde, Sound als atmosphärische Kulisse und auch als Feedback beim Navigieren auf der Website. Kräftige Klingeltöne legen die Stücke fest, die die Anfänge eines Themas darstellen, während tertiäre Projekte im Hintergrund klicken.

Das Konzept der visuellen Hierarchie

Visuelle Hierarchie ist ein einfaches Konzept, und das Verständnis der Theorie ist tatsächlich einfacher als die praktische Fähigkeit eines Designers, eine gut strukturierte Komposition auszuführen. Dennoch ist es eine Herausforderung, in einem neuen Medium erfinderisch zu sein und gleichzeitig gutes Design beizubehalten.

Ständig kommen neue Medien hinzu, und herausfordernde Situationen werden nicht nachlassen – ganz im Gegenteil. Heute sind über 200 verschiedene Bildschirmgrößen im Einsatz. Und das sind nur die zweidimensionalen. Zuerst war es das Internet, Desktop-Browser, dann kamen Handys und Tablets, und jetzt betreten wir mit Technologien wie interaktivem Fernsehen, IoT, Wearables, Virtual und Augmented Reality Neuland.

Design, das die Grenzen digitaler Medien wirklich sprengt, steckt noch in den Kinderschuhen. Hoffentlich werden die Prinzipien der visuellen Hierarchie und des guten Designs mit dem schnellen Fortschritt der Technologie Schritt halten, damit unsere Erfahrung mit digitalen Medien voller Bedeutung und Vergnügen bleibt.

Weiterführende Literatur im Toptal Design Blog:

• Steigern Sie Ihre UX mit einer klaren visuellen Hierarchie
• Design Foundations – Ein Leitfaden zur visuellen Hierarchie (mit Infografik)
• Designprinzipien: Einführung in die Hierarchie
• Best Practices für das UI-Design für bessere Scanbarkeit
• Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns