Wie verbessert man die Benutzererfahrung mit Mikrointeraktionen? Beispiele und Tipps

Heutzutage finden Sie Beispiele für Mikrointeraktionen auf fast jeder Website. Sie machen die Webseite nicht nur attraktiver, sondern verbessern auch die Benutzererfahrung, indem sie es dem Besucher erleichtern, Inhalte zu erhalten. Was genau sind Mikrointeraktionen und wo können sie auf einer Website eingesetzt werden? Finden Sie es heraus.

Was sind Mikrointeraktionen auf Websites?

Mikrointeraktionen sind ein wesentlicher Bestandteil des UX-Designs, doch viele Unternehmen schöpfen ihr Potenzial nicht aus. Dies sind kleine, praktische Animationen, die den Besuchern helfen, die Website zu erleben, indem sie Hinweise geben oder sichtbare Änderungen zeigen, die aus ihren Aktionen resultieren.

Kurz gesagt, eine Mikrointeraktion ist eine Information über das Ergebnis einer bestimmten Benutzeraktion auf einer Webseite oder ein Hinweis, der sich unter dem Einfluss einer Aktivität bemerkbar macht, wie etwa das Schweben des Cursors über ein Element. Ziel solcher Animationen ist es, die Website intuitiver zu gestalten und die Interaktion für den Benutzer einfacher und natürlicher zu machen.

Vorteile von Mikrointeraktionen

Mikrointeraktionen können die Benutzererfahrung (UX) erheblich verbessern, selbst beim Durchsuchen einer Website mit nicht durchdachter Logik. Das bedeutet, dass solche Lösungen verwendet werden können, um die Effektivität einer Webseite zu verbessern, anstatt in den Aufbau einer völlig neuen zu investieren.

Zu den wichtigsten Vorteilen von Mikrointeraktionen gehören:

• visuelle Belohnung – Mikrointeraktionen helfen, den Effekt von Aktionen zu sehen, und Feedback ermutigt den Benutzer, weitere Aktionen zu unternehmen und die Website zu erkunden,
• Platzersparnis auf der Webseite – zusätzliche Nachrichten, für die im Webdesign kein Platz war, können unter den Schaltflächen versteckt und nur angezeigt werden, wenn der Benutzer sie mit dem Cursor anzeigt,
• schnellere und einfachere Navigation durch die Website – einzelne Hinweise ermöglichen es Internetnutzern, die Konsequenzen der von ihnen gewählten Aktionen zu verstehen (z. B. Weiterleitung zu einem Kontaktformular nach Klicken auf eine Schaltfläche),
• schnellere Konversionen – aufgrund des einfachen Benutzerpfads wird es einfacher sein, Ihr Ziel zu erreichen.

Es lohnt sich nicht, auf subtile Mikrointeraktionen zu verzichten, wenn sie die Effektivität der Website steigern können. Es gibt viele Arten von Mikroanimationen, sodass jeder leicht solche Lösungen wählen kann, die gut in das Design ihrer Website passen.

Beispiele für Mikrointeraktionen

Mikrointeraktionen sind kein Selbstzweck, daher sollten Sie die Website nicht damit überladen. Es gibt viele interessante Optionen, die implementiert werden können. Sehen Sie sich Beispiele für verschiedene Mikrointeraktionen an, um die passenden Mikroanimationen für Ihre Website auszuwählen.

1. Informationen über das Senden einer E-Mail

Die Bestätigung des Sendens einer E-Mail ist normalerweise eine kurze bildhafte Nachricht (wie eine Animation eines sich schließenden Umschlags). Sie informiert darüber, dass die Nachricht, die mit der Schaltfläche zurückgesendet wurde, beim Empfänger angekommen ist. Eine andere Methode zur Meldung, dass eine E-Mail zugestellt wurde, kann darin bestehen, die Form oder die Farbe des Buttons zu ändern.

Autor: Natanael, Quelle: dribbble.com

Vorteile von Mikrointeraktionen: 

• keine Überladung des Posteingangs mit doppelten E-Mails von Internetnutzern, die sich nicht sicher waren, ob die Nachricht korrekt gesendet wurde,
• bessere Benutzererfahrung.

2. Informationen innerhalb des Buttons

Schaltflächen können auf verschiedene Weise animiert werden – sie können eine andere Farbe annehmen, neuen Text anzeigen, wenn der Cursor darüber schwebt, den Standort ändern oder verschwinden. Solche Mikrointeraktionen können die Ausführung einer Aktion kommunizieren oder zusätzliche Hinweise geben, um die Funktionalität der Website zu erleichtern.

