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 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