Die hilfreichsten Neuerungen in Axure 7

14. Februar 2014 Agnieszka M. Walorska (@agaw)

Axure ist ein interaktives Wireframing-Tool, das hauptsächlich in der Konzeptphase eingesetzt wird, um Website-Prototypen zu erstellen, die dann zum einen zur Abstimmung an den Kunden gesendet werden können und zum anderen als Spezifikationsdokument für Programmierer und Entwickler dienen.

Im Dezember wurde eine neue Axure-Version veröffentlicht. Mit Axure 7 gab es viele Anpassungen und vor allem funktionale Erweiterungen, die großen Einfluss auf die zukünftige Prototyp-Erstellung haben werden. Wir haben uns die Neuerungen näher angeschaut und dabei die Funktionen ausgewählt, die uns am hilfreichsten erscheinen. Einige davon erweitern das Spektrum an Möglichkeiten, andere vereinfachen hingegen vor allem den Arbeitsprozess. Dazu gehören:

  1. Adaptive Views
  2. Accordion Control mit der „Push/Pull Widgets“-Option
  3. Das Erstellen von Flyout-Menüs und Lightboxen mit der „Treat as“-Option
  4. Das Repeater Widget
  5. Textfeld-Typen
  6. Das Duplizieren von Dynamic Panel States
  7. Die Preview-Funktion

Adaptive Views

Mit Version 7 hat Axure Adaptive Views eingeführt. Dies ist die wohl größte Erweiterung im Vergleich zu 6.5 und ermöglicht es, einen vollständig responsiven Prototypen zu erstellen.

Mit dem Adaptive Views Manager können unterschiedliche Breaking Points für eine Website definiert werden:

Adaptive Views Manager in Axure 7

Dabei kann entweder auf voreingestellte Breaking Points zurückgegriffen werden oder es können benutzerdefinierte Werte verwendet werden. Das responsive Verhalten wird dabei über Vererbung (inheritance) gelöst. Für jeden definierten Breaking Point erbt der dazugehörige View die Eigenschaften eines anderen Views. Die Basis für die Vererbung bildet dabei der Base View.

Der Strukturbaum auf der linken Seite im Adaptive Views Manager zeigt jeweils die Abhängigkeiten der einzelnen Views an. Mit Axure 7 ist sowohl der Mobile-First- als auch der Desktop-First-Ansatz möglich. Die Vererbung gestaltet sich dort folgendermaßen:

Mobile-First

Bei Mobile-First bildet die Smartphone-Ansicht den Base View:

Mobile First in Axure 7

Mobile First-Ansatz in Axure 7- Quelle: Axure

Desktop-First
Bei Desktop-First bildet die Desktop-Ansicht den Base View:

Desktop First in Axure 7

Desktop First-Ansatz in Axure 7 – Quelle: Axure

Das bedeutet, dass alles, was im Base View erstellt wird, automatisch auch zu den anderen Views hinzugefügt wird. Wird hingegen eine Anpassung im letzten View der Kette gemacht, so wirkt sich das nicht auf die darüber liegenden aus. Axure hat unterschiedliche Vererbungsregeln für Positions-, Farb- und Textänderungen sowie das Hinzufügen und Löschen von Elementen festgelegt. Diese können hier nachgelesen werden: Axure – Editing your adaptive project.

Adaptive Views ermöglichen es, einen einzigen Prototypen für alle Geräte zu erstellen. Außerdem können die Layouts der unterschiedlichen Auflösungen direkt miteinander verglichen werden, wodurch der Workflow sehr viel effizienter ist.

Accordion Control mit der „Push/Pull Widgets”-Option

Im Kontext von Akkordeon-Interaktionen war es bisher notwendig, Elemente, deren Position vom Öffnen und Schließen eines Akkordeons abhängig waren, in Axure manuell zu positionieren:

  1. Die betroffenen Elemente mussten zunächst in ein Dynamic Panel umgewandelt werden.
  2. Mit der „Move Panel”-Aktion im Case Editor musste das Panel dann horizontal oder vertikal um eine bestimmte Pixel-Anzahl verschoben werden, sobald das Akkordeon geöffnet wurde: Move Panels-Aktion in Axure 7Die Pixel-Anzahl richtete sich dabei nach der Größe des Inhalts, der über das Akkordeon gezeigt oder ausgeblendet wurde.
  3. Die gleiche Aktion musste für den Fall des Schließens des Akkordeons definiert werden, mit dem entsprechenden negativen Pixelwert: Move Panels-Aktion mit negativem Wert in Axure 7

