Bildschirmauflösung und Seitenlayout

Optimieren Sie Webseiten für 1024x768 Pixel Auflösung, aber nutzen Sie ein flexibles Layout, das für jede Auflösung passt, von 800x600 bis hin zu 1280x1024.

 

by Jakob Nielsen (deutsche Übersetzung) - 31.07.2006

 

Eine der Fragen, die mir in meinen Web-Usability-Seminaren am häufigsten gestellt wird, lautet: "Für welche Bildschirmauflösung sollen wir unser Design gestalten?" Die vollständige Antwort ist zwar kompliziert, jedoch grundsätzlich klar:

• Optimieren Sie für 1024x768, dies ist die Bildschirmgrösse, die zurzeit am weitesten verbreitet ist. Natürlich heisst die generelle Richtlinie aber, für die gebräuchlichste Bildschirmauflösung Ihrer Zielkunden zu optimieren. Es könnte also auch eine andere Grösse sein, wenn Sie zum Beispiel ein Intranet für eine Firma gestalten, die allen ihren Angestellten grosse Monitore zur Verfügung stellt.
• Legen Sie sich nicht ausschliesslich auf eine spezielle Bildschirmgrösse fest, da verschiedene Nutzer verschiedene Grössen haben. Die Fenstergrösse ist sogar noch unterschiedlicher geworden, seitdem Nutzer nicht mehr ständig ihre Browserfenster auf maximale Grösse einstellen (besonders dann, wenn sie grosse Bildschirme haben).
• Nutzen Sie ein flexibles Layout, das sich an die augenblickliche Fenstergrösse des Nutzers anpasst (das heisst: Vermeiden Sie starre Layouts, die immer gleich gross bleiben).

Zurzeit sind 60% aller Monitore auf 1024x768 eingestellt. Zum Vergleich: Nur 17% nutzen 800x600; es ist also offensichtlich weniger wichtig, für diese Nutzer mit kleiner Anzeige Perfektion anzustreben. Es ist aber auch klar, dass Sie nicht einfach 17% Ihres Kundenkreises ignorieren können, indem Sie ein starres Layout festsetzen, das mehr Platz auf dem Bildschirm benötigt, als diese 17% zur Verfügung haben.

Optimieren Sie für 1024x768

Wenn ich sage "optimiere", dann meine ich, dass Ihre Seite bei der gebräuchlichsten Bildschirmauflösung am besten aussehen und funktionieren soll. Sie sollte bei anderen Grössen aber immer noch gut aussehen und gut funktionieren (deshalb empfehle ich ein flexibles Layout), aber bei 1024x768 sollte sie am besten sein.

Die drei Hauptkriterien für das Optimieren eines Seitenlayouts für eine bestimmte Bildschirmgrösse sind:

• Primäre Visibilität: Sind alle Schlüsselinformationen im primären Anzeigebereich sichtbar, so dass Nutzer sie sehen können ohne zu scrollen? Dabei muss man abwägen zwischen: Wie viele Themen werden gezeigt bzw. wie viele Details werden zu jedem Thema gezeigt.
• Lesbarkeit: Wie einfach ist es, den Text in den verschiedenen Spalten zu lesen, wenn sie in der jeweils angegebenen Breite erscheinen?
• Ästhetik: Wie gut sieht die Seite aus, wenn die Elemente in der richtigen Grösse und am richtigen Ort platziert wurden für die gewünschte Bildschirmgrösse? Ordnen sich alle Elemente richtig an, also die Erläuterungen direkt neben den Fotos etc.?

Sie sollten diese drei Kriterien für sämtliche Grössen beachten, in dem Sie die Grösse des Browserfensters ständig von 800x600 bis 1280x1024 verändern. In allen Auflösungen sollte Ihre Seite in den genannten Punkten gut abschneiden.

Ihre Seite sollte sogar in noch kleineren oder noch grösseren Auflösungen funktionieren, auch wenn solche Extreme weniger wichtig sind. Weniger als ein halbes Prozent aller Nutzer haben immer noch 640x480. Auch solche Nutzer sollten in der Lage sein, auf Ihre Seite zu gehen, doch es ist ein akzeptabler Kompromiss, wenn sie dann kein überragendes Design zu sehen bekommen.

Wie das erste Kriterium zeigt, ist das Scrollen immer noch ein immens wichtiger Punkt. Normalerweise möchten Nutzer nicht scrollen (in meinem neuen Buch, in dem auch Statistiken darüber sind, wie viele Nutzer auf unterschiedlichen Seiten scrollen, wird das genauer diskutiert). Also: Wenn Sie Seiten gestalten, denken Sie daran, wie viel die Nutzer sehen können, wenn sie nur durch eine oder zwei Bildschirmseiten scrollen.

