So fügen Sie Ihren Interaktionen einen Hauch von Magie hinzu

Jedes Mal, wenn ein Benutzer etwas mit Ihrem Design macht, wird eine Interaktion erstellt. Einige Interaktionen, wie z. B. Klicks, bleiben vom Benutzer fast unbemerkt. Andere Interaktionen beinhalten jedoch ein gewisses Maß an Magie, das den Benutzer dazu bringt, noch mehr mit dem Design zu spielen.

Es gibt eine feine Linie zwischen einer Interaktion, die den Hauch von Magie hat, und einer, die völlig überwältigend sein kann. Die magischsten Interaktionen sind etwas unerwartet, einfach, erzeugen eine emotionale Reaktion und veranlassen den Benutzer, sie erneut zu verwenden.

Entdecken Sie Envato-Elemente

Interaktionen mit Magie

Magie ist „eine Eigenschaft, die etwas aus dem Alltag entfernt erscheinen lässt, insbesondere auf eine Weise, die Freude bereitet.“

Was eine Interaktion wirklich magisch macht, ist, dass sie vorwegnimmt, was der Benutzer als nächstes tun wird. Das Design bewegt sich fast mit Ihnen… oder vielleicht nur einen Schritt vor Ihnen, um genau das zu tun, was Sie wollen, nur eine Sekunde, bevor Sie überhaupt diese Entscheidung getroffen haben.

Um diese Art von interaktiver Benutzeroberfläche zu entwerfen, müssen Sie Ihre Benutzer besonders gut kennen. Sie müssen ihre Gewohnheiten und Muster erforschen, bevor Sie jemals über die visuellen Elemente oder Interaktionen nachdenken. Und sobald Sie diese Daten haben, können Sie sich überlegen, wie Sie diese Verbindungen herstellen können.

Was macht eine Interaktion magisch? Wie definieren Sie es? Die beste Beschreibung stammt aus einer wissenschaftlichen Arbeit, Magic Interactions with Information for Visual Reasoning :

Einige Beispiele sind:

1. Klicken und Ziehen einer Zeichnung einer Zeichentrickfigur, die dann "intelligent" reagiert, indem sie ihre Pose als direkte Reaktion auf die Eingaben des Benutzers ändert und versteht, wie man sich wie durch Zauberei bewegt.
2. Durchsuchen von Videodaten durch direktes Klicken auf Zeichen im Video, anstatt einen Schieberegler zu verwenden.
3. Stoßen von Mobilgeräten zum Übertragen von Dateien; und
4. Auswählen von 3D-Punktwolken durch einfaches Zeichnen eines 2D-Lassos.

Alle diese Interaktionen haben "die Kraft, den Verlauf der Ereignisse scheinbar durch den Einsatz mysteriöser oder übernatürlicher Kräfte zu beeinflussen" und "eine Eigenschaft, die etwas aus dem Alltag entfernt erscheinen lässt, insbesondere auf eine Weise, die Freude bereitet" - zwei Eigenschaften, die direkt aus dem Definition des Wortes Magie.

Intelligente Animation

Animationen sind überall. Es scheint, als ob in fast jede Website etwas Bewegendes eingebettet ist, egal ob es sich um einen Videoclip, einen Hover-Effekt oder einen Ladedivot handelt. Diese Bewegung macht Sinn. Die Bewegung fällt auf natürliche Weise ins Auge und bietet einen Moment des Eingriffs, der auch als Ablenkung dienen kann, während die Site vollständig geladen wird oder im Hintergrund arbeitet.

Eine Art intelligenter Interaktion kann ein bewegtes Foto oder ein Cinemagraph sein. Diese Technik mischt Stand- und Live-Action mit subtilen Bewegungen oder Bewegungen auf eine Weise, die Benutzer dazu bringt, tiefer in das Design zu schauen. (Weitere Informationen zum Trend finden Sie in unserem Beitrag zu lebendigen Fotos.)

