Motivation – Toolnutzung vs. Paper Prototyping
Paper Prototyping hat sich als effiziente Methode herausgestellt, um schnell eine Vorstellung von grafischen Oberflächen und der Navigation zwischen ihnen zu entwickeln. Dennoch haben Tools potentielle Vorteile: Die Ergebnisse können weiterbearbeitet und leicht ausgetauscht werden. Und dem Kunden gegenüber kann über das digitale Medium das Verhalten des Prototypen aufgezeigt werden. Gegen Tools spricht oftmals der Einarbeitungsaufwand für die Konzepter und noch stärker gewichtig die Einschränkung auf bestimmte technische Funktionalitäten; die Tools können eben nicht alles. Insbesondere im Bereich des Responsive Designs (RD) haben etablierte Wireframing Tools oftmals keine ausreichende Unterstützung in diesem Bereich angeboten. So auch bei der Betrachtung des Tools Balsamiq, das schon als Standardtool im Konzepterbereich gilt. Wer Responsive Design beauftragt, will aber schon frühzeitig wissen wie sich die Oberfläche “anfühlt”. Wir haben einige Tools beobachtet und geben hier einen kurzen Überblick über deren Möglichkeiten im Responsive Design.
Tool Balsamiq im Hinblick auf Responsive Design
Balsamiq ist ein Wireframing Tool, dass es erlaubt statische Wireframes zu erstellen und miteinander zu verlinken. Damit ist es möglich einen ersten „anfassbaren“ Prototypen aus den Ideen der Konzeptionsphase sichtbar zu machen.
Geht es aber darum, Animationen und Veränderlichkeiten bezüglich der Größe sowie des Umflusses von Elementen aufzuzeigen, kommen wir in Balsamiq nicht weiter. Die statischen Seiten müssten für jede Größe separat angelegt und gestaltet werden. Gibt es nur wenige Breakpoints, können wir das Aussehen und das Verhalten von Elementen zueinander mit dem Entwickler während der Umsetzungsphase zusammen definieren. Dies ist aber bei komplexen Businessanwendungen nicht mehr möglich.
Die Schnelligkeit, mit der Wireframes erzeugt werden können, ist aber ein klarer Vorteil von Balsamiq, trotz der fehlenden Responsive Design Unterstützung.
Weitere Infos zur aktuellen Version in diesem Blog Post zu Balsamiq 3
Tool Axure RP und Responsive Design
Axure ist ein mächtiges Wireframing Tool, dass eine flache Lernkurve hat d. h. der Nutzer braucht hier schon eine Weile, um alle Funktionen kennen zu lernen und effektiv anwenden zu können.
Axure bietet die Möglichkeit adaptive Prototypen mit Bibliotheken (z. B. https://gumroad.com/l/rvBsj und http://www.axureresponsivedesign.com/ ) zu erstellen. Hierbei werden verschiedene Breakpoints sowie voreingestellte mobile Geräte in ihren Auflösungen betrachtet. Die Vorschau für diese Geräte wird über iFrames realisert. Responsive Design wird hier noch nicht erreicht. Adaptives Design ist aber schon umsetzbar. (Anmerkung: Was ist “responsive” und was ist “adaptive”? Dazu ist ein Beispiel hier zu finden http://www.liquidapsive.com/.
Bei der prototypischen Umsetzung einer komplexen Anwendung, durch die viele Änderungen an dem Template gemacht werden müssten, ist der Aufwand in Axure schon sehr hoch anzusetzen. Der Code kann für die Entwicklung aber nicht sinnvoll genutzt werden. Für Designer, die keine HTML Kenntnisse haben, kann Axure ein gutes Tool sein, um Prototypen zu erstellen, die das adaptive Verhalten darstellen.
Tool Adobe Experience Design CC und Responsive Design
Adobe Experience Design ist ein Tool um UI-Prototypen erstellen. Die Screens können für unterschiedliche Auflösungen gestaltet werden, aber jede Screen-Größe braucht ein eigenständiges Design. Der Vorteil, optisch sehr nah an der späteren Design-Umsetzung zu liegen hat bei einigen Projekten Vorteile. Aber eine Unterstützung für Responsive Design – also EIN Prototyp, der in unterschiedlichen Endgerät-Größen angezeigt werden kann – ist hier noch nicht gegeben.
Weitere Informationen zu Adobe Experience Design gibt es in unserem Blog Post zu Adobe XD.
Fazit
Responsive Design hat auch in Business Anwendungen Einzug gehalten. Die unterschiedlichen Endgeräte, über die die immer und überall verfügbaren Webanwendungen genutzt werden, sind in ihren Größen sehr unterschiedlich. Hierbei ist es notwendig in der Konzeption das Verhalten schon frühzeitig prüfen und definieren zu können. Nicht nur für die Auftraggeber ist es wichtig, das Verhalten der Anwendungen zu betrachten – Entwickler benötigen frühzeitig Definitionen von Breakpoints, Größenverhältnissen und Animationen.
Adobe XD hat Vorteile bezüglich der designgenauen Darstellung eines Prototypen in relativ kurzer Zeit. Auch „Designtool-Fremde“ – also nicht Nutzer von Adobe InDesign, Illustrator oder Photoshop – können sich darin schnell einfinden und gute Ergebnisse erstellen. Wir verfolgen gespannt die Weiterentwicklung von Adobe XD. Aber da Adobe XD Responsive Design nicht komplett unterstützt, nutzen wir für solche Konzeptphasen einen Selbstbau mit jeweiligen responsiven Frameworks (je nachdem, welche im Projekt auch später gesetzt sind) oder Axure RP mit einer responsiven Library.
„Pen and Paper“ und Balsamiq bleiben aber wichtige und grundlegende Tools, die wir für effiziente Konzeptphasen – insbesondere beim Start von Projekten – einsetzen.
Haben Sie Fragen zu Responsive Design in der Praxis? Schreiben Sie uns eine E-Mail an nicole.charlier@akquinet.de