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.

Webwicklerin vs. Axure – Das Duell

Eine persönliche User Experience

Kurzfassung:

Dies ist ein persönlicher Erfahrungsbericht über meine ersten Gehversuche mit dem Prototyping-Tool Axure, von meiner Motivation über die Eindrücke und Erkenntnisse bis hin zur Bewertung einzelner Funktionalitäten anhand der 10 grundlegenden Usability-Heuristiken für User Interface Design von Jakob Nielsen.

Axure ist meines Erachtens unnötig schwer zu erlernen, aber bietet sehr viel, so dass es diesen Ringkampf wert sein könnte.

Webwicklerin vs. Axure – Der Anfang

Die User Experience wird üblicherweise aus guten Gründen von unbeteiligten, „neutralen“ Beratern beurteilt, die das Nutzungserlebnis von Anwendern im Umgang mit einem interaktiven System beobachten und untersuchen, mit dem Ziel es möglichst gut (im Sinne der Anwender) zu gestalten.

User Experience ist ein umfassendes, ganzheitliches Konzept, das nicht nur das Verhalten der Anwender betrachtet, sondern auch ihre Emotionen, psychologischen und physiologischen Reaktionen und ihre Erwartungen einschließt, die mit der Nutzung des Systems (währenddessen und sogar davor und danach) verbunden sind.

Seit kurzem arbeite ich mich in Prototyping mit der Software Axure ein. Axure ist ein komplexes interaktives System, das für mich den seit vielen Jahren größten Lernaufwand erfordert (vergleichbar vielleicht mit der Einarbeitung in Photoshop). Als alte Empirikerin wage ich hier das Experiment, meine persönliche User Experience mit Axure zu durchleuchten und darzustellen.

Auch wenn diese Methode zwangsläufig subjektiv und egozentrisch ist, erhoffe ich davon Erkenntnisse über die Usability und die User Experience von Axure. (Und falls ich eines Tages Axure unterrichten sollte, wird es nützlich sein, mich an die User Experience als Lernender zu erinnern.)

Ich startete am 8. Februar 2016 mit einem kostenlosen Probemonat der Axure RP Version 7.
Da für die User Experience die Vorerfahrungen und Erwartungen wesentlich sind, beginne ich damit:

Vorerfahrungen und Erwartungen

Bisher habe ich Webdesigns mit einer Mischung aus Entwerfen mit Photoshop und In-Browser-Programmierung erarbeitet. Mein typischer Webdesign-Ablauf verläuft in folgenden sechs Phasen:

  1. Entwicklung erster Designkonzepte mit Photoshop, meist mehrerer Alternativen.
  2. Wenn die Entscheidung für eine Alternative gefallen war: Programmierung einer schlichten HTML-Umsetzung für eine Seite (meist die Startseite) mit einem ersten CSS-Stylesheet, mit Dummy- oder Beispielcontent. Zunächst unabhängig vom jeweiligen CMS oder Shopsystem habe ich den grundlegenden Webseitenaufbau von Hand mit einem Editor gecodet, z.B. die notwendigen Div-Container mit dem gewünschtem Flow- und Adaptationsverhalten.
  3. Verfeinerung und Ausarbeitung des Webdesigns, unter ständigem Wechsel von Austesten und Umsetzen des Designs im Browser und Verfeinerung von Details in Photoshop, z.B. der notwendigen Bilder für Hintergründe, Buttons etc.
  4. Einbau/Anpassung des Webdesigns für das CMS/Shopsystem auf Basis eines passenden Templates. Einpflegen von Inhalten und Prüfung aller verschiedenen Inhalts-Ansichten, die das CMS/Shopsystem bietet und in diesen Webauftritt vorkommen.
  5. Verfeinerung und Ausarbeitung aller weiteren Ansichten der Inhalte, wiederum im Wechsel von Tests des CMS/Shoptemplates in verschiedenen Browsern mit der Ausarbeitung von Details in Photoshop.
  6. Austesten des Webdesigns mit weiteren Browsern, Monitoren, Geräten… inklusiver notwendiger Anpassungen/Verfeinerungen.

Die Plus- und Minuspunkte dieser Methoden sind aus meiner Sicht:

