Ein Profi-Trick für komplexe Prototypen mit Axure – wiederkehrende Funktionen zentral definieren

Intro

Bei der Erstellung von Prototypen mit Axure, gerade wenn diese komplexer werden, gibt es häufig wiederkehrende Abläufe. So kann etwa ein und dieselbe Änderung ausgelöst werden durch unterschiedliche Aktionen des Nutzers. Häufig werden auch Berechnungen oder andere Arten von Datenverarbeitung wiederholt eingesetzt, jeweils basierend auf unterschiedlichen Eingabewerten. Für solche Szenarien gibt es in der traditionellen Programmierung so genannte Funktionen oder auch Prozeduren, die anhand von Eingabewerten Berechnungen oder Aktionen durchführen und eventuell auch Ausgabewerte zurückgeben. Axure unterstützt keine Funktionen im eigentlichen Sinne, erlaubt aber mit Bordmitteln etwas, was dem schon sehr nahe kommt. Wie das funktioniert möchte ich in diesem Beitrag mit Ihnen teilen.

Die Vorteile von Funktionen

Die Auslagerung von wiederkehrenden Abläufen in Funktionen bietet viele Vorteile:

  • Wenn Änderungen nötig sind können diese an zentraler Stelle vorgenommen werden anstatt mehrfach über den Prototypen verteilt.
  • Sie helfen, den Überblick über die Interaktivität des Prototyps zu behalten. Anstatt jedes Mal die kompletten Befehle lesen zu müssen steht dort nur noch der Name der Funktion, der möglichst sprechend formuliert werden sollte.
  • Gerade bei komplexen Prototypen können Anpassungen so wesentlich schneller und mit weniger Fehlern vorgenommen werden.

Natürlich bedeutet der konsequente Einsatz von Funktionen auch Zusatzaufwand, der nicht unterschätzt werden sollte. Für einen simplen Prototyp, der nur einmal erstellt und dann nicht weiterentwickelt wird lohnt sich die zu investierende Zeit nicht. Aber besonders wenn unter Zeitdruck der Prototyp angepasst werden muss amortisiert sich der initiale Aufwand schnell. Vor kurzem führte ich mit Kunden ein Rapid Prototyping durch, bei dem wir zwischen den 4 Schleifen jeweils nur wenige Stunden Zeit für Änderungen hatten – ohne einen ordentlich aufgebauten Prototypen mit Funktionen wäre dies zum Scheitern verurteilt gewesen.

Beispiel-Prototyp auf AxShare und zum Download

Die Umsetzung von Funktionen in Axure werde ich anhand eines fiktiven Prototypen erläutern (siehe Abb. 1). Diesen können Sie direkt zum Betrachten auf AxShare finden sowie auch als Axure-Datei zum Download, um unter die Haube zu schauen.

 

Abb. 1: Alle Teile des Beispiel-Prototypen im Überblick

Abb. 1: Alle Teile des Beispiel-Prototypen im Überblick

Definition einer Funktion mit Eingabewert

Wie bereits erwähnt unterstützt Axure keine Funktionen als solches. Mit bestimmten Elementen lässt sich aber ein ähnliches Verhalten umsetzen. Der Schlüssel ist, die Inhalte der geplanten Funktion an ein Event zu koppeln, welches von anderen Elementen ausgelöst werden kann. Beispiele sind etwa OnPanelStateChange von Dynamic Panels und neu in Axure RP7 OnCheckedChange von Checkboxen. Ich werde es hier anhand der Checkboxen erläutern, da ich es damit übersichtlicher finde. Sie sollten es aber problemlos auf DynamicPanel übertragen können, falls Sie noch mit Axure RP6.5 arbeiten. In meinem Beispiel-Prototpyen habe ich die Checkboxen sichtbar gelassen – im Normalfall sollten diese natürlich versteckt werden.

Los geht’s: Als Ausgangsbasis nehmen ich 2 Eingabefelder („Input1“ und „Input2“) und 2 Ausgabefelder („Output1“ und „Output2“). Beim Klick auf einen Button („Button1“) sollen nun beide Ausgabefelder auf den Wert von „Input1“ gesetzt werden. Dieses Verhalten möchte ich in eine Funktion auslagern, um es später wiederverwenden zu können.

