alps hypertexte

Grafische Mockups

Grafische Mockups haben den Vorteil,

• dass sie relativ schnell und kostengünstig zu produzieren sind,
• dass grafische Elemente größtenteils für die Implementation übernommen werden können.

Die Nachteile sind:

• Sie bilden meist nur einen Zustand der Website ab. Wenn man etwa das Aussehen einer elastischen Seite in verschiedenen Auflösungen darstellen würde, wäre der Vorteil der schnelleren und günstigeren Produktion gegenüber XHTML-Mockups dahin.
• Der Grafiker muss sehr gute Webdesign-Kenntnisse besitzen. Wenn komplexere Techniken angewendet werden sollten (wie bei z.B. Sliding-Doors-Sachen), müssen Extra-Grafiken erstellt werden, damit der Vorteil der Wiederverwertbarkeit der grafischen Elemente erhalten bleibt. (Bei Sliding-Doors-Techniken liegen andere Grafiken zu Grunde, als später in der normalen Browseransicht zu sehen ist)
• Sie besitzen keine interaktiven Möglichkeiten und können nur bedingt bei "low level"-Usability-Tests eingesetzt werden.
• Aspekte der Barrierefreiheit können nur oberflächlich berücksichtigt werden.
• Der Aspekt des "Code Designs" wird im grafischen Mockup nicht berücksichtigt.

XHTML/CSS-Mockups

XHTML/CSS-Mockups haben folgende Vorteile:

• Sie können alle Zustände einer Website originalgetreu abbilden (alle Auflösungen, Systeme etc.)
• Sie können sehr gut für User-Tests eingesetzt werden (Klick Dummies).
• Der XHTML/CSS-Code kann inklusive vereinbarter Code-Styling-Konventionen in die Softwareentwicklung übernommen werden.
• Sie können in jedem Browser geöffnet und mit einem kostenlosen Editor bearbeitet werden. Für die Weiterverarbeitung werden keine Lizensen für proprietäre Software vorausgesetzt.

XHTML/CSS-Mockups haben aber auch Nachteile.

• Ihre Produktionszeit ist deutlich höher.
• Grafische Elemente müssen extra produziert werden.

Produktionszeit von XHTML/CSS-Prototypen verringern

Wie man oben sieht, ist also der größte Nachteil von XHTML-Mockups die Produktionszeit. Es dauert wesentlich länger, bis man zu einem Endergebnis kommt, der es im Detail mit einem grafischen Mockup aufnehmen kann. Nach meinen Erfahrungen 2-3 mal so lang, was aber sehr variabel mit den Skills eines Grafikers und Frontenders und nicht unbedingt repräsentativ ist.

Da diesem Nachteil viele Vorteile gegenüberstehen, bin ich ein Freund von XHTML/CSS-Prototypen. Um sie auch wirtschaftlich einsetzen zu können, muss das Problem der ineffizienten Produktion gelöst werden. Effiziente Produktion bedeutet: So orignalgetreu und detailliert wie möglich (damit später im Softwarentwicklungsprozess möglichst viel übernommen werden kann) und dabei so schnell und sauber wie möglich.

Dieses Problem löst man zum Beispiel, in dem man sich ein Set diverser Prototypen zulegt und diese Prototypen in 2 Phasen entwickelt. Die erste Phase nenne ich "die nackten Mockups". Die Prototypen werden hier wirklich nur prototyphaft entwickelt. Es sind Markup- und CSS-Anweisungen implementiert, aber noch kein Corporate Design. Die Prototypen sind fertig ausgerichtet, beinhalten aber nur rudimentäre Farbanweisungen und variieren idealerweise mit geringen Modifikationen. Um den Layout-Typ (fest, elastisch oder em-basiert) festzulegen, sollte man idealerweise nur an einer CSS-Anweisung herumschrauben müssen, wie z.B. im Eintrag Drei-Spalter, faux absolute positioniert erläutert. Die allgemeine Schriftgröße der Site sollte auch nur an einer Stelle im Stylesheet veränderbar sein und alle anderen Größen sollten dabei proportional mitskalieren, wie in der typo.css. Ein drittes Beispiel wäre das Formularmockup, dessen Ausrichtung der Labels nur von einer fieldset-Klasse abhängt und ansonsten mit gleichem Markup auskommt.

In der zweiten Phase kommen dann die CI-Anpassungen. Diese packt man in der Implementationsphase am besten in ein eigenes Stylesheet (etwa forms_colors.css) für das Aussehen der Formulare und lädt sie hinter der forms.css, damit Farbanweisungen vom nackten Prototypen überschrieben werden.

Die Ausnahmen von diesen Prototypen definiert man in modulabhängigen Stylesheets. Wenn ein Formular auf der Nachrichtenseite etwas anders aussieht, als alle anderen Formulare auf der Site, packt man die differierenden Anweisungen in die mod_messages.css und lädt diese nach selbem Muster nach den allgemeinen Mockup- und CI-Dateien-Styles.

Ein "Framework" kann also dabei helfen, die Effizienz bei der Erstellung von XHTML/CSS-Mockups zu steigern. Außerdem können aus früheren Tests gewonnene (Usability-)Erkenntnisse ins Framework eingepflegt und beim nächsten Projekt wiederverwendet werden.