Zu Photoshop:

  • Eine „weiße Leinwand“ und Designtools, um sie zu füllen
  • Die große Bandbreite der Werkzeuge, die zum Designen zur Verfügung stehen
  • Durch das Arbeiten mit Ebenen lassen sich Element-Gruppen bilden, die sich beliebig platzieren und/oder kopieren lassen
  • Durch das Ein- und Ausblenden von Ebenen lassen sich verschiedene Ansichten produzieren und als Bilder festhalten
  • Man kann großformatig arbeiten oder kleinste Details betrachten und gestalten.
  • Das maximale Format muss im Vorfeld festgelegt werden. Zwar kann man an Details heran zoomen oder das Format im Nachhinein beschneiden oder auch vergrößern, aber auf diese fixe Größe ist man bei der Arbeit an dieser Datei beschränkt. Das ist ein Unterschied zum Web, bei dem Webseiten quasi unendlich lang oder breit sein oder sich an eine Inhaltsmenge anpassen können.
  • Alles ist statisch. Funktionen, Anpassungen, Veränderungen lassen sich nur simulieren durch verschiedene Ansichten. (Es kann sein, dass dies in neueren Photoshop-Versionen etwas besser geworden ist.)
  • Mit Photoshop lassen sich auch Designs gestalten, die sich im Web gar nicht oder nur mit viel Aufwand umsetzen lassen oder dort weniger gut zur Geltung kommen als z.B. gedruckt. Die Umsetzbarkeit des Designs fürs Web muss man selbständig berücksichtigen.

Vor- und Nachteile von Webdesign-Entwicklung im Browser:

  • Realistische Bedingungen: Beliebig große Webseiten, adaptive Divs, Aussehen im Browser etc.
  • Diese Arbeit ist Teil der Umsetzung, der Code und das CSS können übernommen werden
  • Die Browser-Entwicklertools (unter F12 aufrufbar) sind hilfreich beim Anpassen von Details
  • Dynamik mit Menüs, Buttons, Links, Formularen, Scrollverhalten, Adaptivität etc.
  • Das Ergebnis kann einfach auf geschütztem Webspace hochgeladen und von jedem Kollegen/Kunden mit Zugang begutachtet und getestet werden
  • Ungeeignet für den Entwurf kleiner Details
  • Umständliches Arbeiten mit ständigem Wechsel zwischen verschiedenen Tools

Meine Erwartungen an Axure vor Beginn:

Ich habe ein paar Blogbeiträge über Axure gelesen und erwarte:

  • Ein Prototyping-Tool
  • Schnelleres Erstellen von Webdesigns (Phasen 1, 2 und 3), von Wireframes bis zu klickbaren Prototypen
  • Eine gewissen Programmiermöglichkeit, z.B. funktionierende Buttons, Links, Menüs

Ich erwarte NICHT:

  • Dass Axure Photoshop ersetzt, zumindest nicht für die Erstellung der Design-Feinheiten
  • Das die Phasen 4, 5 und 6 verkürzt werden oder Axure dabei überhaupt helfen kann

Außerdem erwarte ich eine relativ kurze Einarbeitungszeit, da ich über Erfahrung im Webdesign und in Webprogrammierung verfüge und in vielen dazugehörigen Tools Übung habe.

Webwicklerin vs. Axure: Runde 1 und 2 – Die Einstiegsvideos von Axure

Runde 1

Anmeldung, Download und Installation von Axure funktionieren schnell und einfach. Das macht Mut, und mir gefällt die Begrüßungs-eMail, in der mir Video-Tutorials für den Axure-Einstieg empfohlen werden, und die Aussicht, dass ich dafür nur eine Stunde benötige.

Frohgemut mache ich mich ans Werk. Ich schaue mir ein Video am Stück an und probiere die Übung anschließend selbst aus, mit kleinen Variationen und Experimenten. Das macht Spaß und erste Erfolge zeigen sich schnell. (Ja, ich weiß, viele Emotionen. Die gehören zur User Experience.)

Aber mit einer Stunde komme ich auf diese Weise nicht annähernd hin. Nach 3 Stunden habe ich 3 Videos geschafft, inklusive des Multiple-Choice-Quizzes am Ende jeder Lektion, und bin geschafft, aber zufrieden.

Ergebnis Runde 1:

1:0 für mich
Gesamtergebnis bisher:

Axure Webwicklerin
0 1

2. Runde: Weitere Einstiegsvideos

