Webwicklerin vs. Axure – Runde 6: Teilnahme an einer Axure-Schulung

Anfang April 2016 habe ich 3 Axure-Schulungen bei der eparo GmbH besucht: Basics, Advanced und Responsive/Mobile.

Jede Schulung dauerte einen Tag. Axure 8 lag nur als Beta-Version vor, darum wurde in der Schulung Axure 7 verwendet, unter Hinweis auf kommende Neuerungen in Axure 8. Alle drei Kurse fanden in den Räumen von eparo in Hamburg statt. Sie wurden von 1 oder 2 Dozenten geleitet, die beide kompetent, freundlich und hilfreich waren. Die jeweils etwa 5-10 Teilnehmer waren bunt gemischt und sympathisch. Es gab viele praxisnahe Übungen und gutes Lernmaterial. Sie merken schon: Ich war mit den Schulungen sehr zufrieden.

Inhaltlich haben mir die Schulungen enorm geholfen, Axure besser zu begreifen und zu nutzen. Unter anderem verdanke ich diesen Kursen die folgenden Erkenntnisse über Axure (meine Anmerkungen zur Usability füge ich in dieser Schrift ein):

  • Mit Axure produziert man „Wegwerfdummies“! Der damit produzierte Code ist nicht direkt für die Projektprogrammierung nutzbar. Schade! Aber wichtig zu wissen.
  • Ein guter Tipp für Präsentationen und Usertests im frühen Stadium eines Designs: die Konzepte sollten grundsätzlich auf Papier präsentiert werden. Sonst geht es trotz allen Briefings immer wieder um das Design, und sei es noch so vorläufig.
  • Axure wurde als „das Photoshop unter den Prototyping-Tools“ bezeichnet. Das finde ich sehr treffend.
  • Die Seiten-Struktur, die man oben links unter Sitemap in Axure aufbauen kann, dient nur dem Axure-Nutzer zur Übersicht (vgl. Abbildung 1).
    sitemap
    Abbildung 1: Sitemap

    Für Axure sind alles voneinander unabhängige Seiten.

Die Tatsache, dass diese Erklärung nötig ist, weist m.E. auf ein Usability-Thema hin: User könnten glauben, dass die Seitenstruktur in Axure weitere Konsequenzen hat, z.B. hinsichtlich einer Vererbung von Elementen oder Positionierungen. Die Frage ist, ob sich diese User-Hypothese durch Design oder Wording vermeiden ließe?

Abbildung 2: Formular- und Menü-Widgets
Abbildung 2: Formular- und Menü-Widgets
    • Die vorgegebenen Formular-Elemente unter Widgets lassen sich nur wenig stylen, daher lautet die Empfehlung, sie selbst zu bauen. Das gleiche gilt für die Menüs (vgl. Abbildung 2).
    • Bei Programmstart ist der Anzeige-Filter im Widget Manager voreingestellt auf „Nur Dynamic Panels“. Das sollte umgestellt werden, so dass man alle Widgets sehen kann. Usability-Kommentar: Warum ist der Filter nicht von Anfang an auf „alle Widgets“ eingestellt?
    • Group“ heißt nur: gleichzeitig selektieren. Es hat keine weitere Funktion!
      Auch hier weist die Tatsache, dass diese Erklärung nötig ist, daraus hin, dass User glaube könnten ,dass die Gruppieren in Axure weitere Konsequenzen hat, z.B. hinsichtlich einer Vererbung von Elementen oder Positionierungen. Die Frage ist, ob sich diese User-Hypothese durch Design oder Wording vermeiden ließe?
Abbildung 3: Alle Widgets anzeigen
Abbildung 3: Alle Widgets anzeigen
  • Um die Seite im Browser zu zentrieren: Unter Page Style den zentrierten „Page align“ auswählen.
  • Achtung, unter Page Style beziehen sich Horz Align und Vert Align ausschließlich auf das Hintergrundbild! Usability-Kommentar: Hier könnten User erwarten, dass sich das Align auf den gesamten Seiteninhalt bezieht. Verbesserungsvorschlag: Die Optionen genauer benennen, z.B. „Background Horz Align“
  • Default-Styles lassen sich für Ausnahmen einzeln ändern. Aber: Es wird nirgends angezeigt, dass dies ein Ausnahme-Style ist. Und bei späteren Default-Änderungen ändern sich die Ausnahmen nie wieder mit. Dies ist m.E. ein größeres Usability-Problem, das gelöst werden sollte, evtl. durch eine Anzeige
  • Wenn sich Elemente dynamisch nach unten verschieben sollen, z.B. wenn ein Akkordeon geöffnet wird: Diese Elemente zum Dynamischen Panel machen. Denn dynamische Panels werden immer komplett verschoben.

Erkenntnisse zur Master-Positionierung

