Veröffentlicht am 6. Juni 2019 von Robert Klank

Effizientes Arbeiten mit Axure

Der Weg zum Klickprototypen kann beschwerlich sein, insbesondere wenn die zu gestaltene Anwendung von hoher Komplexität ist. Dann erfordern insbesondere nachträgliche Änderungen viel Aufwand. Doch erfahrungsgemäß sind viele Problemstellen unnötig selbst gemachtes Leid. Hier zeigen wir, wie wir im Agenturalltag mit einfachen Mitteln auch komplexe Prototypen umsetzen und Korrekturstufen kein Kopfzerbrechen mehr bereiten.

Fünf Gebote

  • „ökologisch“ – arbeite mit Mastern, statt Elemente zu duplizieren, die Du immer wieder brauchst
  • „effizient“ – arbeite mit Shortcuts und Styles, um Änderungen in deiner gesamten Datei schnell vornehmen zu können
  • „nachhaltig“ – benenne Pages und wichtige Elemente mittels einer durchgängigen Syntax, sodass Andere damit sofort weiterarbeiten können – spätestens beim Eventhandling spielt eine saubere Syntax ihre Vorteile voll aus
  • „exakt“ – verwende immer das Spaltenraster und Hilfslinien, sodass das nachträgliche Design darauf aufbauen kann
  • „klein“ – halte die Dateigröße klein, sodass Seiten schnell laden – wie z.B. durch die Nutzung von Icon-Fonts statt Grafiken

Objekte und Funktionen richtig eingesetzt

Elemente sparsam nutzen

Jedes Grafik-Element, ob Rechteck, Ellipse oder Linie, kann ein Label besitzen. Daher müssen auf einem Grafik-Element keine extra Text-Elemente erstellt werden um z.B. einen Button zu erzeugen. Ebenso sollten Interaktionen direkt auf das Element gelegt werden, anstatt auf zusätzliche Hot Spots. Das spart Ebenen, Speicher und unnötiges Ausrichten.

3 Wege für Interaktionen

Die große Stärke von Axure sind die Interaktionsmöglichkeiten. Je nach Komplexität können dafür verschiedene Wege genutzt werden:

  • einfache Interaktionselemente für MouseOver, Mousedown, Disabled und Selected lassen sich unter „Properties“ einstellen
  • für komplexere Interaktionen sind „Dynamic Panels“ hilfreich. Diese Elemente haben beliebig viele Zustände, womit z.B. verschiedene Listen simuliert werden können (leer, gefiltert, vielen Einträge, usw.). Über das Kontextmenü „Convert to Dynamic Panel“ lässt sich aus jedem beliebigen Element ein Dynamic Panel erstellen. Hilfreich ist dies auch für aufklappende Elemente (Dropdowns, Menüs),Gestensteuerungen und Animationen
  • die größte Freiheit bieten die Events, welche ebenfalls über „Properties“ zu erreichen sind. Mit ihnen lassen sich Konditionen und Aktionen hinzufügen und dadurch alle denkbaren Zustände und Abhängigkeiten konstruieren. Die Kombination mit Variablen ermöglicht zudem seitenübergreifende Änderungen. Siehe dazu auch unseren Blog-Beitrag „Mehrsprachige Prototypen in Axure“.

Hover Zustände, wie hier das hellere Grau, lassen sich einfach über Properties festlegen. Lediglich der blaue Zustand erfordert das Hinzufügen einer OnClick Interaktion.

Styles einsetzen

Für Objekte, Texte und sogar Seiten lassen sich projektspezifische Style festlegen. Dadurch erhält das Konzept eindeutige Strukturen. Änderungen lassen sich für viele Elemente gleichzeitig vornehmen. Wir bevorzugen zudem Styles gegenüber dem Master, da sie einen dynamischen Inhalt ermöglichen.

In Masterobjekte strukturieren

Gibt es im Konzept wiederkehrende Elemente, so können sogenannte Master angelegt werden. Je nach Einstellung bei „Drop Behavior“ lassen sich die Instanzen dann frei auf einer Seite platzieren oder erhalten eine festgelegte Position, wie es beispielsweise für eine Hauptnavigation hilfreich ist. Events können wahlweise auf das Masterelement oder seine Instanzen gelegt werden, um diese Interaktionen auf alle Kopien oder nur auf bestimmte anzuwenden.

Um verschiedene Versionen eines Masters zu erhalten, können diese ineinander verschachtelt werden – die bisher schmerzlich vermisste Möglichkeit Texte in Mastern anzupassen scheint in der neuen Axure Version 9 endlich Einzug zu finden.

Repeater – wieder und wieder und wieder…

Zum Erstellen wiederkehrender Elemente in einem Raster eignet sich der Repeater. In Kombination mit z.B. Masterlementen kann man hier Zeit für das Platzieren sparen. Außerdem können textbasierte Objekte wie Listen dynamisch mit echten Daten aus einer Tabelle befüllt werden. Außerdem lassen sich Bilder (Set Image) und Verlinkungen (Open Link) als Datensätze nutzen.

Bibliotheken

Die Elemente von Axure sind in „Libraries“ gruppiert. Neben den Standardkomponenten lassen sich auch eigene Bibliothek anlegen oder externe hinzufügen. Axure stellt verschiedene Bibliotheken zur Verfügung, wie Designvorlagen typischer Systeme (Bootstrap, iOS, Windows …) oder Iconsets.

Mit Create Library lassen sich eigene Sammlungen erstellen, die Dateiübergreifend importiert werden können.

Export-Settings

Axure Prototypen können als HTML-Dateien exportiert oder in der Cloud zur Verfügung gestellt werden. Bei der öffentlich zugänglichen Version sind dabei auch Feedbackmöglichkeiten durch den Kunden möglich.

Beachtet werden sollte, dass unter „Publish > Generate HTML Files“ immer nur die Seiten ausgewählt werden, welche auch wirklich notwendig sind. Archivierte Dateileichen bleiben dadurch verborgen. Außerdem sollte der Export immer getestet werden – bestenfalls auf dem Endgerät – um sicherzustellen dass z.B. Schrifteinbindung und -umbrüche fehlerfrei funktionieren.

Ausblick

Auch wenn es zu Beginn etwas Planung und Überzeugungsarbeit braucht – mit einem strukturierten, sauberen Vorgehen bleiben in Axure selbst komplexe Projekte handhabbar. Die einzelnen Objekte beinhalten noch viele weitere Möglichkeiten und müssen manchmal sicher auch anders eingesetzt werden, als vom Hersteller vorgesehen. Vieles davon scheint sich mit dem nächsten Update zu bessern. Die Version Axure RP 9, die aktuell noch im Beta Stadium ist, verspricht eine anpassbare Benutzeroberfläche, bessere Masterobjekte, ein aufgeräumter Interaktionseditor und weitere Neuerungen, die man schon lange vermisst.