Durchdachtes Design lädt Nutzer:innen zu mehr Interaktion mit euren digitalen Produkten ein. Das verbessert die User-Experience, schafft mehr Bindung, eröffnet smarte sowie spielerische Kommunikationswege und ist ein nicht zu unterschätzender Erfolgsfaktor. Wir haben 6 Tipps, wie ihr euer Web- & App-Projekt erfolgreich interaktiv gestaltet.
Was ist interaktives Webdesign und warum ist es so wichtig?
Klar ist, dass es irgendwie um die Gestaltung und Einbettung von Interaktionen geht, aber was bedeutet das jetzt genau? Fangen wir erstmal etwas theoretischer an: Nutzer:innen können durch verschiedene Aktionen – Inputs wie scrollen, wischen, usw. – Reaktionen produzieren, die durch verschiedene Effekte Feedbacks liefern. Auf diese Weise können Inhalte und Strukturen ansprechend präsentiert werden, das schafft Orientierung und hilft dabei Informationen besser zu vermitteln. Gleichzeitig kann es Nutzer:innen dazu animieren, sich mit dem Content auseinander zu setzen, entsprechende CTAs wahrzunehmen und ihnen zu folgen. Zumal ist der spielerische Charakter nicht zu unterschätzen: gutes Interaktionsdesign trägt sowohl zur Unterhaltung als auch zur Ästhetik bei und schafft so ein rundes Gesamtprodukt.
So könnt ihr eure Website und App erfolgreich interaktiv gestalten:
1. Animiertes Scrollen
Eine der oder die häufigste Interaktion auf einer Webseite ist das Scrolling. Hierbei können Animationen und Effekte Dynamik schaffen. Im Zusammenspiel mit der menschlichen Wahrnehmung entsteht so ein nahtloses und flüssiges Erleben. Wir stellen euch drei beliebte Ansätze für interaktiveres Scrolling vor:
Durch Scrollen ausgelöste Animationen
Hier wird beim Scrollen eine Animation ausgelöst, dadurch wird den Nutzer:innen das Gefühl vermittelt, dass die animierten Elemente in Echtzeit auf ihre Aktionen reagieren. Ein klassisches Beispiel sind Animationen, bei denen sich Bildschirme beim Scrollen aus- bzw. zuklappen oder drehen.
Parallax Scrolling
Der Begriff leitet sich von einem Effekt aus der Wahrnehmungspsychologie ab, der Bewegungsparallaxe. In aller Kürze: die Veränderung der Perspektive eines Beobachters zu zwei Objekten führt dazu, dass das nähere Objekt sich schneller zu bewegen scheint und umgekehrt. Den Effekt kennen wir alle vom Bahnfahren, aber auch von 2D Jump & Run Spielen: Die Animation des Hintergrunds ist langsamer und die unterschiedlichen Geschwindigkeiten suggerieren Tiefenwahrnehmung. Durch diese räumliche Suggestion können Elemente besser unterschieden werden, beispielsweise ein Hauptelement vom Background. Besonders eignet sich das Parallax Scrolling deshalb für das Story Telling.
Sticky Scrolling
Manchmal sollen Elemente während des Scrollings weiterhin sicht- und erreichbar sein, beispielsweise das Navigationsmenü oder der Media-Player mit den entsprechenden Buttons. Es wäre ätzend, wenn die Playerbuttons jedes Mal verschwinden, wenn ihr eine Spotify-Playlist durchstöbert, oder? Weiterhin können sticky Elemente interessante Sliding-Effekte produzieren, die dabei helfen Content zu strukturieren, Informationen besser zu vermitteln oder einen CTA hervorzuheben.
2. Slider und Karussells
Slider oder auch Karussells gruppieren Content horizontal, die bekannteste Form ist die Slideshow. Mit der zunehmenden Verbreitung von Touchscreens stieg die Beliebtheit, denn sie eignen sich gut für die Navigation durch Wischbewegungen. Zumal die horizontale Ausrichtung des Bildlaufs die Monotonie des üblichen vertikalen Scrollen bricht: richtig platziert, kann auf diese Weise Aufmerksamkeit geweckt werden. Außerdem spart diese Präsentationsform vertikalen Raum und trägt dazu bei, Informationen übersichtlich sowie kompakt zu präsentieren. Da die Nutzer:innen den Content in der Regel Stück für Stück ansehen, tragen Slider auch dazu bei, gezielter zu kommunizieren, da durch die Bestimmung der Reihenfolge der Slides mehr Kontrolle über den Informationsfluss besteht.
3. Navigationsmenüs
Ein Element, mit dem viele Nutzer:innen mittlerweile vertraut sind, ist das Hamburger-Menü. Das sorgt für ein übersichtliches Navigationsmenü, da es sich hinter einem Symbol verbirgt und die Möglichkeit bietet, es nach Belieben auf- und zuklappen. Das Navigationsmenü hinter einem Symbol zu verstecken trägt nicht nur zur Übersichtlichkeit der Seite bei, sondern bietet auch die Gelegenheit, es interaktiv zu gestalten, beispielsweise durch ansprechende animierte Transitionen zwischen aufgeklapptem und zugeklapptem Menü. Besonders für mobile Layouts sind klappbare Menüs in der Regel ein Muss. Im Desktop-Bereich gilt es oftmals abzuwägen, denn der Mehrwert hängt stark vom Anwendungsfall und der Zielgruppe ab. Entscheidend ist auch, wie komplex das Menü strukturiert ist und was im Gesamtkonzept sinnvoller ist. Je nach Projekt kann beispielsweise eine minimalistische Navigationsleiste besser passen.
4. Interaktive Fragebögen
Die Meisten geben wohl nur ungern ihre persönlichen Informationen auf einer Website ein und das anfängliche Misstrauen ist oft groß. Deshalb ist es wichtig, diesen Prozess richtig zu gestalten. Interaktive Fragebögen tragen dazu bei, das Ganze aufzulockern, damit die User:innen keine Assoziationen mit einem aufwendigen, langweiligen und umständlichen Behördengang haben. Neben dem Wording könnt ihr beispielsweise Antwortkategorien vorgeben oder Fragen durch Slider unterteilen. Allgemein tragen gut designte Fragebögen dazu bei, Frust beim Eintragen zu reduzieren und Informationsüberschuss zu vermeiden. Zumal der Prozess für die Nutzer:innen idealerweise maximal beschleunigt wird. Das Ziel sollte sein, dass die Nutzer:innen sich nach dem Ausfüllen denken: “Das ging jetzt aber schneller als gedacht!”
5. Mikro Interaktionen
Als Mikro Interaktionen bezeichnen wir in der Regel weniger offensichtliche Interaktionen, wie das hovern des Cursors über einem Element, der entsprechende Click beispielsweise auf den Warenkorb oder auf ein Bewertungssymbol. Aber auch die Veränderung eines Statussymbols, wenn zum Beispiel der Inhalt eines Posts aktualisiert oder eine Nachricht abgesendet wurde. Einige dieser Interaktionen sind recht einfach. Im Falle des Hoverns soll beispielsweise klar kommuniziert werden, dass es sich um ein interaktives Element handelt. In anderen Fällen kann der Effekt durchaus verspielt sein, zum Beispiel eine kleine Animation beim Klicken auf einen Like-Button. Die Animationen liefert den Nutzer:innen nicht nur ein nüchternes Feedback, sondern verpackt es idealerweise in einer Form, die den emotionalen Ausdruck des Likens unterstreicht.
6. Ladezeiten
Niemand mag Ladezeiten, Punkt. Genauso wenig wartet jemand gerne auf die Bahn oder beim Arzt, es ist stets etwas, was wir in Kauf nehmen. Demnach ist es wichtig Ladezeiten auf ein Minimum zu reduzieren. Falls es also dennoch mal zu längeren Ladezeiten kommen sollte, helfen interaktive oder animierte Ladebildschirme eure User:innen kurzfristig zu beschäftigen. Der Seitenaufbau kann kreativ genutzt werden und bietet idealerweise ein kleines Erlebnis: ein animiertes Logo oder ein charmant vertröstender Spruch bieten eine gute Gelegenheit, die eigene Corporate Identity spielerisch in Szene zu setzen.
Fazit
Eine schnieke Website allein führt sicher nicht zum Erfolg und gutes Webdesign ist mehr als nur ein hübsches Layout: Es hat immer die Nutzung und demnach die vielfältigen Funktionen und Interaktionsmöglichkeiten im Blick. Die Tipps, die wir euch hier präsentiert haben, sind also keine No-Brainer. Allem voran bieten sie ein Repertoire, welche Elemente ihr wie umsetzt, hängt stets von eurem Projekt und kommunikativem Konzept ab. Gutes Design bietet die Basis für erfolgreiche digitale Projekte, aber allem voran sind das zufriedene Nutzer:innen. In diesem Sinne steht gutes Design immer in Diensten der Nutzer:innen und Usability, also: design with the user in mind.