Sowohl das Scrollen als auch die primäre Visibilität hängen von der Bildschirmgrösse ab: Grössere Bildschirme zeigen mehr Inhalte und man muss weniger scrollen. An dieser Stelle müssen Sie für 1024x768 optimieren: Präsentieren Sie Ihre überzeugendsten Inhalte oberhalb des unteren Bildschirmrandes für diese Auflösung (und stellen Sie sicher, dass die absolut entscheidenden Informationen auch bei 800x600 sichtbar bleiben).

Was ist nun mit winzigen Bildschirmen wie man sie z.B. bei mobilen Geräten hat? Ein flexibles Design sollte sich soweit verkleinern können, dass es auf ein Handy passt, aber denken Sie nicht, dass Sie damit das mobile Nutzererlebnis für Ihre Firma zustande gebracht haben. Mobile Umgebungen sind etwas Spezielles; um daraufhin zu optimieren, müssen Sie separate Services gestalten, die weniger Funktionen enthalten, noch prägnanter geschrieben sind und stärker auf den Kontext achten.

Grosse Bildschirme

Viele Nutzer haben grosse Bildschirmanzeigen. Gegenwärtig haben 18% der Nutzer mindestens eine Auflösung von 1280x1024. Der Prozentsatz der Nutzer mit grossen Bildschirmen wächst stetig, wenn auch nicht ganz so schnell, wie ich es gern hätte.

Grosse Monitore sind der einfachste Weg, um die Produktivität von Büroangestellten zu vergrössern, und jemand, der pro Jahr 50.000 $ verdient, sollte eine Auflösung von mindestens 1600x1200 haben. Ein Flachbildschirm mit dieser Auflösung kostet weniger als 500 $. Das heisst: So lange der grössere Bildschirm die Produktivität um mindestens 0,5% steigen lässt, haben Sie die Investition in weniger als einem Jahr wieder drin. (Die übliche Firmenbürokratie verdoppelt die Kosten pro Mitarbeiter; vergessen Sie nie, bei Produktivitäts-Kalkulationen die Gesamtkosten einzurechnen und nicht das blosse Gehalt.)

Apple und Microsoft haben beide Berichte veröffentlicht, die versuchen, den Nutzen von grösseren Monitoren zu belegen. Leider enthalten die Studien auf Grund von methodischen Schwächen keine glaubwürdigen Zahlen. Meiner Erfahrung nach steigt die Produktivität voraussichtlich um 5-10%, wenn die Nutzer ihre Lese- und Schreibarbeit an einem grossen Monitor erledigen. Dies führt bei einer Person, die an 10% des Tages Lese- und Schreibarbeiten am Bildschirm verrichtet, zu einer Gesamtzunahme der Produktivität um 0,5-1%. Es gibt keinen Zweifel daran, dass grosse Bildschirme ihr Geld wert sind.

Ich persönlich nutze einen 2048x1536-Bildschirm, und ich würde das nicht wirklich einen grossen Bildschirm nennen. Ich erwarte, dass innerhalb der nächsten Jahre Bildschirme mit, sagen wir, 5000x3000 in allgemeinen Gebrauch kommen, zumindest unter hochrangigen Business-Profis.

Wenn sie mit 1600x1200 anfangen, vergrössern die Nutzer nur selten ihr Browserfenster auf den gesamten Bildschirm, weil nur wenige Webseiten auf so einer breiten Leinwand gut funktionieren. Grosse Fenster sind toll für das Arbeiten mit Tabellen, für Grafikdesign und viele andere Aufgaben, aber nicht für die Webseiten nach dem üblichen Paradigma. Heutzutage nutzen Webnutzer mit einem grossen Bildschirm ihren Extraplatz normalerweise für mehrere Fenster und um parallel zu surfen.

Um die Nutzer mit wirklich grossen Bildschirmen in Zukunft bedienen zu können, brauchen wir wahrscheinlich ein anderes Paradigma als individuelle Seiten. Vielleicht wird sich eine Zeitungs-ähnliche Metapher oder eine Art Instrumententafel auf dem weiteren Weg als überlegen herausstellen.

Jedenfalls verändert das Suchen nach einem neuen Paradigma nicht die Empfehlungen für heute: Optimieren Sie für 1024x768, aber designen Sie nicht ausschliesslich für diese Grösse. Ihre Seite sollte in jeder Auflösung funktionieren, von 800x600 bis hin zu 1280x1024 und darüber hinaus.

 

© Deutsche Version von Jakob Nielsens Alertbox. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.