Grundlegendes zu Mikrointeraktionen im Mobile App Design

Usability ist eine der Schlüsselkomponenten von mobiles UI-Design. Gute Benutzerfreundlichkeit beinhaltet oft Mikrointeraktionen welche sind kleine Antworten und Verhalten von einer Schnittstelle Diktieren, wie die Benutzeroberfläche verwendet werden soll. Diese Mikrointeraktionen definieren Verhalten, fördern die Einbindung und helfen den Benutzern zu visualisieren, wie eine Schnittstelle funktionieren sollte.

Digitale Schnittstellen sind die Zwischenhändler zwischen den Benutzern und ihre gewünschten Ziele. Interface-Designer erstellen Erlebnisse, die Benutzern helfen bestimmte Aufgaben ausführen. Beispielsweise verfügt eine ToDo-Listen-App über eine Benutzeroberfläche, mit der Benutzer ihre Aufgaben organisieren können. Genau wie eine Facebook-App bietet der Benutzer eine Schnittstelle für die Interaktion mit seinem Facebook-Konto.

In diesem Leitfaden werde ich näher darauf eingehen Mikrointeraktionen für mobile Apps. Kleine Interaktionen mögen trivial erscheinen, aber sie können eine haben immense Wirkung auf die Qualität der Benutzererfahrung. Bei korrekter Durchführung fühlen sich Mikrointeraktionen als ein echter Teil der übergeordneten mobilen Benutzererfahrung an.

Die Kraft der Mikrointeraktionen

In den meisten Fällen besteht das Ziel einer Mikrointeraktion darin Rückmeldung geben basierend auf der Aktion des Benutzers. Dies kann Benutzern helfen visualisieren, wie sich die Benutzeroberfläche bewegt oder verhält, Auch wenn es rein digital auf einem Flachbildschirm ist.

Mikrointeraktionen haben Macht, weil sie Erstelle eine illusorische Erfahrung. Ein / Aus-Schieberegler bewegen sich nicht wirklich wie physische Schalter, aber sie scheinen sich durch Animationen auf diese Weise zu bewegen.

Ich habe in diesem Beitrag ein unglaubliches Zitat gefunden, in dem der immense Wert von Mikrointeraktionen für mobile Apps diskutiert wird:

“Die besten Produkte machen zwei Dinge gut: Funktionen und Details. Funktionen sind es, die Menschen an Ihr Produkt ziehen. Details halten sie dort. Und Details sind es, die unsere App von unseren Mitbewerbern abheben.”

Das kleine Details mag vom Entwicklungsstandpunkt aus unbedeutend erscheinen, vom Standpunkt der Benutzererfahrung aus jedoch wirklich den Unterschied machen zwischen einer OK-App-Benutzeroberfläche und einer außergewöhnlichen App-Benutzeroberfläche.

Große Mikrointeraktionen machen den Benutzer fühle mich belohnt für eine Aktion. Diese Aktionen können sein wiederholt und tief im Verhalten des Benutzers verankert. Sie können lernen, eine Anwendung basierend auf diesen kleineren Mikrointeraktionen zu verwenden. Wenn der Benutzer ein Verhalten ausführt, signalisieren diese kleinen Interaktionen "Ja, Sie können mit mir interagieren!"

Sehen Sie sich die Beispiele in den Materialdesign-Spezifikationen von Google an. Die Dokumentation enthält eigentlich einen ganzen Abschnitt, der sich der Materialbewegung widmet. Räumliche Beziehung sind ein großer Teil dieser Gleichung, aber Bewegung kann mehr als nur räumliche Beziehungen bestimmen.

Hier sind Die häufigsten Anwendungen von Animation und Bewegung im mobilen UI / UX-Design:

• Benutzer zwischen verschiedenen Seiten führen
• Benutzer durch die Benutzeroberfläche führen, um bestimmte Verhaltensweisen zu vermitteln
• Vorschläge für Aktionen / Verhaltensweisen, die auf einer bestimmten Seite ausgeführt werden können

Mobile Apps haben viel weniger Platz auf dem Bildschirm als Websites. Dies kann zu einigen Schwierigkeiten führen, die den Benutzern die Verwendung einer App beibringen. Es kann jedoch überraschend einfach sein, wenn Sie wissen, wie Sie Mikrointeraktionen richtig implementieren.

Wie Microinteraktionen funktionieren

Eine einzelne Mikrointeraktion wird ausgelöst, wenn der Benutzer einen Teil einer Schnittstelle verwendet. Die meisten Mikrointeraktionen sind animierte Antworten auf die Geste des Benutzers. Eine Wischbewegung reagiert also anders als ein Antippen oder Schnippen.

