Wie kann man Motion Design verwenden, um das App-Erlebnis interessant zu gestalten?

Noch vor wenigen Jahren wurde jede Form von Bewegung und Animation mit der Definition einer schlechten Website-UI in Verbindung gebracht. Erinnern Sie sich an die Alterswerbungs-Websites, die Angebote in runden Bällen zeigten, die von einer Ecke des Bildschirms zur anderen abprallten? Der Fall der Bewegung im Webdesign war ein trauriger Fall.

Aber seit dem Aufkommen mobiler Apps hat sich das Szenario so stark verändert, dass UI-Motion-Design mittlerweile zu einem beliebten Designtrend geworden ist.

Bei einer modernen Benutzeroberfläche geht es nicht mehr um statische Elemente. Mit UI Motion Design schließen Marken nun die Lücke zwischen Software und menschlichem Urbedürfnis nach Abwechslung und Verbindung.

„Das intuitivste und angenehmste Element von Web- und Mobilanwendungsdiensten ist das, das Motion Design beinhaltet.“

Motion Design für Apps, das in verschiedenen Phasen der mobilen App-Reise integriert ist, kann die Benutzer nicht nur über Ihre App-Bewegungen in Ohnmacht fallen lassen, sondern auch die App-Sitzungszeit verlängern. Sie sind mittlerweile ein Symbol für Spaß, Innovationskraft und ein sicheres Medium, um Benutzer mit den Anwendungen zu binden.

Warum Motion Design für Apps verwenden?

Es gibt eine Reihe von Möglichkeiten, wie das Bewegungsdesign von Apps die gesamten mobilen Interaktionen zu einem absolut interessanten Erlebnis gemacht hat. Mal sehen, wie.

Langsame App-Ladevorgänge sind jetzt angenehm

Langsam ladende Apps sind so häufig wie Tage und Nächte, da sie die ganze Zeit passieren. Dahinter können eine Reihe von Problemen stecken, wie z. B. ein schwaches Netzwerk von der Benutzerfront, ein technisches Problem im Backend oder zu viele Anfragen, die gleichzeitig auf dem Server gestellt werden. Aber unabhängig vom Grund ist die langsame Ladezeit der Hauptgrund, der die Benutzer von der App abhält.

Nun, dies kann vollständig verhindert werden, indem Animationen im App-UI-Design verwendet werden, was einer der Trends für mobile Apps des Jahres 2018 war . Durch das Hinzufügen von Bewegungselementen in allen Fällen mit geringer Ladezeit können Designer die Benutzer süchtig machen, nur um die Elemente oder die Animation zu sehen, die auf dem Bildschirm gleiten. Nehmen Sie zum Beispiel die Offline-Seite von Google Chrome mit einem Dinosaurierspiel.

Ein Onboarding-Erlebnis für Benutzer

Einer der häufigsten Anwendungsfälle von Motion Design für Apps ist die Onboarding -Phase der mobilen App auf der App-Reise. Die Animation dient der Erklärung und dem Kennenlernen der App und wird von Marken eingebunden, um den Nutzern die Orientierung bei den ersten Durchläufen zu erleichtern.

Prägen Sie die App mit Mental Map in die Köpfe der Benutzer ein

Um das Onboarding-Erlebnis auf die nächste Stufe zu heben, helfen mobile UI-Designs den Benutzern, eine mentale Landkarte zu erstellen, die dem App-Fluss im Kopf entspricht. Haben Sie jemals bemerkt, dass Sie die obere Google Mail-Leiste nach unten gezogen haben, um Ihr Postfach zu aktualisieren? Wir bezweifeln es. Der Grund dafür ist, dass es sich wie ein Augenzwinkern in uns eingeprägt hat, sodass wir nicht mehr lange überlegen müssen, es geschieht automatisch.

Benutzer wissen lassen, was falsch und was richtig ist

Bewegungselemente können eine der wirkungsvollsten Methoden sein, um die Benutzer wissen zu lassen, dass sie auf ein Problem gestoßen sind oder dass sie eine Ebene erfolgreich überquert haben. Beim Entwerfen, um einen Fehler hervorzuheben, ist es wichtig, die Benutzer genau darauf hinzuweisen, was sie falsch machen.

Falsches Passwort schütteln ist die einzige Animation, die es perfekt erreicht. So wie Sie nur mit Ihrer Bewegung zeigen, was Benutzer falsch machen, sollte die Feedback-Bewegung auch die erfolgreichen Ereignisse zeigen. Ein einfaches Postfach-Popup mit einer Häkchenanimation würde den Benutzern zeigen, dass ihre E-Mail gesendet wurde.

