Page Transitions – ein wichtiger Grundbaustein in der User Experience

Die Page Transition ist ein ganz besonderer Webdesign-Effekt. Wie sehr sich einfache Page Transitions bzw. Seitenübergänge auf die UX einer Webseite auswirken, verraten wir im folgenden Artikel.

Wer Kelly Slater, einen der bekanntesten Surfer dieser Welt surfen sieht, weiß, mit welcher Leichtigkeit er Wellen reiten kann. Niemandem kommt in den Sinn, dass Slater bailen und ins Wasser fallen könnte. Der Weltmeister gleitet in seinen Sessions schwere- und mühelos von einer Welle zur nächsten.
Ähnlich smooth und geschmeidig im Geiste surfen User auf den neuen Websites, die uns auf einer Multipage via Page Transition von einem Webinhalt zum nächsten tragen. Bei Websites, die mit Page Transitions arbeiten, verspüren Nutzer beim Anklicken keine harten Brüche oder Verzögerungen mehr – ganz im Gegenteil. Der Übergang ist leicht, sodass wir gerne bleiben und endlos weitersurfen.

Was sind Page Transitions?

Page Transitions sind visuell überzeugende Web-Übergänge zwischen den Seiten und Unterseiten. Sie wirken individuell, ja variantenreich. Doch das Wichtigste ist, dieser Webdesign-Effekt vermittelt Usern nie das Gefühl, sie würden die Website verlassen, wenn lediglich eine Unterseite geladen wird, sondern dass sie sich nach wie vor auf der Website befinden. Das kleine Detail der Page Transition ist nicht ganz neu, doch erst durch die javascriptbasierten Web-Sprachen wie Vue.js, React oder Angular ist sie ganz ohne Abstriche in der Performance möglich. Aktuell bauen wir viele Websites um, weil unsere Kunden dieses völlig neue Wohlgefühl auch in ihrer Webentwicklung spüren möchten und nicht zuletzt auch die Bounce Rate auf ihrer Seite senken können. Nun schauen wir uns doch mal an, welche Möglichkeiten der Page Transition es so gibt.

Die 10 beliebtesten Page Transitions im Überblick

Hier unser kleiner Überblick über die zehn beliebtesten und effektivsten Page Transitions, die deiner vielleicht schon etwas betagten Webseite neues Leben einhauchen. Wir listen sie erst mal alle für dich auf und – ein dickes Dankeschön an unser Animationsstudio! – zeigen dir dann visuell, was sich genau hinter der jeweiligen Bezeichnung verbirgt. Also, los gehts!

Simple Page Transition

Los geht es mit der einfachsten Page Transition. Das sind in der Regel einfache Fade-ins oder Fade-outs. Das bedeutet, die angeklickte Unterseite schiebt sich als Layer bspw. von oben nach unten oder von der Seite langsam in das Bild hinein und drückt die bestehende Website hinaus. Das funktioniert mit einer harten oder weichen Kante und erinnert ein wenig an einen Filmschnitt aus einem Siebzigerjahre-Blockbuster. Da bleibt kein Restgefühl, dass irgendetwas nicht lädt oder dass man nicht mehr auf der Website ist. Im Gegenteil, alles ist sichtbar, und wir haben hier einen echten Webdesign-Effekt.

Transform oder Morphing Page Transition

Bei der Transforming oder Morphing Transition wird ein SVG-Pfad in einen anderen verwandelt. Der Webentwickler ordnet die einzelnen Elemente auf der Site. Werden diese nun angesteuert, morpht die Site und vermittelt dem User das Gefühl, dass sie sich aus den bestehenden Elementen ganz neu aufbaut bzw. ihr Erscheinungsbild verändert. So erinnert diese Transition stark an Morphing SVG Animation und bietet unterschiedliche Möglichkeiten für innovative und gleitende Übergänge.

—-> (Hier später die Verlinkung zum Insight mit den SVG-Animationen einfügen)

Multi-Layer Page Transition

Bei dieser Transition schieben sich die Layer ebenfalls von links nach recht oder oben nach unten ins Bild, doch dieses Mal gibt es keine klare Kante, sondern mehrere, und zwar farblich unterschiedliche Layer, die kurz getaktet hintereinander ins Bild kommen und den neuen Inhalt mit sich führen. Es hakt nicht, es stockt nicht, es gibt keine harten Brüche, sondern es geschieht farbig, schnell und sehr dynamisch.