Blink UX hat einen großartigen Beitrag zur Erörterung der kleineren Details von Mikrointeraktionen geliefert. Diese kleinen Animationen sollten folgen vorhersehbarer Prozess dass der Benutzer lernen kann für jede Interaktion in der Anwendung.

Mikrointeraktionen führen Benutzer durch eine Schnittstelle durch Antworten auf Verhaltensweisen anbieten. Sobald der Benutzer weiß, dass sich ein Ein / Aus-Schieberegler bewegen kann, ist er interaktiv. Basierend auf der Antwort wissen sie auch, ob eine Einstellung aktiviert oder deaktiviert war. Wenn eine Schaltfläche so aussieht, kann auf den Benutzer geklickt werden instinktiv weiß es Sie können damit interagieren.

Laut UXPin kann jede grundlegende Mikrointeraktion in vier Schritte unterteilt werden, aber ich habe den Vorgang in zusammengefasst drei schritte.

1. Aktion - das Benutzer macht etwas wie flick, swipe, tippen und halten oder eine andere Interaktion.
2. Reaktion - das Schnittstelle antwortet basierend darauf, was passieren muss. Das Wischen eines Bildschirms wird möglicherweise zurück in den Browserverlauf verschoben oder durch Antippen eines EIN / AUS-Schiebereglers wird eine Einstellung möglicherweise deaktiviert.
3. Feedback - das ist was der Benutzer sieht tatsächlich als Ergebnis der Interaktion. Wenn der Benutzer in einem mobilen Browser zurückkehrt, wird die vorherige Seite möglicherweise nach oben verschoben und "oben" auf dem Bildschirm angezeigt. Der Ein / Aus-Schieberegler gleitet möglicherweise sanft oder wird größer, wenn Druck auf den Bildschirm ausgeübt wird.

Diese sehr kleinen Aktionen können ohne Animation ausgeführt werden. Große Mikrointeraktionen bieten jedoch a realistisches Gefühl auf die flache digitale Schnittstelle, die meist in Form von realistische Animationseffekte. Diese hauchen der Benutzeroberfläche Leben ein und fördern die Benutzerinteraktion.

Suchen Sie nach den Details

Wenn Sie sich die kleineren Teile eines Designs ansehen, werden Sie verstehen, wie eine App auf ein bestimmtes Verhalten reagieren soll.

Zum Aktualisieren ziehen ist ein gutes Beispiel für eine mittlerweile beliebte Mikrointeraktion. Es war kein fester Bestandteil von iOS, als es zum ersten Mal auf den Markt kam, aber viele Apps nahmen diese Idee auf und begannen sich damit zu entwickeln. Jetzt zum Aktualisieren ist ein bekanntes Verhalten, das die meisten Benutzer beim Durchsuchen einer Feed-Benutzeroberfläche nur kennen. Dasselbe kann über mobile Hamburger-Menüs gesagt werden, die stark an Beliebtheit gewonnen haben.

Machen Sie jede Mikrointeraktion realistisch und einfach. Übertreiben Sie keine Animationen, weil sie es können langweilig werden wenn sie zu detailliert sind und häufig verwendet werden. Der Benutzer möchte nicht, dass bei jedem Tippen auf ein Menüsymbol Funken erscheinen. Balance schaffen mit echtem Wert, der kommuniziert wie das Interface funktionieren soll ohne über Bord zu gehen.

Einige Beispiele betrachten

Ich denke, der beste Weg, etwas zu lernen, ist, es zu tun, und der zweitbeste Weg ist, die Arbeit anderer zu studieren. Ich habe eine kleine Handvoll gesammelt UI / UX-Mikrointeraktionsanimationen von talentierten Dribbble-Benutzern, um Ihnen zu zeigen, wie diese in einem echten Modell aussehen.

Jede Anwendung wird anders sein und unterschiedliche Anforderungen haben, je nachdem, was die App macht. Am Ende wollen die meisten Benutzer dasselbe: eine App intuitiv und liefert eine qualitativ hochwertige Benutzererfahrung mit Mikrointeraktionen relativ zum Benutzerverhalten.

1. Animierte Event-Benutzeroberfläche

Das erste Beispiel ist eine nette Kartenanimationsfunktion, die von Ivan Martynenko erstellt wurde. Du wirst es merken eine Handvoll Mikrointeraktionen in diesem Design, insbesondere Kartenwischen und Durchlaufen von Details.

Wenn Sie auf die Karte tippen, wird sie größer. Wenn Sie auf die Schaltfläche Abonnieren tippen, wird das Profilfoto des Benutzers in die Liste der Abonnenten verschoben. Alles fühlt sich sehr intuitiv und ganz natürlich an.

