Wie können Sie kinetische Typografie verwenden, um Ihre Website interaktiv zu gestalten?

Kinetische Typografie bezeichnet eine Form der Animation. Hier erwecken wir die Worte zum Leben.

Ich sage Worte, aber es kann alles sein – von einem einzelnen Buchstaben bis zu einem ganzen Absatz. Hängt davon ab, was Sie mit dieser Bewegung erreichen möchten. In Anbetracht dessen muss Ihr Bewegungstyp nachdenklich und absichtlich sein. Sie können Ihre Worte nicht einfach aus reinem Spaß springen und dröhnen lassen.

Nun, Sie können – aber diese oberflächliche Verwendung wird nicht die gleiche Wirkung haben.

Denn wenn Sie Bewegungssprache im Webdesign verwenden, sei es durch die Erstellung einer Logodesign-Animation oder durch kinetische Typografie, öffnen Sie das Design für die Benutzer.

Mit anderen Worten, Sie helfen den Benutzern zu vergessen, dass sie nur auf einen Bildschirm tippen, und präsentieren Ihre Website stattdessen als etwas Lebendiges, das reagieren kann. Es kann lächeln, dir sagen, was als nächstes zu tun ist, tanzen, wenn du auf den richtigen Knopf klickst, und in Sterne explodieren, wenn du erfolgreich bist.

Wenn Benutzer mit Ihrem Design interagieren können, entscheiden sie sich möglicherweise dafür, mehr Zeit damit zu verbringen, sich darüber zu freuen, es vollständiger zu verstehen und sich letztendlich mit ihm verbunden zu fühlen.

https://dribbble.com/shots/14187210-Behance

5 Möglichkeiten, wie interaktive Elemente das Website-Erlebnis verbessern

Erhöhen Sie die Ästhetik

Ästhetik ist alles, wenn es darum geht, dass Ihre Website den ersten Eindruck hinterlässt. Wenn Ihre Website trist und schlecht zusammengestellt aussieht, wird dieser Eindruck auch auf Ihre Marke übertragen, wodurch Ihr Endergebnis darunter leidet.

Auf der anderen Seite, wenn eine Seite schön aussieht und Funktionen bietet, die nicht viele zuvor auf den meisten Seiten gesehen haben – zum Beispiel kinetischer Typ –, ist das ein großer Gewinn.

Da die kinetische Schrift auch die Ästhetik lebendiger macht, erhöht sich die Wirkung. Sie haben jetzt eine schöne Website, die die Leute berühren, mit der Sie sprechen, auf die Sie antworten und von der Sie Feedback erhalten können.

Das ist etwas, was eine gute alte statische Website einfach nicht kann.

Lassen Sie sich von der Masse abheben

Um die digitale Welt nachhaltig zu prägen, müssen Sie Dinge haben, die andere nicht haben.

Aus irgendwelchen unverständlichen Gründen profitiert keine große Marke von dem, was kinetic type kann. Vergessen Sie große Marken, Startups sind auch blind für die Wunder dieses wunderschönen Wunders.

Hier können Sie zuschlagen.

Integrieren Sie subtile, ansprechende und markenkonforme kinetische Effekte auf Ihrer Website, um das Erlebnis als einzigartig für Sie zu bezeichnen. Zeigen Sie den Leuten, was Sie können.

Die Leute werden sich Ihre Innovation ansehen, sehen, wie tadellos Sie damit umgegangen sind und wie sie Ihrem Unternehmen hilft, seine Botschaft zu vermitteln, und sie beginnen, Ihnen zu vertrauen. Sie werden dich als jemanden ansehen, der weiß, was er tut. Wenn dieses Vertrauen aufgebaut ist, folgt bald eine Geldtransaktion.

Halten Sie den Benutzer bei der Stange

Die gesamte Prämisse des Internets und der sozialen Medien basiert auf Engagement. Ihre Inhalte müssen den Menschen etwas bieten, das sie mit den Inhalten, dem Ersteller und der Plattform beschäftigen kann.