Loading oder Loader Page Transition

Grundlegend wird eine Loading Page Transition Animation genutzt, um Seitenübergänge einzuleiten und dann z. B. mit Fade-in abgeschlossen. Ein Beispiel ist die Old TV Page Transition. Diese Transition erinnert ein wenig an einen alten Fernseher. Wenn man in den Neunzigern zu lange TV geschaut hatte und dann ausschaltete, verkleinerte sich das Bild auf dem Monitor zu einer länglichen Zeile – und genau umgekehrt öffnete sich das Bild auch wieder. In einem anderen Insight stellen wir euch übrigens die besten Ladeanimationen vor.

One Page Scroll with depth Effect

Diese Form der Page Transition wird mit einer reinen Scroll-Animation ausgelöst und auch als ‚Bildlauf mit Tiefeneffekt‘ bezeichnet. Sie wirkt besonders mit gestochen scharfen Fotos und farbigen Illustrationen. Der User scrollt dafür lediglich mit seiner Mouse, und schon schieben sich die Layer von beiden Seiten ins Bild oder hinaus und geben den Blick auf die neuen Inhalte frei.

3D PageFlip

Das modernste Beispiel einer Page Transition, vor allem optisch, ist die Flipversion. Bemerkenswert! Es bedeutet nicht, dass die Website zur Seite weggeschoben wird, sondern sie verkleinert sich im Bruchteil einer Sekunde und dreht sich dann um die eigene Achse. Sie flippt wie ein Coin und präsentiert dann den neuen Inhalt.

Cubic Bezier with GSAP

GSAP ist eine Bibliothek, die Webentwicklern sehr schnelle Animationen ermöglicht. Sie wird verwendet, um den Layer nach oben zu schicken und dann einige wirklich originelle Transition-Effekte zu erzielen, z. B. Kreise, harte Kanten, mehrere Ebenen, durchtrennte Bildschirme, auf denen die Webinhalte dann angeordnet werden.

Splish-Splash Page Transition

Mit diesem Webdesign Effekt wird es ein wenig nass, weil dieser reaktionsschnelle Modulübergang für einige Aufmerksamkeit sorgt. Er wurde mit Lottie-Animationen erstellt, die die Effekte in die Page Transition bringen. Während sich in der Mitte die Bildinhalte öffnen und wie Wasser nach außen verdrängen, kommt der nächste Inhalt als Splish-Splash zum Vorschein. Als würde ein Schwimmer von einem Fünf-Meter-Brett springen.

There is a Glitch Page Transition

Dystopien sind je nach gesellschaftlicher Wetterlage wieder angesagt und besitzen zudem etwas Zeitloses. Filme, Serien, Romane und nun auch Website Page Transitions arbeiten mit dem Stil. Vorsicht, diese Page Transition ist nicht für jede Webpräsenz geeignet, aber diese Form kann eine moderne Website rasant in die Zukunft schicken. Mit schräger Schrift, schrillen Farben, simulierten Endzeit-Computercodes und einem schicken Retrodesign. – Muy bien!

Thumbnail to Full-Page Transition oder Kachel-Transition

Thumbnails fangen den Inhalt von dem, was dahintersteckt, im besten Fall genau ein oder versprechen einiges, damit der User klickt. Mit dieser Thumbnail Page Transition geht das Miniaturbild in ein Manual über. Das vormals kleine Bild inmitten von vielen kleinen Bildern wird plötzlich ziemlich groß, größer als gewohnt, und aus einem unter hundert Bildern wird das nächste Titelbild. – Aus Klein wird Groß.

Schöner Übergang statt „lost in Transition“

Page Transitions sind ein neuer und beachtenswerter Baustein in der modernen Webentwicklung. Möglich werden sie durch die neuen java-basierten Scriptsprachen, die den Weg in die Zukunft legen. Es sind reaktionsschnelle, reaktive Sprachen, mit denen sich serverseitige Skripte, Netzwerktools, Web-Apps und eben auch Page Transitions realisieren lassen.

Nach allgemeiner Meinung sind sie die zukunftsfähigsten Sprachen der Webentwicklung und somit auch der Digitalisierung, die sich unaufhaltsam weiterentwickelt.

Shantu Andreas Bhattacharjee - Portrait

Du bist auf der Suche nach individuellen Page Transitions für deine Website? – Wir finden den passenden Stil für dich!

Shantu Bhattacharjee

Wir coden für dich!