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.