iProspect Logo

Das Z Raster Korsett oder Chance

Teaser Image der  Detailseite zum Z-Modell Blogbeitrag Schönheit liegt im Auge des Betrachters und kann daher nicht reglementiert werden. Analysiert man allerdings die besten Webseiten der letzten Jahre und reduziert diese auf ihren Grundaufbau, wird man feststellen, dass diese Seiten einem ähnlichen Wahrnehmungsraster folgen. Z-Raster Post Content IMG 1

Unser Z-Raster

Der Ursprung des Z-Rasters liegt – abgesehen vom asiatischen und afrikanischen Raum - im gelernten Lesefluss des Menschen, der durch die Leserichtung von oben links nach unten rechts vorgegeben wird. In gewisser Hinsicht lässt sich das Raster aus der analogen Welt (bspw. das Lesen eines Buches) in die digitale Welt (bspw. die Betrachtung eines Web-Auftritts) übertragen. Selbstverständlich gelten im Web eigene Regeln, welche jedoch durch bewusstes Visual-Guiding gesteuert werden können. So kann der Einsatz von Bildern, Farben, Texte oder Formen den Wahrnehmungsverlauf maßgeblich beeinflussen und den User ans gewünschte Ziel führen. Unser Z-Raster bleibt im Hintergrund jedoch grundsätzlich erhalten und dient als grobes Grid, auf dem die wichtigsten Content-Inhalte dem User aufgezeigt werden müssen.

WWW

In der Konzeptionsphase steht nicht die Website als solche im Mittelpunkt, sondern der User. Hierbei werden u.a. psychologische oder soziale Aspekte beleuchtet. Im Design hingegen betrachten wir die Website eher oberflächlich. Es müssen also Kompromisse gefunden werden, damit die zielgruppenorientierte Führung der User durch die Seite bis an das gewünschte Ziel nicht der Kreation zum Opfer fällt. Diesen Brückenschlag schafft das WWW-Model, welches so einfach, gleichzeitig aber detailverliebt und nicht zuletzt so präzise und schnell wie möglich aufgebaut sein muss. Ferner sei gesagt, dass „WWW“ in diesem Beitrag nicht für „World Wide Web“, sondern für die drei Fragen „Wer?“, „Was?“ und „Warum?“ steht. Und genau diese Fragen muss sich der Besucher der Webseite innerhalb der ersten Sekunden seiner Betrachtung beantworten können. Werfen wir einen Blick auf die Fragen des WWW Models... Z-Raster Post Content IMG 2

WER

Das „Wer“ steht für „WER BIN ICH?“. Dem User muss innerhalb der ersten (Milli-) Sekunden klar sein, wer sich auf dem Web-Auftritt präsentiert.

WAS

Im zweiten Schritt sollte ersichtlich werden, was der Webseitenbetreiber seinen Besuchern anbieten möchte. Handelt es sich bspw. um einen Shop, wenn ja, welche Produkte werden verkauft, zu welchen Konditionen werden diese angeboten, etc. Das „WAS“ lässt sich also weiter untergliedern:
  • Was mache ich?
  • Was biete ich an?
  • Was mache ich anders als die Konkurrenz?

WARUM

Das „Warum“ kann beispielsweise in Form von USPs aufgelöst und dargestellt werden. Diese sollen optimaler Weise natürlich auch auf dem Z-Raster platziert werden. Darüber hinaus kann man aus der „WARUM“ Frage weitere Unterfragen ableiten:
  • Warum bin ich besser als die Konkurrenz?
  • Warum soll sich der User für mich entscheiden?

Einfach, detailverliebt, präzise, schnell

Wie bereits beschrieben, müssen alle drei Fragen einfach, detailverliebt, präzise und schnell dargestellt werden.

Einfach

Das „einfach“ steht für eine problemlose Erfassbarkeit und einen benutzerfreundlichen Aufbau.

Präzise & schnell

Mit „präzise“ und „schnell“ sind die schnellen, kurzen und direkten Wege zum Ziel sowie geringe Ladezeiten gemeint.

Detailverliebt