Die intelligentesten Animationen sind mehr als einfache Bewegungen - der Benutzer möchte etwas tun und stellt fest, dass es tatsächlich funktioniert. Diese Art der Interaktion tritt häufig im E-Commerce auf, wo Benutzer die Erfahrung machen möchten, ein Produkt aus jedem Blickwinkel zu sehen oder zu „halten“. Qantas Airlines (oben) macht dasselbe mit einem Website-Design, mit dem Benutzer in ihre Flugzeuge sehen und Sitzoptionen und mehr anzeigen können. (Klicken Sie sich auf dieser Website um, Sie werden erstaunt sein über all das, was Sie "sehen" können, und es fühlt sich sehr real an.)

Direkte Klickbarkeit

Zu oft landen Sie auf einer Website und die Elemente, auf die Sie klicken, tun nichts. Mit einer direkteren Klickbarkeit sind mehr Elemente Objekte, die Sie zu neuen Elementen usw. führen, um ein Netz von Klicks, Links und Pfaden zu erstellen, die der Benutzer verwenden kann. Der Fluss hat eine nahtlose Qualität, die diese Klickinteraktionen wünschenswert macht.

Es gibt noch nicht genug von diesen Interaktionen, aber wenn Sie sie finden, machen sie viel Spaß. Die Website für den Film Sing ist ein gutes Beispiel. (Sie müssen sich umsehen.) Jedes Element ist so gestaltet, dass sich die Website wie eine interaktive Erweiterung des Films anfühlt. Sie können auf so ziemlich alles klicken und etwas wird passieren. Kombiniere das mit dem Cartoon-Aspekt und es fühlt sich wirklich magisch an.

Unebenheiten und Haptik

Während die Akademiker die Magie der „Beule“ liebten, lieben mehr Benutzer die Magie der Haptik. Es kann eine einfache Interaktion mit Ihrer Uhr ermöglichen - ich verpasse nie einen Anruf -, um ein Spiel zu spielen, das sich dank Bewegung intuitiver anfühlt. Unebenheiten können je nach Gerätetyp real sein oder wahrgenommen werden, wie im Konterball-Spiel.

In vielen dieser Fälle verwendet das Desktop-Webdesign Bewegungen, die Benutzer wahrnehmen, aber auf Telefonen, Uhren oder VR-Geräten gibt es ein haptisches Element.

Webdesign, das bis jetzt praktisch virtuell war, wird durch berührungsbasierte Interaktionen lebendig. Erwarten Sie mehr Schnittstellen, die Sie berühren, und die Rückkopplungsschleife wird mit einer physischen Antwort des Geräts geschlossen.

Dimensionsperspektive

Die Linien zwischen den Dimensionen beginnen zu verschwimmen. Während Bildschirme eine zweidimensionale Landschaft sind, schaffen mehr Designs dreidimensionale Welten. Benutzer agieren jedoch immer noch mit 2D-Bewegungen. Es ist ein seltsames und fast umwerfendes Konzept.

Aber dann intakt mit der Website auf diese Weise.

Du wirst die Magie sehen.

Campo Alle Comete oben erzählt eine Geschichte, die im Wesentlichen magisch ist, aber auch Interaktivität. Ziehen Sie die Maus in geraden Linien über den Bildschirm, um zu sehen, wie sich die Welt verändert und bewegt. Und es scheint keine Regeln zu geben. Die Bewegung erfolgt in der von Ihnen gewählten Richtung und Geschwindigkeit. Der beste Teil dieses Märchenerlebnisses? Sie werden wahrscheinlich einige Minuten lang klicken und spielen, bevor Sie überhaupt bemerken, was die Website zu präsentieren versucht. (Es ist für Wein.)

Fazit

Was macht eine Interaktion magisch? Es muss vorausschauend sein und genau das tun, was der Benutzer möchte, so wie es der Benutzer möchte. Es sollte interessant und nur ein bisschen anders sein. Und es muss einfach genug sein, dass es keine Verwirrung gibt.

Schließlich geschieht die wahre Magie, wenn der Benutzer mit einem Lächeln oder einem Gefühl der Freude oder Zufriedenheit darauf reagiert. Magie ist eine menschliche Bindung, ohne das Gefühl der Benutzer, es ist nur ein weiterer Designtrick.