Quelle: timroussilhe.com

Vorteile von Mikrointeraktionen: 

• die Website ist intuitiver und erklärt dem Besucher, was zu tun ist, 
• die einfache Interaktion macht den Internetnutzer eher bereit, alle Funktionen der Webseite zu nutzen.

3. Seite-Ladevorgang-Anzeige

Mikrointeraktionen, die das Laden von Seiten informieren, können besonders hilfreich für komplexe Websites mit zahlreichen visuellen Elementen sein. Sie erscheinen in Form von Ladeanimationen, die den Fortschritt der Vorbereitung von Inhalten für den Internetnutzer illustrieren. Dies ist viel besser, als einige Sekunden lang auf eine leere, weiße Seite zu starren. Mikrointeraktion macht den Benutzer ungeduldig. 

Quelle: cubansedge.com

Vorteile von Mikrointeraktionen: 

• Seitenladeinformationen und eine Geduldsbitte können die Ablehnungsrate aufgrund längerer Ladezeiten reduzieren,
• solch gut gestaltete Mikrointeraktionen können eine praktische Dekoration sein und den Internetnutzer selbst neugierig machen und zur Erkundung der Website ermutigen. 

4. Pull-to-refresh-Animation

Heute nutzt praktisch jeder Smartphone-Nutzer die Pull-to-refresh-Option – Sie müssen nur die passende Geste machen, d. h., den Finger über den Bildschirm des mobilen Geräts wischen, um die Anwendung zu aktualisieren. Die einfachste und bekannteste Mikrointeraktion, die anzeigt, dass die App die neuesten Informationen lädt, ist ein sich drehendes Rad. Sie können sich jedoch auch für eine spannendere Lösung entscheiden, die sich beispielsweise auf das Thema der Website bezieht.

Autor: UI8, Quelle: dribbble.com

Vorteile von Mikrointeraktionen:

• mit dieser Art von Mikrointeraktion gewinnen die Benutzer Vertrauen, dass sie aktualisierte Daten betrachten, 
• Animation verbessert die Benutzererfahrung und erhöht den Wunsch, mit der Anwendung zu interagieren.

5. Nachrichten-Tipp-Icon

Instant-Messaging-Fenster (Chatbots und Live-Chats) können neben den von den Beteiligten der Diskussion geschriebenen Nachrichten andere Informationen anzeigen. Dazu gehört eine Mikroanimation, die anzeigt, dass eine der Parteien im Begriff ist, ihre Aussage zu machen. Die einfachste und gebräuchlichste ist ein blinkendes Polygon, das im Chatfenster erscheint, aber auch eine attraktive Variation des Themas kann entworfen werden.

Autor: Jakub Antalik, Quelle: dribbble.com

Vorteile von Mikrointeraktionen:

• den Benutzer auf der Webseite halten, indem sie erwarten lassen, dass jemand aktuell auf ihre Anfrage reagiert,
• Verbesserung der Erfahrung eines Benutzers, der an Standardanimationen gewöhnt ist, wenn Sie eine originelle Mikrointeraktion erstellen. 

6. Inhaltsbewertung

Die Bewertung von Inhalten auf einer Webseite kann mehrere Zwecke erfüllen, wie z. B. die Steigerung der Benutzerbindung oder das Sammeln von Daten, um Artikel basierend auf dem Benutzerinteresse zu empfehlen. Inhalte können bewertet werden, indem Punkte zugewiesen werden oder sogenannte Likes, die von Facebook populär gemacht wurden.

Quelle: Droptica Linkedin

Vorteile von Mikrointeraktionen: 

• Internetnutzer sind bereit, sich an Interaktionen auf Websites zu beteiligen, wenn sie auf Inhalte reagieren können, die sie interessieren, 
• die Benutzererfahrung verbessert sich, da es möglich ist, Feedback zu veröffentlichtem Material zu geben, was dem Benutzer das Gefühl gibt, Kontrolle darüber oder über dessen Anzeige zu haben (z. B. Empfehlung basierend auf der Anzahl der Likes eines bestimmten Textes).

7. Informationen über die abgeschlossene Aktivität

Nachrichten über die abgeschlossene Aktivität können sowohl für den Benutzer als auch für das Unternehmen, das die Daten über die Website erhält, gut dienen. Unternehmer bieten Besuchern oft einen zusätzlichen Wert (wie ein kostenloses E-Book) für das Ausfüllen eines Formulars. Informationen darüber, dass es erfolgreich erledigt wurde und der Wert geliefert wurde, verhindern, dass der Benutzer versucht, das Verfahren zur Angabe der Informationen erneut durchzugehen.

