1
Mit dem Siegeszug der Post-PC-Devices stehen wir Interaktions- und UX-Designer vor neuen Herausforderungen: Es reicht nicht mehr, Webseiten und Applikationen für die beliebte Standardauflösung von 1024 Pixeln zu entwickeln. Stattdessen müssen wir für winzige Mobile-Screens oder gleich das ganze Spektrum vom Smartphone bis zum Desktop-Rechner gestalten. Andere Interaktionsmuster, Freiheitsgrade, Arbeitsweisen und Artefakte stellen aber nicht nur neue Ansprüche an unsere Fähigkeiten, sondern auch neue, große Herausforderungen an unseren Werkzeugkasten.
Die Prototyping-Software Axure RP hat beginnend mit der Version 6.5 versucht, diese Herausforderungen zu beantworten, indem das Bauen und Testen von interaktiven Prototypen auf mobilen Endgeräten grundlegend vereinfacht (bzw. überhaupt ermöglicht) wurde. Mit der Version 7 wurden dann deutlich weiter gehende Ergänzungen und Veränderungen vorgenommen, u.a. erweiterte Touch-Interaktionen und die Möglichkeit, Breakpoints für ein Responsive Design zu definieren.
Im User Experience & Design Team von OTTO.de treibt uns heute dennoch die Frage um, ob Axure auch künftig unser zentrales Tool bleiben soll, oder ob andere Werkzeuge besser geeignet sind, um mobile oder multi-device-taugliche Prototypen zu entwickeln. In diesem Kontext ist mir das Buch „Axure for Mobile (Second Edition) – Building mobile Prototypes with Axure RP 7.0“ von Lennart Hennigs ins Auge gefallen.
Lennart Hennigs ist Senior UX-Designer und Creative Director bei der Deutschen Telekom und genau wie Jeff Patton mit seinem Buch über User Story Mapping wollte auch er anfangs nur einige Blog-Beiträge über Axure RP schreiben. Das heißt, eigentlich wollte er noch nicht einmal das. Beginnend mit einigen Notizen, die beim Demonstrieren von Axure entstanden sind, über ein stetig wachsendes Slide Deck entstand schließlich die erste Auflage des Buches zu Axure RP 6.5. Als Reaktion auf die zahlreichen Änderungen in Axure 7 hat Lennart sein Buch vor kurzem überarbeitet und als zweite Edition mit dem Fokus auf Axure 7 herausgegeben – mit mittlerweile knapp 200 Seiten.
Für diese Rezension konnte ich die digitale Ausgabe des Buchs in Augenschein nehmen, die mir Lennart freundlicherweise kostenlos zur Verfügung gestellt hat.
Wer sollte dieses Buch lesen?
„Axure for Mobile (Second Edition) – Building mobile Prototypes with Axure RP 7.0“ dreht sich, wie der Name schon sagt, zentral um das Tool Axure RP 7. Zielgruppe sind daher die Nutzer der Software, also vorrangig UX- und Interaktionsdesigner, ferner auch Produktmanager, Konzepter oder UX-Manager, die das Tool in seiner neuesten Version einsetzen. (Wer noch eine ältere Version nutzt, kann kostenlos auf die Version 7 upgraden.)
Das Buch ist kein universeller Einstieg in Axure, eine gewisse Erfahrung mit der Software wird vorausgesetzt. Wer aber bereits einige Prototypen mit dem Programm gebaut oder zumindest die Einsteiger-Tutorials durchgearbeitet hat, wird mit dem Buch gut zurecht kommen und sein Wissen vertiefen können.
Wer nicht nur eine Anleitung für Axure sucht, sondern sich generell in das Thema Mobile Design einarbeiten will, findet in diesem Buch eine ordentliche Einführung in das Thema (siehe nächster Abschnitt) und kann auf den Kauf eines weiteren Buchs vorerst verzichten.
Inhalt
Bemerkenswert ist, dass das Buch keine reine Bedienungsanleitung oder ein ausgiebiges Software-Tutorial ist, sondern gleichzeitig einen allgemeinen Einstieg in das Thema „Designing for Mobile“ bietet. So beschäftigt sich das erste Drittel des Buches nicht wirklich mit Axure sondern mit übergreifenden Themen, wie den Beschränkungen und Vorteilen von mobilen Devices und mobilen Betriebssystemen, dem Einsatz von Personas und Produktvision als Grundlagen für das Konzept oder Leitlinien für den Umfang und die Realitätsnähe von Prototypen.
Im Anschluss beginnt der Einstieg in die konkrete Arbeit mit Axure. Zuerst wird die optimale Einrichtung von Arbeitsumgebung und Dokument als Grundlage zum Bau mobiler Prototypen erklärt. Darauf folgend werden die Grundlagen des Prototypenbaus anhand der zwei Vorgehensweisen Panel-basiert und Seiten-basiert vermittelt und die Unterschiede zwischen Web- und App-Prototypen erläutert. Dem nicht immer einfachen Prozess, den Prototypen auf den jeweiligen Endgeräten zum Laufen zu bringen, widmet sich ein weiterer Abschnitt.
An dieser Stelle ist der Leser bereits gut aufgestellt, um einfache Prototypen zu erstellen und auszuprobieren. Die nachfolgenden Kapitel drehen sich um die Vertiefung einzelner Aspekte: Erstellen grundlegender Interaktionen (Events, Animationen und Transitionen, Scrolling und Swiping), Umsetzung typischer mobiler UI-Patterns (u.a. Dialoge, Formulare, Sliding Menus, Drag-to-refresh) sowie die Integration von Videos und Webfonts. Auf den Einsatz von Axure für Adaptive bzw. Responsive Web Design wird in einem eigenen Abschnitt eingegangen.
Ein Kapitel zum Thema Dokumentation des Prototypen und zwei nützliche Anhänge mit allgemeinen Axure Best Practices und Tipps & Tricks runden das Buch sinnvoll ab.
Ergänzend gibt es eine Webseite zum Buch auf der Lennart nachträgliche Ergänzungen und Erweiterungen veröffentlicht und alle notwendigen Ressourcen zum Download stellt.
Leseprobe – 6. Building Mobile Prototypes
When building a prototype, pages and dynamic panels are your main building blocks. Pages usually contain the different screens of your prototype, while dynamic panels allow you to define interactive areas, e.g. an initially empty list which gets populated or parts of a screen where a dialog box will be shown.
You usually use pages to store your prototype’s screens. A page-based prototype is a set of pages linked together. This is the typical way to build website prototypes. But you can also use dynamic panels to store the screens of your prototype. A panel-based prototype (usually) features a single dynamic panel containing your prototype’s screens. Instead of linking pages you toggle the panel states of the dynamic panel. This means you’ll use the ‘Widget Manager’ instead of the ‘Sitemap’ section to keep track of your prototype’s screens. This approach is useful when prototyping mobile apps.
But choosing the right approach depends on several factors:
- Complexity: It is very easy to create a couple of pages and link them together. Building panel-based prototypes takes a bit more time and practice.
- Transitions: There are no page transitions in Axure, only panels can feature transitions. To show transitions between screens you need to create a panel-based prototypes.
- Animations: You can only prototype animations with dynamic panels.
- Navigation: You can only use the browser’s navigation buttons in page-based prototypes. The ‘back’ button will not navigate between panel states.
- Gestures: Only dynamic panels allow you to detect swiping gestures.
- Loading Time: A short delay will occur every time a new page is loaded. Thus page-based prototypes offers a realistic web browsing experience. A panel-based prototype will be fully loaded when it is first opened because it consists of a single page. Thus panel-based prototypes are better suited to showcase an app’s behavior.
- Specifications: Creating a specification is much easier for page- based prototypes. It can also be done for panel-based ones, as I explain in the ‘Creating Documentation’ chapter, but it needs a few additional steps.
- Element reuse: When using pages you will store reoccurring elements (your page header, tabs, etc.) as masters. For a panel-based prototype you need to use a different approach. Turn your prototype’s content area into a dynamic panel (e.g. the space below the header and above a tab bar) and create the static elements only once.
Generally speaking, a page-based approach is better suited for mobile websites and low-fidelity app prototypes. Use this method if you need results fast or if you want to present a basic concept.
A panel-based approach is better suited for apps and high-fidelity prototypes. It offers more interaction possibilities (swiping gestures, animations and transitions) and provides a structure that allows you to gradually increase its fidelity. But it is a bit harder to build and maintain. But this is not a ‘black or white’ choice you need to make. You will find yourself mixing both approaches depending on the project at hand.
Fazit
In Axure for Mobile erklärt Lennart sehr methodisch und geduldig den Bau von mobilen Prototypen. Vom Einrichten der Umgebung über den grundlegenden Aufbau des Prototypen und das Ausprobieren auf mobilen Devices bis hin zu den vertiefenden Kapiteln ist das Buch sehr praxisnah aufgebaut. Besonders gefallen hat mir dabei, dass es eben keine reine Betriebsanleitung sein will, sondern auch eine gute Grundlage zum Thema „Design for mobile“ legt. Auch in den Praxis-Kapiteln werden fachliche Hintergründe, Entscheidungskriterien und Prozesse klar erklärt. Dem Leser werden damit nicht nur die Handlungsoptionen gezeigt, sondern immer auch die Gründe die für oder gegen die einzelnen Vorgehensweisen sprechen.
Die Gründlichkeit ist allerdings nicht immer ein Vorteil, vor allem wenn man nur eine schnelle Referenz für eine Funktion braucht. So saß ich anfangs etwas perplex vor dem Einrichten-Kapitel und fragte mich, warum er so vage blieb und mir nicht konkret sagt, welche Werte ich wo genau eingeben muss. Erst etwas später habe ich dann festgestellt, dass ich noch in der theoretischen Herleitung war. Die richtige Anleitung kam erst ein paar Seiten später.
Für alle, die tief in das Thema Design for Mobile und die Arbeit mit Axure 7 einsteigen wollen, ist das Buch aber ein großartiger Startpunkt und noch lange nicht das Ende: Lennart ergänzt seine ausführlichen Inhalte mit eine Vielzahl an Links zu weiterführenden Artikeln und Ressourcen. Über einen Blog und einen Newsletter hält er das Buch auch nach der Veröffentlichung auf einem aktuellen Stand.
Ich kann das Buch jedem ans Herz legen, der bereits mit Axure arbeitet und der sich nun aktiv den Herausforderungen der Post-PC-Ära stellen will.
gute Einführung, ich habe noch so meine Probleme in der Panel based Spezifikation. Aber Übung macht den Meister :)