Dies ist nur einer von mehreren möglichen Workarounds, der funktioniert, aber sehr unflexibel ist. Denn sobald sich die Größe des zu zeigenden bzw. auszublendenden Inhalts verändert, muss der Pixelwert an allen Stellen im Case Editor manuell angepasst werden. Dies wird noch komplizierter, wenn es unterschiedliche Akkordeons mit unterschiedlichen Inhaltsgrößen gibt.

In Axure 7 wurde eine neue Funktion hinzugefügt, die diese Workarounds überflüssig macht:  Die „Push/Pull Widgets”-Option für die „Show/Hide”-Aktion.

Um die Positionierung von Elementen bei Akkordeon-Interaktionen zu steuern, ist nun folgender Weg ausreichend:

  1. Der Inhalt, der bei Klick auf das Akkordeon gezeigt/augeblendet werden soll, wird in ein Dynamic Panel umgewandelt und mit der Funktion „Set to hidden” versteckt.
  2. Das Akkordeon selbst bekommt die Aktion „Show/Hide”.
  3. Das entsprechende Panel wird ausgewählt und die Sichtbarkeit wird auf „Toggle” gesetzt, um eine flexible Anzeigen/Ausblenden-Interaktion zu erstellen.
  4. Wird die Checkbox „Push/Pull Widgets” aktiviert, so werden alle Elemente, deren Position von der Interaktion betroffen sind, automatisch an die richtige Stelle verschoben, wenn das Akkordeon auf- oder zugeklappt wird.
    Push-Pull Widgets-Option in Axure 7

Das Dynamic Panel mit dem versteckten Inhalt kann ganz nach Belieben jederzeit angepasst werden, ohne dass jegliche Änderungen im Case Editor notwendig werden. Dadurch wird der Arbeitsprozess sehr stark vereinfacht und die Größe der Prototypen-Datei um einiges erleichtert.

Das Erstellen von Flyout-Menüs und Lightboxen mit der „Treat as“-Option

Eine weitere hilfreiche Neuerung, die auch in Verbindung mit der „Show/Hide“-Aktion steht, ist die „Treat as“-Option. Ähnlich wie die „Push/Pull Widgets”-Option dient diese der Automatisierung.

Flyout-Menü

Um ein funktionstüchtiges Flyout-Menü zu erstellen, muss es lediglich nach Belieben gestaltet, anschließend in ein Dynamic Panel umgewandelt und an der entpsrechenden Stelle unterhalb des Menüs positioniert werden. Dem dazugehörigen Menü-Button wird anschließend die  „Show/Hide“-Aktion im OnMouseEnter Event vergeben. Dort erscheint dann ein „More options“-Dropdown:

Treat as flyout in Axure 7

Mit der Option „treat as flyout“ verhält sich das Panel automatisch wie ein Flyout-Menü. Das heißt:

  1. OnMouseEnter wird das Menü oberhalb aller anderen Elemente angezeigt.
  2. Sobald die Maus das Menü und/oder den Menü-Button verlässt, wird das Flyout-Menü ausgeblendet.

Komplexe OnMouseEnter und OnMouseOut Workarounds sind hierfür also nicht mehr notwendig.

Lightbox

Das selbe Prinzip lässt sich auch auf Lightboxen anwenden. Anstatt eine Lightbox komplett manuell anzulegen, genügt die Auswahl von „treat as lightbox“ und es wird automatisch ein halb-transparenter Hintergrund eingefügt, sobald das Panel eingeblendet wird. Dazu gehört auch die Funktion, dass die Lightbox bei Klick auf den Hintergrund ausgeblendet wird. Die Hintergrundfarbe kann im Case Editor direkt definiert werden:

Treat as lightbox in Axure 7

In Kombination mit der „Pin to browser“-Funktion im Widget Properties Panel, die das Dynamic Panel unabhängig vom Scrollen immer auf der Seite zentriert hält, kann eine sehr realistisch anmutende Lightbox erstellt werden:

Pin to browser-Funktion in Axure 7