Erst ein paar Tage später komme ich wieder zum Axure-Üben und stelle fest, dass ich einiges leider wieder vergessen habe. Die nächsten 3 Videos stellen hohe Ansprüche an meine Sprachkenntnisse – ich dachte immer, Englisch wäre kein Problem für mich – und sogar an meine Programmierkenntnisse.

Einige Axure-Fachworte kann ich mir nicht merken und auch nicht, wo sich welche Funktionalität verbirgt. In den Multiple-Choice-Quizzes wird sogar nach den Bezeichnungen für die Oberflächen-Bereiche gefragt, die für mich total abstrakt sind und die ich ebenfalls gerne vergesse.

Daher muss ich die Videos mehrmals sehen, häufig anhalten und mich exakt an die Vorgehensweise der Videos halten. Experimente und Variationen sind nicht mehr drin, da ich noch nicht nachvollziehen kann, was da genau geschieht.

Mir fehlen bei den superkurzen Videos die Hintergründe und Erklärungen. Die Videos zeigen nur das WIE – sie verlieren kein Wort über das WARUM. So fällt mir Lernen und Behalten deutlich schwerer, ganz zu schweigen vom Variieren oder Anpassen.

Am Ende des Abends habe ich die Videos zwar formell bewältigt, aber ich bin unzufrieden und genervt. Ich habe viel zu wenig verstanden, was wozu gut ist und was man wo warum tun sollte.

Ergebnis Runde 2:

Axure hat mich fertig macht (1:0 für Axure).
Ergibt insgesamt:

Axure Webwicklerin
1 1

Webwicklerin vs. Axure – Das Testprojekt für Runde 3

Ich nehme mir zum Lernen ein Übungsprojekt vor: ein neues Webshop-Template für ein Shopsystem. Schnell bringe ich erste Entwürfe mit einem Stift zu Papier (siehe Abbildung 1, Abbildung 2 und Abbildung 3) und spüre sofort

Vor- und Nachteile von Papier-Designs:

  • Sie lassen sich leicht und schnell erstellen und eigenen sich gut zum Visualisieren und Kommunizieren über das Design.
  • Die Vorläufigkeit ist offensichtlich und es gibt keine Hemmschwelle bezüglich Änderungen und Weiterentwicklungen (die Ablage P ist nicht weit).
  • Der Schwerpunkt liegt auf dem allgemeinen Seitenaufbau, nicht auf Details.

Aber:

  • Die einheitlichen Teile des Designs, die sich auf vielen oder gar allen Unterseiten des Webdesigns befinden, müssen immer wieder neu gezeichnet werden.
  • Die Maße müssen auf jeder Seite neu geschätzt/übertragen werden.
  • Man ist auf das Papierformat beschränkt. Schnell denkt man ans Kopieren, Auseinanderschneiden und kombinierbare Puzzleteile.
Abbildung 1: Papier-Wireframe der Startseite
Abbildung 1: Papier-Wireframe der Startseite
Abbildung 2: Papier-Wireframe der Produktlisten-Seite
Abbildung 2: Papier-Wireframe der Produktlisten-Seite
Abbildung 3: Papier-Wireframe der Produktdetail-Seite
Abbildung 3: Papier-Wireframe der Produktdetail-Seite

Genau das wünsche ich mir von einem Prototyping-Tool:

  • zügiges, einfaches Arbeiten.
  • Erstellung von Layouts, Festlegung von Formaten,
  • Einfache Erstellung von größeren „Puzzleteilen“, die ich auf allen Unterseiten wiederverwenden kann, und
  • Einfaches Verschieben, Kombinieren und Kopieren dieser Designblöcke.
  • Beliebig lange, scrollbare Seiten.
  • Idealerweise variable Seitenbreiten mit adaptivem Verhalten.

Zunächst lasse ich die Axure-Videos links liegen und nehme mir vor, zunächst einfach das Erstellen und Anordnen der Designblöcke zu üben, durch schlichte Umsetzung meiner Papierskizzen mit Axure, für drei verschiedenen Shop-Webseiten:

  • Startseite,
  • Produktlisten-Seite, z.B. bei Aufruf einer Kategorie, und
  • Produktdetail-Seite.

Erst wenn das klappt, möchte ich im nächsten Schritt die Seiten miteinander verlinken und „animieren“ (z.B. Bilderslider, Beispiel-Menü).

