Gezielte Interaktionen gestalten

Entdecken Sie die wichtigsten Prinzipien des zielgerichteten Interaktionsdesigns, welche Designherausforderungen durch Interaktion gelöst werden können und wie Sie sie in Ihren Prozess integrieren können.

Wenn wir an Interaktionsdesign und Animation in der User Experience denken, können wir es leicht mit den ausgefallenen Dingen verwechseln: dem Schnickschnack oder den zufälligen Flugobjekten, die „einer Website den Wow-Faktor verleihen“. Es mag kurzfristig Freude bereiten, aber für regelmäßige Benutzer kann es bald irritierend werden.

Um dieser Art von Nutzlosigkeit entgegenzuwirken, werfen wir einen Blick auf die Kernprinzipien der Gestaltung sinnvoller Interaktion, wie sie häufige Designherausforderungen lösen und wie Sie sie in Ihre Designsysteme und -prozesse einführen können. Interaktion sollte nicht mehr der letzte Schliff sein, der als „nice to have“ aus dem Rahmen fällt, sondern ein integraler Bestandteil des gesamten Benutzererlebnisses.

Vier Schlüsselprinzipien für ein sinnvolles Interaktionsdesign

1. Vermeiden Sie es, Hindernisse zu schaffen

Stellen Sie sich ein „Hamburger-Menü“ vor, das zwei oder drei Sekunden braucht, um den Vollbildmodus zu animieren. Jedes Mal, wenn ein Benutzer auf der Website navigieren möchte, muss er warten. Das Erstellen längerer Aufgabenzeiten für den Benutzer ist eine garantierte Möglichkeit, ihn bis zur Website oder App eines Mitbewerbers weiterzuleiten.

Es gibt jedoch einige Fälle, in denen eine Verzögerung des Fortschritts einer Interaktion von Vorteil sein kann. Wenn die Interaktion komplex ist, kann eine Verlangsamung dem Benutzer besseren Kontext und Feedback geben. Hier sind einige Beispiele dafür, wann Sie Interaktionen und Animationen verzögern könnten:

• Onboarding neuer Benutzer in eine neue Benutzeroberfläche. Stellen Sie sicher, dass Sie die Hindernisse mit der Skip-Option reduzieren.
• Drag-and-Drop-Schnittstellen, die Ursache und Wirkung anzeigen. Zu schnell und Benutzer fragen sich möglicherweise, wohin diese Datei gegangen ist.
• Hinzufügen eines Produkts zum Warenkorb. Dies sollte kein langes Hindernis für den Checkout darstellen, aber es sollte dem Benutzer genügend Feedback geben, damit er weiß, dass seine Aufgabe erfolgreich war.

In der Regel sollten einfache Interaktionen schnell sein und komplexe Interaktionen sollten gerade so verzögert werden, dass der Benutzer den Kontext versteht.

2. Ordne die Bewegung der Nachricht zu

Wenn Apple entscheiden würde, dass alle ihre Interaktionen auf iOS schnell, scharf, in Ihrem Gesicht und viele verrückte Dinge sein würden, würde es sich anfühlen, als würden Sie ein Apple-Produkt verwenden? Wenn Sie die Alton Towers-App verwenden und langsam verblassende Animationen und eine Fülle von Übergängen im Ken-Burns-Stil sehen würden, würde sie sich wie ein magischer Ort voller Spaß und Aufregung oder wie eine M&S-TV-Werbung anfühlen?

Die Art und Weise, wie eine Interaktion animiert wird, sollte immer den von Ihnen angestrebten Ton repräsentieren, der sich für Ihre Benutzer richtig anfühlt – es macht die Erfahrung immersiver und konsistenter. Wenn es sich um eine Unterhaltungsseite für Kinder handelt, kann es etwas verrückt und grell sein. Wenn es sich um eine High-End-Boutique handelt, dann halten Sie sie langsam, raffiniert und geschmackvoll.

3. Gib ihm einen Zweck

Interaktionsdesign hat so viel Potenzial, die Benutzererfahrung zu verbessern, weshalb es so verlockend ist, es zu überbeanspruchen und zwecklos zu verwenden. Erinnern Sie sich an Flash-Websites?

Scrollen Sie etwas weiter und werfen Sie einen Blick auf die acht Herausforderungen, die Interaktionsdesign lösen kann. Wenn Ihre Interaktionen nicht diesen Mustern folgen, besteht eine gute Chance, dass sie keinen anderen Zweck haben, als die Benutzer zu begeistern.

4. Machen Sie es unsichtbar