Am Ende sollten sich die Benutzer niemals fragen, was sie falsch machen oder ob sie etwas erfolgreich tun konnten.

Nachdem Sie nun gesehen haben, wie Bewegungselemente die App-Reise unterhaltsamer und einprägsamer machen, wollen wir uns nun die Designprinzipien der App-Benutzeroberfläche ansehen, die Sie anwenden sollten, um zu verhindern, dass Ihre Bewegungselemente auf die Seite von Klebrigkeit und Nutzlosigkeit übergehen.

Die artikulierten Prinzipien von Walt Disney, die Sie in Ihrer mobilen App verkörpern sollten

Jedes App-Entwicklungsunternehmen, das mit Bewegungselementen gearbeitet hat, weiß, dass die Grenze zwischen Innovation und Übertreibung sehr schmal ist und dort, wo sie verschwimmen, das Problem beginnt. Benutzer werden desinteressiert und Apps werden von nützlich zu schlicht verwirrend.

Um zu verhindern, dass Ihre Bewegungszeichen und Bewegungen ein ähnliches Schicksal erleiden, können Sie diesen Inspirationen für das Interaktionsdesign folgen. Diese Prinzipien wurden erstmals von Walt Disney artikuliert, sind aber immer noch in der Lage, ein unvergessliches, unterhaltsames Erlebnis zu bieten, genau wie Mickey Mouse.

1. Bewegungsbahn

Das in der Branche vorherrschende Designprinzip folgt der Regel, dass animierte Formen hauptsächlich einer geraden Bewegungsbahn folgen sollten. Aber wir alle wissen es besser. Sie können nicht wirklich einen äußerlichen Web- und Mobile-Application-Design-Service anbieten, der auf einem Bein in alten Traditionen steht.
Damit sich die Benutzer in Ihre Bewegungselemente verlieben, müssen Sie neue Bewegungsbahnen wie Kurven, Vertikale und sogar Wellen hinzufügen und den Menschen diese Dinge dann visuell zeigen.

2. Der Zeitpunkt, zu dem der Antrag erscheint

Jede Bewegungsaufforderung, die aus heiterem Himmel auf dem Bildschirm des Benutzers erscheint, ohne dass eine Aktion dazu motiviert ist, sollte vermieden werden. Wenn Sie Bewegung in Ihr App-UI-Design integrieren, tun Sie dies zu einem Zeitpunkt, an dem Sie danach fragen. Es gibt Zeiten, in denen es sinnvoll ist, eine Bewegung hinzuzufügen, z. B. wenn Benutzer das falsche Passwort eingeben, aber ein animiertes Häkchen, das anzeigt, dass sie die richtigen Anmeldeinformationen eingegeben haben, ignoriert werden kann.

Bevor Sie also mit ihnen über Bord gehen, sollten Sie wissen, in welchem ​​​​Stadium sie tatsächlich benötigt werden.

3. Konzentrieren Sie sich auf den Fokus der Animation

Wenn in Ihrer App in Bezug auf Inhalt, Designelemente, Bilder oder Videos viel auf dem Bildschirm passiert, verwenden Sie ein Bewegungselement, das einen getönten, blinkenden Hintergrund hat oder ein- und ausgeblendet wird, damit die Benutzer wissen, was als Nächstes zu tun ist. Alle Ihre unbeweglichen Bewegungsfunktionen verlieren ihren Wert, wenn Sie ihre Anwesenheit nicht auf dem App-Bildschirm anzeigen.

4. Animationsgeschwindigkeit

Angenommen, Sie würden eine mobile App für normale Menschen und nicht für Flash erstellen, sollten sich Ihre Bewegungselemente mit der Geschwindigkeit eines Federgleitens bewegen. Geben Sie den Benutzern Zeit, ihre Augen an die Bewegung anzupassen, anstatt es ihnen zu schnell zu machen.

Ein Profi-Tipp: Fügen Sie Ihrer Bewegung Rhythmus hinzu. Das Hinzufügen von Bewegung zu Bewegung scheint zwar eine unsinnige Sache zu sein, aber wissen Sie, dass Sie dadurch dem gesamten App-Resonanzspiel direkt von der unterbewussten Ebene der Benutzer einen Schritt voraus sind.

5. Werden Sie ein On-the-Face-Motion-Piece

