uxzentrisch erörtert:
7 Best Practices-Regeln für die Renaissance der OnePage-Websites

Willkommen in der Renaissance der One-Page-Webseiten! Ich weiß nicht, ob es euch schon aufgefallen ist, aber OnePage-Webseiten sind wieder modern. Tüftelnde Webdesigner in der ganzen Welt haben ihre Liebe für lange Webseiten wieder entdeckt und heben gleichzeitig die Messlatte für gutes Interaktionsdesign auf einer einseitigen Webseite an.

In diesem Artikel möchte ich euren Blick auf 7 Interaktionsdesign-Regeln lenken, die jetzt zum Standard einer jeden OnePage-Website gehören müssen.
Im Anschluss gibt es eine Reihe an guten und schlechten Beispielen, die wir uns mit Blick auf dieser Regeln anschauen.

Was ist eine OnePage-Website?

Vorab aber eine kurze Einführung: Wenn wir hier von OnePage-Webseiten sprechen, meinen wir Seiten, deren Inhalt vollständig in einem HTML-Dokument abgelegt ist. Ein Charakteristikum dieser Webseiten ist, dass sie meist circa 3x so lang sind, wie der sichtbare Bereich des Browsers. Nutzer sollen also scrollen, um alle Inhalte zu erfassen. Ursprünglich war das Scrollen sogar das primäre Navigationsmittel um die Webseite zu erleben. Dies hat sich jetzt aber gewandelt: In der Renaissance der OnePage-Webseiten werden klassische Navigationsmetaphern mit langen, scrollbaren Seiten kombiniert.

Grafische Bühnen statt CMS-Look

Was macht OnePage-Webseiten reizvoll und sinnvoll? – Sie bieten Designern die Möglichkeit, stärker in Bühnen und Kapiteln als in Seiten und Rastern zu denken. Das schafft Frische und Freiraum und führt immer wieder zu Seiten mit einem ganz besonderen Nutzungserlebnis.

OnePage-Webseiten funktionieren besonders gut, wenn sie es schaffen, das Thema der Webseite in die Gestaltung einzubinden und das ganze mit spielerischen und ungewöhnlichen (Interaktions-) Effekten zu kombinieren.
Gute Beispiele dafür: Das Thema TV/Film mit einem An-Button in die Websiteinteraktion integrieren (youzee). Oder das Hüpfen des Avatars bei »fat man collective«. Und das statische »Adobe&« in Adobes FutureOfDigital.

7 Best Practice-Regeln für OnePage-Websites:

  1. Spaß: Die Website muss Spaß machen! – Schließlich ist einer der zwei zentralen Gründe für eine OnePage-Website, dass Nutzer sie als ein besonderes Nutzungserlebnis wahrnehmen. Das muss sich in Design und kleinen Effekten wieder finden.
  2. Navigation: Es muss eine »normale« Navigation geben, die zu jeder Zeit sichtbar ist! – Renaissance-OnePage-Websites berücksichtigen zentrale Usability-Anforderungen wie das Gefühl von Context und Kontrolle. Nutzer müssen zu jeder Zeit wissen, wo sie sich befinden, wie sie weiter und zurück kommen.
  3. Animation: Klickt ein Nutzer auf einen Navigationspunkt, bewegt sich die Seite animiert zur gewünschten Position. – Das macht Spaß, ist etwas Besonderes und hilft dem Nutzer die Veränderung am Screen zu verstehen (Kontrolle).
  4. Highlighting: Die Navigation hebt dynamisch den aktuellen Menüpunkt hervor während der Nutzer scrollt. – Auch hier: Spaß, Context, Kontrolle,…
  5. URL-Design: Jedes Kapitel der Website kann über eine (Hash-)URL wie eine normale Webseite verlinkt und angesprungen werden. – Ohne Links kein WWW. Auch OnePage-Webseiten müssen sich daran halten und Nutzern erlauben, Links zu mailen und auf Facebook zu teilen.
  6. Tastatur: Die Navigation zwischen den Kapiteln per Tastatur ist ein besonderes Extra. – Zurücklehnen, die Pfeiltasten nutzen und die Show genießen…
  7. Thema: Das Design, der Aufbau, die Effekte sollten das Thema der Seite stützen. (mehr dazu in der Einleitung oben)

