Archiv

Artikel Tagged ‘UI’

Wireframing

3. November 2010 Keine Kommentare

An Softwareprojekten sind häufig unterschiedliche Spezialisten und Stakeholder beteiligt. Wichtig ist es dann, dass sich die Leute verstehen, sich gut einbringen können und ein gemeinsames Ziel vor Augen haben.

Aus meiner Sicht sind hier visuelle Darstellungen sehr hilfreich. Bei Projekten mit grafischer Benutzeroberfläche verwende ich eigentlich immer Wireframes. Diese bilden eine gemeinsame Gesprächsgrundlage und sind flexibel und einfach veränderbar. Häufig kann man mit den Wireframes auch kleine Usability-Tests machen, ob nun als Paperprototype oder interaktiv mittels PDF oder HTML.

Insbesondere sind Schablonen hilfreich,  die eine handgemalte Benutzeroberfläche (“sketch style”) suggerieren. Denn hier vermeidet man Diskussionen über das spätere pixelgenaue Visuelle Design. Allen Beteiligten ist klar, dass  dies nicht das entgültige Design ist, sondern erst nachgelagert über die Wireframes gezogen wird, denn bei den Wireframes geht es hauptsächlich um das Interaktionsdesign. Sehr gut kann ich mich an Meetings erinnern, bei denen statt der Wireframes visuell gestaltete Photoshop-Entwürfe verwendet wurden, um den Aufbau und die Interaktionen zu besprechen. Statt sich auf das Wesentliche konzentrieren zu können, wurde dann z.B. über die nicht ganz exakte Ausrichtung des Logos etc. gesprochen.

Auf Windows-Computern verwende ich für das Wireframing Visio, für das es eine sehr gute Schablone von GUUUI.com gibt. Ergänzt um ein paar Makros kann ich so sehr schnell Designänderungen durchführen, Ideen ausprobieren und wieder verwerfen ohne viel Zeit und Kosten in Anspruch zu nehmen.

Rechts seht ihr den “sketch style”, den ich sehr mag. Teilweise haben die Elemente der Schablone auch ein assoziiertes Verhalten. Checkboxen kann man z. B. als selektiert, deselektiert oder inaktiv darstellen.

Um nicht ein und dasselbe Element auf jeder Seite neu erstellen oder ausrichten zu müssen, kann man Hintergründe definieren, die sogar voneinander erben können. Legt man also einen neuen Screen an, so legt man zunächst den Hintergrund fest und muss dann nur noch spezifische Elemente ergänzen oder den Hintergrund ggf. verdecken. Mit Strg+K kann man jedes Element mit einem Hyperlink versehen, dessen Ziel dann eine der anderen Seiten sein kann.

Auf dem Mac verwende ich OmniGraffle. Hierfür findet ihr auf Graffletopia einige Wireframe-Schablonen.

Sowohl mit Visio als auch mit OmniGraffle kann man auch sehr einfach Storyboards erstellen, mit denen man Abläufe und Szenarien darstellen kann.

Beide Tools sind ja eher Allrounder. Man kann mit ihnen alles mögliche grafisch darstellen. Mittlerweile gibt es aber auch eine Reihe weiterer Wireframing Tools, die man sich vor einer Neuanschaffung ruhig mal ansehen kann.

Sehr vielversprechend finde ich z. B. Balsamiq Mockups, das auf der AIR-Plattform läuft und somit für verschiedene Plattformen (Windows, Mac, Linux) verfügbar ist. Außerdem verfolgt es konsequent den Sketch-Ansatz, ist nicht so teuer (79$) und eine Webversion gibt es auch schon.

Achja, bei der Umsetzung pinne ich mir die Wireframes auch immer gerne in Sichtweite. Denn dann weiß ich immer, wohin die Reise zu gehen hat und aus welchen Komponenten das User Interface besteht.

Categories: Entwicklung Tags: , ,

Switch to our mobile site