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