2. Interaktiver Trainingsbildschirm

Diese kreative mobile Übungsanimation stammt vom Designer Vitaly Rubtsov. Es zeigt einen Benutzer, der sein Training für einen Satz Kniebeugen speichert.

Beachten Sie, dass jede Animation dasselbe hat elastischer Sprungeffekt Wenn sich die Menüs öffnen und zuklappen. Dies gilt auch, wenn die Aktivität als "Fertig" markiert ist.. Konsistenz ist der Schlüssel bei Mikrointeraktionen, weil sie sich alle anfühlen sollten an die gleiche Schnittstelle angeschlossen.

3. Suchen Sie nach App-Mikrointeraktionen

Kurz, süß und auf den Punkt. Ich denke, das beschreibt diese von Lukas Horak entworfenen Mikrointeraktionen der Such-App am besten. Jede Animation ist schnell, aber immer noch auffällig.

So sollten Sie Mikrointeraktionen entwerfen Überkomplexität vermeiden. Wenn das Interface ohne die Animation schneller geladen würde, sollten Sie es dann hinzufügen? Schnelle Animationen Halten Sie den Benutzer durch, ohne die Erfahrung zu beeinträchtigen.

4. Fitnessziel-Mikrointeraktion

Ich glaube, Jakub Antal?'K hat diesen mit seinem Fitnessziel Mikrointeraktion wirklich aus dem Park geschlagen. Die Bildschirme haben alle das Gefühl von wackeligem Wackelpudding, weil die Formen bewegen sich so fließend.

Aber auch das Interface fühlt sich an solide und brauchbar. Es zeigt sich, dass mit einem Zweck gestaltete Mikrointeraktionen immer noch Spaß und Unterhaltung, aber auch funktional und pragmatisch sein können.

5. Ziehen Sie, um die Animation zu aktualisieren

Hier ist eine meiner absoluten Lieblings-Animationen, die vom Team von Ramotion erstellt werden können. Das nicht nur ahmt eine Flüssigkeit nach mit der Pull-Aktion, aber die Antwortanimation reibungslos verbindet aus einem spritzer flüssigkeit in einen ladekreis.

Diese viel Liebe zum Detail ist es, was die wahre Schönheit in den Mikrointeraktionen der mobilen App zum Ausdruck bringt.

6. Registerkarte Microinteraction

Tabbed Widgets sind für mobile Apps aufgrund der kleineren Bildschirme durchaus üblich. Ich mag diese von John Noussis erzeugte Mikrointeraktion sehr, obwohl ich denke, dass sie bei schnellerer Geschwindigkeit effektiver wäre, aber die Animation selbst ist herrlich und durchdacht.

Der Tab-Ankerpfeil gleitet nach rechts, während sich neuer Inhalt von rechts einfügt. Es gibt die Illusion der Der gesamte Bildschirm bewegt sich physisch auf der rechten Seite. Die Animation ist exquisit, aber da sie so langsam ist, denke ich, werden sich die meisten Benutzer nach ein paar Tagen ärgern.

7. Animation vorinstallieren

Ich habe nicht viel darüber gesagt Ladestangen in diesem Beitrag, aber sie sind genauso wertvoll für die allgemeine Erfahrung. Die meisten Benutzer möchten nicht auf das Laden der Daten warten, aber sie möchten auf keinen Fall einen leeren Bildschirm anstarren, während sie geladen werden.

Bret Kurtz hat diese erstaunliche Vorlademaske gemacht, die sowohl Spaß macht als auch informativ ist. Der Benutzer kann tatsächlich sein unterhalten diese kleine Animation wiederholen. Sie können auch sein beruhigt dass die Anwendung ist lädt immer noch ihre Daten und ist nicht abgestürzt.

Einpacken

Alle diese Beispiele zeigen den Wert von Mikrointeraktionen auf brillante Weise. Mobile Apps erhalten durch die Verwendung von Mikrointeraktionen einen viel höheren Wert Berühren Sie die Bildschirme physisch mit ihren Fingern Benutzer tippen nicht auf ihre Desktop-Monitore oder Laptop-Bildschirme, aber jeder tippt auf sein Smartphone, weil es das ist Standardzustand der Interaktivität.

Es ist ein viel mehr persönliche erfahrung, Deshalb kann Mobile App Design so sein differenzierter Prozess. Wenn dies richtig durchgeführt wird, kann die Hinzufügung großer mobiler Mikrointeraktionen eine große Rolle spielen leistungsstarke illusorische Benutzererfahrung aus nichts außer pixel und bewegung.