Lightbox in Axure 7

Das Repeater Widget

Das Repeater Widget ist ein neues, erweitertes Widget, das sich hervorragend für die Erstellung von mehrmals auftauchenden ähnlichen Elementen, z.B. bei Produktlisten in Online-Shops, eignet. Das Prinzip des Repeaters ist es, einen Datensatz anzulegen und diesen dann über Interaktionen dynamisch auf die entsprechenden Widgets zu übertragen.

Um das Repeater Widget zu nutzen, muss es lediglich vom Widgets Panel auf die Arbeitsfläche gezogen werden:

Repeater Widget in Axure 7

Mit einem Doppelklick auf das Widget öffnen sich die Repeater-Einstellungen im unteren, mittigen Bedienfeld:

Repeater-Bedienfeld in Axure 7

  • Repeater Dataset: Hier können Spalten für die unterschiedlichen Inhalte, z. B. Name, Beschreibung, Preis erstellt werden. Die Anzahl der Reihen ist dabei äquivalent zur Anzahl der wiederholten Elemente, die später im Prototyp angezeigt werden.
  • Repeater Item Interactions: In diesem Tab werden Interaktionen festgelegt, um die Inhalte aus dem Datensatz auf die Widgets zu übertragen.
  • Repeater Formatting: Details zu Layout, Hintergrundfarbe, Abständen und auch Paginierung können hier festgelegt werden.

Die Daten aus der Datensatz-Tabelle können auf die jeweiligen Repeater-Elemente (Shapes) oder Widgets (notwendig bei Bildern) übertragen werden. Sind beispielsweise drei Spalten vorhanden, ist es sinnvoll, auch drei Repeater-Shapes zu erstellen. Werden diesen Shapes die gleichen Namen zugeordnet wie den dazugehörigen Spalten, so können sie später im Case Editor schneller identifiziert werden:

Repeater-Shapes-Namen in Axure 7

Um Inhalte auf ein Shape oder Widget zu übertragen, werden die Aktionen „Set text“ und „Set image“ im “OnItemLoad” Event verwendet, welches über den Repeater Item Interactions Tab angewählt werden kann. Das entsprechende Repeater-Shape oder Widget, auf welches Text oder ein Bild übertragen werden soll, wird ausgewählt. Um Text zu übertragen, wird im „Set text to“-Dropdown „value“ ausgewählt und eine Variable eingefügt, die den Namen der Spalte aus der Datensatz-Tabelle enthält, von der der Text übernommen werden soll [[item.ColumnName]]:

Set text and set image in Axure 7

Um ein Bild hinzuzufügen, ist zunächst ein Image Widget erforderlich. Über „Set image“ können dann Bilder importiert werden, sogar für unterschiedliche Stati:

Set image in Axure 7

Um pro auftauchendem Element im Repeater ein individuelles Bild hinzuzufügen, kann einfach eine weitere Spalte im Datensatz hinzugefügt und über Rechtsklick ein Bild für jedes Element separat importiert werden:

Individuelle Bilder einfügen in Axure 7

Das Bild kann dann über eine Variable sichtbar gemacht werden:

Bild über Variable einfügen in Axure 7

Wurden die Inhalte auf alle Repeater-Shapes oder Widgets übertragen, so werden sie auf der entsprechenden Seite ausgegeben:

Repeater-Ergebnis in Axure 7

Layout und Formatierung der Repeater-Shapes können wie bei den Widgets im Widget Properties and Style Panel angepasst werden. Ein Repeater-Shape muss nur einmal gestaltet werden und alle im Repeater gezeigten Elemente übernehmen dieses Layout.

Um Bilder korrekt anzuzeigen, ist es wichtig, dass das Image Widget die gleichen Proportionen wie das importierte Bild hat. Gibt es mehrere unterschiedliche Bilder, sollten diese also möglichst alle die gleichen Proportionen haben.

Um die Anzahl der gezeigten Elemente zu erhöhen, reicht es aus, einfach weitere Reihen in der Datensatz-Tabelle anzulegen. Eine weitere Bearbeitung im Case Editor ist nicht notwendig.

Textfeld-Varianten

Textfeld-Varianten in Axure 7

