Heute werden wir besprechen, wie wichtig es ist, die Aufmerksamkeit der Benutzer gezielt auf die Teile der Seite zu lenken, die am meisten verdienen. Wir werden diskutieren, wie Menschen dazu neigen, eine Seite zu lesen, und wie wir diese Tendenz unserem eigenen Willen zuordnen können.
Wir werfen auch einen Blick auf ein fantastisches Produkt, mit dem Sie einen schnellen Überblick darüber erhalten können, wie ein typischer Benutzer Ihre Entwürfe sieht, sodass Sie sofort mit der Verbesserung Ihrer Layouts beginnen können.
Vorhersagen von Benutzeraugenbewegungen
Das Erstellen einer bewussten und absichtlichen visuellen Hierarchie ist etwas, über das ich ständig über Design Shack spreche. In der Lage zu sein, eine Seite so zu strukturieren, dass der Benutzer Informationen erhält, wie er sie haben soll, ist ein entscheidender Schlüssel zu einem erfolgreichen Grafikdesigner.
Jedes Mal, wenn Sie etwas erstellen, sollten Sie ständig analysieren, wo und wie Sie die Aufmerksamkeit des Benutzers lenken. Wenn Sie diesen Schritt vernachlässigen, kann dies dazu führen, dass ein typischer Benutzer einen unerwünschten Pfad wählt, den Sie ungewollt eingerichtet haben. Zum Beispiel könnte etwas in Ihrer Website-Fußzeile die Aufmerksamkeit eines Benutzers über alles andere gewinnen und dann von der Seite wegführen, was dazu führt, dass die Person die Aufmerksamkeit verliert und schnell weitergeht.
Je mehr Sie sich bewusst für eine visuelle Hierarchie entscheiden, desto besser werden Sie bei der Anwendung dieses Prinzips. Sie lernen, instinktiv Entscheidungen zu treffen, die die Botschaft, die Sie vermitteln möchten, maximieren, und erforderlichenfalls zu Maßnahmen anregen.
Letztendlich ist Intuition jedoch eine knifflige Sache. Einfach „herauszufühlen“ ist nicht immer die sicherste Wette, besonders wenn dieses Konzept für Sie neu ist. Wie können Sie also sicher sein, dass Ihr Design so betrachtet wird, wie Sie es beabsichtigen?
Tipp: Sie sind eine unzuverlässige Quelle
Der erste Schritt bei der Prüfung, wie ein Benutzer Ihr Design lesen könnte, besteht darin, zu analysieren, wie Sie es selbst lesen. Eine übliche Übung, bei der ich mich normalerweise bewege, ist, einige Sekunden außerhalb meines Monitors zu starren, um meine Gedanken zu klären, dann auf das Design zurückzublicken und meine Augen dahin schweifen zu lassen, wo sie wollen. Denken Sie sorgfältig darüber nach, was im Design Ihre Aufmerksamkeit auf sich zieht und warum. Dies gibt Ihnen eine gute Vorstellung davon, auf welche Elemente sich Menschen neigen.
Obwohl ich denke, Sie sollten diese Aufgabe während des gesamten Designprozesses für jedes Seitenlayout-Projekt, das Sie starten, wiederholt ausführen, ist es nicht überraschend, dass dieses Experiment von Ihnen, dem Designer, stark beeinträchtigt wird.
Wenn ich einen Raum male, sehe ich nur Fehler
Wenn Sie etwas betrachten, das Sie persönlich erstellt haben, haben Sie fast keine Chance, es tatsächlich so zu betrachten, wie es alle anderen tun. Das ist für mich nie offensichtlicher, als wenn ich in meinem Haus ein Zimmer gestrichen habe.
Nachdem ich mit dem Raum fertig bin, gehe ich einen Schritt zurück und schaue mich um, um meine Arbeit zu sehen. Dies ist zwangsläufig der Moment, in dem ich sehr entmutigt bin. Meine Augen sehen kein schön bemaltes Zimmer, sondern springen von Ort zu Ort und zielen auf die Stellen, an denen ich weiß, dass ich die kleinsten Fehler gemacht habe: jenen Punkt, an dem die Wandfarbe leicht an die Decke blutete oder an der Verkleidung hat einen leichten Tropfen.
Es ist eigentlich nicht so, dass ich ein schrecklicher Maler bin, ich bin nur anfälliger für die kleinen Fehler, weil ich weiß, dass sie da sind. Wenn jemand anderes den Raum betritt, sieht er ein schön gestrichenes Zimmer und müsste unermüdlich nach Fehlern suchen, die ich nicht ignorieren kann.
Schneller Vorlauf einige Wochen und ich habe mich an den gemalten Raum gewöhnt. Wenn ich reingehe, schaue ich mich nicht um und finde die Fehler nicht. Ich sehe die Qualität der Arbeit oder sogar die Farbe der Farbe kaum an. Stattdessen ändert sich einfach die Stimmung oder das Gefühl, wenn ich in den Raum gehe. Dies ist natürlich das Endziel des Projekts, ich konnte es nur nicht richtig erleben, bis ich mich von der Arbeit gelöst habe.
Zurück zum Webdesign
Fürchte dich nicht, es gibt tatsächlich einen Punkt zu dieser langwierigen Geschichte. Genau wie ich mit dem gemalten Raum können Sie ein Design nicht ehrlich betrachten und analysieren, wenn Sie es erstellen. Selbst wenn Sie stolz auf die Arbeit sind und keinen Fehler finden, neigen Ihre Augen dazu, Ihre Lieblingskomponenten zu betrachten: das Logo, das Sie stundenlang perfektioniert haben, die Textur, die Sie so stolz gemacht haben von Grund auf oder die Überschrift, die Sie sorgfältig mit pixelgenauem Kerning erstellt haben.
Ihr persönliches Engagement macht Sie zu einem schlechten Beispiel dafür, wie ein Benutzer ein Design liest. Also, was ist dann die Alternative?
Testmethoden
Der beste Weg, um zu sehen, wie ein typischer Benutzer ein Design betrachtet, besteht darin, einige Personen in den Vordergrund zu bringen. Wenn Sie in einem Büro arbeiten, werden Sie versucht sein, die Menschen um Sie herum zu fragen, aber Designer neigen dazu, ein Design anders zu betrachten. Wenn Sie also nicht Ihre Zielgruppe sind, benötigen Sie immer noch eine Meinung von außen.
Offensichtlich ist der beste Weg, um so etwas wie dieses zu tun, eine Fokusgruppe aufzubauen, einige Eye-Tracking-Software / -Hardware einzurichten und so viele Tests wie möglich durchzuführen, um zu sehen, wie die Leute auf das Design reagieren. Dann sammelst du die Daten, mittelt sie aus, erstellt Heatmaps und bam, du hast ein perfektes Bild davon, wie jemand dein Design liest.
Sie wollen, dass ich was mache?
Ich kann schon sehen, was du denkst. Das ist ein bisschen lächerlich, nicht wahr? Wenn Sie keine neue Homepage für ein Unternehmen mit mehreren Millionen Dollar entwerfen, haben Sie keine Zeit, Budget oder Ressourcen, um die oben genannten Ratschläge für jedes Projekt zu befolgen. Der bloße Vorschlag dazu ist völlig lächerlich!
Die gute Nachricht ist, dass Sie ähnliche Ergebnisse ohne all den Ärger erreichen können. Da sich die Leute auf bestimmte Elemente konzentrieren, können wir mithilfe von Software einigermaßen genau vorhersagen, wie eine Person das Design lesen kann. Im Grunde lehren einige kluge Leute eine Anwendung, wie sie eine Seite wie ein Mensch anzeigen, und dann zeigen Sie der Anwendung Ihr Design, um Feedback zu erhalten.
Treffen Sie Feng-Gui
Ich habe seit einiger Zeit ohne Erfolg nach einer anständigen Lösung für simuliertes Eyetracking gesucht. Dann hörte ich, wie Paul Boag ein Produkt erwähnte, das wirklich schien, wonach ich suchte: Feng-Gui.
Mit Feng-Gui haben Sie eine beeindruckende Reihe von Tools, mit deren Hilfe Sie Ihr Design von einem absolut objektiven Standpunkt aus analysieren können. Wenn Sie bisher von dieser gesamten Diskussion ein wenig eingeschüchtert wurden, machen Sie sich keine Sorgen, diese Tools sind so einfach, dass sie jeder verwenden kann.
Ein Design analysieren
Ein Beispiel für die Art von Informationen, die Sie von Produkten wie Feng-Gui erhalten können, werfen wir einen Blick auf die Apple-Homepage. Wenn jemand dieses Zeug richtig versteht, sollte es das fantastische Apple-Designteam sein. Hier ist die Seite in ihrem aktuellen Zustand:
Sobald wir einen Screenshot haben, können wir die Datei in das unten abgebildete Feng-Gui-Dashboard hochladen. Es gibt ein paar grundlegende Steuerelemente zum Anpassen der Parameter und ein Werkzeug, um bestimmte Bildbereiche auszuwählen und sie als eindeutige „Bereiche“ zu definieren. Die Aufnahme unten ist alles bereit, wir müssen nur die Schaltfläche „Analysieren“ drücken.
Die Heatmap
Sobald Sie auf die Schaltfläche "Analysieren" klicken, nimmt Feng-Gui seine Arbeit ab. In ein oder zwei Minuten stehen Ihnen einige äußerst hilfreiche Ressourcen zur Verfügung. Die erste und sicherlich eine der hilfreichsten ist eine gute alte Heatmap. Dadurch wird sofort ersichtlich, welche Teile Ihres Designs am meisten Aufmerksamkeit erregen.
Ein Blick auf unser Beispielprojekt oben und wir können sofort einige wertvolle Schlussfolgerungen ziehen. Vor allem die Schlagzeile, die das iPhone 4S ankündigt, gewinnt definitiv den Aufmerksamkeitskampf. Dies ist absolut sinnvoll, da wir alle gelernt haben, instinktiv auf große Schlagzeilen als wichtige Informationsquelle zu zielen.
Ein weiterer wichtiger Anwärter ist ein Bereich auf der rechten Seite des Helden der drei iPhones. Dies ist eine sehr wertvolle Einsicht. Der hervorgehobene Bereich ist nicht so sehr das iPhone selbst, sondern das Bild auf dem Telefon: das Gesicht eines kleinen Mädchens. Denken Sie immer daran, dass Gesichter magisch sind, wenn es darum geht, die Aufmerksamkeit des Benutzers zu erregen. Wir können einfach nicht anders, wenn sich auf einer Seite ein Gesicht befindet, werden unsere Augen direkt darauf gerichtet.
Beachten Sie, wie die Hierarchie Gestalt annimmt. Wir sehen, dass der Hauptteil unserer Aufmerksamkeit auf die Überschrift gerichtet ist. Diese wird dann etwas zur Held-Produktaufnahme hinab bewegt und durch ein farbiges Bild eines iPod Touch in der Fußzeile weiter nach unten gezogen. Diese Seite scheint wirklich von oben bis unten gut zu lesen.
Wir können diese Informationen auf andere Weise sehen, indem Sie auf die Registerkarte "Deckkraft" klicken. Hier wurde alles verdunkelt und gemäß den Heatmap-Werten wieder eingeblendet. Diese Ansicht gibt Ihnen wirklich ein perfektes Bild davon, was ein Benutzer nach einem kurzen Blick auf die Seite aufnehmen kann (was normalerweise alles ist, was Sie erhalten).
Die Blick-Handlung
Wie bereits mehrfach angedeutet, ist es nicht nur wichtig zu wissen, in welcher Reihenfolge der Benutzer diese Informationen sieht. Dies hilft Ihnen, die Seite so zu gestalten, dass das Verständnis und die Aufbewahrung wichtiger Elemente maximiert werden.
Feng-Gui sorgt für dieses Bedürfnis in Form eines Blickschaubildes. Dies zeigt die beste Einschätzung der Software, wie ein Benutzer die Seite lesen könnte. Das Ergebnis sieht ziemlich verrückt aus, was gut ist, da unsere Augenbewegungen beim Lesen einer Seite ziemlich sporadisch sind.
Es ist wichtig zu wissen, dass es eine natürliche Neigung ist, eine Seite in einem Z-Muster zu lesen: von links nach rechts und von oben nach unten. Als Designer können wir diese natürliche Neigung jedoch brechen. Beachten Sie, dass sich der erste Fokuspunkt im obigen Beispiel oben rechts auf der Seite befindet. Es gibt definitiv ein merkliches Hin und Her Muster, während Ihre Augen versuchen, auf das zurückzugreifen, was natürlich ist. Laut Feng-Gui dauert jeder Fokuspunkt dieses Bildes „für das Lesen von sprachlichem Text etwa 200 ms und für das Betrachten einer Szene von 350 ms“. Auch wenn es so aussieht, als würde all diese Augenaktivität dauern eine Weile, in Wirklichkeit passiert das in wenigen Sekunden!
Wenn wir über diese Ergebnisse nachdenken, können wir wieder sagen, dass sich die Apple-Seite ziemlich gut verhält. Wir beginnen mit der Überschrift, springen zu den Produkthelden, schauen hinunter auf die Fußzeile und beginnen dann, den feineren Druck auf der Seite zu lesen. Dies ist eine absolut logische Entwicklung, die zeigt, dass Feng-Gui ziemlich solide arbeitet.
Hilft das wirklich?
Für viele Designer erscheint dies alles als sinnlose Übung. Nach Jahren als professioneller Designer hätten viele von uns ähnliche Schlussfolgerungen ziehen können. Ich möchte Sie jedoch dringend bitten, den Wert von Produkten wie diesem nicht zu unterschätzen.
Für den Anfang sind nicht alle Designer so konzipiert, dass sie so denken. Wenn Sie Eye-Tracking-Simulatoren in Ihren Standard-Workflow integrieren, können Sie daran denken, ein Design kritisch zu analysieren, um zu sehen, ob es Ihre Ziele erreicht. Selbst wenn Sie die Theorie nicht verstehen, ist es sehr schön, einen objektiven Standpunkt zu sehen. Software ist nie so gut wie eine Fokusgruppe von fünfzig Benutzern, aber sie ist definitiv eine gute Alternative für diejenigen, die wenig Zeit und Geld haben.
Unabhängig davon, ob Sie ein Tool benötigen, um zu sehen, was ein Benutzer sieht, können Sie darauf wetten, dass Ihr Kunde nicht so gut ausgebildet ist (sonst würden Sie ihn brauchen?). Dies macht Heatmaps, Blickdiagramme und dergleichen zu unglaublich nützlichen Tools, um Kundenberichte zu erstellen, die Ihre Designentscheidungen rechtfertigen. Mit diesen werden Sie in einer Präsentation unendlich professioneller aussehen! Sie können einen solchen Bericht sogar als optionales Premium-Add-On bündeln, um Ihren Gewinn zu steigern.
Fazit
Zusammenfassend lässt sich sagen, dass das Seitenlayout viel mehr beinhaltet, als lediglich die Elemente so anzuordnen, dass sie hübsch aussehen.Es geht darum, eine Nachricht und ein Benutzererlebnis absichtlich zu strukturieren, um festgelegte Ziele zu erreichen. Zu oft stecken Designer Elemente dort ein, wo sie scheinen, ohne darüber nachzudenken, wie sie den Informationsfluss auf der Seite stören könnten.
Tools wie Feng-Gui sind eine große Hilfe bei der Suche nach einer logischen und effektiven Strukturierung Ihrer Konstruktionen. Haben Sie einen ähnlichen Service ausprobiert? Wie ist es zu vergleichen? Lass es uns in den Kommentaren wissen!
Bildnachweise: Micky, karpacious, Interaction Lab der City University