Zu diesem Zweck erstelle ich ein Checkbox-Element und nenne es „f_SetOutput“. Dieser Name kann natürlich frei gewählt werden – ich verwende hier das Präfix „f_“ um das Element als Funktion zu kennzeichnen und einen Namen, der das Verhalten der Funktion erläutert. Das Verhalten der Funktion definiere ich dann an das OnCheckedChange-Event der Checkbox (siehe Abb. 2). In diesem Fall sollen die Werte auf beiden Ausgabefeldern gesetzt werden. Um die Funktion wiederverwertbar zu machen setze ich die Ausgabefelder dabei nicht auf einen festen Wert (den von „Input1“) sondern verwende einen Eingabewert, der der Funktion übergeben wird. Dieses muss in Axure über globale Variablen realisiert werden. Ich definiere also eine Variable „i_SetOutput_1“, den ersten Eingabewert der Funktion „f_SetOutput“. Für alle Eingabewerte verwende ich der Einfachheit halber das Präfix „i_“ für Input. Die Funktion setzt also die Werte der Ausgabefelder beide auf den Wert dieser Variable. Damit wäre die Funktion bereits fertig.

 

Abb. 2: Die Definition der Funktion „f_SetOutput“

Abb. 2: Die Definition der Funktion „f_SetOutput“

Aufruf der definierten Funktion

Nun gilt es, die Funktion bei Klick auf den Button auszulösen und ihr den gewünschten Eingabewert zu übergeben (siehe Abb. 3). Dazu setze ich im OnClick-Event des Buttons zunächst die Variable „i_SetOutput_1“ (unseren Eingabewert) auf den Wert des Eingabefeldes „Input1“, denn diesen möchten wir ja in die Ausgabefelder schreiben. Dann wird die Funktion aufgerufen, indem wir das OnCheckedChange-Event der Checkbox „f_SetOutput“ auslösen. Dies geht im Case-Editor über „Widgets > Set Selected/Checked > Toggle Selected”. So wird, unabhängig vom aktuellen Status der Checkbox, dieser immer verändert und somit das Event ausgelöst, das unsere Funktion enthält. Damit wäre der erste Schritt bereits komplett: Die Funktion ist definiert und per Klick auf den Button wird sie mit einem übergebenen Eingabewert aufgerufen.

 

Abb. 3: Ein Klick auf Button1 ruft die Funktion „f_SetOutput“ auf

Abb. 3: Ein Klick auf Button1 ruft die Funktion „f_SetOutput“ auf

Als zweites sollen jetzt über den zweiten Button („Button2“) ebenfalls beide Ausgabefelder gesetzt werden, diesmal jedoch auf den Wert von „Input2“ statt „Input1“ (siehe Abb. 4). Jetzt zeigt sich, wofür die Funktion nützlich ist: Wir müssen nur die Funktion mit einem anderen Eingabewert aufrufen. Ich setze also wieder die globale Variable „i_SetOutput_1“, jedoch diesmal auf den Wert von „Input2“. Dann wird erneut per „Toggle Selected“ der Status der Checkbox „f_SetOutput“ geändert und somit die Funktion aufgerufen. Und schon wurde die Funktion ein zweites Mal verwendet.

 

Abb. 4: Ein Klick auf Button2 ruft ebenfalls die Funktion „f_SetOutput“ auf, jedoch mit anderem Eingabewert

Abb. 4: Ein Klick auf Button2 ruft ebenfalls die Funktion „f_SetOutput“ auf, jedoch mit anderem Eingabewert

Definition und Aufruf einer Funktion mit einem Ausgabewert

Häufig braucht eine Funktion nicht nur Eingabe- sondern auch Ausgabewerte, um etwa das Ergebnis einer Berechnung zurückzugeben. Dies ist ebenfalls mit Axure möglich. Als Beispiel soll beim Klick auf den einen weiteren Button („Button3“) der Wert von „Output1“ auf die Summe der beiden Eingabefelder gesetzt werden. Damit wir flexibel bleiben, falls diese Berechnung später einmal angepasst werden soll, werde ich die Summenbildung in eine Funktion auslagern.