Ein weiteres, sehr nützliches Feature in Axure 7 ist die Möglichkeit, unterschiedliche Textfelder zu erstellen. Einem Textfeld Widget können über das Widget Properties Panel unterschiedliche Feldtypen wie Text, Passwort, E-Mail, Telefonnummer, URL etc. zugeordnet werden. Im Prototyp übernimmt das Feld dann die entsprechenden Eigenschaften und wird im Browser passend gerendert. Das Aussehen dieser Felder kann dabei je nach Browser unterschiedlich sein wie in diesem Beispiel:

Axure-Textfelder in der Browseransicht

Axure-Textfelder in der Browseransicht – Quelle: Axure (Mike Gray)

Einer der besten Nebeneffekte, vor allem für die Usability des Prototyps: auf mobilen Geräten wird die passende native Tastatur bzw. der Selector geöffnet, sobald auf das Feld getappt wird:

Axure-Textfelder auf mobilen Geräten

Axure-Textfelder auf mobilen Geräten – Quelle: Regis Freyd auf Totalwireframe

Es gibt bisher leider noch einen kleinen Haken: einzelne Felder wie Datum und Uhrzeit werden noch nicht von allen Browsern unterstützt, wie z. B. dem Internet Explorer.

Das Duplizieren von Dynamic Panel States

Duplizieren von Dynamic Panel States in Axure 7

Was in bisherigen Versionen fehlte, vor allem, wenn es darum ging, Panel States zu erstellen, die sich nur geringfügig voneinander unterschieden, ist nun mit Axure 7 verfügbar. Dynamic Panel States können nun im Widget Manager, bisher bekannt als Dynamic Panel Manager, dupliziert werden. Das Kopieren und Einfügen aller Elemente von einem State zum anderen ist somit nicht länger notwendig.

Die Preview-Funktion

Preview-Funktion in Axure 7

In der neuen Axure Version ist es nicht mehr nötig, die HTML-Dateien für den Prototyp zu generieren, um eine Vorschau im Browser zu erhalten. Mit nur einem Klick auf „Preview“ in der Toolbar öffnet sich die Prototyp-Vorschau direkt im Browser, was vor allem bei umfangreichen Prototypen wertvolle Zeit spart.

Weiterführende Links

Um mehr über die einzelnen Features zu erfahren, lohnt es sich, die Axure Tutorials anzuschauen:

#######

Wir freuen uns auf Ihre Nachricht!

Sie haben ambitionierte Pläne und benötigen Unterstützung? Wir freuen uns darauf, von Ihnen zu hören!

Kontakt aufnehmen

Ähnliche Artikel

vimedi: Einnahme von Medikamenten einfach sicher

Allein in den USA kommen jedes Jahr 130.000 Menschen ums Leben, weil sie sich nicht an die vorgeschriebene Einnahme von Medikamenten gehalten haben. Abgesehen von diesem traumatischen Erlebnis für so viele Familien, belastet die falsche Einnahme von Medikamenten das Gesundheitssystem mit USD 290 Milliarden pro Jahr. Die Komplexität der korrekten Einnahme von Medikamenten liegt auf der […]

Südkurier-Startseite nach Relaunch

Relaunch der mobilen Website vom Südkurier

Nachdem wir bereits die zum SÜDKURIER GmbH Medienhaus gehörende mobile Website von ka-news.de einer grundlegenden Neukonzeption unterzogen und den erfolgreichen Relaunch realisiert haben, beauftragte uns SÜDKURIER auch mit dem Relaunch der mobilen Website von suedkurier.de Wie schon beim Vorgängerprojekt war eine mobile Website zugunsten einer responsiven Website aufgrund der geplanten Content- und Monetarisierungsstrategie bereits gesetzt und […]

UP14-Tagungsbeitrag: Der digitale Tod – Herausforderungen an die User Experience

Im Rahmen der Konferenzreihe Mensch und Computer 2014 hielten unsere Geschäftsführerin Agnieszka Walorska und unsere Kollegin Marie-Luise Jaeger für die Praxistagung UP14 – Usability Professionals einen Vortrag zum Thema „Der digitale Tod – Herausforderungen an die User Experience“. Den Beitrag gibt es nun hier zum Nachlesen: Guten Tag. Mein Name ist Agnieszka Walorska. Ich bin Geschäftsführerin und Gründerin […]

Alle Artikel