Centigrade GmbH
Über den Tellerrand geschaut

Markus Weber

Die Vorstellungskraft erweitern: Wireframes und visuelles Design

4. Februar 2009 von Markus Weber

Wireframes sind ein wesentliches Werkzeug für den Usability Engineer. Sie lassen sich mit geringem Aufwand erstellen und unterstützen die Kommunikation bezüglich grundlegendem Layout und Interaktionsdesign. Meistens werden nur geringe bis gar keine Ressourcen auf das visuelle „Styling“ der Wireframes verwendet. Dies gewährleistet, dass Ressourcen auf das Wesentliche fokussiert werden – sie fließen damit nicht in die Gestaltung visueller Details, die voraussichtlich später ohnehin signifikanten Veränderungen unterliegen würden.

Fehlt Mitgliedern des Designteams oder anderen Stakeholdern die Erfahrung im Umgang mit Wireframes, können Probleme auftauchen, die ein User Interface Design Projekt beeinträchtigen. Zwei davon werden im Folgenden beschrieben.

Sich visuelles Design vorstellen…

Für einen Nicht-Designer kann es schwierig sein, sich ein mögliches visuelles Design eines zukünftigen User Interface rein auf der Basis eines Wireframe vorzustellen. In extremen Fällen halten Stakeholder ihr Feedback zu Wireframes komplett zurück mit der Anmerkung, dass es noch zu früh ist, das User Interface ernsthaft zu diskutieren. (Dies könnte ein geeigneter Zeitpunkt für den Usability Engineer sein, den Stakeholdern zu erläutern, dass es bei einem User Interface auf mehr ankommt als nur auf ein visuell ansprechendes Erscheinungsbild.)

Um Mitgliedern des Projektteams eine Vorstellung davon zu geben, wie auf der Grundlage eines Wireframe später ein visuelles Design entsteht, kann es hilfreich sein, eine Art „Styling light“ auf einen Wireframe anzuwenden oder ein reales „Vorher-Nachher“ Beispiel eines Wireframe und des späteren visuellen Designs zu zeigen. Dies hilft den Stakeholdern dabei, ein Gefühl dafür für die Entwicklungen zu bekommen, die sich ergeben, wenn ein visueller Designer einen Wireframe als Grundlage für seine Arbeit heranzieht. Im günstigsten Fall ist es keine allzu große Anstrengung mehr für Stakeholder, sich ein zukünftiges visuelles Design auf der Basis eines Wireframe ausmalen zu können, nachdem sie ein Beispiel wie das untenstehende gesehen haben.

From Wireframe To Visual Design

…und von visuellen Elementen abstrahieren

In anderen Fällen beinhalten Wireframes einzelne visuelle Elemente, wie z.B. Branding Grafiken. Diese wurden aber noch nicht visuell neu gestaltet, sondern von existierenden Designs oder Prototypen übernommen, z.B. aus Bequemlichkeit oder um bestimmte Bereiche des Wireframe schnell zu füllen. Dies wiederum kann zu unangemessenen Diskussionen bezüglich des „Look“ des zukünftigen User Interface führen; eventuell lehnen einige Stakeholder das „inkonsistente“ User Interface schlicht ab, weil sie nicht unterscheiden können zwischen Elementen des Wireframe, die essenziell für die aktuelle Diskussion sind und solchen, die aktuell irrelevant sind.

Dies zeigt, dass ein zu frühes „Aufpeppen“ eines Wireframe mit visuellen Elementen gefährlich sein kann, wenn der Status des Wireframe, bzw. seiner Bestandteile, nicht klar kommuniziert wird. Es empfiehlt sich, die betreffenden Wireframes mit einer Anmerkung zu versehen (entweder schriftlich oder mündlich, abhängig von Präsentationssituation), die den Scope des Wireframe klar kommuniziert und es dem Publikum ermöglicht, zu entscheiden, ob bestimmte Aspekte überhaupt (schon) diskutiert werden sollten. Es ist häufig auch eine gute Idee, sich selbst zu fragen, ob das „Aufpeppen“ wirklich erforderlich ist und davon Abstand zu nehmen, wenn die Antwort negativ ausfällt.

Um Probleme wie die oben beschriebenen zu vermeiden, kann es sich als hilfreich erweisen, Stakeholdern eine kurze Einführung in Zweck und Stellenwert von Wireframes zu geben, um ein gemeinsames Verständnis für Design-Diskussionen zu schaffen. Das Etablieren realistischer Erwartungen und die Unterstützung des Publikums dabei, seine Vorstellungskraft ein wenig zu erweitern kann entscheidend zum effizienten Einsatz von Wireframes beitragen. Dieser wiederum begünstigt die Entstehung fundierter Interaktionsdesigns, die eine perfekte Grundlage für das folgende visuelle Design darstellen.