Durch die Verwendung von kinetischen Typografiefunktionen auf Ihrer Website erreichen Sie Engagement-Bewertungen, von denen Sie nur träumen können.

Anstatt sie zu zwingen, statische Texte durchzulesen, geben Sie ihnen Live-Action-Wörter, die sich verändern, anpassen und ausführen, um die Benutzerreise verständlicher und unterhaltsamer zu machen.

Verbessern Sie die visuelle Hierarchie

Visuelle Hierarchie bezieht sich auf die organisatorische Reihenfolge, in der Dinge dem Benutzer präsentiert werden. Der Text mit der größten Schriftart ist der wichtigste, dann der kleinere und so weiter. Ebenso erregen Schriften in leuchtenden Farben unsere Aufmerksamkeit schneller als beispielsweise Schriften in Grau oder Hellblau.

Mithilfe dieser visuellen Hinweise helfen wir den Benutzern, ihre Aufmerksamkeit in einer organisierten Reihenfolge auf verschiedene Teile der Seite zu lenken.

Umzugstyp kann hier eine große Hilfe sein. Anstelle statischer Hinweise können wir flüssige Typografie verwenden und unsere Buchstaben und Wörter in Symbole und Formen verwandeln, die die Aufmerksamkeit des Benutzers lenken.

Informieren Sie die Benutzer

Wenn Sie eine neue Website starten, kann es für die Leute schwierig sein, den Überblick zu behalten. Aber interaktive Funktionen können helfen.

Laut einer Content-Marketing-Studie glauben 93 % der Vermarkter, dass interaktive Inhalte „sehr effektiv bei der Aufklärung potenzieller Kunden“ sind.

Nun, dieser interaktive Inhalt könnte alles sein – ein Blogbeitrag, ein Video, eine Infografik, alles – aber wenn Sie Bewegung in verschiedene Bereiche Ihrer Website bringen, indem Sie sich bewegen – Navigation, Menü, Suchleiste, was auch immer –, erhöhen Sie die Bildung und Verständnis eines neuen Layouts zehnfach.

So kann kinetische Schrift Ihre Website interaktiv machen

1. Machen Sie die Wartezeit beim Laden Ihrer Seite unterhaltsamer

https://dribbble.com/shots/6189182-Counter-01

Keiner von uns ist ein Fan von Webseiten, die ewig zum Laden brauchen. Tatsächlich sind langsam ladende Seiten laut Google einer der Hauptgründe, warum einige Websites eine höhere Absprungrate aufweisen als andere.

Aber Schriftaktivität kann hier helfen.

Stellen Sie sich eine Seite vor, auf der die Änderungen der Textgröße Sie darüber informieren, wie viel Wartezeit noch verbleibt.

Wenn der Typ von einer kleineren zu einer größeren Größe wechselt, kann er Benutzer darauf hinweisen, wie lange sie möglicherweise noch warten müssen. Während die Leute möglicherweise nicht positiv auf Seitenladezeiten reagieren, bleiben sie wahrscheinlich länger, wenn Sie ihnen sagen, wie schnell das Warten enden wird.

Sie können die Wartezeit noch unterhaltsamer gestalten, indem Sie den Text interessanter, die Animation ansprechender und die Effekte natürlicher gestalten.

2. Lenken Sie die Aufmerksamkeit des Benutzers und weisen Sie auf den nächsten Schritt hin

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

Für diejenigen, die mit Ihrer Website möglicherweise nicht allzu vertraut sind, kann es etwas verwirrend sein, den nächsten Schritt in der Benutzerreise zu finden.

Moving Type kann Ihnen dabei helfen, die Aufmerksamkeit der Benutzer zur richtigen Zeit auf den richtigen Bereich der Website zu lenken. Zum Beispiel kann das Verschieben von Schrift auf der digitalen Speisekarte eines Restaurants Ihnen helfen, Ihre Aufmerksamkeit auf die Portionsgrößen zu lenken, während Sie Ihre Gerichte fertigstellen. Oder wenn Sie eine Reise buchen, kann Ihnen die kinetische Typografie auf dem integrierten Kalender helfen, sicherzustellen, dass Sie die richtigen Daten ausgewählt haben.