Autor: Gal Shir, Quelle: dribbble.com

Vorteile von Mikrointeraktionen:

• keine doppelten Einträge in der Unternehmensdatenbank aufgrund des unnötigen Wiederholens des Prozesses mehrmals,
• Verbesserung der Benutzererfahrung mit Informationen über den Erfolg der Aktion.

8. Fortschrittsanzeigen

Im Gegensatz zu vielen Mikrointeraktionen, die lediglich visuell eine Website verbessern, hat der Fortschrittsbalken einen erheblichen Einfluss auf die Besucher. Ein Internetnutzer ist eher bereit, eine ergriffene Aktion abzuschließen, wenn er weiß, in welchem Stadium er sich derzeit befindet oder welche Schritte er noch unternehmen muss. Der Fortschrittsbalken kann auf der Ebene des Warenkorbs verwendet werden, wenn dem Benutzer z. B. kostenloser Versand angeboten wird, oder beim Ausfüllen eines Umfrage- oder Kontaktformulars.

Quelle: kinfield.com

Vorteile von Mikrointeraktionen:

• höheren durchschnittlichen Warenkorbwert erzielen, indem angezeigt wird, wie nah Sie an kostenlosem Versand oder einem Rabatt sind,
• die Wahrscheinlichkeit erhöhen, dass der Internetnutzer die durchgeführte Aktivität nicht abbricht.

9. Dekorative Mikrointeraktionen

Es ist jedoch nichts falsch daran, Mikrointeraktionen auf einer Website zu verwenden, die lediglich dekorativ sind – solange sie ein einheitliches Design erstellen und nicht übermäßig verwendet werden. Übertreibende ästhetische Behandlungen können kontraproduktiv sein und die Intuitivität der Webseite verringern. Bemerkenswerte Animationen sind zum Beispiel das Hervorheben von Texten während des Scrollens oder animierte Poster, die sich wie echte Papierstücke bewegen.

Quelle: annajona.is

Vorteile von Mikrointeraktionen:

• Verbesserung der Benutzererfahrung,
• zusätzlichen Unterhaltungswert für Internetnutzer und ermutigen, den Link zur Website zu teilen.

Wie erstellt man Mikrointeraktionen auf seiner Website?

Beim Entwerfen von Mikrointeraktionen sollten Sie nicht vergessen, dass sie stilistisch und im Design mit dem Rest der Website übereinstimmen müssen. Andernfalls können sie die Wahrnehmung stören und schlechtere Ergebnisse in Bezug auf Engagement, Nutzerdatenakquise oder Verkäufe bewirken. Bei der Erstellung einer interaktiven Website empfiehlt es sich, bereits auf der Seite vorhandene Elemente zu verwenden, anstatt spezielle Schaltflächen nur zur Hinzufügung von Animationen zu erstellen.

Nachdem Sie das Design der Website analysiert und entschieden haben, wo die Mikroanimationen platziert werden können, ist es wichtig, sorgfältig darüber nachzudenken, wie die Mikrointeraktionen funktionieren sollen. Feedback sollte sofort erscheinen, nachdem der Benutzer eine Aktion ausgeführt hat. Sie sollten auch in Betracht ziehen, ob die Mikrointeraktionen im Laufe der Zeit für die Benutzer lästig werden können. Animationen sollen helfen oder die Website verbessern, nicht die Besucher von den wichtigsten Funktionen ablenken.

Mikrointeraktionen sollten auch die Webseite nicht überlasten. Dies könnte zu einer Verringerung der Ladegeschwindigkeit führen und sich auf die Suchmaschinenplatzierung auswirken. Mit SEO im Hinterkopf sollten Sie auch sicherstellen, dass einzelne Animationen unabhängig vom Browser, in dem die Webseite geöffnet wird und unabhängig vom Gerät, gut funktionieren.

Mikrointeraktionen Beispiele – Zusammenfassung

Mikrointeraktionen können die Benutzererfahrung erheblich verbessern, aber auch die Effizienz der Website (die Fähigkeit, das gewählte Geschäftsziel zu erreichen). Sie sollten jedoch eher einer bestimmten Funktion dienen (Benutzer zur Aktion ermutigen und verhindern, dass sie die Website vorzeitig verlassen) als ein Selbstzweck sein. Dies bedeutet jedoch nicht, dass sie nicht gleichzeitig dekorativ sein können. Im Gegenteil, sie sollten ästhetisch ansprechend sein. Bei Droptica können wir Ihr digitales Produkt gestalten, sodass es die Benutzer so weit wie möglich anzieht und seine Ziele erreicht.