Ein „No-Go“ auf Webseiten ist eigentlich seit Anbeginn des Webdesigns eine horizontale Scrollleiste. Verachtende Blicke seitens des Kundens, der Vorgesetzten, Kollegen waren sicher, wenn bei der HTML-Umsetzung eine Scrolleiste an der falschen Stelle auftauchte. Geschweige denn, wenn bei der Konzeption oder beim Design ein bewusstes hoizontales Scrollen eingeplant wurde.

Dieses Prinzip rührt historisch zum einen auf der Tatsache, dass Mäuse (lange) keine Möglichkeit anboten horizontal zu scrollen. Zum anderen geht es gegen die im Laufe der (Internet-)Jahre vom Anwender gelernten Leserichtung, die auf fast 100% der Webseiten nach unten führt und auch ein akzeptiertes und schnell verinnerlichtes vertikales Scrollen mit sich brachte.

Dagegen stehen die klassichen Printpublikationen, bei denen das horizontale Scrollen, sprich „Blättern“, auch intuitiv ist und keiner auf die Idee käme Magazine vertikal blätternd zu produzieren (obwohl es es mal eine pfiffige Idee wäre..).

So aber sind horizontale Scrolleisten bis heute verpönt. Fast überall, denn die ungeschriebene Regel hat natürlich ihre Ausnahmen. Die genau da liegen, wo das horizontale Scrollen nicht nervig oder mühselig ist, weil vielleicht nur wenige Wörter nicht zu lesen sind oder es einfach auf schlechter HTML-/CSS-Umsetzung beruht. Die Ausnahmen sind da, wo es als Stilmittel eingesetzt wird, wo bewusst eine andere Art der Benutzerführung gesucht wurde, wo sich die Seite bewusst auch durch die Benutzerführung unterscheiden soll und eben nicht nur durch das Design und die Inhalte.

Case Studies:

Un.titled

Portfolio-Präsentationen sind eine Paradebeispiel für den Einsatz von horizontalen Scrollleisten. Bei Un.tittled werden die Projekte ansprechend nebeneinander angeordnet. Optisch ist die Seite sowieso ein Leckerbissen. Leider aber in Flash umgesetzt, so dass mein Trackpad schon nicht mehr will… Also tolle Idee, Umsetzung mit Spielraum nach oben.

http://un.titled.co.uk/

Peter Pearson

Auch ein Portfolio, also gleiches Prinzip wie bei Un.titled. Allerdings ist die Umsetzung und damit Benutzerführung eine ganz andere. Mein Trackpad erlaubt das horizontale Scrollen und bei jedem Menüpunkt erlauben ein Vor- und Zurück-Pfeil das automatische nett animierte Scrollen zum nächsten Inhalt – jQuery machts möglich, ist also schon lange kein Hexenwerk mehr. Adäquat umgesetzt!

http://www.peter-pearson.com/

We shoot Bottles

Kurz und knackig, optisch frisch und inhaltlich kurzweilig zeigt sich diese Präsentation. Dazu noch einfach zu bedienen, was will der Anwender mehr.

http://www.weshootbottles.com/

Imaginista

Ähnliche Aufmachung wie „We shoot Bottles“. Die Inhalte werden in einem – optisch sehr ansprechenden – langen Schlauch präsentiert mit einfachem Scrollbalken.

http://imaginista.ca/

Fashion Photographer

Schöne Umsetzung der Fotografen-Seite, die die möglichen Vorteile des horizontalen Scrollens top umsetzt. Formatfüllende Fotos, die sich bei Veränderung der Bildschirmgröße anpassen und dazu die Scrollanimation. Einfach und gut.

http://www.fashionphotographer.it/editorial.html

Here Design

Diese Seite steht etwas außer der Reihe, denn obwohl sich der Inhalt horizontal fortbewegt, fehlt die Scrolleiste, so dass es sich nur über die Navigation fortbewegen läßt. Sicherlich bewusstes Stilmittel, was aber die Benutzbarkeit und meinen Schnelldurchscrollentdeckerdrang stark einschränkt.

http://www.heredesign.co.uk/

Fazit:

Als Nische für Webseiten, die bewusst eine andere Art gehen wollen und dessen Zielpublikum diese Art der Benutzerführung auch zulässt, sind horizontal zu scrollende Webseiten sicherlich ein Alternative, ohne gleich als Außenseiter zu gelten! Für eine Webseite eines klassischen Unternehmens sicherlich nicht.
Allerdings sollte sich dabei noch stärker über die Benutzbarkeit und Möglichkeiten der Bedienung Gedanken gemacht werden. Einschließlich eines noch ausführlicheren Testens der Seite.

Weiterführende Links

Noch mehr horizontale Scrollseiten zum Stöbern gibts hier:
http://dzineblog.com/2009/07/web-design-ideas-27-horizontal-scrolling-websites.html
http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites
http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/

Und ein Tutorial für eine CSS-Umsetzung:
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

2 Kommentare

Trackbacks & Pingbacks

  1. […] weiteres angeprangertes Missgeschick ist das horizontale Scrolling. Von links nach rechts zu scrollen kann schon ziemlich nervig sein. Besonders dann, wenn man es […]

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.