Unter „detailverliebt“ wird alles verstanden, was mit der grafischen Ausgestaltung unter dem Schirm des jeweiligen Corporate Design steht. Figurativ gesehen präsentiert sich unser Raster also folgendermaßen: Bekannte Brands wie Mercedes Benz, Red Bull usw. haben an dieser Stelle einen leichten Vorteil, da ihre Besucher bereits im Vorfeld wissen oder zumindest erahnen, was sie auf der Seite erwarten wird. Das Vertrauen zur Marke ist demnach schon gegeben, wodurch Aufteilung und grafische Ausgestaltung von der gelernten Erwartungskonformität abweichen können. Dieses Vertrauen müssen kleinere oder am Markt nicht so bekannte Marken/Firmen sich erst erarbeiten und einen Zugang zu Ihren Besuchern schaffen. Hierbei ist es ratsam, sich am Z-Raster zu orientieren.

Fallbeispiele

Fonic

Fonic Referenz-Image Auf dem Screen ist deutlich zu erkennen, dass im Petrol hinterlegten Bereich erwartungskonform das „WER“ in Form des FONIC Logos berücksichtigt wurde. Im Content-Bereich (Mint eingefärbt) wird die Frage nach dem „WAS“ in Form der Bild- und Text-Inhalte beantwortet. In unserem Beispiel wird schnell klar, dass es sich hier um ein Produkt aus der Telekommunikations-Branche handelt, welches mit überdurchschnittlich guten Konditionen beworben wird. Letzten Endes wird durch den vermeintlich günstigen Preis das „WARUM“ (Magenta) in aller Deutlichkeit  aufgelöst. Hier zwei weitere Beispiele, die unabhängig vom Genre, Thema und der Zielgruppe nach dem Z-Raster aufgebaut wurden…

Zylom

Zylom Referenz-Image Website of the year 2011 & 2012 (websiteoftheyear.co.uk) : www.zylom.com Es wird sofort klar, wer diese Seite betreibt und dass Spiele jeglicher Couleur angeboten werden. Über die USPs im unteren sichtbaren Bereich wie „Größte Spiele Webseite in Europa“, „Vielzahl kostenloser Spiele“ und „Tolle Unterhaltung für jedermann“ wird Vertrauen aufgebaut. Außerdem wird somit die Frage nach dem „WARUM“ vorbildlich aufgelöst.

Royale

Desktop-Ansicht des Royale Referenz-Images Website of the year 2011 & 2012 (websiteoftheyear.co.uk): http://greatsbrand.com/products/the-royale-nero-white Unser nächstes Beispiel suggeriert deutlich, dass Schuhe verkauft werden sollen. Die Frage nach dem „WARUM hier und nicht woanders kaufen?“ wird über einen günstigen Schuhpreis beantwortet. Im Übrigen ist diese Seite für den Website Award 2013 nominiert. Dieser Aspekt unterstreicht, dass auch minimalistische und stylische Layouts mit dem Z-Raster möglich sind und das unabhängig von Zielgruppe, Genre oder Trends.

Mobile-Ansicht des Royale Referenz-Images

Das Thema Mobile darf hier natürlich nicht fehlen und so lässt sich das Raster problemlos und sinngemäß auf das Responsive Design übertragen. Deutlich zu sehen ist, dass die grafische Oberfläche vom herkömmlichen Screendesign abweicht und völlig mit einer einzigen horizontalen repsektive vertikalen Navigationsebene auskommt. Dennoch lässt sich das Z-Raster erkennen und bildet die Basis für das Design.

Weitere Beispiele

Faber Castell Referenz-Image ThumbnailMercedes Referenz-Image ThumbnailTagesschau Referenz-Image  Thumbnail

Was bedeutet das jetzt?

Resümierend lässt sich sagen, dass das Grid zwar als eine Art Korsett angesehen werden kann, dennoch aber viel Platz für kreative Höchstleistungen zulässt und diese sogar fokussieren kann. Über Geschmack lässt sich bekanntlich streiten, über ein sinnvolles und am User ausgerichtetes Design nicht. Wenn wir Ihr Interesse geweckt haben und Sie Ihrem Web-Auftritt einen neuen Anstrich verpassen wollen, freuen sich die Konzepter und Designer von explido auf den Kontakt mit Ihnen und werden Ihnen natürlich mit Rat und Tat zur Seite stehen.

Zum Autor...