Webwicklerin vs. Axure – Runde 3: Positionierungs-Probleme

Schon die „einfache“ Übertragung des Papierdesigns in Axure macht mir Schwierigkeiten, insbesondere die Positionierung der Elemente.

Es geht schon los mit einer Umgewöhnung bei der Positionierung der Elemente: Im Gegensatz zu anderen Programmen wie Photoshop oder Powerpoint wählt man in Axure nicht erst das Element aus, das man einfügen möchte (Klick) und zieht dann die Größe mit der Maus an der Stelle auf, wo man es haben möchte. Sondern man muss in Axure das gewünschte Element festhalten und an die richtige Stelle ziehen (Drag und Drop). Im zweiten Schritt kann man es dann auf die gewünschte Größe skalieren.

Ich gewöhne mich zwangsläufig schnell daran, aber es stört mich natürlich und ich empfinde es als Usability-Problem: Warum muss Axure hier von den üblichen Vorgehensweise abweichen?
Aber das ist nur eine Kleinigkeit, mit der man leben kann.

Es gibt auch Grids und Guides, die sich einstellen lassen wie ich es brauche.
Außerdem lässt sich zudem die Position eines ausgewählten Elements pixelgenau im Widget Properties and Style Pane sehen und anpassen. Fein.

Zusätzlich wünsche ich mir noch die folgenden Positionierungsmöglichkeiten:
a) Boxen wie z.B. Header, die sich quer über die gesamte Bildschirmbreite erstrecken sollen.
b) Elemente (immer) mittig auf dem Bildschirm platzieren
c) Adaptives Verhalten von Boxen, z.B. Breite je nach Bildschirmgröße und Höhe je nach Inhaltsmenge.

In den Übungsvideos kam Positionierung auf verschiedene Arten vor, u.a. bei Dynamischen Panels und bei den Mastern. Allerdings wurde es dort wiederum nur kurz gezeigt, aber nicht erklärt. Es gab sogar Fälle, in denen ein Element sowohl zum Dynamischen Panel als auch zum Master gemacht wurde.

Die Positionierung für diese beiden Klassen ist jedoch unterschiedlich (leider ohne Begründung in den Videos). Bedauerlicherweise bieten nur Dynamische Panels die Optionen Pin to Browser und 100% wide (Browsers only). Letzteres klingt passend für meinen Positionierungswunsch a): Header mit 100% Breite im Browser.

Aber leider klappt es nicht, wie ich es erwarte: Nämlich ein Element zum Dynamischen Panel machen und die Option 100% wide (Browsers only) einfach per Klick zuweisen. In keinem meiner Browser (IE, Firefox, und Chrome in aktuellen Versionen unter Windows 7) wird der Header mit 100% Breite angezeigt. Er bleibt bei einer fixen Breite, die sich auch nicht adaptiv mit der Fenstergröße ändert. Die korrekte Umsetzung einer 100%-Breite muss ich später mal näher ergründen.

Bleibt noch der Master. Er lässt sich bei der Erstellung positionieren über die sogenannte Drop Behaviour (siehe Abbildung 4), bei der zur Auswahl stehen:
a) Place anywhere,
b) Lock to Master Location und
c) Break away.

Abbildung 4: Drop Behavior
Abbildung 4: Drop Behavior

Hier schwächeln meine Englischkenntnisse, was ist der Unterschied zwischen Place anywhere und Break away?
Anyway, für mich passend klingt sowieso Lock to Master Location, das vermutlich den Master auf jeder Seite gleich positioniert. Es lässt sich auch festlegen, auf welchen Seiten der Master angezeigt werden soll. Fein.

Aber leider klappt das auch nicht so, wie ich erwarte: Mein mühsam (auf der Startseite) gebauter Header-Master erscheint auf den anderen Seiten an falscher Stelle. Und wenn ich die Position des Headers im eigenen Master-Fenster ändere (in dem er einfach ganz links oben klebt, ohne dass ich ihn mit Absicht dort positioniert hätte, siehe Abbildung 5), wird er auf der Startseite doppelt angezeigt, einmal an richtiger und einmal an der falschen Position.

