Share
Die visuelle Hierarchie ist eines der wichtigsten Prinzipien für effektives Webdesign. In diesem Artikel wird untersucht, warum die Entwicklung einer visuellen Hierarchie im Web von entscheidender Bedeutung ist, die Theorie dahinter und wie Sie einige grundlegende Übungen in Ihren eigenen Entwürfen verwenden können, um diese Prinzipien in die Praxis umzusetzen.
Im Kern geht es beim Design um visuelle Kommunikation: Um ein effektiver Designer zu sein, muss man seine Ideen den Zuschauern klar kommunizieren können oder seine Aufmerksamkeit verlieren. Die Leute sind zwar wankelmütig; Wenn Sie ihnen einen massiven Informationsblock geben, ist es wahrscheinlich, dass 99 von 100 Menschen sich nicht die Mühe machen, sie zu lesen. Warum? Weil die meisten Menschen von Natur aus visuelle Denker sind, keine Datenverarbeiter.
Um herauszufinden, warum das stimmt, ist es wichtig, ein wenig über die Art und Weise zu verstehen, wie wir die Dinge sehen. Die Leute sind nicht das, was Sie als "Chancengleichheit" bezeichnen würden. Anstatt visuelle Informationen aufzunehmen und gleichmäßig zu verarbeiten, organisieren die Menschen das, was sie unter "visuellen Beziehungen" sehen. Betrachten wir das folgende Bild zweier gewöhnlicher Kreise:
Es besteht die Möglichkeit, dass Sie nicht "zwei Kreise" sehen. Stattdessen haben Sie "einen schwarzen Kreis und einen kleineren roten Kreis" gesehen..
Der Grund ist ziemlich einfach: Wenn etwas dargestellt wird, das so einfach ist wie zwei Kreise, sieht eine Person nicht nur zwei gewöhnliche Kreise, sondern einen Weg dahin unterscheiden zwischen den beiden. Ein Kreis kann größer oder kleiner oder farbig sein oder eine andere Vielfalt von Unterschieden. Diese Unterschiede ermöglichen es uns, zwischen Objekten zu unterscheiden und ihnen eindeutige Bedeutungen zu geben.
Betrachten wir nun ein komplexeres Bild:
Die zusätzliche Komplexität verstärkt tatsächlich unseren Wunsch, die Objekte in Bezug auf Beziehungen zu "klassifizieren". Ähnlichkeiten und Unterschiede werden zum Rahmen, durch den wir die Formen betrachten. Unterschiede in der Größenordnung deuten darauf hin, dass ein Objekt uns näher ist als das andere oder dass eines stärker ist als das andere. Variationen in der Farbe könnten darauf hindeuten, dass ein Objekt eine einzigartige Persönlichkeit besitzt, die es von dem anderen Objekt unterscheidet. Mit einigen sehr rudimentären Tools können viele Informationen in nur einem Bild bereitgestellt werden.
? Das Verständnis dafür, dass die Menschen unsere Designs in Bezug auf Beziehungen sehen, ist entscheidend, um ein effektiverer Designer zu werden.
Nehmen wir dieses Beispiel zurück zum Webdesign. Da beim Webdesign nur visuelle Informationen vermittelt werden müssen, ist es für ein effektiver Designer von entscheidender Bedeutung, zu verstehen, dass Menschen unsere Designs in Bezug auf Beziehungen sehen. Auch wenn es so aussieht, als ob es lediglich ausreichte, Informationen auszutauschen, besteht unsere Aufgabe als Webdesigner darin, diese rohen Informationen in köstliche kleine Brocken visuell relevanter Informationen zu unterteilen, die für die Augen augenfällig sind und, was noch wichtiger ist, die Mitteilung zu kommunizieren hinter einer Webseite.
Es gibt hundert Erklärungen dafür, warum Menschen Beziehungen sehen. Wenn Sie es anthropologisch zurückverfolgen würden, könnten Sie schlussfolgern, dass eine Jäger-Sammler-Mentalität die Menschen gezwungen hat, zu erkennen, dass das Sehen von Beziehungen eine Überlebensfähigkeit ist.
Sehen Sie, selbst der Urmensch hatte einen gesunden Respekt vor dem visuellen Kontrast.
Eine praktischere Erklärung ist vielleicht die einfachere Methode, mit der unser Gehirn Informationen kategorisiert. Gleichartige visuelle Elemente zu gruppieren und in sinnvolle Muster zu ordnen, ist unserer menschlichen Natur ebenso inhärent wie das Essen oder Trinken. Tatsache ist jedoch, dass Informationen, die im Hinblick auf eine Hierarchie organisiert sind, selbst in ihrer grundlegendsten Form bei der Kommunikation immer wirksamer sind als unorganisierte Informationen.
Betrachten Sie das folgende Bild von zwei Textblöcken:
Im obigen Beispiel sehen wir die einfachste Form eines visuellen Hierarchiesystems, das auf Text angewendet wird. Die Informationen in jedem der beiden Beispiele sind nicht unterschiedlich, aber die Art und Weise, wie sie auseinandergebrochen wurde, verändert die Art und Weise, wie der Leser sie sieht und aufnimmt, dramatisch. Wenn wir über visuelle Hierarchie in Bezug auf Typografie sprechen, meinen wir dies . Die Nähe, Skalierung und Ähnlichkeit der Textformatierung ermöglicht es dem Leser, das untere Beispiel in Titel und Absätze zu ordnen. Die Hierarchie verleiht den Titeln mehr Bedeutung als die anderen Informationen und erleichtert das Scannen.
Okay, das ist alles ziemlich einfaches Zeug, richtig? Lassen Sie uns einige tiefer gehende Beispiele untersuchen, wie Sie dies sehr gut anwenden können Basic Prinzip zu einigen sehr raffiniert Designs:
Das Verständnis der visuellen Hierarchie ist wichtig und gut, aber wie erstellt ein Designer sie tatsächlich? Die "Werkzeuge", die wir betrachten werden, sind so einfach wie die Werkzeuge eines Zimmermanns - Hammer, Nagel, Säge usw. - Es zählt, was Sie mit ihnen machen!
Größere Objekte erfordern mehr Aufmerksamkeit. Die Verwendung der Größe als hierarchisches Werkzeug ist eine effektive Methode, um das Auge des Betrachters auf einen bestimmten Bereich der Seite zu lenken. Da Größe eine der mächtigsten Organisationsformen ist, ist es wichtig, sie zu korrelieren Größe mit Bedeutung in einem Design. Die größten Elemente sollten in den meisten Fällen die wichtigsten sein. Die kleinsten Elemente sollten die unwichtigsten sein.
Die Verwendung von GROSSER, fetter Schrift fügt diesem ansonsten chaotischen Design Ordnung hinzu. Das Auge sollte sich natürlich von den großen Elementen hin zu den kleineren Elementen bewegen.
Farbe ist ein interessantes Werkzeug, da es sowohl als Organisationsmittel als auch als Persönlichkeitswerkzeug dienen kann. Mutige, kontrastierende Farben auf einem bestimmten Element einer Website erfordern Aufmerksamkeit (z. B. mit Schaltflächen, Fehlermeldungen oder Hyperlinks). Bei Verwendung als Persönlichkeit Werkzeug kann Farbe über anspruchsvollere Hierarchietypen hinausgehen; Die Verwendung von üppigen, beruhigenden Farben kann eine Seite emotional ansprechen. Farbe kann alles beeinflussen, von einer Website-Marke (z. B. CocaCola Red) bis zur Symbolik (z. B. coole, gedämpfte Farben). Erweiterte Farbanwendungen können sogar zur "Klassifizierung" von Informationen innerhalb einer Hierarchie verwendet werden, wie im folgenden Beispiel gezeigt:
Die Spectra Viewer-Site verwendet Farben, um verschiedene Nachrichtenkategorien darzustellen. So können Sie anhand des Farbschlüssels leicht einen bestimmten Informationstyp finden.
Der Kontrast ist relativ wichtig. Dramatische Verschiebungen in Textgröße oder -farbe vermitteln die Nachricht, dass etwas anders ist und Aufmerksamkeit erfordert. Wenn Sie von einer hellen Hintergrundfarbe zu einer dunklen Hintergrundfarbe wechseln, kann der Kerninhalt einer Seite schnell von der Fußzeile getrennt werden.
Der Kontrast zwischen dem hellen, luftigen Kopfbereich und der dunklen, erdigen Fußzeile erzeugt eine eindeutige Hierarchie von Informationen.
Durch die Ausrichtung wird eine Reihenfolge zwischen den Elementen erstellt. Dies kann so einfach sein wie der Unterschied zwischen einer "Inhaltsspalte" und einer "Sidebar-Spalte", aber die Ausrichtung kann auch komplexere hierarchische Rollen einnehmen. Betrachten Sie beispielsweise die Informationsstärke, die sich rechts oben auf einer Webseite befindet. Da Benutzer generell erwarten, dass Informationen in diesem Teil des Bildschirms mit Profilen, Konten, Einkaufswagen usw. verknüpft werden, vermittelt dies alles, was sich in diesem Bereich befindet, als "offiziell". Ausrichtung kann auch Interesse hervorrufen, wenn es auf einzigartige Weise verwendet wird, wie in den folgenden Beispielen:
Die Stuff-Vorlage verwendet ein einzigartiges horizontales Ausrichtungssystem, um Marke und Navigation vom Blogpost-Inhalt zu trennen.
Die Flex-Vorlage verwendet ein Raster-inspiriertes Layout, um visuelles Interesse sowie eine taxonomisch gesteuerte visuelle Hierarchie zu entwickeln.
Wiederholung ordnet Elementen relative Bedeutung zu; Wenn der gesamte "Absatz" -Text grau ist und ein Benutzer einen neuen grauen Textblock sieht, kann er davon ausgehen, dass es sich um einen weiteren Basisabsatz handelt. Wenn derselbe Benutzer auf einen blauen Link oder einen schwarzen Titel stößt, kann er davon ausgehen, dass er sich vom grauen Text unterscheidet und eindeutig ist.
Die Virgin-Site erstellt sich wiederholende Elemente wie Absatztext und unterbricht dann die Wiederholung, wenn sie Aufmerksamkeit erregen möchte (wie der rote Anführungszeichen)..
Die Nähe trennt Elemente voneinander und erstellt Unterhierarchien. Innerhalb einer Seite gibt es möglicherweise Widgets, die durch Leerzeichen voneinander getrennt sind. Innerhalb dieser Widgets gibt es eine neue Hierarchie von Titel, Untertitel und Inhalt. Nähe ist auch der schnellste Weg, um ähnliche Inhalte zu verknüpfen. Im folgenden Beispiel ist es leicht, bestimmte Inhaltstypen anhand ihrer Nähe zueinander zu finden.
Die Tuts + Sites machen das wirklich gut (nicht um unser eigenes Horn zu schlagen!). Die linke Spalte "Inhalt" ist in der Nähe des Sidebar-Widget-Bereichs klar getrennt. Darüber hinaus werden Metadaten in einem bestimmten Blogpost in unmittelbarer Nähe dieses Posts und weiter von anderen Posts platziert, wodurch das Gefühl der "Zugehörigkeit" verstärkt wird..
Dichtes Packen von Elementen in einem Raum fühlt sich "schwer" und unübersichtlich an; Wenn Elemente zu weit auseinander liegen, können sie die Beziehungen zueinander verlieren. Wenn eine Seite "genau richtig" gestaltet ist, erkennt das Auge leicht, wann Elemente miteinander verwandt sind und wann nicht.
Durch das Platzieren von Elementen und das Aufrechterhalten von Leerzeichen auf der Seite wird es den Benutzern leichter gemacht, die kleinen, dicht gepackten Kisten mit Inhalten zu finden.
Der Stil ist vielleicht das offenste Werkzeug in der Hierarchisten-Toolbox. Der Stil kann verwendet werden, um eine Form von Hierarchie zu vermitteln, die die anderen Werkzeuge sowohl umfasst als auch transzendiert. Zum Beispiel: Ein flacher grauer Hintergrund wird sich anders anfühlen als ein strukturierter Hintergrund aus Asphalt. Dieser Stil oder diese Persönlichkeit, die vom Designer vorgegeben wird, spielt natürlich eine Rolle bei der Gestaltung verschiedener visueller Beziehungen.
Es ist erwähnenswert, dass Stil auch eines der gefährlichsten Werkzeuge ist, die ein Designer verwenden kann. So wie ein Zimmermann seinen Finger auf einer Bandsäge abschneidet, kann ein Designer die Menschen leicht irreführen, indem er bestimmte Elemente durch Stil überbetont. Stellen Sie sich ein stark strukturiertes, stark gestaltetes Websiteelement vor, das so viel Aufmerksamkeit erfordert, dass es ablenkt, anstatt zu informieren. Die gleiche Idee gilt auch für Schriftbilder, Schaltflächen, Registerkarten und andere Elemente. Berücksichtigen Sie die Auswirkungen auf ein Gesamtdesign, wenn Sie einem Element zusätzlichen Stil und Politur hinzufügen.
Jeff Finleys Website ist eine großartige Aufgabe, viele der hier besprochenen Werkzeuge zu kombinieren, aber seine Verwendung von ursprünglich gestalteten Elementen gegenüber dem Standard-UI-Futtermittel gibt dem gesamten Design das Gefühl einer absichtlichen Hierarchie. Jeff schafft es, gerade genug Stil hinzuzufügen, damit sich seine Site persönlich anfühlt, ohne dabei über Bord zu gehen.
Bei einer guten visuellen Hierarchie geht es nicht um wilde und verrückte Grafiken oder um die neuesten Photoshop-Filter. Es geht darum, Informationen auf eine Weise zu organisieren, die für den alltäglichen Websitebesucher benutzbar, zugänglich und logisch ist.
Wie ich gerade im letzten Abschnitt angedeutet habe, ist es wichtig zu wissen, dass Hierarchie sowohl für das Gute als auch für das Böse verwendet werden kann. Denken Sie an all die nervigen Flash-Anzeigen, Popup-Fenster, Glitzer-Banner usw., mit denen das Web im Laufe der Jahre geplagt wurde! Während diese Anzeigen die Aufmerksamkeit auf sich ziehen, versagen sie letztendlich dem Websitebesitzer und dem Betrachter, indem sie die visuelle Hierarchie innerhalb einer Website durchbrechen. Wenn ein Designer eine visuelle Hierarchie aufbaut, so dass bestimmte Schlüsselelemente kaum zu finden sind, ist der Designer bei seiner Aufgabe ebenfalls gescheitert. Bei einer guten visuellen Hierarchie geht es nicht um wilde und verrückte Grafiken oder um die neuesten Photoshop-Filter. Es geht darum, Informationen auf eine Weise zu organisieren, die für den alltäglichen Websitebesucher benutzbar, zugänglich und logisch ist.
?Designer können aus dem Chaos Normalität schaffen. Sie können Ideen durch das Organisieren und Manipulieren von Wörtern und Bildern klar kommunizieren.? - Vee, Kunst und Wissenschaft des Webdesigns
Jeffrey Veen schrieb diese Wörter im Jahr 2001, aber sie haben immer noch eine große Macht, wo "Informationsüberflutung" an der Tagesordnung zu sein scheint. Als Menschen hatten wir schon immer ein Gespür für visuelle Organisation. Als Gesellschaft wurden wir jedoch in den letzten Jahrzehnten mit einem echten Tsunami visueller Informationen gesperrt. Daher sind die Menschen heutzutage für visuelle Hierarchie überempfindlich. Dies ist insbesondere im Internet der Fall, wo Studien gezeigt haben, dass regelmäßige Web-Surfer gelernt haben, Inhalte von Haus aus zu "scannen"; automatisches Suchen nach Informationen, die für ihre Interessen relevant sind, und Verwerfen / Ignorieren von Informationen, die dies nicht tun.
Aus diesem Grund ist ein Meister der visuellen Hierarchie nicht optional, sondern zwingend. Da sich die typischen Plattformen für das Surfen im Internet vom herkömmlichen Monitor auf Telefone, Tablets und sogar Fernseher erstrecken, wird es immer wichtiger, dass wir starke, klare visuelle Systeme für die Kommunikation mit Websurfern verwenden.
Zum Abschluss möchte ich mit einer sehr einfachen Übung enden. Als Beispiel verwenden wir eine häufig besuchte Website oder ein Projekt, an dem Sie kürzlich gearbeitet haben. Die Übung geht so:
In den meisten Fällen enthält die Antwort "Nein". Dafür gibt es viele Gründe - Kundenanforderungen, unerfahrene Designer, Design-by-Committee - oder hundert andere Gründe, die Sie wahrscheinlich gelesen haben. In manchen Fällen möchte der Designer möglicherweise den Zuschauer irreführen (betrachten Sie eine "kostenlose" Site, die Benutzer zu bezahlten Inhalten führen soll). Was auch immer der Grund ist, die visuelle Hierarchie zu verstehen und sie zu interpretieren ist eine Möglichkeit, das Webdesign in einem völlig neuen Licht zu sehen. Hoffentlich hilft es auch, Ihre eigene Arbeit zu informieren!
Accentsconagua