Designjargon erklärt: das Z-Muster
Im Designjargon erklärt: das F-Muster Wir haben darüber gesprochen, wie Eye-Tracking-Studien Zeigen Sie, dass Benutzer Bildschirme auf ähnliche und vorhersehbare Weise scannen.
Für einen UI-Designer zeigen diese Scanmuster das optimale Layout von Elementen für bestimmte Arten von Websites. Diese kalte, harte Wissenschaft erzeugt bei richtiger Anwendung beim Benutzer ein magisches Gefühl der Vertrautheit. Die Benutzeroberfläche wirkt intuitiv und persönlich, und alles befindet sich am richtigen Ort.
Unser vorheriger Artikel konzentrierte sich auf eines dieser Scanmuster, das F-Muster, und dieses wird ein anderes, ebenso wichtiges untersuchen: das Z-Muster.
Im Folgenden erklären wir, was dies ist, wie es angewendet wird, und zeigen dann einige echte Beispiele dafür, wie es gut gemacht wird.
Weitere Informationen zum Z-Muster, zum F-Muster und zu vielen anderen visuellen Webdesign-Techniken finden Sie in den kostenlosen E-Books Webdesign für das menschliche Auge und Best Practices für die Web-Benutzeroberfläche .
Dekonstruktion des Z-Musters
Während das F-Muster ideal für text- oder inhaltsintensive Websites ist, funktioniert das Z-Muster besser für lockerere, spärlichere Websites.
Minimalistische Sites oder Sites, die sich hauptsächlich um ein oder zwei Hauptelemente konzentrieren, können das Z-Muster implementieren, um Benutzer zu antizipieren und zu ermutigen, dieser natürlichen Methode zu folgen.
Auf diese Weise können Designer sicherstellen oder zumindest die Wahrscheinlichkeit erhöhen, dass die wichtigsten Elemente gesehen werden.
Wie beim F-Muster beginnt der Benutzer in westlichen Kulturen, die von links nach rechts und von oben nach unten lesen, fast immer in der oberen linken Ecke und scannt oben. Das Unterscheidungsmerkmal des Z-Musters ist die 'Z'-Form, der es als nächstes folgt. Anstatt nach links zurückzukehren und dann nach unten zu gehen, geht das Sehvermögen des Benutzers gleichzeitig nach links und unten und scannt dann erneut eine horizontale Linie von links nach rechts.
Das Interessante und Nützliche an dem Z-Muster ist, dass es sich wiederholt, manchmal unendlich oft, wenn der Inhalt ansprechend genug ist.
Dadurch entsteht eine endlose Zick-Zack-Struktur, die sich so lange nach unten erstreckt, wie Sie die Aufmerksamkeit des Benutzers auf sich ziehen können. Damit eignet sich dieses Muster perfekt zum Erstellen visueller Erzählungen mit langem Scrollen, unendlichem Scrollen und Parallaxen-Scrollen.
Im Gegensatz zum F-Muster, das sich gut für Websites eignet, bei denen eine Mischung aus visuellen und Textinhalten organisiert werden muss, eignet sich das Z-Muster gut für Websites mit einer klaren und direkten Agenda (z. B. eine Zielseite mit einem Hauptaufruf) Aktion).
Das Z-Muster schafft eine klare Struktur und Hierarchie und baut, wenn es richtig gemacht wird, eine Dynamik auf, die in einem letzten Aufruf zum Handeln gipfelt.
Der Nachteil ist, dass es für Websites mit viel Inhalt verwirrend sein kann.
Anwenden des Z-Musters
Das Z-Muster besteht normalerweise aus Reihen mit hellem Inhalt, die mit großen Grafiken oder anderen aufmerksamkeitsstarken Inhalten durchsetzt sind.
Das Z-Muster beginnt genau wie das F-Muster, daher ist Ihr wichtigster Punkt die obere linke Ecke (Punkt 1). Dies ist einer der wenigen Punkte auf dem Bildschirm, die Ihr Benutzer mit ziemlicher Sicherheit sehen wird, und trägt daher normalerweise das Firmenlogo.
Wieder wie beim F-Muster wird der Benutzer dann höchstwahrscheinlich von links nach rechts über den oberen Rand der Seite scannen (Punkt 2). Für den Designer bedeutet dies zwei Dinge.
- Erstens handelt es sich bei dieser obersten Reihe um erstklassige Immobilien, weshalb sie normalerweise mit einer horizontalen Navigationsleiste gefüllt ist. Fast unmittelbar nach der Landung auf Ihrer Website wissen Ihre Benutzer, welche Seiten verfügbar sind und wo sie zu finden sind.
- Zweitens bedeutet dies, dass die obere rechte Ecke ein großartiger Ort für einen Aufruf zum Handeln ist, da die Sicht des Benutzers einen Moment innehält, bevor er fortfährt.
Folge dem Auge
Das Auge des Benutzers fällt dann nach unten in die Mitte. Hier finden Sie eine große Grafik oder manchmal eine Benachrichtigung. Eine andere Strategie besteht darin, diesen Bereich relativ leer zu halten: Ein leerer Bereich hier bewegt den Benutzer schneller vorwärts und fördert eine sich wiederholende Trance.
In beiden Strategien ist der wichtige Teil der Mitte, dass sie den Benutzer nicht ablenkt oder vom Z-Musterpfad abweicht. Das bedeutet, dass schwere oder visuell komplizierte Platzhalter nicht empfohlen werden.
Das Visier des Benutzers geht dann in die untere linke Ecke (Punkt 3) und scannt erneut nach rechts (Punkt 4). Am unteren Rand des Bildschirms finden Sie normalerweise horizontal ausgerichtete Inhalte, manchmal sogar ein Balkenmenü, das das obere widerspiegelt.
Sie werden auch feststellen, dass die Punkte am Ende der Linie auf der rechten Seite, Punkte 2 und 4, am besten für Handlungsaufforderungen geeignet sind, z. B. die Schaltflächen 'Kostenlos anmelden' im Beispiel. Stellen Sie sich diese Punkte wie die Ziellinien vor, an denen das Auge pausiert, bevor Sie fortfahren.
Das Muster wiederholen
Nach Punkt 4 wiederholt sich das Muster weiter. Sie können das Z-Muster so lange verlängern, wie Sie möchten, und an jedem der Punkte auf der rechten Seite neue Handlungsaufforderungen wiederholen oder einführen.
Im Allgemeinen ist das Z-Muster entspannter als das F-Muster. Es ermöglicht Raum zum Atmen und Vielseitigkeit - sowohl in Bezug auf die Dauer der Aufmerksamkeit des Benutzers als auch in Bezug auf die Breite der Lücken in der Mitte. Dies macht es förderlich für Storytelling oder Verkaufsgespräche, aber ineffektiv bei der Organisation verschiedener Inhalte.
Aufgrund seiner Betonung auf Handlungsaufforderungen ist das Z-Muster für Startseiten und Zielseiten nicht ungewöhnlich und beeinflusst den Benutzer auf subtile Weise, wohin sie als nächstes gehen sollen. Es ist ein beliebtes Layout in verschiedenen Branchen, und Sie können es häufig an den oberen und unteren Navigationsleisten erkennen. Hier sind einige Beispiele...
01. AirBnBs Kartenseite
Wie in beschrieben Webdesign für das menschliche Auge (Buch 2) Das Muster beginnt am traditionellen Firmenlogo in der oberen rechten Ecke. Da es keine obere Navigationsleiste gibt, schießt das Auge wahrscheinlich direkt in die obere rechte Ecke, mit Handlungsaufforderungen zurück zur ursprünglichen Site und Freigabeoptionen sowie einer Soundsteuerungsoption.
Das Auge scannt dann die Karte - den tatsächlichen Inhalt der Seite, aber vorerst nur einen Hintergrund - bevor es sich in der unteren linken Ecke niederlässt. Die Sicht des Benutzers folgt dann dem unteren Navigationsmenü in die untere rechte Ecke, wo sich eines der wichtigsten Steuerelemente befindet: der Zoom.
Während sich der relevante Inhalt in der Mitte befindet, scannen Benutzer wahrscheinlich die gesamte Seite, bevor sie interagieren. Durch die Anordnung aller Elemente in einem Z-Muster stellt AirBnB sicher, dass der Benutzer die Steuerelemente der Seite und ihre Positionen in den ersten Augenblicken sieht, sodass er optimal mit der Seite interagieren kann. Das Z-Muster-Layout rationalisiert diesen Prozess einfach.
02. British Airways
Ein weiteres großes Unternehmen, das das Z-Muster nutzt, ist der Standort von British Airways, auf dem die neuen Flugzeuge vorgestellt werden. Vorhersehbarerweise befindet sich das Firmenlogo am Ausgangspunkt, und wie bei Airbnb bedeutet das Fehlen eines oberen Navigationsmenüs, dass das Auge schnell in die rechte Ecke geht. Hier hat das Unternehmen beschlossen, nur die wichtigsten Links für die Seiten Galerie und Routen zu bewerben.
Das Auge geht dann über das große Bild - wunderschön anzusehen, aber letztendlich bedeutungslos für die Schnittstelle außerhalb der Ästhetik. Der Benutzer kann die Begrüßung lesen oder ignorieren, abhängig von seinem Zeitrahmen oder ob er weiß, wo er gelandet ist.
Da Punkt 3 am wenigsten wichtig ist, haben British Airways (und viele andere Unternehmen) beschlossen, hier ihre gesetzlichen Anforderungen zu stellen. Dies ist jedoch eine strategische Entscheidung. Die horizontale Textzeile hier ermutigt die Website des Benutzers, sich direkt auf derselben Ebene zu bewegen.
Wie in erklärt Web-UI-Design für das menschliche Auge (Buch 1) Das Gestaltprinzip von Linien zeigt, dass die Website des Benutzers entlang klarer Linien verläuft und dabei an Dynamik gewinnt. Diese Platzierung der Rechtslinie unterstützt tatsächlich das Z-Muster und lenkt den Blick auf relevantere Inhalte… gipfelt in der Schaltfläche Teilen in Punkt 4.
03. Irregulart
Irregulart verwendet ebenfalls das Z-Muster, zeigt jedoch eine wichtige Variation, auf die wir hinweisen möchten.
Wie im vorherigen Beispiel erwähnt, ist Punkt 3 die am wenigsten wichtige Stelle auf der Seite. Aus diesem Grund haben einige Designer das Z-Muster komplett weggelassen (wie es das Team von Irregulart getan hat). Das Z-Muster ist immer noch wirksam, jedoch wird das untere / mittlere zum neuen Punkt 3. Dies macht diesen wichtigen ersten Blick nur ein Haar schneller und stimmt die Stelle für ein einfacheres und minimalistischeres Gefühl ab.
Denken Sie daran, dass das Z-Muster wie die meisten Designprinzipien nur eine Richtlinie ist. Sie müssen nicht jeden Punkt befolgen, aber auf jeden Fall die Grundlagen im Auge behalten und nach Bedarf anpassen.
Fazit
Der wichtige Aspekt des Z-Musters ist seine Struktur.
Es kann vereinfachte Websites verbessern, aber die wenigen strukturellen Punkte sind für seine Wirksamkeit von entscheidender Bedeutung. Unterschätzen Sie sie daher nicht. Struktur ist die größte Stärke des Z-Musters, aber auch seine Schwäche. Ein ablenkendes Element, das nicht am richtigen Ort ist, entgleist den Pfad des Benutzers und besiegt den gesamten Zweck des Layouts.
Wörter : Jerry Cao
Jerry Cao ist Content-Stratege bei UXPin - die Wireframing- und Prototyping-App - wo er In-App- und Online-Inhalte für die Wireframing- und Prototyping-Plattform entwickelt. Weitere Informationen zum Verwenden von Modellen aller Art und Wiedergabetreue finden Sie unter Der Leitfaden zu Mockups .
So was? Lese das!
- 5 Regeln für die visuelle Ausrichtung im Interaktionsdesign
- Wie man Erstelle eine App : Probieren Sie diese großartigen Tutorials aus
- Kostenlose Grafikdesign-Software steht Ihnen jetzt zur Verfügung!