Das klingt ziemlich herzzerreißend angesichts der Zeit, die in die Gestaltung der Interaktionen investiert wurde, aber wenn es unbemerkt bleibt, liegt es wahrscheinlich daran, dass sie großartige Arbeit geleistet haben. Wir neigen dazu, der Verwendung einer Technologie oder einer Schnittstelle mehr Aufmerksamkeit zu widmen, wenn sie schief geht oder sich etwas klobig anfühlt. Wenn alles glatt läuft, kann sich der Benutzer auf den Inhalt konzentrieren.

Die Bedeutung des Interaktionsdesigns bei weit verbreiteten Apps und Websites wie Facebook, Pinterest, Twitter und Google-Produkten ist unverständlich. Und doch würden Sie es nie wirklich bemerken, bis Sie jemand darauf hingewiesen hat. Sie machen Design unsichtbar, damit Sie das Erlebnis genießen und eine stärkere emotionale Verbindung zum Produkt, Service oder Inhalt aufbauen können.

Sechs Designherausforderungen, die Interaktionsdesign lösen kann

1. Orientierung & Kontext

Dies ist eine besondere Herausforderung für das mobile Design, wenn der Bildschirmplatz begrenzt ist. Zeigen Sie alles offen und der Benutzer ist kognitiv überlastet. Wir streben danach, wichtige Dinge zu zeigen und weniger kritische Dinge zu verbergen; es verbirgt jedoch einen Teil der Erfahrung. Durch sinnvolle Interaktionen können wir dem Benutzer also visuell beibringen, wo die Dinge leben, sodass er leicht zu merken und intuitiv ist.

Hier sind ein paar Beispiele für das Erstellen von Kontext mithilfe von Interaktion:

• Hintergrundfarbwechsler für Google-Schriften. Die Farben fühlen sich an, als würden sie im Farbeimer-Symbol leben.
• Das Hinzufügen zum Warenkorb und der Checkout-Prozess bei Cotton Bureau. Anstatt Sie zu einer neuen Warenkorbseite zu führen, ist es wie ein Karussell, das rechts von der sichtbaren Seite lebt.

2. Ursache & Wirkung aufzeigen

Ein klassisches Beispiel hierfür ist eine Drag-and-Drop-Oberfläche. Wenn Sie ein Medienobjekt aufheben und in die „Ablegezone“ verschieben, sollte der Benutzer eine Rückmeldung erhalten, dass er es abgeholt und an den richtigen Ort bewegt hat, an dem er das Objekt ablegen kann. Sobald sie es abgelegt haben, sollte es eine Validierung geben, um dem Benutzer mitzuteilen, dass er mit seiner Aufgabe erfolgreich war. Dies kann durch Farbänderungen, positive Bestätigungsnachrichten oder sogar Soundeffekte erfolgen.

3. Feedback geben

Nehmen wir für dieses Beispiel eine Zahlungsschaltfläche. Wie viele schlecht ausgeführte E-Commerce-Gateways haben Sie erlebt, bei denen Sie auf die schöne, glänzende Schaltfläche "Jetzt bezahlen" klicken, nur um dann auf Verwirrung zu stoßen, ob Sie darauf geklickt haben oder nicht, weil sie verarbeitet wird? Es hat nicht gesagt, dass es das tut. Die Interaktion kann also den Status einer Schaltfläche ändern und mit ein wenig Animation dem Benutzer mitteilen, dass „Zahlung verarbeitet wird“ und dem Benutzer dann mitteilen, wenn „Zahlung eingegangen ist“, bevor er zu einer Bestellbestätigungsseite wechselt. . Sie müssen sich nicht mehr zehn Sekunden lang fragen, was passiert, und fragen, ob Sie das Internet kaputt gemacht haben.

4. Wichtige Informationen hervorheben

Wenn Inhalte innerhalb derselben Bildschirmansicht eine höhere Priorität haben, kann die Verwendung von Farbe und Typografie zur Förderung die Konsistenz Ihres Designsystems beeinträchtigen oder bei übermäßiger Verwendung fehl am Platz wirken. Durch Interaktion können wichtige Inhalte hervorgehoben werden, ohne das Layout zu beeinträchtigen.

Denken Sie an Fitness-Apps: Wenn Sie Ihr Dashboard zum ersten Mal laden, möchten Sie die wichtigsten Aktivitäten und Statistiken von heute sehen. Die Verwendung einfacher Animationen kann diesen Inhalt hervorheben, ohne die Menge der auf dem Bildschirm angezeigten Dinge zu verwässern.

5. Schaffen Sie eine Wahrnehmung der Leistung

