So lassen Sie Bewegung im User Interface so richtig echt wirken: Lesen Sie hier, was gute Animationen und Transitions ausmacht und wie man sie erstellt.
Geht es um Usability und gelungene User Experience, denken die meisten eher ans ganz große Ergebnis – die fertige Website. Dabei ist die Gestaltung kleiner und kleinster Interaktionseinheiten des Interfaces entscheidend für den Erfolg und USP einer digitalen Anwendung. Sie müssen einfühlsam gestaltet sein, man könnte auch sagen: sich auf den User einlassen – niemals umgekehrt.
Um diesen wichtigen User-Experience-Faktor als Qualitätsstandard in ihren Produkten zu verankern, führten Apple und Google längst umfangreiche Styleguides ein, die Licht ins Dickicht der möglichen simulierten Bewegungsabläufe bringen. Diese Pattern Libraries katalogisieren die Animationen und Transitions, für die der US-amerikanische Interaction Designer Dan Saffer den Begriff »Microinteractions« prägte.
Im PAGE eDossier »Microinteractions: Animationen und Transitions« lernen Sie die wichtigsten Fakten aus der noch recht kurzen Geschichte der für eine gelungene User Experience so unverzichtbaren Animationen und Transitions kennen. Inklusive Best Practices für Android und iOS sowie mit CSS3-Coding- und Werkzeug-Tipps für Bibliotheken und Wireframe-Generatoren. Darüber hinaus erklären wir, wie Interface-Designer die klassische Mechanik von Isaac Newton nutzen, um simulierte Bewegung wie aus dem echten Leben wirken zu lassen – verblüffend!
PDF-Download: eDossier: »Microinteractions: Animationen und Transitions«
Die klassischen Gestaltungsprinzipien waren irgendwie immer schon zu statisch …
Dass viele User-Interface-Designer traditionell immer noch auf die etablierten visuellen Designprinzipien Contrast, Repetition, Alignment und Proximity (kurz CRAP) zurückgreifen, ist eigentlich ein Problem, denn in ihnen kommt der Aspekt der Bewegung nicht vor.
Micro UX betrifft stets einen klar abgegrenzten Use Case in Bewegung – Passwort anlegen, Daten synchronisieren, Lautstärke regeln et cetera – und lässt, so sie gelingt, die User Experience eines digitalen Produkts erst so richtig schlüssig und konsistent erscheinen. Längst tauschen Developer und Designer auf speziellen Websites Snippets animierter Webseitendetails aus – mit besonderem Augenmerk auf den Transitions. Dabei handelt es sich um Übergänge von einer Ansicht zur nächsten. Diese Übergänge von einem Interface-Zustand zum darauffolgenden – oft ist es auch eine ganze Reihe von Übergängen – können Nutzererfahrungen entscheidend prägen und dafür sorgen, dass der User genau diesem digitalen Service treu bleibt. Insofern gehört es in jedes Pflichtenheft im Bereich Interaction und Screendesign, dies bereits früh im Website Prototyping und schon bevor man in die iOS- oder Android-Programmierung geht, zu klären.
… Meaningful Transitions sind die Antwort auf die klassische Bewegungsarmut
Johannes Tonollo, Interaction Designer bei Google in London, hatte sich in seiner Bachelorarbeit »Meaningful Transitions – Motion Graphics in the User Interface« des Problems der klassischen »bewegungslosen« Designprinzipien angenommen, ehe er von frog design zu Google wechselte. Im PAGE eDossier »Microinteractions: Animationen und Transitions« stellen wir Ihnen seine Kategorien für Animationen und Transitions anhand von Fallbeispielen vor.
Gelungene intuitive Micro UX ist die Kunst, eine Bewegung echt aussehen zu lassen. Dafür sollte man das Design von Animationen und Transitions möglichst schon während der Prototyping-Phase berücksichtigen. Welche Wireframe Tools und Bibliotheken sich am besten dafür eignen, zeigen wir Ihnen im PAGE eDossier »Microinteractions: Animationen und Transitions«.
PDF-Download: eDossier: »Microinteractions: Animationen und Transitions«