Auch über die Master-Positionierung, mit der ich zu Beginn so gerungen habe, habe ich in der Schulung viel gelernt:

  • Drop Behavior „Break-Away“ heißt: Die Master können auf einzelnen Seiten im Nachhinein geändert werden. Mit anderen Mastern geht das nicht. Im Grunde sind „Break-Away-Master“ eher eine Art „Master-Container“. Sie sind gut geeignet für Customized Widgets, z.B. selbst gestylte Buttons mit Mouseover-Effekten.
  • Wenn die Drop Behaviorim Nachhinein geändert wird, ändert sie sich NICHT auf den Seiten, auf denen der Master schon eingefügt war! Auch dies ist m.E. ein größeres Usability-Problem, das gelöst werden sollte, evtl. durch eine Anzeige. Lösung: Auf diesen Seiten den Master löschen und neu einfügen.
    Abbildung 4: Master Usage Report
    Abbildung 4: Master Usage Report

    Abbildung 5: Add Master To Pages
    Abbildung 5: Add Master To Pages
  • Auf welchen Seiten ein Master verwendet wird, sieht man nur im „Usage Report“ (vgl. Abbildung 4), nicht bei „Add to Pages“! (Die dortigen Checkboxen sind immer leer, vgl. Abbildung 5) Usability-Vorschlag: Warum nicht diese Anzeigen zusammenfassen in einem Punkt „Add to/Remove from Pages“, bei dem die Seiten, auf denen der Master im Einsatz ist, bereits angehakt sind?
  • Sibling Master“ und „Child Master“ beziehen sich nur auf die Position im Masterfenster. Sie haben keine weitere Funktion und z.B. nichts mit Vererbung zu tun.
    Abbildung 6: Add Sibling / Child Master
    Abbildung 6: Add Sibling / Child Master

    Usability-Kommentar: Hier ist das Wording aus dem Bereich der Vererbung entlehnt und damit potentiell irreführend. Vorschlag: neutraler benennen, z.B. „Davor einfügen / Danach einfügen / Darunter eingerückt einfügen“ o.ä.

Und so geht die 100%-Breite:

  • Fast alle Widgets (z.B. Rechtecke) und Content passen sich nicht auf 100% Breite an, sondern bleiben in der Breite konstant! Daher als Basis für ein 100% breites Element das Widget Dynamisches Panel verwenden (kann leer sein)

    Abbildung 7: Dynamic Panel 100% Wide
    Abbildung 7: Dynamic Panel 100% Wide
  • Das dynamische Panel „100% wide“ machen. Aber: Das sieht man nicht, da die Inhalte ihre Breite behalten! Das macht NUR den CONTAINER 100% breit.
  • Damit man die 100% Breite sieht, muss man diesem dynamischen Panel eine Hintergrund-Farbe geben! Das geht nur im Panel State Style.
    So wird der Panel State Style aufgerufen:
  1. Bei ausgewähltem dynamischen Panel mit rechter Maustaste das Kontextmenü aufrufen und Manage Panel States auswählen

    Manage Panel States
    1. Manage Panel States
  2. Es öffnet sich der Dynamic Panel State Manager im Popup-Fenster. Hier das Icon „Edit all States“ auswählen
  3. Im unteren Fensterbereich wird nun (anstelle von Page Interactions/Page Style) das Panel State Style angezeigt. Hier kann die Hintergrundfarbe gewählt werden.

    Edit All Panel States
    2. Edit All Panel States
  • Um einen Master 100% breit zu machen, z.B. Footer oder Header: Diesen Master zusätzlich zum Dynamischen Panel machen. Dann auf 100% wide setzen und eine eigene Hintergrundfarbe geben.
    Abbildung 8: Hintergrundfarbe im Panel State Style ändern
    3. Hintergrundfarbe im Panel State Style ändern

    Usability-Kommentar: Der Menüpunkt „100% wide“, der sich scheinbar auf alle Elemente anwenden lässt, aber in Wirklichkeit nur bei Dynamischen Panels wirksam ist, stellt m.E. ein größeres Usability-Problem dar. Vorschlag: Der Menüpunkt sollte genauer benannt werden, z.B. „Dynamic Panel 100% wide“, und sich auch nur Dynamischen Panels zuordnen lassen. Da die „Sichtbarkeit“ von der 100%-Breite von der Hintergrundfarbe abhängt, wäre es hilfreich, wenn die Hintergrundfarbe während der 100-wide-Anwendung auf einfache Art auswählbar wäre.

Hier noch ein paar Einsteiger-Tipps zur Bedienung von Axure:

  • Proportional Vergrößern/Verkleinern: „SHIFT + an der Ecke ziehen“
  • Element drehen: „STRG + an einer Ecke ziehen“
  • Ecken abrunden: z.B. bei einem markierten Rechteck am kleinen Dreieck in der oberen linken Ecke ziehen
  • Nur manche Ecken abrunden: Rechtsklick und unter Select Shape die passende Form auswählen, z.B. Left (vgl. Abbildung 3. Das klappt z.B. NICHT bei Formularelementen)
  • Markiertes Elemente duplizieren: „STRG + Element ziehen“
  • Mit „SHIFT + Element ziehen“ verschiebt man die Position nur waagerecht oder senkrecht, mit „SHIFT + Pfeiltasten“ verschiebt man in 10px-Schritten
  • Beim Ausrichten von 2 Objekten bleibt das zuerst ausgewählte Objekt auf seiner Position, das zweite richtet sich daran aus.
  • Ein „Hotspot“ dient dazu, diese Stelle klickbar zu machen. Das ist z.B. nützlich wenn ein Screenshot als Hintergrund verwendet wird.