Best Practice-Beispiele für OnePage-Websites:

banksimple.com

  1. + Spaß: Schöner, ungewöhnlicher Einstieg zu Beginn durch das etwas eigenartige Scrollen im ersten »Kapitel«
  2. + Navigation: Die Hauptnavigation ist klassisch, klar und schön umgestzt. Besonders schön ist die Subnavigation innerhalb der Kapitel umgesetzt.
  3. + Animation: Ja
  4. + Highlighting: Ja
  5. URL-Design: Leider nein
  6. + Tastatur: Ja. Im Footer werden die Tastenkürzel sogar erklärt. Intuitiv können die links/rechts-Tasten für die Subnavigation genutzt werden. Für die Hauptnavigation halte ich »j« und »k« aber für zu abstrakt. Leider funktionieren für das Springen zur Sektion nur Die Zifferntasten der Tastatur und nicht auch die des Nummernblocks.
  7. + Thema: Über eine moderne Anmutung hinaus wird das Thema der Seite zwar nicht weiter gestützt, Einmalig, klug und hübsch finde ich die Ausnutzung des Weißraums zwischen den Kapiteln. Statt nur Abstand zu schaffen, was visuell ohnehin nötig ist, nutzt BankSimple die Fläche für Twitter-Testimonials.

youzee.com

  1. + Spaß: Der große Start-Schalter und das schöne Kapitel-Design sprechen hier für sich…
  2. + Navigation: Die Navigation ist zu jeder Zeit sichtbar, wird aber erst beim Scrollen zur klassischen Navigation, wenn sie am Kopf der Seite »kleben« bleibt. Sie ist übrigens anfangs auch noch nicht klickbar (darum wird der Screen kurz grün, als ich versehentlich das Bild markiere) – Ein schönes Interaktionsdetail, das Nutzer dazu lockt zuerstmal den großen Schalter zu klicken.
  3. + Animation: Ja
  4. + Highlighting: Ja
  5. URL-Design: Leider nein
  6. + Tastatur: Ja, nutzt die rauf/runter bzw. links/rechts Tasten – das passt gut zum Leanback-Thema der Webseite
  7. + Thema: Ja, die An-Schalter-Metapher und der Popcorn-Plakat-Look passen gut!

campaignmonitor.com/hiring/

  1. + Spaß: Tolle Bereichsübergänge. Die Animation beim Wechsel zwischen den Bereichen macht einfach Spaß und ist bisher nahezu einmalig. Nur Nike hat etwas ähnliches auf einer Kampagnenseite gezeigt.
  2. o Navigation: Hier basiert das Konzept weniger auf der Kapitel- als vielmehr auf der Bühnen-Metapher. Die Navigation von Bühne zu Bühne ist gut umgesetzt.
  3. + Animation: Sehr schön! – Leider nur in modernen Browsern wie dem Safari Mac. Im Firefox und Chrome ruckeln die Animationen – nicht zu vermeiden, wenn man cutting-edge Webtechnologie verwendet.
  4. o Highlighting: Entfällt hier…
  5. URL-Design: Leider nein
  6. Tastatur: Leider nein
  7. + Thema: Mit dieser Seite zeigt Campaign Monitor Liebe zum Detail, Design und zu Webtechnologie – Als Stellenausschreibung daher ideal umgesetzt.

Update 2011-04-28: Dank für den Hinweis, dass die Nike-Kampagnen-OnePage-Website nikebetterworld.com immer noch aufgerufen werden kann. Diese Seite ist sogar noch etwas besser als die von Campaignmonitor, da sie die Bühnen über die Kreise auf der rechten Seite navigierbar macht.

adobe.com futureofdigital

  1. + Spaß: Absolut. Das hereinreichen dis Tablets von der Seite ist wirklich schön anzusehen.
  2. + Navigation: Ja
  3. + Animation: Ja
  4. + Highlighting: Ja
  5. URL-Design: Leider nein. Dabei wäre es so prakisch, wenn man eine URL weitergeben könnte, die direkt Adobe&MTV anzeigt.
  6. Tastatur: Nein.
  7. + Thema: Das Adobe& als statisches Hintergrundelement passt toll zu einer OnePage-Website.

