Webdesign ist etwas ganz Besonderes, denn es erfordert sowohl Designer als auch Nutzer, damit es funktioniert. Schließlich ist der Sinn und Zweck eines Designs auf einem interaktiven Medium wie einem Computer der, dass die Nutzer es, nun ja, nutzen! Interaktion ist auch ein guter Maßstab dafür, wie involviert Seitenbesucher sind, denn wenn sie mit der Seite interagieren, sind sie aufmerksam. Gutes, interaktives Webdesign bringt Nutzer dazu, mit einer Seite zu interagieren, weiter zu scrollen und mehr Content zu konsumieren, die anderen Seiten zu besuchen, sie mit Freunden zu teilen und natürlich den Call-to-Action-Button anzuklicken.

illustration: Interaktives webdesign

Eine der Herausforderungen interaktiven Webdesigns ist, dass es so viele Wege gibt, auf denen Nutzer mit einer Seite interagieren können, und noch mehr Wege, auf denen die Seite reagieren kann. Manche interaktive Designs bieten ein makelloses Nutzererlebnis, das den Nutzern Feedback gibt und ihnen sagt, was sie als Nächstes tun sollen. Andere hingegen sind weniger offensichtlich, die Reaktionen passen nicht zu den Handlungen der Nutzer oder schlimmer, es gibt keine Reaktion.

Um zu lernen, was ein gutes interaktives Web-Erlebnis von einem schlechten unterscheidet, werden wir uns bei den Profis umschauen. In diesem Artikel haben wir 6 nützliche Tipps für interaktives Webdesign zusammengestellt, schauen uns einige unserer Lieblingsbeispiele an und sprechen darüber, wieso diese funktionieren.

1. Nutze Ladezeiten zu deinem Vorteil

Die Ladezeit kann eines der größten Hindernisse beim Surfen im Internet sein. Ein Unternehmen kann noch so viel Geld und Mühe in eine fantastische und wunderschöne Website stecken, aber wenn sie länger als zwei Sekunden lädt, steigt die Wahrscheinlichkeit exponentiell an, dass Nutzer sie wieder verlassen, bevor sie irgendetwas von ihr gesehen haben, wie eine Studie ergeben hat. Man kann also davon ausgehen, dass Nutzer die Ladezeit als negatives Erlebnis wahrnehmen.

Aber Ladebildschirme können auch eine Gelegenheit sein. Wenn du schon die Aufmerksamkeit der Nutzer hast, warum dann nicht das Beste daraus machen? Diese Momente bieten eine unerwartete und daher besondere Gelegenheit, um Nutzer mit Animationen zu beeindrucken. Sie sind eine neuartige Chance, um die Markenpersönlichkeit zu zeigen und Nutzer zu begeistern. Oftmals zeigen diese Animationen den Nutzern den Fortschritt in Form eines Ladebalkens (oder ähnlichem) an, um zu zeigen, wie lange es noch dauert, bis man auf die nächste Seite kommt.

Im Idealfall bieten diese Ladebildschirme den Nutzern die Möglichkeit, etwas zu tun, zum Beispiel ein Spiel zu spielen, während sie warten. Dadurch entsteht ein unterhaltsames, interaktives Erlebnis.

Der Punkt ist, dass die Ladezeit nicht zwingend ein negatives Erlebnis für Nutzer sein muss. Sie müssen nicht einmal immer nur kurz und schmerzlos sein – manchmal sind sie das Aufregendste an einer Website.

Animation tickende Uhr
Von Oleg Frolov via Dribbble

Von Halal Lab via Dribbble

Interaktive Ladeanimation von Aaron Iker via Dribbble

2. Gliedere Informationen mit animiertem Scrollen

Scrollen ist eine der einfachsten und intuitivsten Interaktionen für Nutzer. Aber nur weil Nutzer über Scrollen nicht nachdenken, heißt das nicht, dass Webdesigner dies nicht tun sollten! Es gibt viele Wege, auf denen Designer Scroll-Animationen genutzt haben, um Nutzern ein Gefühl von dynamischer Bewegung auf einer Website zu vermitteln. Schauen wir uns mal ein paar von ihnen an.

Interaktives Website-Design mit dynamischen Scroll-Animationen
Von Janos Nyujto
Interaktives Website-Design mit dynamischen Scroll-Animationen
Von Bonhomme via Dribbble

Durch Scrollen ausgelöste Animation

Eine beliebte Technik ist, bestimmte Animationen auszulösen, während Nutzer auf der Website scrollen. Dies erweckt Bilder auf magische Weise zum Leben und erzeugt die Illusion, dass die Seite, auf die die Nutzer zugreifen, als Reaktion auf ihre Interaktion in Echtzeit entsteht.

Parallax Scrolling (alias symmetrische Scrollen)

