Es ist bereits seit Monaten kein Geheimnis: das Seitenverhältnis der Monitore von 16:9 setzt sich durch! Sie stellen zwar noch nicht die Mehrheit aber sie werden immer mehr: die sog. Widescreen-Bildschirme. Wollte ich nur über diese schreiben, hieße auch der Titel „widescreen usability“. Das Problemfeld ist jedoch deutlich größer. Neben den immer gößer werdenden Bildschirmen gibt es die kleinen und kleinsten Bildschirme in Netbooks und Smartphones. Auch diese möchten gut lesbar und problemlos bedienbar sein…
Das Problem ist mir auf einer Internetseite, die ich beruflich oft aufrufe, aufgefallen: Sie wird mit jedem Update immer mehr in die Länge gestreckt. Es ist kein Grund zur Panik, aber auch zum Jubel. Das zentrierte und auf das Minimum (aus den Richtlinien von 2007) vom 800 Pixeln an Breite entwickelte Design wirkt in einer Auflösung von 1920×1080 Pixeln ein wenig seltsam. Mag sein, dass man sich auch an solche Schmal-Designs mit der Zeit gewöhnt (solche gibt es wie Sand am Meer). Worauf sich die meisten Benutzer jedoch kaum gewöhnen werden ist die Navigation im Kopfbereich. Das ständige Scrollen ist auf Netbooks (die meist auch viel breiter als höher sind aber oft die Scroll-Funktion des Touchpads wenig zufriedenstellend umsetzen) nicht selten eine Qual. Man kommt meist nur sehr umständlich ans Ziel. Das ist ärgerlich wenn nicht gar unsinnig: man hat ja links und rechts Quatratzoll-weise Platz verschenkt!
Eine Lösung des Problems wäre die Einbindung spezieller CSS-Dateien, die den Header-Navigationsbereich an die Seite schieben und per „fixed“ an einem bestimmten Ort des sichtbaren Bereichs fixieren. Natürlich muss man auch hier beachten, dass die Netbooks mit max. 1024 Pixel Breite nicht gerade viel Platz Links und Rechts bieten. Auch das „position: fixed“ wird nicht so gut unterstützt. CSS erkennt nicht automatisch, welche der Lösungen die beste ist. Ohne JavaScript wird es sowieso kaum realisierbar sein. Ist jedoch JS im Browser aktiv, kann man auf andere Lösungen ausweichen – die PC-Software zeigt wie.
Eine andere Schwachstelle fällt auf, wenn eine Seite nicht nur Informieren (passive Wahrnehmung) will, sondern auch Interaktionen mit dem Benutzer erfordert. Einkaufswagen, Zwischenberechnungen oder Statusrückmeldungen, die um mehr als 600 Pixel entfernt sind, werden auf breiten aber nicht allzu hohen Bildschirmen nicht mehr wahrgenommen. Das widerspricht der Erwartung eines wahrnehmbaren Feedbacks und führt nicht selten zum Frust beim Bediener. Ähnlich ist es bei wechselnden Vorgaben, die für die Aktionen des Benutzers wichtig sind. Der Surfer weiß nicht, dass sich die Vorgaben geändert haben und eine andere Re-/Aktion erwartet wird. Deshalb wäre es sehr von Vorteil, dass der Benutzer die Box mit Vorgaben frei auf dem Bildschirm platzieren kann. Nicht-modale Pseudo-Fenster (oder Forms/Widgets in einem Fensterstapel der PC-Software seit Windows 3 sicherlich allen bekannt) bieten die Möglichkeit, Inhalte getrennt voneinander zu präsentieren: Vorgaben, Zähler, Zwischensummen, Nachrichten können an jedem Ort der Internetseite abgelegt werden, wie es dem Surfer am geeignetsten erscheint. Funktioniert aber meist nur in Verbindung mit JS (welche ja auch für die dynamisch wechselnden Inhalte sorgt).
Ein ganz eigenes Problem stellen die extrem kleinen Smartphone-Displays dar: Eine Breite von 320 Pixel ist nicht selten anzutreffen, die bei einigen Modellen zur Höhe werden kann (durch das „Kippen“). Die Browser sind in den meisten Fällen jedoch so intelligent, dass Sie die Inhalte gut präparieren, indem sie diese Spaltenweise anzeigen. Dabei nimmt jede Spalte maximal die aktuelle Breite des Bildschirms ein. Dies sieht nicht immer gut aus, ist aber durchaus akzeptabel. Eine immer größere Gruppe solcher Geräte wird nicht mehr per Tastatur, Joystick oder Stift, sondern per Daumen bedient. Die sog. Touchscreens sind eine nicht zu unterschätzende Hürde für eine exakte und effiziente Bedienung des Displays: der dicke Daumen (ausgerechnet Daumen!) ist die Maßeinheit für alle Interaktionsflächen! Es zählt nicht nur die Interaktionsfläche selbst, sondern auch der Abstand, den man zwischen diesen lassen muss, sonst gehen Klicks in die falschen Bahnen.
Neben der Displaygröße und der Genauigkeit des „Zeigegerätes“ haben die Smartphones einige weitere Schwachstellen: Die Bandbreite, die Größe des verfügbaren RAM-Speichers, die Prozessorgeschwindigkeit und meistens auch der flash-Mangel. Auch wenn flash demnächst die Besitzer teurerer Android-Handys demnächst erfreuen wird, sollte man ihnen – ebenso wie vielen anderen Smartphone-Nutzern – eine eigene Seite erstellen, die die wichtigsten Funktionen auf einfach strukturierten Flächen zusammengestellt wird. Alle Funktionen in elend langen Menüs unterzubringen bringt ebenso wenig, wie ausgeklügelte JS-basierten Interaktionsmöglichkeiten, die nur im Schnecken-Tempo ausgeführt werden. Das Deeplinking ist ausdrücklich zu bevorzugen: Anders als POSTs können GETs unter die Bookmarks aufgenommen werden. Eine Navigation, die sich in der URL widerspiegelt, erspart beim 2. und 3. Besuch das Scrollen auf der Seite, ist gut zu verlinken und begrenzt die Anzahl an Funktionen auf die, die man in diesem bestimmten Bereich erwartet.
Das Webdesign ist im ständigen Umbruch, meist leider nur einer Mode folgend. Wünschenswert wäre ein Webdesign, das sich mehr an den Bedürfnissen der Benutzer und ihren technischen Möglichkeiten orientiert. Der Bildschirm ist das erste und wichtigste Gerät. Seine Größen und Seitenverhältnisse schwanken immer mehr. Die Eingabegeräte sind seit den Touchscreens auch „nicht mehr das, was sie mal waren“: ihre Zeige-Genauigkeit ist nicht immer gleich. Summa summarum: Das Webdesignen wird zu einer wilden Angelegenheit.
Weiterführende Links:
http://www.brighthub.com/internet/web-development/articles/52206.aspx
http://www.brighthub.com/internet/web-development/articles/52204.aspx
Ihre Seite mit anderen Augen (Auflösungen) gesehen (nicht erschrecken bei Seiten ohne feste Breiten, da ist natürlich alles OK)
—————-
* Ich habe eine gute deutsche Äquivalenz für „wildscreen“ gefunden: „Wildschirm“ :D