themetrust.com/demos/solo

  1. o Spaß: OK
  2. + Navigation: Ja
  3. + Animation: Ja
  4. + Highlighting: Ja
  5. URL-Design: Nicht schön umgesetzt. Insbesondere: Ein Klick auf das Startseitenlogo sollte keinen Page-Reload auslösen, sondern nur an den Kopf der Seite scrollen. Bevorzugt sollte dabei die URL wieder zur Startseiten-URL ohne Anchor werden.
  6. Tastatur: Nicht umgesetzt. Gerade in den Portfolio-Bereichen wäre Tastaturnavigation angenehm. Projektbeispiele mit Links/Rechts-Tasten durch«klicken«, Projekte und Bereich mit Hoch/Runter-Tasten.
  7. Thema: Nein.

fat-man-collective.com

  1. + Spaß: Eine Seite voller kleiner, schöner Interfacedetails. Der dicke Mann oben rechts geht, wenn man scrollt. Klickt man dagegen auf die Navigation, stößt er die Bühne dagegen durch sein Hüpfen an die neue Position.
  2. o Navigation: Ja, aber etwas dezent…
  3. + Animation: Sehr schön!
  4. + Highlighting: Ja
  5. URL-Design: Leider nein
  6. Tastatur: Nein
  7. + Thema: Die Seite lässt die Kultur der Agentur spüren. Schön gemacht!

Rund wird das Ganze durch das schon zuvor beschriebene Verhalten der Hauptnavigation rechts, das animierte Scrollen und den klaren Seitenaufbau.

unitedpixelworkers.com

  1. + Spaß: Solide und gut gemacht OnePage-Website.
  2. + Navigation: Ja
  3. + Animation: Besonders schön gelöst finde ich, dass man auch schnell zwischen Navigationspunkten wechseln kann ohne die Animationsregeln zu sehr durcheinander zu bringen.
  4. + Highlighting: Ja
  5. + URL-Design: Ja, so soll es sein :)
  6. Tastatur: Nein
  7. o Thema: Nichts besonderes.

hellocarbon.ca

  1. + Spaß: Ein schönes (wenn auch sehr dezentes) Detail ist hier der Farbeffekt im Designelement ganz links. Es passt die Farbe passend zum aktuellen Kapitel an.
  2. o Navigation: Das Wiederholen der Navgation funktioniert zwar, halte ich aber nicht für ideal.
  3. + Animation: Ja
  4. o Highlighting: Ja
  5. URL-Design: Nein
  6. Tastatur: Nein
  7. + Thema: Zeigt Liebe zum visuellen Detail und technisches KnowHow.

Optimierungsfähige Beispiele

Um gutes Webdesign zu verstehen, hilft es auch, sich Beispiele anzuschauen, die noch nicht rund sind. Im folgenden ist beschrieben, was diese Seiten besser machen könnten.

aboard-entrepreneurship.com


Eine klassische OnePage-Website die die Renaissance noch nicht ganz mitgemacht hat. Die Entscheidung, alle Inhalte auf eine Seite zu packen war sicherlich richtig für diese Seite und die fixe Navigation funktioniert ok – Auch wenn ich eine klare Gefahr sehe, dass solche fixe Navigationselemente beim Lesen und Scrollen ablenken. Das Interaktionsdesign ist aber nicht rund: Es fehlt jegliche Hervorhebung für den aktiven Menüpunkt, das Logo ist nicht verlinkt und dieses rote Ding, das wahrscheinlich ein Schiff sein soll?, fährt immer in eine Richtung, auch wenn die Seite hoch scrollt. Hier fehlt mir die Liebe zum Detail!

leasedlinesbykc.co.uk