Eine ähnliche Technik, die immer beliebter wird, ist Parallax Scrolling. Bei dieser Art der Bewegung bewegen sich beispielsweise zwei Objekte auf dem Bildschirm in zwei unterschiedlichen Geschwindigkeiten, während Nutzer auf der Seite herunterscrollen. Dadurch wird eine dreidimensionale Bewegung simuliert, da sich Objekte im Vordergrund in der Regel schneller bewegen, als Objekte im Hintergrund.

Von tubik via Dribbble

Interaktives Website-Design mit Text-Scrolling-Animation
Von Seth Taylor via Dribbble

 Von Yatish via Dribbble

Von Armand Chakhalyan via Dribbble

Seitenübergänge durch Scrollen

Und schließlich können Designer Seitenübergänge nutzen, bei denen das klassische, flüssige Scrollen entweder durch einen Sprung auf die nächste Seite oder das Anzeigen einer komplett neue Seite ersetzt wird. Dadurch kann ein eindrucksvoller Effekt entstehen, bei dem nicht nur neue Seitenelemente angezeigt werden, sondern in manchen Fällen auch ein komplett anderes Farbschema, wodurch man bei jedem Scrollen das Gefühl hat, es handelt sich um eine neue Website.

Diese Scroll-Animationen können Nutzern wichtiges Feedback zu ihren Interaktionen geben und sie wissen lassen, dass sie einen neuen Abschnitt der Website erreicht haben und nun mit anderen Informationen rechnen können. Kurz gesagt bieten sie auf eindrucksvolle und interaktive Weise eine klare Hierarchie und Struktur.

3. Lockere vertikale Bewegung mit Slidern und Karussells auf

Karussells werden so genannt, weil sie die Inhalte von Webseiten in rotierenden Abschnitten zusammenfassen, die die Nutzer durchgehen können, ähnlich wie bei einem Drehkreuz.

Man findet sie immer häufiger auf Webseiten, da Interaktionen in Form von Wischen auf Mobilgeräten immer beliebter werden. Da sie im Grunde eine Form des horizontales Scrollens sind, bieten sie Nutzern eine dringend benötigte Auszeit von der endlosen Monotonie des vertikalen Scrollens.

Von Glenn Catteeuw via Dribbble

Interaktives Website-Design mit Karussellbildern
Von Super Top Secret via Dribbble

Aber das ist nicht der einzige Grund, weshalb man vertikale Bewegung auflockern sollte. Wie wir bereits erwähnt haben, assoziieren Nutzer das Herunterscrollen mit dem Erreichen eines neuen Teils der Website. Karussells und Slider ermöglichen es Webdesignern dagegen, jedem Abschnitt mehr Kontext zu geben, da die Nutzer sie genau genommen nicht verlassen.

Statt also die Seite mit allen notwendigen Informationen auf einmal zu überfrachten, teilen Karussells die Seitenelemente in mundgerechtere Abschnitte auf und ermöglichen es Nutzern so, sie Stück für Stück durchzugehen.

Von Giulio Cuscito via Dribbble

Von Synchronized via Dribbble

Von eleken via Dribbble

Interaktives Website-Design mit horizontalem Menü
Von Ollie via Dribbble

Dies funktioniert am besten, wenn die Inhalte ein ähnliches Format haben, also gruppiere sie zum Beispiel nach Bildern, Profilen oder Kundenmeinungen. Sie eignen sich auch gut, um verschiedene Varianten zu zeigen, beispielsweise bei Produkten, die es in unterschiedlichen Farben gibt. Was die Animation dieser Karussells angeht, reicht die Bandbreite von klassischen Übergängen, die von links nach rechts verlaufen, über einen Effekt, der aussieht, als würde man Karten mischen, bis hin zu einem animierten, drehenden Rad, das an alte View-Master-Slides erinnert.

4. Erweitere das Navigationsmenü

Genau wie Wischen sind Hamburger-Menüs ein weiterer Trend bei Mobilgeräten und Apps, der mittlerweile auf Desktop-Webseiten genutzt wird. Selbst wenn das Hamburger-Symbol selbst nicht zu sehen ist, sind Nutzer mittlerweile mit der Idee vertraut, dass die Navigation nicht jederzeit angezeigt werden muss. Nutzer wissen, dass sie da ist und dass sie mit ihr bei Bedarf interagieren können. Das Menü zu verstecken, lässt dem Rest der Website Raum zum Atmen. Gleichzeitig ist das Anzeigen des Menüs eine weitere Gelegenheit, das Webdesign interaktiv zu gestalten.

Von Francesco Zagami via Dribbble

Von green chameleon via Dribbble

Von green chameleon via Dribbble

Da Nutzer nun lieber das Menü aufrufen, entscheiden sich viele Designer für eine Navigation, die den gesamten Bildschirm einnimmt. Dies ermöglicht große Typografie, anschauliche Bilder und schicke Hover-Animationen.