Diese Bewegungsarten werden hauptsächlich in Flashcard-Quiz-basierten und E-Commerce-Apps verwendet und machen den nächsten Schritt für die Benutzer zu einem Kinderspiel. Indem Sie sich zu offensichtlich bewegen, wie im Falle eines Rabatt-Countdowns oder des Drop-of-Location-Pins im Falle von Uber, können Sie die Benutzer genau dorthin führen, wo Sie sein möchten, und gleichzeitig ein einprägsames Markenimage für sich selbst schaffen.

Wie werden Animation und Bewegung in mobilen Apps verwendet?

Wie wir bereits gesagt haben, gibt es einen schmalen Grat zwischen es zu tun und es zu übertreiben. Es gibt Orte, an denen Sie denken, dass Sie Animationen verwenden können, aber in Wirklichkeit können Sie sie einfach vermeiden. Es gibt einige Möglichkeiten, wie Sie Bewegungsdesign verwenden können, das das beste UI-Design für Apps ergibt. Werfen wir einen Blick auf sie:

Gamifizierung

Das Hinzufügen von Emojis und animierten Maskottchen kann Wunder für Ihre App bewirken. Diese Elemente machen die App süchtig und für alle sympathisch. Verschiedene Messenger haben animierte Stimmungsaufkleber, die der App einen Vorteil gegenüber allen anderen einfachen Messaging-Apps verleihen.

Fortschrittsanimation

Das Warten darauf, dass etwas geladen wird, ohne den Fortschritt zu kennen, testet die Geduld eines Benutzers. Aus diesem Grund haben Apps Fortschrittsanimationen, die zeigen, wie viel Fortschritt beim Laden bestimmter Funktionen gemacht wurde. Die Fortschrittsanimation ist eine der beliebtesten Funktionen des Bewegungsdesigns für Apps.

Animierte Benachrichtigungen

Benachrichtigungen sind normalerweise ziemlich langweilig, aber wenn die richtige Animation verwendet wird, verbessert dies die allgemeine Benutzererfahrung. Dadurch wird auch sichergestellt, dass Benutzer sich an alle wichtigen Benachrichtigungen erinnern, die sie erhalten.

Ladeanimation

Ladeanimationen sind eine der häufigsten Arten von Animationen, die für Interaktionen mit der App-Benutzeroberfläche verwendet werden. Diese Art von Animation informiert die Benutzer darüber, dass der Ladevorgang aktiv ist und die App gut läuft. Diese Animation ist eine Unterart der Fortschrittsanimation.

Übergangsanimation

Übergangsanimationen verleihen der App ein edles Aussehen. Es vermittelt auch eine positive Benutzererfahrung. Indem Sie den Übergang zulassen, geben Sie der App mehr Leben, wenn Sie von einer Seite zur anderen wechseln.

Marketing-Animation

Marketing-Animation ist großartig für Ihre Marke. Animationen, die in Logos verwendet werden, sind eine großartige Möglichkeit, die Aufmerksamkeit der Benutzer zu erregen. Dadurch entsteht auch ein mentales Bild der Marke im Kopf der Nutzer.

Scroll-Animation

Scroll-Animation ist eine weitere berühmte Art von Animation, die in Apps hinzugefügt wird, und gilt als eines der besten UI-Designs für Apps. Es macht die App nicht nur schön, sondern verleiht ihr auch ein elegantes Aussehen. Eine ordnungsgemäße Scroll-Animation erfordert jedoch eine ordnungsgemäße Codierung, da die App sonst einfrieren oder langsamer werden kann.

Aufmerksamkeit auf sich ziehen

Aufmerksamkeits-Animationen werden normalerweise verwendet, wenn die Aufmerksamkeit der Benutzer auf bestimmte Bereiche gelenkt werden muss. Angenommen, Sie bestellen über eine Online-App zum Bestellen von Lebensmitteln und sobald Sie Artikel hinzufügen, ändert sich der Preis mit einer bestimmten Art von Animation. Dies würde Ihre Aufmerksamkeit auf die Zahlen lenken, auf denen der Fokus liegen sollte.

In dem Artikel haben wir besprochen, inwiefern Bewegungselemente das Hauptunterscheidungsmerkmal zwischen einer langweiligen und einer innovativen App sind, die richtigen Phasen für deren Integration und sogar die Designprinzipien, die befolgt werden sollten. Als bestes Designunternehmen für mobile Apps folgen wir einem einfachen Designprozess für mobile Apps , um die bestmöglichen Ergebnisse zu erzielen. Auch wenn die Schritte einfach sind, ist die Arbeit detailliert. Wenn Sie Fragen zu Bewegungsdesigns haben oder Inspiration für Interaktionsdesign benötigen, kontaktieren Sie uns unter Appinventiv .