Visuelle Hierarchie im UX-Design

Diese Woche bei Lambda haben wir uns mit Designtheorie beschäftigt - von Typografie und Farbe bis hin zu Design für den menschlichen Geist (das kommt als nächstes). Hier jetzt meine Zusammenkünfte zur visuellen Hierarchie.

Whitespace-

Ist nicht unbedingt weiß. Es ist die Isolation des Objekts mit dem Puffer von nichts, was darauf hindeutet, dass es sich um einen heißen Schuss handelt und Raum für sein Ego braucht, also sollte man es wirklich betrachten. Dies gilt auch, wenn das Objekt klein ist! (wie es oft geht, ähm). Je mehr Immobilien es hat, desto wichtiger ist es.

Anlage A

Wenn Sie nur zwei Elemente auf dem Bildschirm platzieren: ein visuelles Element und etwas Text, lassen sie viel Platz frei. So wissen Sie, dass alles, was auf dem Bildschirm angezeigt wird, alles ist, was Sie wissen müssen. Das visuelle Element sichert den Text, falls Sie ihn zuerst betrachten, da wir dazu neigen, mit menschlichen Gesichtern zu arbeiten (insbesondere mit solchen Lippen, aiy!). Entweder Sie konzentrieren sich auf das, Sie erhalten immer noch die Botschaft von minimalem Hüftraspelmaterial.

Eye Tracking-

Wenn wir eine Seite lesen, werden unsere Augen, abhängig von ihrer Anordnung, im Allgemeinen entweder einem Z- oder einem F-Muster folgen. Dies ist gut zu beachten, da es uns zeigt, wo sich unsere Benutzer am wahrscheinlichsten konzentrieren. Die Art und Weise, wie wir unsere Inhalte gestalten, beeinflusst diese Blogs, und dichter Text wird in einem F gelesen, während das Z-Muster für einen schnelleren Scan einer helleren Seite verwendet wird. Schauen Sie sich diese nächsten Bildschirme auf der Dropbox-Seite an, die dies zeigen.

Sehen Sie, wie es liest: Bild, Text, Text, Bild. Es bewegt dein Auge in dieser Z-Formation. Dies ist ein bisschen schwierig, da es sich auf… bezieht

Implied Movement - ein anderes verwandtes Prinzip der visuellen Hierarchie. Es besagt, dass wir die Art und Weise beeinflussen können, in der jemand mit einer Seite in Kontakt kommt, indem wir die Art und Weise bestimmen, in der seine Augen darauf wandern. Wenn wir die Seite mit einem implizierten Fluss von Seitenlayouts mit diagonalen Schritten zwischen den Inhalten auslegen, ist es leichter zu verstehen. Es gibt keine wirkliche Bewegung, aber unser Gehirn kann die imaginären Punkte verbinden und fühlt, dass es einen Fluss gibt. Dies ist wirklich förderlich für die Verdaulichkeit Ihrer Inhalte. Wenn Dropbox alle Informationen in einem Blog-Format zusammengestellt hätte, wären Sie beim Lesen nicht furchtbar begeistert. Dieses einfache, geführte Z ist viel angenehmer.

Symmetrie - ist eigentlich weniger ansprechend, wenn wir über Textformat sprechen, wie oben. Es gibt Ihnen keine visuelle Karte, wohin Sie gehen müssen. Alles sieht genauso wichtig aus. Sauber, ja, aber langweilig, und nicht die Initiative ergreifen, um Ihnen zu sagen, was Sie wie geben muss. In einigen Fällen ist es jedoch hilfreich. Schauen Sie sich noch einmal eine andere Dropbox-Seite an.

„Die Daten in unserem Gesichtsfeld können normalerweise auf mehr als eine Weise interpretiert werden, aber unsere Vision organisiert und interpretiert die Daten automatisch, um sie zu vereinfachen und ihnen Symmetrie zu verleihen.“ Dieses Foto ist eine komplexe Szene, aber der Geist nimmt sie und halbiert sie sauber, nur zwei Elemente der vielen, die möglich sind. Dabei werden Sie mit den dazugehörigen Informationen zur Seite des Bildschirms geführt. Dieses Bild ist ein grobes Beispiel für…

Die Regel der Dritten

Die Drittelregel bedeutet, dass Sie Ihre Seite in zwei horizontale und zwei vertikale Linien teilen und Ihren wichtigen Inhalt entlang dieser Linien oder an den Punkten platzieren, an denen sie sich treffen. Ihr Schwerpunkt sollte nicht vor einem Zentrum liegen, sondern in einem Drittel Ihres Feldes.

Die Regel der Ungewöhnlichen

Das Gehirn findet ungerade Zahlen interessanter als gerade Gruppierungen, ähnlich wie die Symmetrie sich löst. Sie können dies nutzen, indem Sie Elemente auf Ihrer Benutzeroberfläche positionieren… nicht symmetrisch. Durch das Versetzen von Teilen von Inhalten und Visuals sowie die Verwendung von Implied Movement im Tandem wird der Benutzer anregender gestaltet.

Unter der Falte

Wenn Zeitungen unsere wichtigste Form der Informationssammlung waren, hatten sie über der ersten Falte, um genug Aufmerksamkeit auf sich zu ziehen, um den Kauf zu rechtfertigen. In der digitalen Welt haben wir eine ähnliche Situation, mit einer begrenzten Anzahl von Bildschirmen, um die Aufmerksamkeit des Benutzers genug zu erregen, um ihn zum Scrollen zu motivieren. Dies kann man sehen, indem man A) den leistungsfähigsten Inhalt über die Falte legt und B) den Benutzern einen Vorgeschmack auf das nächste Element gibt, das ihnen mehr zeigt, aber da ein Teil davon verdeckt ist, müssen sie scrollen.

Hier haben wir auch bei der Arbeit unhöfliche Widersprüche - zwei Elemente oben, dann saugt sie Ihre Sicht unten direkt an das einzige Element, das sich dort befindet, unter der Falte - von dem Sie nicht alles sehen können! Deshalb scrollen Sie.

Kontrast-

Ein Objekt im Vergleich zum anderen hervorheben. Je größer der Kontrast ist, desto wichtiger erscheint es. Dies geschieht meistens mit Farben wie Weiß auf Schwarz, Blaugrün und Schwarz usw. Ein Kontrast, der scharf und offensichtlich ist, zieht das Auge schnell an.

Größe-

Je größer, desto wichtiger. Normalerweise wird zuerst das Größte auf der Seite betrachtet. Fotos haben jedoch Vorrang. Wenn Sie also großen Text verwenden, werden Fotos, insbesondere von Gesichtern oder Personen, zuerst bemerkt, gefolgt von Text.

Ich bin dankbar, dass Farbe, Typografie und Layout tatsächlich eine Wissenschaft hinter sich haben. Hier gibt es einiges an kreativem Flair und persönlicher Note, aber Design ist wirklich eine Methode mit Theorien und bewährten Pfaden, die dazu beitragen, dass Ihr Inhalt weniger unschön aussieht. Lernen Sie die Gründe dafür kennen, warum die Dinge so sind, wie sie Ihnen helfen, sie so zu machen, wie sie sind… besser ?! Wütend. Manchmal sind die Regeln gut.