Mit Menü-Interaktionen so richtig auf den Putz zu hauen, macht Sinn: Bei der Navigation dreht sich alles um Kontrolle. Die Nutzer übernehmen das Ruder und das Menü in den Mittelpunkt zu stellen hilft dabei, Nutzern zu zeigen, wie viel Kontrolle sie über die Seite haben. Im Großen und Ganzen bleiben die Menü-Designs versteckt, bis sie gebraucht werden, und werden dann überlebensgroß. Meiner Meinung nach ist das eine schöne Abwechslung zu den langweiligen Listen am oberen Bildschirmrand, wie wir sie aus vergangenen Tagen kennen.

5. Ersetze Formulare durch Fragebögen

Eines der lästigsten Dinge bei der Interaktion mit einer Website ist das Eingeben von Informationen. Die Nutzer sind grundsätzlich skeptisch, wenn es darum geht, ihre Informationen auf einer Website einzugeben. Am besten umgeht man dies, indem man den Prozess weniger wie das Ausfüllen eines Dokuments beim Arzt gestaltet und mehr wie einen Fragebogen, um jemanden kennenzulernen.

Großes animiertes Navigationsmenü
Von green chameleon via Dribbble

Von Merixstudio via Dribbble

Von Saga Design Team via Dribbble

Zu diesem Zweck machen viele Webseiten das Onboarding zu einem interaktiven Fragebogen, bei dem Fragen auf klare und sympathische Weise formuliert werden und gegebenenfalls mehrere Antworten möglich sind. Diese Fragen Stück für Stück zu stellen verhindert, dass Nutzer sich überfordert fühlen, und gibt ihnen das Gefühl, an einem Gespräch teilzunehmen.

Von Florian Pollet via Dribbble

Fragebogendesign zum Mitarbeiterwohlbefinden
Von Christoph Gromer via Dribbble

Ein hervorragendes Beispiel für diese Technik kommt von Dienstleistern, die einem bei der Steuererklärung helfen und die Steuerformulare in einfache, leicht verständliche Fragen umformulieren. Dies ist besonders hilfreich für Services, die Seitenbesuchern mehrere Produkte anbieten und herausfinden müssen, welches für sie am besten geeignet ist, indem sie ihre Bedürfnisse, Vorlieben, Budgets und weiteres verstehen.

6. Vernachlässige Mikrointeraktionen nicht

Von Fireart Studio via Dribbble

Wenn es um Animationen im interaktiven Webdesign geht, sind es die kleinen Bewegungen, die wirklich überzeugen. Und wenn man bedenkt, dass der Zweck einer Website-Animation häufig darin besteht, Feedback zu geben (z. B. die Nutzer wissen zu lassen, womit sie interagieren können und womit nicht oder ob sie etwas richtig gemacht haben), macht es durchaus Sinn, dass dieses Feedback am besten auf einer unterbewussten Ebene funktioniert.

Animationen, die zu viel Aufmerksamkeit auf sich ziehen, können Nutzer verwirren und vom eigentlichen Feedback ablenken, das sie geben sollten, nur um das Können des Animators zu zeigen. An dieser Stelle kommen Mikrointeraktionen ins Spiel.

Von Kashish Mehta via Dribbble

Mikrointeraktionsanimation mit Radiobutton
Von Milan Gladiš via Dribbble
Download-button Ladeleiste mit Mikrointeraktion
Von Aashish via Dribbble

Von Aaron Iker via Dribbble

Mikrointeraktionen sind eine breit gefasste Kategorie, die all die kleinen Wege beschreibt, auf denen Nutzer mit einer Seite interagieren. Mit dem Mauszeiger über etwas fahren, ein Fenster schließen, ziehen, um die Seite neu zu laden, und das Anklicken von Bewertungssternen, Lesezeichen, Benachrichtigungsglocken und dem Warenkorb hinzufügen sind Beispiele für Mikrointeraktionen.

Einige beliebte Stile beim Animieren von Mikrointeraktionen sind zum Beispiel ein Button, der grün wird, oder ein Icon, das zu einem Häkchen wird. Das Ziel besteht darin, die Nutzer wissen zu lassen, dass sie erfolgreich eine Änderung an der Seite vorgenommen haben, und das Design der Mikrointeraktionen sollte daher simpel und zufriedenstellend sein.

Interaktives Webdesign ist gutes Webdesign

Schlussendlich ist interaktives Webdesign das, wofür das Internet gemacht wurde. Bei all den Gründen, die jemand haben kann, deine Website zu besuchen, geht es letztendlich um Interaktion und nicht nur darum, Informationen zu finden, sondern darum, deine Seite zu erleben. Deshalb kann eine Seite, die keine Mikrointeraktionen nutzt, schnell ins Hintertreffen geraten. Die hier beschriebenen Tipps sind ein guter Anfang, um sicherzustellen, dass das nicht passiert.

Du möchtest die perfekte Website für dein Unternehmen?
Dann arbeite mit unserer talentierten Design-Community zusammen.