UI/UX-Animationen in Webanwendungen
Hendrik Pawlowski
Bitte tragen Sie Angaben zu den Bildrechten in den Stammdaten ein.
Bitte tragen Sie Angaben zu den Bildrechten in den Stammdaten ein.
Webentwicklung ist mit der Veröffentlichung der ersten Webseite im Jahre 1991 ein vergleichsweiser junger Teilbereich der Informatik, der sich ständig verändert und weiterentwickelt. Im Jahre 2016 hat sich die Anzahl aller Webseiten, von 900 Millionen auf 1,7 Milliarden, fast verdoppelt. Durch die zunehmende Anzahl an Webseiten und deren NutzerInnen steigen ebenfalls die Anforderungen an gutes UI- und UX-Design. Animationen sind nicht nur dazu in der Lage die Usability eines Systems zu verbessern, sondern stellen zudem noch ein Alleinstellungsmerkmal dar, indem sie NutzerInnen die Persönlichkeit einer Marke vermitteln. Im Unterschied zu statischen Elementen, wie Typographie oder Layout, besitzen Animationen den zusätzlichen Faktor Zeit. Dadurch steigt zwar die Komplexität des Designprozesses, aber auch die Möglichkeiten einem Design Ausdruck zu verleihen. Dieses Praxisprojekt befasst sich mit dem Thema UI/UX-Animationen im Kontext von Webanwendungen.
Leitfaden dieses Praxisprojekts ist die Frage, wie sich UI/UX-Animationen für eine Webseite konzipieren lassen und welche Wirkung diese auf NutzerInnen haben können. Um diese Frage zu beantworten wird gezeigt, welche unterschiedlichen Effekte eine Animation oder Bewegung auf die User Experience haben kann und welche Prinzipien und Gestaltungsregeln beachtet werden sollten, damit diese Effekte auch erreicht werden können. Animationen sind nicht nur Dekoration, sondern essenziell für eine erfolgreiche Interaktion, die NutzInnen bei der Bedienung eines Systems Freude bereit. Durch Feedback beispielsweise wird NutzerInnen die Haptik eines User Interface vermittelt und lässt es natürlicher und intuitiver wirken. Des Weiteren sind Animationen dazu in der Lage räumliche Beziehungen zu erklären, Aufmerksamkeit zu lenken oder auch Emotionen und Geschichten zu vermitteln. In diesem Praxisprojekt wird der Prozess beleuchtet, wie Animationen in den Designprozess eines Systems inkludiert werden können. Im Zuge dessen wird gezeigt wie der Verlauf von der Idee, über die Evaluation bis hin zu einem high-fidelity Prototypen aussieht. Es wird erklärt wie Momente in einer User Journey identifiziert werden können, die von Animationen profitieren würden. Im Zuge des Praxisprojekts wird beispielhaft ein bereits bestehendes Designkonzept einer Webanwendung mit Animationen erweitert. Ziel dabei ist die Konzeptionierung und Umsetzung von Animationsideen, deren Evaluation und schließlich auch deren Prototyping mithilfe von Adobe XD.