Abbildung 5: Master-Fenster mit Positionierung des Masters bei den Koordinaten (0/0)
Abbildung 5: Master-Fenster mit Positionierung des Masters bei den Koordinaten (0/0)

Ich probiere viele Positions-Kombinationen von Dynamischen Panels und Mastern aus und finde keine Möglichkeit, den Header überall korrekt zu platzieren. Ich lösche den Master und erstelle ihn neu für weitere Experimente – ohne Erfolg.

Wenig hilfreich ist, dass zwischenzeitlich die Anzeige im Browser anscheinend nicht aktualisiert wird oder gar abstürzt. Muss ich die bei jedem Refresh neu in Axure generieren?

Also durchsuche ich nach Kräften das Axure-Forum auf der Suche nach Antworten. Ich finde dort zwar vieles, aber keine Lösung meines Header-Positionierungs-Problems. Anscheinend bin ich der einzige Idiot.
Stattdessen treffe ich im Forum auf einen interessanten Begriff im Zusammenhang mit Mastern: Instanz. Es gibt Instanzen von Mastern mit verschiedenen Eigenschaften für ein- und denselben Master? Wo zum Geier kann ich die Vererbung regeln?

Ich brauche offensichtlich ein Buch zum Thema und suche bei Amazon nach Axure-Fachliteratur. Und finde nur sehr wenige, mit wenigen und durchaus kritischen Kundenrezensionen.
Entnervt und gefrustet gebe ich für heute auf.

Ergebnis Runde 3:

Eindeutig 1:0 für Axure (gefühlt eher 10:0).
Gesamtergebnis bisher:

Axure Webwicklerin
2 1

Webwicklerin vs. Axure – Runde 4: Testprojekt vereinfacht

Es dauert Wochen, bis ich wieder dazu komme, mich mit Axure zu befassen. In der Zwischenzeit ist der kostenlose Probemonat abgelaufen. Glücklicherweise werde ich rechtzeitig in einer freundlichen eMail von Axure daran erinnert, und es wird mir eine kostenlose Verlängerung des Probezeitraums um 2 Wochen angeboten, die ich dankbar annehme. Sehr nett.

Den Frust bei meiner letzten Runde noch lebhaft vor Augen, nehme ich mir eine weitere Vereinfachung meines Übungsprojektes vor: Erst mal will ich nur Elemente an den richtigen Stellen platzieren. Sonst nichts. Keine Links, keine dynamischen Panels, noch nicht einmal ein Menü. Als Header-Platzhalter verwende ich eine schlichte Box (sozusagen eine „Black Box“).

Und ich verringere meine Ansprüche und verzichte auf 100% Breite oder adaptives Verhalten. Einfach die gute alte „Fixed Width“ und fertig, solange, bis ich die Positionierung „auf dem Schirm“ habe.
Und Probieren geht über Studieren, also verzichte ich zunächst auf Videos, Forum und Bücher.

Wichtig ist mir zuerst der Header, der partout auf jeder gewünschten Seite erscheinen soll, immer an derselben Position. Darum konzentriere mich zunächst auf Master.

Erkenntnis, das geht:

Header-Box auf einer Seite (hier: Home) anlegen und zum Master erklären. Dabei muss man bereits die Drop Behavior festlegen (Place anywhere, Lock to Master Location und Break away, wir erinnern uns). Der Trick ist: Hier Lock to Master Location auswählen.

Diese Drop Behavior eines Masters kann zwar anscheinend auch später noch geändert werden, aber der Eindruck täuscht anscheinend (siehe auch Abbildung 6. Wie sich später heraus stellt, irre ich mich hier.): Wenn man bei der Erstellung nicht Lock to Master Location ausgewählt hat, erscheint der Master auf allen anderen gewählten Seiten ganz oben links.

Abbildung 6: Vorsicht Falle? Eine Änderung der Drop Behavior bewirkt anscheinend nichts
Abbildung 6: Vorsicht Falle? Eine Änderung der Drop Behavior bewirkt anscheinend nichts

Im eigenen Master-Fenster wird der Master übrigens FAST immer in der oberen linken Ecke positioniert, auch wenn die Master Location auf der Erstellseite eigentlich eine andere ist. Im Master-Fenster kann man die Position also nicht erkennen. Auch sonst nirgends, leider. Auch im Widget Properties and Style Pane (im Folgenden kurz Style Pane genannt) wird die Position nicht mehr unbedingt korrekt angezeigt, sobald man ein Element zum Master gemacht hat (auch nicht auf der ursprünglichen Seite, siehe Tabelle 1: Masterpositionen nach Drop Behavior).