Wenn Sie die Benutzerreise leicht nachvollziehbar und vorhersehbarer gestalten, ist dies ein Zeichen dafür, dass Sie eine intuitive Benutzeroberfläche geschaffen haben, die die meisten Menschen leicht verstehen werden.

https://dribbble.com/shots/17559699-Move-On-Up

3. Sagen Sie den Leuten, worauf sie sich konzentrieren sollen

https://dribbble.com/shots/9287077-hop

Ein weiterer Schlüsselbereich, in dem bewegliche Schrift eine Website verbessern kann, ist, wenn Sie den Leuten sagen müssen, worauf sie sich konzentrieren sollen.

Denken Sie an eine Seite „Meine Dienste“. Während eine traditionelle, statische Seite ihre Aufgabe erfüllen kann, können Sie den Leuten durch kinetischen Typ sagen, welcher Service Ihr Hauptprodukt ist, welcher das zweite ist und so weiter. Auf diese Weise hilft Ihnen der kinetische Typ, Ihre Nische zu etablieren und zu fördern.

Zusätzlich zur Bewegung können Sie die Schrift auch in verschiedene Formen umwandeln lassen, die für Ihre Dienstleistungen relevant sind, um Ihre Botschaft visueller zu gestalten. Wenn Sie beispielsweise ein Schriftsteller sind, kann ein Federsymbol auf Ihre Fähigkeiten als Redakteur hinweisen, während ein Glühbirnensymbol kreative Beratung bedeuten kann.

Wenn sich verschiedene Buchstaben in Ihrem Text in diese neuen Symbole verwandeln, sieht es nicht nur unglaublich verspielt und einnehmend aus, sondern zeigt auch ein bisschen Ihrer Persönlichkeit – und im Marketing ist das (meistens) immer ein Pluspunkt.

https://dribbble.com/shots/13945869-My-Services

4. Bereiten Sie Benutzer auf eine Statusänderung oder einen Übergang vor

https://dribbble.com/shots/11258557-Creative-Coding-5

E-Commerce oder ein Web-Browsing-Erlebnis ist mit Übergängen überschwemmt. Du gehst immer von Punkt A nach B nach C und so weiter. Hart geschnittene Übergänge sorgen für eine lästige Benutzererfahrung. Niemand fühlt sich gerne von einem Ort zum nächsten gerüttelt. Fließende, flüssigkeitsähnliche Typografie hilft, alles glatt zu halten.

Es bereitet die Menschen auf eine bevorstehende Veränderung vor. Sagt ihnen, sie sollen sich darauf vorbereiten. Hilft ihnen, sich auf die nächste Phase des Einkaufens, Herunterladens oder einfachen Surfens vorzubereiten.

Ein reibungsloser Übergang ist auch wirksam, um die Aufmerksamkeit des Benutzers zu erhalten. Anstelle einer statischen Seite, die ein Wartesignal anzeigt, wird ein netter Text mit symbolischer Bewegung bei allen gut ankommen und die Markenstimmung unterstützen.

5. Betonen Sie Schlüsselwörter, Phrasen oder Bereiche der Website

https://dribbble.com/shots/11138509-Die-Wahrheit-ist-es-wert

Ein Großteil der Website besteht aus Text. Webtexte, Beschreibungen und CTAs sind einige Beispiele. Wenn Sie sich für die Verwendung von kinetischem Typ entscheiden, können Sie zulassen, dass diese Textelemente animiert werden. Das Hervorheben Ihrer Kernbotschaft wird einfacher.

Denken Sie an einen CTA, der sich in ein Einkaufswagensymbol verwandelt, wenn Sie Ihre Online-Bestellung abschließen. Oder eine Fehlermeldung, die Enttäuschung zeigt, indem sie sich in ein trauriges Stirnrunzeln verwandelt. Oder eine Podcast-Episodenliste, in der jeder Titel größer wird, wenn Sie den Mauszeiger über seinen Namen bewegen.

