Wie Eye Scanning die visuelle Hierarchie in UX Design beeinflusst
Während Jahrtausende der Kunst, von griechischen Vasen bis hin zu italienischen Kapellen, unser Verständnis davon geprägt haben, was Schönheit ist, verleiht die vergleichsweise neue Technologie hinter Eye Tracking eine neue Dynamik, wie wir die Welt visuell wahrnehmen. Mehr noch, diese aufregende neue Wissenschaft hilft uns, Websites, die sowohl effektiv als auch ästhetisch sind, besser zu verstehen und besser zu gestalten.
Webdesign (als visuelle Kunst) folgt vielen der gleichen Regeln wie traditionelle Kunstformen. In diesem Artikel werden wir kurz auf die Bedeutung der visuellen Organisation eingehen und dann erläutern, wie die Ergebnisse von Eye-Tracking das Layout von Web-Interfaces verbessern können.
Erstellen einer visuellen Organisation
Es überrascht nicht, dass der Erfolg einer Website von der Art und Weise beeinflusst wird, wie eine Website aussieht, aber es ist wichtig, die Gründe dafür zu ermitteln. In seiner Zeitung Mit der visuellen Hierarchie kommunizieren Luke Wroblewski, Autor und Senior Principal of Product Design bei Yahoo!, erklärt, dass die visuelle Darstellung eines Web-Interface für Folgendes wesentlich ist:
Beratung
Eine gut gemachte Benutzeroberfläche kann Benutzer von einer Aktion zur nächsten führen, ohne übermütig zu sein. Unabhängig davon, was Sie über ihre Geschäftspraktiken denken, besteht kein Zweifel Uber ist ein Beispiel für eine unglaublich glatte, aber strukturierte Website. Wertvorschläge stehen oben auf der Bildlaufleiste, gefolgt von einem lustigen Schieberegler, um mehr über die verschiedenen Fahrzeugoptionen zu erfahren und mit dem logischen nächsten Schritt, Fahrten in Ihrer Stadt zu finden.
Kommunikation
Durch das Vergleichen von ansonsten unähnlichen Teilen von Information kann die UI Links in dem Geist des Benutzers bilden, die Nachrichten kommunizieren, ohne etwas zu sagen. Schauen Sie sich die beliebte Design-Website an Abduzidi : Die großen Kategorien sind ganz oben, der Inhalt in der Mitte und die detaillierten Kategorien in der Fußzeile.
Emotionale Wirkung erzeugen
Machen Sie nicht den Fehler zu denken, dass Ihre Website einfach ein mechanisiertes Werkzeug ist. Websites haben das Potenzial, emotionale Verbindungen zu knüpfen, und wenn dies nicht der Fall ist, werden dies die Konkurrenten tun. In der Tat neigen die Menschen eher dazu, die Mängel Ihrer Schnittstelle zu vergeben, wenn Sie ein positives Ergebnis erzielen emotionale Reaktion . MailChimp ist ein perfektes Beispiel für eine Website mit einer Benutzeroberfläche, die benutzbar, unbeschwert und wirklich unterhaltsam ist.
Das vorhersehbare menschliche Auge
Manchmal scheint es, dass deine Augen eigene Gedanken haben. Jahre der Evolution haben uns den Instinkt gegeben, Objekte und Bewegungen zu entdecken, die wir für wichtig halten, ob jemand sexy über die Straße läuft oder ein kuscheliger Zeichentrickbär, der Honig verkauft. Während das relative Gewicht, das wir auf das Wesentliche legen, von Person zu Person variieren kann, ist die eine Konstante die Mechanismen, auf denen sie sich verhalten. In einem großen Maßstab folgt die Mehrheit der Menschen den gleichen Trends beim Betrachten einer Webseite.
Von diesen Trends werden zwei im Detail diskutiert. In einem (n Artikel über visuelle Prinzipien Alex Bigman, Design Writer für 99Designs, zeigt, wie für die Kulturen, die von links nach rechts lesen, diese beiden Muster am häufigsten - und am nützlichsten - beim Entwerfen des Layouts einer Website sind.
Das erste, das F-Muster, wird hauptsächlich für Text verwendet (kann aber für andere Zwecke angepasst werden). Das zweite, das Z-Muster, kann für jedes visuelle Layout verwendet werden. Wir werden die verschiedenen Vor- und Nachteile für jeden unten erklären.
F-Muster
Das F-Muster ist der Sehtrend, der auf Seiten auftritt, die stark mit Text, typischerweise Blogs, Nachrichtenquellen, Artikeln usw., beladen sind.
Wenn sie mit einem Wortblock konfrontiert werden, scannen die meisten Leser zuerst eine vertikale Linie auf der linken Seite des Textes, wobei sie typischerweise nach Stichwörtern oder Interessenpunkten in den Anfangssätzen des Absatzes suchen. Schließlich findet der Leser etwas, das ihm gefällt, und fängt an, normal zu lesen und horizontale Linien zu bilden. Das Endergebnis ist etwas, das wie die Buchstaben F oder E aussieht.
Jakob Nielson von der Nielson Norman Group führte eine Lesbarkeitsstudie durch, bei der 232 Benutzer Tausende von Websites scannten. Aus seiner Forschung hat er aufgenommen, was er glaubt die praktischen Auswirkungen des F-Musters:
- Benutzer werden selten jedes Wort Ihres Textes lesen.
- Die ersten beiden Absätze sind die wichtigsten und sollten Ihren Haken enthalten.
- Beginnen Sie Absätze, Zwischenüberschriften und Aufzählungspunkte mit verlockenden Keywords.
Wie immer ist die obere linke Ecke die wichtigste, da hier alle Lesekulturen von links nach rechts beginnen. Der Benutzer wird normalerweise horizontal über die Kopfzeile lesen, also ist hier ein guter Platz für eine Navigationsleiste und / oder eine Call-to-Action. Dann scannt der Benutzer die linke Seite vertikal nach unten, bis sie auf Inhalte stößt, die sie interessieren. Schließlich endet der Benutzer auf der rechten Seite der Seite, ein großartiger Ort mit einem Call-to-Action oder Werbung. Lassen Sie die Seitenleiste den Inhalt nicht überfordern.
Aber das F-Pattern ist keine Vorlage - es ist wirklich keine exakte Übung, sondern eher ein loses Handbuch, zusammengestellt aus den Trends der meisten Benutzer. Denken Sie daran, weil das F-Pattern verliert seine Wirksamkeit nach den obersten Reihen der F.
Kickstarter verwendet ein Kartenlayout, um Feature-Projekte zu zeigen und nach den ersten 500 Pixeln visuell nicht langweilig zu werden.
Andererseits, iZettle nimmt das F-Pattern auf ihrer Homepage eher konventionell an. Sie vermeiden jedoch ein Vorlagen-Layout, indem sie die Primärkopie ("Wachsen Sie Ihr Geschäft mit iZettle") und Call-to-Action auf einem großen Hintergrundbild überlagern. Wir würden dies als das Minimum betrachten, um dieses Lesemuster an Ihr Schnittstellenlayout anzupassen.
Z-Muster
Außerdem ist das Z-Muster das einfachste und universellste Muster, das auf jeder Webseite verwendet wird, die auf Text basiert. Der Leser scannt zuerst horizontal über die Oberseite, fährt nach unten und zurück zur linken Seite und scannt dann horizontal erneut über den Boden.
Es ist wichtig zu verstehen das vielseitige Z-Muster , da es die zentralen Website-Anforderungen wie Hierarchie, Branding und Handlungsaufforderungen adressiert. Seine Schönheit liegt in seiner Einfachheit und einem idealen Layout für Websites, die sich auf einen Call-to-Action konzentrieren. Bei komplexeren oder überhöhten Inhalten ist das Z-Muster jedoch möglicherweise zu einfach.
Denken Sie, dass das Z-Muster für Ihre Seite richtig ist? Hier einige Best Practices zur Optimierung der Vorteile:
- Hintergrund - Behalte den Hintergrund wo er hingehört: im Hintergrund. Sie möchten Ihren Leser nicht ablenken.
- Punkt # 1 - Als Ausgangspunkt möchten Sie hier in der Regel Ihr Logo platzieren.
- Punkt 2 - Während der Haupt-Call-to-Action später kommen sollte, ist hier ein guter Ort für einen zweiten Call-to-Action, der eine horizontale Navigationsleiste interpunktiert. (Ein schöner Grafik- oder Bildschieberegler hilft dabei, den oberen und unteren Rand der Seite zu trennen und den Leser zu ermutigen, auf dem vorhersehbaren Pfad des Z-Musters zu bleiben.)
- Punkt 3 - Dies ist ein netter Ort, um Aufmerksamkeit für andere Links zu erregen, oder alternativ, um die Sicht des Benutzers zum Endziel zu führen: Punkt # 4.
- Punkt # 4 - Als "Ziellinie" ist dies der perfekte Ort für Ihren wichtigsten Call-to-Action.
Das erste, was Sie tun möchten, ist, die Elemente auf Ihrer Seite für sich selbst zu priorisieren, damit Sie die meisten und die unwichtigsten kennen. Von da an ist es nur eine einfache Frage, sie den entsprechenden "Hotspots" zuzuordnen.
Darüber hinaus kann das Z-Muster über die gesamte Seite wiederholt und erweitert werden. Sehen Sie sich einmal an, wie Evernote Zick-Zacks nach unten durch Calls-to-Action und Verkaufspunkte.
DropBox nimmt dieses Zick-Zack-Muster visuell einfacher an, indem Hintergrundbilder wegfallen. Stattdessen ist mehr Funktionalität in das Layout integriert, da ein Call-to-Action "Learn More" hilft, jeden Abschnitt des Wickelmusters zu verbinden, während sich Ihr Auge die Seite hinunter bewegt. Dies hilft auch informierten Lesern, auf die nächste relevante Seite zu klicken, ohne die gesamte Kopie zuerst lesen zu müssen.
Sicht in Voraussicht
Tolles Interface-Design sollte wie eine unsichtbare Hand sein, die den Leser mit der Geschwindigkeit des Denkens begleitet. Der wichtige Ausweg aus den F-Pattern- und Z-Pattern-Trends besteht darin, dass Sie Ihren wichtigsten Inhalt dort platzieren können, wo der Leser ihn natürlich "stolpern" wird, anstatt ihn zu zwingen, sie zu betrachten.
Feinsinnigkeit ist ein großer Vorteil für jedes Seitenlayout, und diese Muster können den Unterschied ausmachen, ob man etwas dem Leser vorschlägt oder es ihm in den Hals drückt.
Empfohlenes Bild, verwendet Bild des menschlichen Auges über Shutterstock.