Die Masterposition auf einer Seite kann aber im Style Pane geändert werden. Das wirkt sich dann allerdings nur auf die Master-Position auf dieser Seite aus, nicht auf die Position auf den anderen Seiten (hier haben wir es wohl mit einer Instanz zu tun), und auch nicht im eigenen Master-Fenster.

Master, die nicht mit Lock to Master Location kreiert sind, können in ihrem Master-Fenster verschoben werden an eine andere Position, auf der sie dann auf den anderen Seiten dargestellt werden, aber nicht auf der ursprünglichen Seite.
Die Masterposition im Master-Fenster kann auch im Style Pane gesehen und geändert werden und wirkt sich dann auf die Positionierung auf ALLEN (für den Master ausgewählten) Seiten aus.

Nachdem ich das herausgefunden habe, gelingt es mir, alle einfachen Element-Blöcke (mit fixierter Größe) an den gewünschten Stellen zu positionieren. Endlich habe ich mein bescheidenes Testprojekt umsetzen können.

Ergebnis Runde 4:

Ich beende den Tag zufrieden und werte ihn als Erfolg: 1:0 für mich.
Gesamtergebnis bisher:

Axure Webwicklerin
2 2

Webwicklerin vs. Axure – Runde 5: Master-Tests

Gedankengänge / mentales Modell

Was gut klappt: Nachdem ich die Topnavigation in Runde 5 nur als „Black Box“ (und als Master) angelegt hatte, kann ich nun im Master-Fenster diese Box ergänzen mit Buttons zu den Seiten. Ohne dass ich weitere Einstellungen vornehme, erscheinen diese Links nun auf allen Seiten an der richtigen Position.

Meine Tests zur Masterplatzierung:

Um die Positionierung von Mastern in Axure besser zu verstehen, habe ich sie systematisch variiert und die Ergebnisse in Tabelle 1 zusammen getragen.

Test 1: Drop Behavior: Place Anywhere

Bei Erstellung des Masters auf der Startseite habe ich als Drop Behavior: Place Anywhere ausgewählt. Dann ist er nur auf der Startseite zu sehen, an der platzierten Stelle.
Im Master-Fenster ist er links oben in der Ecke.

Abbildung 7: Auswahl bei Hinzufügen des Masters zu anderen Seiten
Abbildung 7: Auswahl bei Hinzufügen des Masters zu anderen Seiten

Beim Hinzufügen des Masters zu den anderen Seiten habe ich die Wahl zwischen Lock to location in master und Specify Location (bei dem ich die Position in Pixel von der oberen Ecke angeben kann, siehe Abbildung 7), sowie Send to back. In diesem Auswahlfenster steht unten Note: This action cannot be undone (Sehr ermutigend. Warum nicht?). Außerdem gibt es die Option Only add if the page does not already contain the master, die standardmäßig ausgewählt ist.

Gewählt habe ich Lock to location in master und dabei erwartet, dass damit die Original-Position (von der Erstellung auf der Startseite) gemeint ist. Das ist jedoch ein Irrtum. Stattdessen ist die Position im Masterfenster gemeint: Links oben in der Ecke. Und genau an dieser Position erscheint der Master nun auf den hinzugefügten Seiten.

Was die „Action cannot be undone“-Warnung angeht: Ich verstehe noch nicht, worauf sie sich bezieht. Kann ich das Zuordnen des Masters zu einer Seite nicht mehr rückgängig machen? Oder kann ich die gewählte Position im Nachhinein nicht mehr ändern? Beides scheint nicht zu stimmen.
Die Position des Master-Elements in seinem Masterfenster kann ich ändern, mit Drag und Drop oder im Style Pane.
Dann erscheint das Master-Element auf den hinzugefügten Seiten an der neuen Position. Im Zweifel auch über anderen Seitenelementen, also (in CSS) „absolut positioniert“. Jedoch nicht auf der Startseite, die bleibt unverändert. (Verwirrend.)

Auf der Startseite kann ich das Master-Element aber auch neu positionieren, per Drag and Drop oder pixelgenau im Style Pane, in dem ich auch die aktuelle Position angezeigt bekomme.