Beim Herunterscrollen blendet plötzlich eine völlig neue Navigation ein. Zudem noch an einer Position auf der Seite, wo unterhalb des neuen Element viel Text (= viel visuelle Unruhe) steht. Das lenkt den Nutzer erstmal komplett ab von der Seite, er blickt auf das animierte Element, muss es erstmal visuell vom Hintergrund trennen, dann verstehen um es schlussendlich als banales Navigationselement einzuordnen und sein eigentliches Ziel, den Content zu betrachten, weiter zu verfolgt.
Zudem hilft die Seite in keiner Weise beim Verstehen ihres Aufbaus durch Hervorhebung der Navigationspunkte.

mms.betazeta.com

Natürlich kann man auch so eine OnePage-Website bauen. Aber die zu grunde gelegte Metapher wird so nicht funktionieren. Der Vorteil einer OnePage-Website ist, dass Nutzer scrollen. Sie werden also nicht zwischen der Navigation am Kopf der Seite und den Bühnenelementen hin und her wechseln über die »Nach oben« (»Subir«) Links.

klpersonaltrainer.co.uk

Hier wird die Navigation ständig wiederholt. Das funktioniert im Design aber gut und lenkt nicht ab. Zudem wird die Fläche gut genutzt für die Überschrift des Bühnenbereichs.
Letzlich würde die Seite so aber auch gut im klassischen seitenbasierten Aufbau funktionieren.

tedxportland.com

Auch wenn der Hintegrund-Effekt wirklich etwas besonderes ist, fehlen hier alle übrigen, angesprochenen Best-Practice-Regeln. Diese Seite macht es Nutzern unnötigt schwer sich zurecht zu finden.

goslingo.com

Animationen lenken immer die Aufmerksamkeit auf sich. Sie dürfen daher nur verwendet werden, wenn man die Aufmerksamkeit des Nutzers auch wirklich umlenken möchte. Dass das Element rechts erst nach dem Scrollen erscheint, lenkt genau dann vom Text ab, wenn man sich gerade wieder auf den Text konzentriert hat… – so sollte man Animation nicht nutzen!

Fazit:

Wer heute eine OnePage-Website baut, sollte auf die Details achten – erst dann macht die Seite Spaß und ist auch wirklich gut zu bedienen!
Das Gute: Es entstehen zur Zeit ständig neue, schöne Beispiele. Kennt ihr weitere, gute OnePage-Webseiten?

Fußnote: Einige dieser Besipiele stammen aus einer Sammlung von Single-Page-Websites von webdesignledger. Und wer jetzt Lust hat, seine eigene OnePage-Site zu bauen, sollte sich das Script NavSimple von BankSimple anschauen.

28 Kommentare

David Hellmann vor 4 Jahren

One Page Seiten sind schon ziemlich cool. Nicht für alles geeignet aber für vieles. Hab auch mal eine gemacht: http://www.zweiviereins.de/ Ist eher etwas trocken :)

fat-man-collective.com finde ich sehr gelungen. Die kleinen Animationen sind einfach super :)

KMB vor 4 Jahren

Bis zur Flash-Webseite scheint es mir bei einigen der Beispiele nicht mehr weit zu sein ;-) Gerade wenn ich auf die Kriterien 5 und 6 deute, die zu oft vernachlässigt werden.

Davon unabhängig, meine beiden Favoriten:

http://unfold.no/
http://2011.beercamp.com/

Beide eher was für HTML5/CSS3-freundliche Browser

Jens Scharnetzki vor 4 Jahren

… bin ich gerade über einen onepager gestolpert.
https://banksimple.com/
@tobias beurteile du ob es gut ist.

Teste aber auf jeden Fall das »Sign up for an invite«.

Tobias Jordans Autor vor 4 Jahren

@Jens: Finde Banksimple eines der sehr guten Beispiele. Steht zu oberst oben in der Liste…
Das Formular ist ebenfalls schön umgesetzt. Alles sehr rund…

Tobias Jordans Autor vor 4 Jahren

Update:
webdesignledger.com hat »21 Examples of Parallax Scrolling in Web Design« gesammelt. Darunter einige, die hier schon besprochen wurden und andere, die ich nicht weiter interessant finde. Hier sind die Beispiele, die diesen Artikel gut ergänzen:

http://www.siebennull.com/
Ein ganz anderer Ansatz: Statt zu scrollen navigiert man mit der Maus im Raum… Eher experimentell, würde ich sagen.

http://denver2012.drupal.org/
Ein schönes Beispiel eines OnePagers bei dem die Contentelemente animiert von links und rechts erscheinen. Detailverliebt gemacht.

http://www.culturalsolutions.co.uk/
Sehr ähnlich zu den Beispielen oben. Betrachtenswert sind die Ideen, wie man Detailinformationen innerhalb einer Bühne darstellen kann. Eher als Bug würde ich ansehen, dass man in der Zitatbox per MausScrolling die Zitate wechselt und plötzlich die Seite nicht mehr scrollt…

http://fingerbilliards.com/
Auch das geht: Den Animationsgedanken von OnePagern nur für eine kleines Detail nutzen – das ist aber schön umgesetzt: Die Kugel rollt ins Loch und man schaut unter den Tisch um die Anleitung zu sehen…

http://kiskolabs.com/
Die Hauptnavigation bleibt gut am Kopf der Seite hängen.

http://www.guyvernes.com/lookbook/
Wie ganz dezent: Nur im Footer animiert etwas… Schön!

http://unfold.no/
Diese Seite war ganz klar im relevent Set für meinen Artikel, ist aber wohl verloren gegangen. Sie arbeitet sehr schön mit Geometrie und integriert GoogleMaps in den OnePager.

Weitere Beispiele sind natürlich willkommen! :)

Tobias Jordans Autor vor 4 Jahren

Update:
http://www.banyanbranch.com/
Die Subnavigation beim Scrollen ist gut integriert. Die Sub-Seiten aber horizontal anzuordnen finde ich mühsam. Sonst alle Mögliche, was es oben schon zu sehen gibt, schön implementiert.

Tobias Jordans Autor vor 4 Jahren

Update:
http://stijlroyal.com/
Auch sehr schön gemacht, vor allem die Umsetzung der Sekundärnavigation und mit dieser Seite Red Dot Design Award Gewinner http://stijlroyal.com/blogroyal/stijlroyal-gewinnt-red-dot-design-award-fur-herausragendes-webdesign/

Tobias Jordans Autor vor 4 Jahren

Update:
http://www.360langstrasse.sf.tv/page/ ist eine Onepage-Website die so gar nicht in das hier beschriebene Raster passt. Eine bisher noch nicht gesehene, tolle Integration mit Google Streetview.

Tobias Jordans Autor vor 4 Jahren

Update:
http://nizoapp.com/ ist ebenfalls sehr schön gemacht mit seiner Animation beim Scrollen. Leider kommt die Produktbotschaft trotzdem kaum rüber.

Tobias Jordans Autor vor 4 Jahren

Update: Brandneu das Handbuch von http://www.gidsy.com, umgesetzt als OnePage-Website mit schönen, erklärenden Animationen. http://gidsy.com/handbooks/making-the-perfect-listing/

Tobias Jordans Autor vor 4 Jahren

Update: http://css-tricks.com/14311-fancy-scrolling-sites/ listet ein paar weitere fancy Websites auf, die ungewöhnlich mit Scrollen umgehen. Es gibt auch Videos zu den Sites.

Tobias Jordans Autor vor 4 Jahren