Als Teil des Bewegungsdesigns hilft Ihnen kinetische Schrift, das zu betonen, was Sie sagen möchten. Verdoppeln Sie die Kraft Ihrer Worte. Verwenden Sie es also mit Absicht und Überlegung.

6. Geben Sie visuelles Feedback, wenn eine Aufgabe erfolgreich abgeschlossen wurde

https://dribbble.com/shots/16174668-KEEP-IT-UP

Wenn ein Benutzer mit Ihrer Benutzeroberfläche interagiert, ist es hilfreich, wenn er weiß, dass er es richtig macht. Fehlermeldungen, Bestätigungen und andere Formen von visuellem Feedback helfen Benutzern zu verstehen, was sie tun müssen. Die Verstärkung der Benutzeraktionen hilft ihnen, engagiert zu bleiben, und erhöht die Wahrscheinlichkeit, dass sie ihre Aufgaben erfüllen.

Animierte Typografie ist eine effektive Form des visuellen Feedbacks. Es ist schnell, hält die Aufregung der Erfahrung aufrecht und ermutigt den Benutzer, weitere Maßnahmen zu ergreifen.

Es spielt insbesondere eine Schlüsselrolle, wenn Sie es für Ihre Fehlermeldungen verwenden. Sie möchten, dass die Leute es noch einmal versuchen, nicht frustriert sind und ihnen genau sagen, was schief gelaufen ist. Wenn ein Benutzer beispielsweise sein Passwort zweimal falsch eingibt und ihn beim dritten Mal aus der App ausschließt, können Sie eine animierte Fehlermeldung einfügen, die ihn darauf hinweist, damit er jetzt vorsichtiger sein kann.

Wie Sie sehen können, müssen Sie Ihre Website nicht mit dem Umzugstyp überfluten. Das Ganze wird ehrlich gesagt bizarr und zu überwältigend aussehen. Wie ich immer wieder sage, seien Sie subtiler und durchdachter, wenn Sie mit Animationen jeglicher Art arbeiten. Tun Sie es, wenn es das Erlebnis verbessert, und halten Sie selbst dann den Effekt leicht und weich.

7. Helfen Sie mit, den Ton der Marke anzugeben

https://dribbble.com/shots/17070314-SIMPLE

Während animierter Text allen Branchen helfen kann, ist er in einigen effizienter als in anderen. Nehmen Sie zum Beispiel Banken oder Versicherungen. Sie können Ihre Typografie dort animieren, aber Sie müssen sehr zurückhaltend sein. Denn wenn Sie noch ein bisschen mehr übertreiben, kann das Ihren Markencharakter beeinträchtigen.

Aber denken Sie an Mode, Lifestyle, Einzelhandel, Immobilien, Kinderausrüstung/Kleidung/Spielzeug und so viele andere, und eine gesunde Dosis kinetischer Art, um die Benutzeroberfläche interessanter zu machen, scheint viel sinnvoller zu sein.

Alleine kann es zwar nicht Ihr gesamtes Branding etablieren, kann aber neben anderen Tools als großer Vorteil dienen.

Das wegnehmen

Dort sind drei:

1. Seien Sie zielstrebig . Tu es nicht nur, weil es hübsch aussieht. Tun Sie es, weil es einem Zweck dient, und machen Sie es dann schön.
2. Seien Sie sparsam mit Ihrem Umzugstyp . Es kann viel zu nehmen sein. Fügen Sie es also nur in UI-Bereichen hinzu, in denen Sie Platz haben und die meisten Ergebnisse erzielen.
3. Sei klar . Verwenden Sie Schriftstile, die beim Hinzufügen von Animationen nicht an Lesbarkeit verlieren. Halten Sie sich auch von Animationsstilen fern, die perfekt lesbare Schriftstile durcheinander bringen.