Ebenso kann ich auf jeder später hinzugefügten Seite den Master neu positionieren. Allerdings dort nicht mehr per Drag and Drop, sondern nur im Style Pane, in dem die Position des Master-Elements nun aber mit (0/0) angegeben ist (d.h. Position mit den Koordinaten 0px von links, 0px von oben) – auch wenn das nicht der Master-Position im Masterfenster entspricht. Diese (0/0)-Koordinaten beziehen sich nun auf die Position im Masterfenster und lassen sich relativ dazu ändern (auch mit Negativ-Werten für weiter links bzw. weiter oben).

Auch die Drop Behavior lässt sich anscheinend mit Rechtsklick auf den Master umstellen, z.B. auf Break Away (siehe Abbildung 6). Die ausgewählte Option ist mit einem Haken gekennzeichnet. Dadurch ändert sich auf keiner Seite die Position des Master-Elements.
(Also worauf bezieht sich die Warnung „cannot be undone“?)
Wenn ich anschließend die Position des Master-Elements im Masterfenster wieder ändere (auf relativ dicht oben links), passiert wieder etwas Überraschendes: Auf der Startseite bleibt die Position unverändert. Auf der Produktdetail-Seite hingegen ändert sich die Position des Master-Elements nun auf die neue Position im Masterfenster.

Und auf der Produktlisten-Seite, auf der ich die Position des Master-Elements mit Negativ-Werten korrigiert hatte, ist das Master-Element nun verschwunden. Bedeutet das Break Away? Oder rückt es durch die Negativ-Werte auf die neue Position aus dem Fenster heraus?

Lösung: Die individuellen Negativ-Koordinaten auf der Produktlistenseite haben das Master-Element außerhalb des sichtbaren Bereichs positioniert. Um den Master auf der Produktlistenseite wieder sehen und anpassen zu können, muss ich die Position des Master-Elements im Masterfenster korrigieren.

Leider erkenne ich keinen Unterschied zwischen der Drop-Behavior: Break Away und Place Anywhere.
Liegt es daran, dass sich die Drop-Behavior „in Wahrheit“ gar nicht geändert hat, obwohl nun Break Away als ausgewählt angezeigt wird?

Also stelle ich die Drop-Behavior erneut um, diesmal auf Lock to Master Location.
Das ändert nichts an den bisherigen 3 verschiedenen Positionen auf meinen drei Seiten. Ich kann die Positionen genau wie bisher ändern. Auch die Position im Masterfenster ändert sich nicht.
Hat sich die Drop-Behavior nun geändert oder nicht?
Falls nicht und auch hier „cannot be undone“ gilt, dann sollte m.E. dringend die Auswahlmöglichkeit einer anderen Drop-Behavior (samt Markierung mit Häkchen) deaktiviert werden, z.B. im Menü ausgegraut.

Als Nächstes möchte ich den Master löschen und für weitere Experimente neu anlegen. Das Löschen klappt nicht, da der Master noch verwendet wird. Er muss erst von allen Seiten entfernt werden (Remove from Pages. Auch das geht also, aber auch hier gibt es die verwirrende Warnung: Action cannot be undone!). Danach ist der Master nur noch im Masterfenster zu sehen. Nun kann er auch dort gelöscht werden.

Test 2: Drop Behavior: Lock to Master Location

Neuer Master kreiert auf der Startseite, diesmal mit Drop Behavior: Lock to Master Location. Im Style-Pane wird die Position sofort wieder mit (0/0) angegeben. Aber im Masterfenster hat das Master-Element nun die Position, an der ich ihn auf der Startseite angelegt habe.

Wieder füge ich den Master den anderen beiden Seiten hinzu mit der Option Lock to location in master. Ergebnis: Das Master-Element ist nun auf allen 3 Seiten an der gleichen Position. Dies ist das Verhalten einer Master-Platzierung, das ich ursprünglich erwartet habe.

Die Position auf den einzelnen Seiten lässt sich genau so anpassen wie bei Test 1.
Wenn ich die Position im Masterfenster ändere, ändert sich die Position entsprechend auf allen Seiten – auch der Startseite! (im Gegensatz zu Test 1) – ggfls. modifiziert durch Änderungskoordinaten auf einzelnen Seiten (genau wie bei Test 1).
Dieses Verhalten entspricht am besten meinen naiven Erwartungen.

