Der Mehrwert von Motion Design auf Websites
21.06.2023
Wie ihr durch den Einsatz von Motion Design-Elementen profitieren könnt
Motion Design ist eine Designdisziplin, die klassisches Grafikdesign, audiovisuelle Gestaltung und digitale Technologien miteinander verbindet. Neben der Optik von Elementen, die im Rahmen des User-Interface-Konzepts (UI-Konzept) bestimmt wird, nimmt die Bedeutung von Bewegtbildern stetig zu. Gezielt eingesetzte Animationen führen zu einer verbesserten Benutzerfreundlichkeit und sind ein willkommenes Hilfsmittel gegen immer kürzer werdende Aufmerksamkeitsspannen von Website-Besucher:innen.
In diesem Blogbeitrag erfahrt ihr, wie Motion Design bei der Website-Erstellung eingesetzt werden kann. Zuerst erklären wir euch, wie wir Motion Design professionell in die Konzepte unserer Digitalprojekte integrieren. Euch erwarten Erfahrungswerte, Tipps und Beispiel-Animationen von unserer Motion und Junior UX-/UI-Designerin Larissa Pelikan. Außerdem gehen wir auf die zehn bedeutsamsten Vorteile von Motion Design-Elementen auf Webseiten ein.
Motion Design als Teil von hochwertigen Digitalprojekten
Die professionelle Umsetzung von Motion Design kennzeichnet sich dadurch, dass der Einsatz von Animationen, zum Beispiel Motion Graphics und Comic-Illustrationen, bereits in der UX- und UI-Designphase (User Experience und User Interface Design) berücksichtigt wird. Auf diese Vorgehensweise legen wir auch in unserer Digitalagentur sehr viel wert.
Der Grund dafür liegt auf der Hand: Unsere Motion Designer:innen beschäftigen sich nicht nur mit der bloßen Bewegung von einem Element von A nach B. Es geht vielmehr darum, Bewegungen hinzuzufügen, die einen nachhaltigen Zweck für eure Website-Besucher:innen erfüllen. Bewegtbilder können die Art und Weise, wie eure Website und euer Unternehmen online wahrgenommen werden, stark beeinflussen. Gleiches gilt für die damit verbundene Customer Journey.
Im Rahmen des UX-Designprozesses werden die Informationsarchitektur und die gewünschten Userflows eures Webauftritts entwickelt. Der Userflow beschreibt die Schritte, die Website-Besucher:innen zurücklegen müssen, bis sie eine bestimmte Aktion, zum Beispiel das Absenden einer Kontaktformular-Nachricht, durchführen können. Hierbei können Animationen hilfreich sein und einen willkommenen Wegweiser für die Betrachter:innen der Seiten darstellen. Ein klassisches Beispiel hierfür ist eine Animation des Warenkorbs in einem Onlineshop, die automatisch startet, wenn ein:e User:in einen Artikel hinzugefügt hat. Durch die Animation wird den Website-Besucher:innen visuell vermittelt, dass die soeben durchgeführte Aktion erfolgreich gewesen ist.
Der Einsatz von Motion Design hat ebenso Einfluss auf das UI-Design. Grundsätzlich legen wir im Rahmen der UI-Phase das sogenannte „Look-and-feel“ eurer Webseiten fest. In der Praxis besteht ein UI-Konzept aus einem Komponentensystem, welches Farben, Schriften und diverse Styles (Buttons, Verlinkungen, …) definiert. Durch Bewegtbilder und Animationen können unsere Designer:innen die Emotionen verstärken, die ihr mittels visueller Impressionen an eure (potenziellen) Kundinnen und Kunden vermitteln möchtet.
WP-Stars Motion Design, Lottie-Dateien und Beispiele
Unser Design-Team erstellt Bewegtbilder und Animationen hauptsächlich mit der Animationssoftware Adobe After Effects, für einfachere Designs kommt auch die UX-/UI-Software Figma zum Einsatz. In der internationalen Motion Design-Branche hat sich der Einsatz von Lottie-Dateien, das sind JSON-basierte Animationsdateien, durchgesetzt. Diese verfügen über eine geringe Datenmenge, sind vektorbasiert und damit problemlos für unterschiedliche Bildschirmgrößen ohne Qualitätsverlust skalierbar.
„Lottie ermöglicht uns im Bereich Motion Design einen effizienten Workflow, da wir unsere Animationsdateien schnell und einfach in Lottie-Dateien verwandeln können, die aus übersichtlichem Quellcode bestehen. Animationen problemlos in unterschiedliche Digitalprojekte zu implementieren, funktioniert aktuell gemäß unserer Erfahrung am besten mit Lottie-Dateien. Dennoch darf man bei der Verwendung von Lottie nicht vergessen, dass gegebenenfalls nicht alle After Effects-Features unterstützt werden. In diesem Fall arbeiten unsere Designer:innen und Web-Developer:innen zusammen, um den gewünschten Effekt mithilfe von CSS-Styles umzusetzen“, erklärt Larissa.
Um euren ersten Einblick in das Thema Motion Design zu vervollständigen, seht ihr untenstehend von Larissa erstellte Animationen:
Vorteile von Motion Design für Website-Betreiber:innen
Damit ihr euch noch besser vorstellen könnt, wie Motion Design euren Webauftritt bereichern kann, hat unsere Motion Design-Expertin Larissa die zehn bedeutsamsten Vorteile für euch zusammengefasst:
▶ Fokus auf wichtige Elemente: Hochwertige Animationen helfen dabei, den Fokus der User:innen auf ein bestimmtes Element der Seite zu richten, zum Beispiel auf die Hero Section oder auf einen Call-to-Action Button. Ebenfalls kann eine Animation den Fokus von Website-Besucher:innen zurückgewinnen, die sich schon länger auf einer Seite befinden, aber noch nicht mit einem Element interagiert haben.
▶ Aktive Wahrnehmung: Viele Personen überfliegen die Inhalte einer Website nur noch, dies nennt man Website-Scanning. Erst wenn der erste Gesamteindruck stimmig ist, beginnen viele User:innen damit, sich den Content genauer anzusehen und sich die Texte vollständig durchzulesen. Beim Überfliegen werden primär visuelle Reize wahrgenommen. Eine Animation sorgt für Aufmerksamkeit, die viele Rezipientinnen und Rezipienten dazu bewegt, ihr Scanning zu unterbrechen und die Inhalte aktiv wahrzunehmen. Je aktiver eure Botschaften wahrgenommen werden, desto mehr bleiben sie im Gedächtnis der Zielgruppen.
▶ Lebendiges Storytelling: Storytelling ist ein entscheidender Erfolgsfaktor im Content Marketing, da die Anzahl der im Internet verfügbaren Informationen stetig steigt, während die Aufmerksamkeitsspannen der meisten Menschen immer kürzer werden. Mittels (Brand) Storytelling könnt ihr eure Informationen auf spannende Weise vermitteln und durch ergänzende Animationen noch lebendiger und einprägsamer gestalten. Wird euer Content als lebendig wahrgenommen, erhöht sich in der Regel auch der Interaktivitätsgrad der jeweiligen Seite.
▶ Verständliche Darstellung: Animationen sind bestens dafür geeignet, Zahlen, Daten und Fakten in vereinfachter Form darzustellen, sodass die Inhalte schnell und einfach zu verstehen sind – auch für Personen, die sich noch nie mit eurem Unternehmen und euren Leistungen/Produkten auseinandergesetzt haben.
▶ Hinweise: Animationen können wichtige Hinweise beinhalten und euren potenziellen Kundinnen und Kunden häufig gestellte Fragen beantworten. Beispielsweise wenn ein bestimmter Ablauf durch illustrierte Animationen dargestellt wird, können wir als Designer:innen die wichtigsten Schritte bewusst in den Fokus rücken und essenzielle Hinweise inkludieren.
▶ Benachrichtigung/Information: Wenn ihr eure User:innen über ein bestimmtes Ereignis, zum Beispiel über die Änderung eines Bestellstatus, informieren möchtet, erhöht der Einsatz von einer Animation die Wahrscheinlichkeit, dass die Benachrichtigung tatsächlich von ihnen bemerkt und geöffnet wird.
▶ Direktes Feedback: Wenn User:innen auf eurer Website eine bestimmte Aktion (zum Beispiel eine Newsletter-Anmeldung) durchführen, ist es im Sinne der User Experience von großer Bedeutung, sie darauf hinzuweisen, ob diese erfolgreich funktioniert hat oder nicht. Mit einer Animation erhalten eure Website-Besucher:innen sofort visuelles Feedback, können die Information schnell verarbeiten und passend dementsprechend navigieren.
▶ Gestaltung der Ladezeit: Während eine Webseite lädt, kann eine Animation die Wartezeit in einen spannenden Moment verwandeln und eure Absprungraten verkleinern. Zudem können wir bei Animationen für ladende Seiten, Branding-Elemente inkludieren, die die Wiedererkennung eurer Marke stärken.
▶ Header mit Wow-Effekt: In den ersten drei Sekunden auf eurer Website gewinnen die User:innen ihren ersten prägenden Eindruck. Eine Header-Animation kann für einen Wow-Effekt sorgen, sodass ihr die Aufmerksamkeit eurer Zielgruppen bereits am Seitenanfang gewonnen habt.
▶ Produktpräsentation: Bei der Vorstellung von Produkten auf eurer Website oder in eurem Onlineshop ist der Einsatz von 3D-Animationen sehr beliebt. Durch sie können die Kundinnen und Kunden genau sehen, wie die ausgewählte Ware aussieht. Derartige Animationen erhöhen das Interesse der Betrachter:innen und sorgen gleichzeitig für eine gelungene Abwechslung im Bild-/Grafikkonzept des UX-Designs. Auch unsere Designer:innen können auf Wunsch 3D-Animationen für euch erstellen.
Larissa schließt folgendes Fazit: „Durch Motion Design-Elemente könnt ihr beeinflussen, wie eure Webseiten wahrgenommen werden und gleichzeitig bestimmte Bereiche gezielt in den Fokus der Betrachter:innen rücken. Zusätzlich können Animationen die Orientierung der User:innen verbessern und die gesamte Website-Bedienung vereinfachen. Um geeignete Animationen auszuwählen, ist es, neben der Berücksichtigung des UX- und UI-Designs sowie der Usability, von großer Bedeutung, eure grundlegenden Website-Ziele zu beachten. Mögliche Ziele sind zum Beispiel die Erhöhung der Markenbekanntheit und eine Umsatzsteigerung. Wenn wir alle genannten Aspekte während der Motion Design-Konzeption miteinbeziehen, können wir Animationen erstellen, die einen langfristigen Mehrwert für euch haben.“