Ich erstelle also eine weitere Checkbox „f_Calculate“ (siehe Abb. 5). Für die Berechnung werden zwei Eingabewerte benötigt, so dass ich zwei globale Variablen „i_Calculate_1“ und „i_Calculate_2“ definiere. In diesem Fall soll das Ergebnis der Berechnung aber später als Ausgabewert zur Verfügung stehen. Auch dies muss über eine globale Variable gelöst werden, die ich „o_Calculate_1“ („o_“ für Output) nenne. Die Funktion schreibt also in diese Variable die Summe der beiden Eingabevariablen, erneut gelöst über das OnCheckedChange-Event der Checkbox „f_Calculate“.

 

Abb. 5: Ein Klick auf Button3 ruft die Funktion „f_Calculate“ auf

Abb. 5: Ein Klick auf Button3 ruft die Funktion „f_Calculate“ auf

Im OnClick-Event des Buttons werden dann „i_Calculate_1“ auf den Wert von „Input1“ und „i_Calculate_2“ auf den Wert von „Input2“ gesetzt (siehe Abb. 6). Dies sind die Eingabewerte für die Funktion „f_Calculate“, die wie bekannt über „Toggle Selected“ der Checkbox aufgerufen wird.

Im Anschluss muss dann nur noch der Wert von „Output1“ auf den Wert der Variable „o_Calculate_1“ gesetzt werden, unserem Ausgabewert der Berechnung. Somit wäre auch diese Funktionalität komplett.

 

Abb. 6: Ein Klick auf Button3 ruft die Funktion „f_Calculate“ auf

Abb. 6: Ein Klick auf Button3 ruft die Funktion „f_Calculate“ auf

Verkettung mehrerer Funktionen mit Ein- und Ausgabewerten

Natürlich lassen sich auch mehrere Funktionen verknüpfen, indem die eine Funktion als Eingabewert den Ausgabewert einer anderen Funktion verwendet. Im Beispiel lässt sich etwa folgendes machen: Bei Klick auf einen weiteren Button („Button4“) soll in beiden Ausgabefeldern die Summe der beiden Eingabefelder angezeigt werden (siehe Abb. 7).

 

Abb. 7: Ein Klick auf Button4 ruft die die beiden Funktionen „f_Calculate“ und „f_SetOutput“ verkettet auf

Abb. 7: Ein Klick auf Button4 ruft die die beiden Funktionen „f_Calculate“ und „f_SetOutput“ verkettet auf

Es muss also zuerst die Funktion „f_Calculate“ aufgerufen werden, um die Summe der beiden Eingabewerte zu bilden. Dies erfolgt wie zuvor beschrieben, so dass die Summe in der Variable „o_Calculate_1“ gespeichert ist. Diese muss dann als Eingabewert für die Funktion „f_SetOutput“ verwendet werden, indem „i_SetOutput_1“ auf den Wert von „o_Calculate_1“ gesetzt wird. Dann wird wie bekannt die Funktion „f_SetOutput“ aufgerufen, um diesen Wert in beide Ausgabefelder zu schreiben.

Fazit: Funktionen sind auch in Axure (über Umwege) nutzbar

Wie Sie sehen ist es auch in Axure möglich, Funktionen zu verwenden, um wiederkehrende Aktionen und Berechnungen auszulagern und zentral zu verwalten. Dies bietet viele Vorteile und erlaubt es, bei komplexen Prototypen den Überblick zu behalten und Anpassungsaufwände zu verringern. Die Umsetzung ist nicht ganz trivial, geht aber nach einigen Verwendungen gut von der Hand. Wichtig ist vor allem die konsistente und sprechende Benennung aller Elemente, sonst gibt es schnell Chaos. Ich würde mir für die Zukunft wünschen, dass Funktionen direkt von Axure unterstützt werden – dies würde die Umsetzung und Anpassung aufwändiger Prototypen erheblich vereinfachen.

5 Gedanken zu „Ein Profi-Trick für komplexe Prototypen mit Axure – wiederkehrende Funktionen zentral definieren

  1. Pingback: Really Rapid Prototyping – Erfolgsfaktoren für 4 Iterationen in 2 Tagen | Usabilityblog.de

  2. Sebastian

    Vielen Dank für diesen Tipp!

    Ich arbeite mich seit gestern in Axure ein und habe bereits über 2 Stunden damit verbracht, nach einer Möglichkeit zu suchen, Funktionen oder eine Art von ChangeEvent für Variablen zu erzeugen.

    Antworten
  3. Pingback: Axure Repeater - foreach-Schleifen umsetzen - Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.