Auch hier kann ich den Master auswählen und die Drop-Behavior anscheinend ändern, ohne dass sich an der Position des Elements auf den 3 Seiten etwas ändert.
Bei anschließender Positionsänderung des Elements im Masterfenster wechselt die Position in gleicher Weise auf allen 3 Seiten wie zu Beginn von Test 2 (also auch auf der Startseite) – anscheinend wurde die Drop-Behavior also nicht geändert, trotz geänderten Häkchens.

Test 3: Drop Behavior: Break Away

Neuer Master, neues Experiment: Erstellung diesmal auf der Produktlisten-Seite und mit der Drop Behavior: Break Away. Ergebnis: Auf der Seite erscheint das Masterelement an der angelegten Position, im Masterfenster in der linken oberen Ecke (0/0).

Nach Hinzufügen des Masters zu den anderen beiden Seiten mit Lock to location in master erscheint das Element auf diesen Seiten in der linken oberen Ecke und auf der Produktlisten-Seite weiterhin am ursprünglichen Erstellungsort.
Eine Umpositionierung des Elements im Masterfenster führt zu geänderter Position auf den neu hinzugefügten Seiten, nicht jedoch auf der Erstellungsseite.
Ich erkenne keinen Unterschied zu der Drop Behavior: Place Anywhere.

Na gut. Immerhin weiß ich jetzt, wie ich Masterelemente auf den Seiten platzieren kann, zumindest in „absoluter Positionierung“ und festen, in Pixeln festgelegten Maßen. Hier eine Übersicht über die Positionierung von Mastern:

Tabelle 1: Masterpositionen nach Drop Behavior

Master Master-Position
Drop Behavior Position auf der Erstell-Seite Im Master-Fenster Auf hinzugefügten Seiten
Place Anywhere
master_Erstellseite_place_anywhere
Position z.B. (200/250)

Location lt. Style-Pane: (200/250)

masterfenster0_0
Position (0/0)

Location lt. Style-Pane: (0/0)

master_zugefuegteSeite_plac
Position (0/0)

Location lt. Style-Pane: (0/0)

Lock to Master Location
position_vor_mastererstellung
Position z.B. (200/250)

Location lt. Style-Pane: (0/0)

masterfenster_locked
Position (200/250)

Location lt. Style-Pane: (200/250)

master_zugefuegteSeite_locked
Position (200/250)

Location lt. Style-Pane: (0/0)

Break-Away
master_Erstellseite_breakaway
Position z.B. (200/250)

Location lt. Style-Pane: (200/250)

masterfenster_breakaway
Position (0/0)

Location lt. Style-Pane: (0/0)

master_zugefuegteSeite_breakaway
Position (0/0)

Location lt. Style-Pane: (0/0)

Fazit der Selbstlernphase bisher

Nach vier anstrengenden Runden habe ich Axure soweit „niedergerungen“, dass ich damit einfache Wireframes mit fixierten Maßen erstellen kann. Das wird in Zukunft schnell und einfach gehen und nützlich sein.

Dennoch bin ich unangenehm überrascht davon, wie schwierig die Bedienung ist, selbst bei einfachen, grundlegenden Aufgaben.
Das erstaunt mich umso mehr, da Axure ein bekanntes und beliebtes Tool für Usability-Experten und UX-Designer darstellt. Es macht auf mich den Eindruck, als wäre die Entwicklung von Axure ohne jegliche Userorientierung erfolgt.

Ohne Frage ist das Programm sehr mächtig und bietet ausgefeilte Möglichkeiten, komplexe Prototypen zu bauen. Ich habe mir daher 2 Fachbücher über dieses Programm besorgt (über die ich bei Gelegenheit berichten werde), werde Axure auch kaufen und mich darin üben.

Aber die Bedienung ist für mich nicht intuitiv, und die Axure-Lernvideos bieten mir nicht genügend Hintergrundwissen. Schon allein ein grobes Verständnis für die Master-Platzierung zu entwickeln hat für meinen Geschmack viel zu lange gedauert, und es sind noch zahlreiche Fragen offen.

Daher habe ich an diesem Punkt beschlossen, an einer Axure Schulung teilzunehmen. Darüber werde ich als nächstes berichten.