Wireframes? Bei uns nur noch animiert.

11Wireframes.jpg

Noch bevor der Designer seinen Pinsel schwingt oder die erste Zeile Code geschrieben wird, müssen alle tollen Ideen in ein Konzept überführt werden. Dieses Konzept wird dann so lange diskutiert und optimiert, bis alle Beteiligten zufrieden sind und es in die Umsetzung gehen kann.

Für diesen Prozess sind Wireframes das Mittel der Wahl. Kein Mensch liest gerne seitenlange Lastenhefte und nichts hilft mehr bei der Planung einer App, als sie schon nahezu greifbar vor sich visualisiert zu haben, ohne wochenlange Entwicklung im Vorfeld. Neue Ideen und Ansätze können in Form von Wireframes ohne großen Aufwand ausprobiert, verworfen und beschlossen werden.

Ganz besonders wertvoll werden Wireframes in Kombination mit Animationen. Für uns sind animierte Wireframes in der Konzeptphase einer App schon lange unverzichtbar, da sie zwei essenzielle Aspekte unserer Arbeit unterstreichen.

Präsentation des Konzepts

Wenn wir unseren Kunden die erste Version unseres Konzeptentwurfs präsentieren, haben wir im Vorfeld bereits einige Stunden und Tage Hirnschmalz investiert. Wirft man dem Kunden unkommentiert das Ergebnis vor die Füße, muss man ihn fast zwangsläufig abhängen.

Daher legen wir einen riesigen Wert auf die Herleitung unseres Konzepts. Wir starten mit den Voraussetzungen, Annahmen und der Zielsetzung, bevor wir mit dem sprichwörtlichen weissen Blatt loslegen und die App vor den Augen des Kunden nach und nach zusammenbauen.

Schritt für Schritt erzählen wir eine nachvollziehbare Geschichte, die erklärt, warum welches Elemente an welcher Stelle platziert werden muss. Viele Rückfragen und Diskussionspunkte können somit antizipiert werden. Dadurch spart man allen Beteiligten eine Menge Verwirrung und Zeit und kann sich stattdessen auf die spannenderen Fragen oder auch die feinen Details konzentrieren.

Animationen in Apps

Halte ich zwei statische Wireframes nebeneinander, sagen die mir zwar eine ganze Menge, aber eben nicht alles. Wie sieht beispielsweise der Übergang zwischen den beiden Screens aus? Und was passiert wenn ich auf diesen einen Button da klicke und zwei Sekunden warten muss, bis das Ergebnis angezeigt werden kann?

Animationen innerhalb von Apps sind extrem wichtig. Nicht nur um hier und da einen optischen Wow-Effekt zu erzeugen, sondern vor allem um das Verständnis des Nutzers für die App zu vertiefen.

Wenn ich ein Foto betrachte und es sich dann beim Schließen an die richtige Stelle innerhalb eines riesigen Meers an Bildern animiert, dann hilft mir das zu verstehen, ab wo ich weiterschauen kann. Öffnet sich ein neuer Screen modal von unten, kommuniziert das etwas anderes, als wenn er sich von rechts hereinanimiert. Das alles ist mehr als eine Spielerei, sondern ein integraler Bestandteil der Usability der App.

Dennoch werden derartige Animationen bei der Konzeption und Planung einer App viel zu oft vergessen, da lediglich mit statischen Wireframes gearbeitet wird. Das führt zu einer deutlich schlechteren Nutzererfahrung und Mehraufwänden in der Entwicklung, wenn das Versäumnis nachträglich ausgebügelt werden soll.

Fazit

Uns hilft eine animierte Präsentation ungemein, unsere Ideen und Entscheidungen zu kommunizieren und zu begründen. Und für unsere Kunden wird unser gesamter Entscheidungsprozess sehr viel schneller nachvollziehbar. Außerdem stellen animierte Wireframes sicher, dass die oft sträflich vernachlässigten Animationen innerhalb von Apps nicht vergessen und direkt mitgedacht werden.


Zu diesem Artikel gibt es auch eine Podcastfolge.