Update: http://www.beetle.de/full/ zeigt, dass OnePager im Massenmarkt angekommen sind. Sehr schön gelöst finde ich die sehr sichtbaren Interaktionselemente, die durch ihre 3D-Optik klar ausdrücken, dass hier etwas zu klicken ist…
(via http://www.conversiondoktor.de/conversion-optimierung/scrollen-bis-der-kaefer-kommt/)

Mirko Reckhard vor 4 Jahren

Zur Renaissance der One-Pager trägt sicherlich die Verbreitung mobiler Internet-Nutzung bei. Es ist auf einem Smartphone wesentlich einfacher auf einer Seite zu scrollen als immer neu zu laden – ganz abgesehen von den Wartezeiten beim Neuladen (auf der Strecke Köln/Frankfurt z.B. ganz schlecht).

Scrollen wird wieder salonfähig und lange Seiten sind kein Manko mehr. Im Gegenteil bringen sie neue interessante Möglichkeiten Inhalte auf einer Seite zu gliedern und verschiedene Nutzerinteressen mit verschiedenen Bereichen zu bedienen. Ein paar Beispiele:

https://www.tumblr.com/
http://www.livingearthapp.com/
http://marketplace.tutsplus.com/

Und hier noch ein schöner One-Pager: http://www.mozilla.org/de/firefox/features/#advancedsecurity

Tobias Jordans Autor vor 4 Jahren

@Mirko: Ja, da könnte ein Zusammenhang bestehen. Was aber dagegen spricht ist, dass kaum eines der Beispiele oben mobil optimiert ist. Im Gegenteil, die meisten sind auf mobilen Geräten schwer zu navigieren… – Im mobilen Bereich sehe ich eher die Buzzwords »Liquid Layout« aka »Flexible Layouts« aka »Mediaqueries« als Wegbereiter.

Deine ersten drei Beispiele kann ich nicht richtig zuordnen in das Thema One-Pager. – Abgesehen von dem sehr schönen Erdkugel-Effekt bei der livingearthapp.

Grüße aus Berlin

Nick Bohlen vor 4 Jahren

Hi,
ich arbeite gerade an einem Webservice zur einfachen Erstellung einer OnePage Website.

http://www.pagengo.de

Ich bin damit noch am Anfang sszg. im Beta-Stadium und brauche unbedingt Feedback. Ich versuche auf jeden Fall auf die o.a. Punkte zu achten und das einfliessen zu lassen.
Würde mich freuen wenn der ein oder andere mir seine Meinung senden würde.

Grüße
Nick

Tobias Jordans Autor vor 4 Jahren

@Nick: Bisher hat deine Website nicht viel von einem OnePager, da du eine klassische seitenbasierte Navigation verwendest. Ist dein Beitrag daher eher als Link-Spam zu verstehen?
Viele Grüße

Uwe vor 4 Jahren

Wie siehts eigentlich mit einer Seite wie dieser aus:
http://www.buylando.de

Gemäss Definition besteht sie nur aus einem HTML Dokument, ist aber nicht scrollbar sondern lässt sich über jquery Tabs seitwärts navigieren. Auch ein Onepager?

Alex vor 4 Jahren

Sorry, aber solche Kommentare sind doch etwas peinlich:
»Leider nur in modernen Browsern wie dem Safari Mac. Im Firefox und Chrome ruckeln die Animationen – nicht zu vermeiden, wenn man cutting-edge Webtechnologie verwendet.«

Das hat wohl kaum noch mit Webdesign zu tun, gelle

Abgesehen davon läuft es auf dem Firefox sehr wohl stabil und sieht echt nett aus.

Alex vor 4 Jahren

Sehr coole Liste! Würde gerne dein Feedback zu unserer neuen One Page hören! http://www.designwargestern.de/ Beste Grüße!

Cihan vor 2 Jahren

Hi!

OnePage-Seiten werden meiner Meinung nach nicht die Regel werden, aber sie sind defintiv im Kommen. Vorallem einzelne Personen oder kleine Organisationen werden solche Webseiten bevorzugen.

Ich werde demnächst auch einige Blogbeiträge auf unserer Seite posten. Bei Interesse einfach hier http://www.docksofdesign.de/blog reinschauen.

Beste Grüße aus der Mitte Deutschlands

Docks of Design – Werbeagentur aus Braunschweig

jollinski vor 2 Jahren

Hallo,
erstmal schönen Dank für den Artikel. Was ich bisher noch nicht rausfinden konnte, ist, wie sieht es mit dem PageRank aus.
Hat da schon jemand Erfahrungen? Wenn sich unique URLs und Deeplinks für die einzelnen Menüpunkte generieren lassen, bilden die für den Crawler eigene Seiten, die einzelne PageRanks erzielen und auf verschiedene Keywords optimiert werden können?
Schöne Grüße
Jolle

Trackbacks und Pingbacks