Geschwindigkeit ist ein heißes Thema und das aus gutem Grund, da sie ein häufiger Faktor im Zusammenhang mit Absprungraten ist. Es wird Fälle geben, in denen Sie die Optimierung der On-Page-Geschwindigkeit voll ausgeschöpft haben und das Laden der Seite noch einige Zeit in Anspruch nimmt. Es gibt Alternativen, dem Benutzer nichts anzuzeigen oder ein Ladesymbol anzuzeigen.

Skeletal Loading kann verwendet werden, um ein vorhersehbares Layout in Wireframe-Form anzuzeigen, sodass der Benutzer vor dem Laden der Seite ungefähr weiß, wo er suchen muss und wie er mit der Benutzeroberfläche interagieren könnte. Psychologisch fühlt es sich an, als ob die Seite schneller geladen wurde, als wenn nichts passiert, aber in Wirklichkeit wird sie gleichzeitig geladen.

Sie können die Ladezeiten auch als Gelegenheit nutzen, um Benutzer darüber zu informieren, was passiert und was bald passieren wird, mit freundlichen Nachrichten, die die Wartezeit verkürzen.

6. Markenpersönlichkeit hinzufügen

Charakterorientierte Marken können stark von der Einführung von Interaktion profitieren, um Persönlichkeit in das Erlebnis zu bringen. Sie können die menschlichen Eigenschaften der Maskottchen nutzen. Auch wenn Ihre Marke nichts Visuelles enthält, können Sie durch Geschwindigkeit und Häufigkeit Persönlichkeit hinzufügen. Denken Sie an Google und seine skurrilen Dot-Preloader oder die Aktivierung von Sprachbefehlen, die auf einfache Weise eine freundliche und unterhaltsame Herangehensweise ermöglichen.

Der Aufbau einer emotionalen Verbindung mit dem Benutzer ist eine großartige Möglichkeit, regelmäßige Besuche zu erzielen. Interaktionsdesign kann dazu führen, dass sich Technologie menschlicher anfühlt – was immer gut anzustreben ist.

Einführung von Interaktion in Ihren Designprozess

Low-Fidelity-Skizzen und -Kompositionen

Interaktionsdesign-Tools

• Keynote: Wenn Sie nach groben und einfachen Mitteln suchen, um Ihre Idee zu vermitteln, ist Keynote der schnelle Gewinn.
• Adobe Animate: Bewahren Sie alles in Adobe auf und lassen Sie sich nahtlos mit anderen Tools kombinieren. Dies ist ideal für illustrative Animationen.
• Tumult Hype: Wenn Sie mit der Sketch-Oberfläche vertraut sind und sich mit Zeitleisten auskennen, sind Sie bei Tumult genau richtig.
• Framer: Dies ist ein speziell entwickeltes Interaktionsdesign-Tool, das über wirklich fortschrittliche Funktionen verfügt, um Ihre Animation an JavaScript anzupassen.
• Principle: Mit einem netten Sketch-Link wird Principle zur Anlaufstelle für Interaktion. Es ist relativ einfach zu erlernen, und was Sie damit erreichen können, ist großartig.
• Atomar: Fügen Sie Daten, Logik und Variablen hinzu, um Ihre Interaktionen so praktisch wie den endgültigen Build zu gestalten. Dies ist für den fortgeschrittenen Designer, der über einige Programmierkenntnisse verfügt.
• Invision Studio: Es ist noch am Anfang, aber Invision Studio hat einige großartige Fähigkeiten und Ähnlichkeiten mit Principle. Die Zeit wird zeigen, ob dies so weit fortgeschritten ist, dass es den Prototyping- und Collaboration-Markt dominiert.

Detaillierte Übergabehinweise

Das Hinterlassen von Entwicklernotizen ist ein Streitpunkt, wenn Sie sich in einer stark kollaborativen Umgebung befinden. Wenn Sie jedoch remote arbeiten, können detaillierte Notizen zu Ihren Ideen und Prototypen mit einer guten Übergabe sicherstellen, dass Ihre Interaktionen in den Build einfließen.

Stellen Sie eine Bibliothek mit Demos und Inspirationen zusammen

Fügen Sie es Ihrem Designsystem hinzu

Wenn Sie ein häufiges Problem mit der Interaktion erfolgreich gelöst (richtig getestet) haben, laden Sie es in Ihr Designsystem oder Ihre Musterbibliothek, um es in ähnlichen Szenarien wiederzuverwenden, ohne Zeit investieren zu müssen, um etwas anderes von Grund auf neu zu tun.

Wenn Sie Hilfe bei Webdesign und User Experience (UX) benötigen, kontaktieren Sie uns noch heute.

Wenn Sie Hilfe bei Ihrer Benutzererfahrung benötigen, zögern Sie nicht, uns zu kontaktieren.