Tipps zum Dokumentieren von Wireframes & Expert Reviews

Wireframes und Usability-Reviews gehören zu den Dingen, die wir UX-Experten fast täglich erstellen. Und doch ist das noch immer überraschend kompliziert. Anders als für Präsentationen oder Textdokumente gibt es dafür keine Standardprogramme. Jedes Unternehmen hat hier eigene Standards, jeder Kollege seine eigenen Vorlieben.

Im Folgenden stelle ich einige Programme vor, zeige deren Vor- und Nachteile und beschreibe mögliche Arbeitsabläufe, die langfristig viel Zeit und Mühe sparen können.

Ob ich meine Wireframes dokumentieren möchte oder die Ergebnisse eines Usability-Reviews – die Anforderungen daran sind praktisch die gleichen: Ich habe einige Bilder der Website und möchte diese mit Anmerkungen versehen.

Auch Usability-Tests werden oft nach dem gleichen Prinzip dokumentiert.

Wie macht man das am besten?

Microsoft Word / Open Office Writer

Das Standardwerkzeug für jede Art von Dokument ist sicherlich Microsoft Word (oder seine open-source-Kopien wie Open Office Writer). Ein Word-Dokument ist flexibel und kann von fast jedem Empfänger geöffnet werden.

Aber Bilder in Word-Dokumente einsetzen ist auch heute noch ein mühevoller Job. Und dass das Dokument bei Ihnen so aussieht, wie bei denjenigen, an die sie es verschicken, ist eher unwahrscheinlich.

Wer schon einmal versucht hat, Anmerkungen oder Hervorhebungen auf Abbildungen in Word zu machen, der hat am eigenen Leib erfahren, warum diese Kategorie von Tools Textverarbeitung heißt und nicht Bildbearbeitung oder Satzprogramm.

Fazit Textverarbeitungsprogramme

Textverarbeitungsprogramme eignen sich nur, wenn Sie einzelne Bilder einfügen und entweder gar keine Hervorhebungen auf Ihren Wireframes/Screenshots machen oder wenn Sie diese Hervorhebungen sowieso in einem externen Programm machen.

Tipp: Screnshot-Programm

Auf die Dauer viel Zeit sparen Sie sich, wenn Sie ein eigenes Programm für Screenshots installieren. Screenshots können Sie zwar auch mit den Bordmitteln des Betriebssystems erstellen, doch ein eigenes Programm dafür lohnt sich, wenn man mehr als zwei, drei Screenshots in der Woche macht. Mit diesen geht es einfach auf Dauer schneller.

Mein Tipp für Mac: SnapNDrag
Und für Windows: Greenshot

PowerPoint / Keynote / Open Office Impress

Ebenfalls auf fast jedem Computer installiert ist ein Präsentationsprogramm wie Microsoft PowerPoint oder Apple Keynote. Viele Kollegen arbeiten damit, weil sich hier Bilder schnell und zuverlässig beschriften lassen.

Dafür ist der Umgang von PowerPoint mit Text wiederum nicht so komfortabel wie in Word.

Zum Zeichnen von Wireframes in PowerPoint gibt es sogar Zusatzprogramme, die Ihnen Bibliotheken bereitstellen. So haben Sie häufig verwendete Elemente im schnellen Zugriff und müssen diese nicht jedes Mal neu zeichnen. Das spart nicht nur Arbeit, es sorgt vor allem auch dafür, dass die Elemente immer gleich aussehen.

Screenshot PowerPoint

Mit einer gut gestalteten Vorlage lassen sich in Powerpoint ordentliche Dokumentationen erstellen. (Diese ist von cxpartners, Link siehe unten.)

Fazit Präsentationsprogramme

Haben Sie nur ein paar Seiten zu erstellen und wenig Text, dann ist die Arbeit mit Präsentationsprogrammen nicht das Schlechteste. Ein weiterer großer Vorteil: Wie man mit diesen Programmen umgeht, weiß fast jeder. Und auch der Austausch klappt damit gut, denn auch auf Auftraggeberseite gehört PowerPoint zur Standardausstattung.

Apple Pages / Indesign

Spezieller wird die Arbeit, wenn man ein Satzprogramm einsetzt. Apple Pages ist so ein Zwischending zwischen Textverarbeitung und Satzprogramm. Indesign ist dagegen ein echtes Satzprogramm, und wer nicht schon damit umgehen kann, der braucht das aus meiner Sicht auch nicht lernen, nur um Wireframes oder Testergebnisse zu dokumentieren.

Wer sich aber in Indesign schon zuhause fühlt, der kann damit schnell schön gestaltete Berichte erstellen. Der Haken dabei (und auch bei Pages): Am Ende steht dann normalerweise in PDF. Denn ein Indesign- oder Pages-Dokument weiterzugeben empfiehlt sich nicht – zu wenige haben diese Programme.

Wer seine Wireframes gleich direkt in Indesign erstellen möchte, der sollte diesen Artikel unbedingt lesen: Creating Wireframes And Prototypes With InDesign.
Darin zeigt Shlomo Glotz, wie man mit diesem Satzprogramm nicht nur Wireframes, sondern auch interaktive Prototypen erstellen kann.

Fazit Satzprogramme

Indesign und andere Satzprogramme eigens zu lernen lohnt sich nicht. Aber die Ergebnisse damit sind sehr ansehnlich.

Visio / OmniGraffle / Photoshop

Microsoft Visio war vor Jahren für viele ein Wunder: Einfach und schnell ließen sich damit Diagramme zeichnen, flexibel mit Linien verbinden und diese blieben tatsächlich an dem Kasten haften, wenn er verschoben wurde.

Das ist inzwischen Standard für Zeichenprogramme, und sogar PowerPoint oder Word können das heute. Aber immer noch gibt es Kollegen, die schwören auf Visio – für mein Gefühl ist es aber nicht besonders zugänglich für Neulinge.

Wer eine hohe Grafik-Affinität hat, der arbeitet oft mit Adobe Photoshop. Aus meiner Sicht nicht die beste Wahl, weil man bei jedem neuen Dokument zu viel neu anlegen muss und zu viel mit Kopieren und Einfügen beschäftigt ist. Aber wer damit gern und schnell arbeitet, der kann auch damit seine Dokumentationen erstellen.

OmniGraffle ist ein Grafikprogramm, das es nur für den Mac (und das iPad) gibt. Viele Interaktions-Designer und Konzepter nutzen es, weshalb dafür eine Vielzahl von Bibliotheken zur Verfügung stehen – von der Sitemap-Vorlage über einfache Wireframes bis hin zu hochwertigen UI-Mockups aller bekannter mobile- und Desktop-Betriebssysteme.

Screenshot OmniGraffle

Mit einem eigenen „Stencil“ (Vorlage) lassen sich in OmniGraffle schnell und komfortabel Dokumentationen erstellen.

Fazit Zeichenprogramme

Auch bei diesen Programmen gilt: Am Ende steht ein PDF, weil man nicht davon ausgehen kann, dass andere Photoshop, Visio oder OmniGraffle nutzen.

Wer das akzeptiert und sich wohl fühlt in einem dieser Programme, der kommt mit ihnen zu sehr gut aussehenden Ergebnissen. Mein persönlicher Favorit ist dabei OmniGraffle.

Axure RP / Balsamiq

Axure und Balsamiq sind wohl die verbreitetsten Spezialprogramme für Wireframes.

Mit Balsamiq ist man bei den Anmerkungen weitgehend auf Textkästen beschränkt, die man in die Wireframes setzt. Bei Axure dagegen kann man die Wireframes als Word-Dateien exportieren.

Wenn man sich an die Einschränkungen dieser Exportfunktion gewöhnt hat, kann man damit ganz ordentlich arbeiten. Leider sind die Anpassungsmöglichkeiten sehr beschränkt. So lässt sich z.B. das Aussehen der Zahlen-Kästchen im Wireframe nur recht umständlich anpassen – sicher nur etwas für fortgeschrittene Axure-Nutzer.

Fazit Wireframe-Programme

Wer mit Balsamiq arbeitet, der muss mit seinen Wireframes vorgehen wie bei Screenshots: Anmerkungen müssen dabei in einem anderen Programm eingebaut werden.

Screenshot Axure

Passen Sie die Export-Voreinstellungen bei Axure an, wenn Sie öfter damit arbeiten.

Bei Axure können Sie genauso arbeiten, oder Sie nutzen den Word-Export. In dem Fall machen Sie sich unbedingt die Mühe, die Word-Vorlage anzupassen. Zum einen kann man Schriftart, Fußzeile, Logo etc. in einem Dokument hinterlegen, dass Axure als Vorlage nutzt.
Außerdem können Sie die Standardüberschriften ändern, die Axure verwendet. Es lohnt sich, das einmal zu tun – Sie sparen sich auf die Dauer viel Zeit, auch wenn die erste Änderung mühsam und umständlich ist. Ausgangspunkt ist das Menü Publish > More Generators and Configurations… > Add >.

Clarify

Wenig bekannt ist das Programm Clarify, das aufs Erstellen von Dokumentationen von Websites spezialisiert ist. Es gibt Versionen für Windows und Mac und es kostet 27 Euro.

Was damit hervorragend geht, ist das Erstellen von Screenshots. Der große Vorteil ist, dass diese nicht irgendwo auf der Festplatte landen, sondern direkt in dem Programm. Dort kann man sie gleich direkt beschriften, mit Anmerkungen, farbigen Kästen etc. versehen und alles damit machen, was man mit Screenshots üblicherweise so macht.

Außerdem kann man direkt in dem Programm Text-Erklärungen hinzufügen, Überschriften voranstellen etc.

Wenn man fertig ist, exportiert man das Ergebnis als Word-Dokument. Die Texte und Überschriften sind dann bearbeitbarer Text, die Screenshots mit den Hervorhebungen, Pfeilen, Kästchen etc. sind eingebundene Bilder.

Wie üblich bleibt auch in diesem Dokument noch einiges an Formatierungsarbeit zu tun, aber viel Routinearbeit ist damit schon getan. Wer also am Ende für seine Dokumentation ein Word-Dokument haben möchte, der sollte sich das kleine Tool unbedingt einmal ansehen.

Mehr Infos: Clarify

Screenshot Clarify

In Clarify lassen sich Screenshots sehr schön kommentieren.

Screenshot von Clarify erstelltes Word-Dokument

Clarify exportiert ein Word-Dokument, das Sie dort weiter anpassen können.

ScreenSteps

Ebenfalls eine Spezialanwendung ist ScreenSteps. Diesen Web-Dienst können Sie ab 29 Dollar pro Monat nutzen.

Was zunächst nicht klar wird: ScreenSteps basiert auf dem eben vorgestellten Programm Clarify. Meldet man sich bei ScreenSteps an, wird man ersteinmal zum Download eines Programms geschickt. Das heißt dann zwar ScreenSteps, ist aber eine angepasste Version von Clarify.

Der Unterschied ist: Bei ScreenSteps ist ein Webservice integriert. Über diesen können Sie Ihre Dokumente veröffentlichen, von Kollegen oder Kunden kommentieren lassen, die Versionen verwalten und Änderungen verfolgen.

Für große Teams sicher einen Blick wert, aber nicht ganz billig.

Mehr Infos: ScreenSteps

Screenshot ScreenSteps

ScreenSteps bietet viele Möglichkeiten, Dokumentationen online zu verteilen, zu versionieren und Kommentare einzusammeln.

Tipps für Vorlagen & weitere Infos

Screenshot Storyboard

Vorlage für ein Storyboard (Klickpfaddiagramm) von cxpartners

Sehr hilfreich für die Dokumentation sind die Vorlagen, die man kostenlos bei der UX-Agentur cxpartners herunterladen kann:
UX Resources. Diese sind teilweise für PowerPoint, für OmniGraffle und für Word.

Sie sind eigentlich das Zusatzmaterial zum Buch Communicating the User Experience: A Practical Guide for Creating Useful UX Documentation. von Richard Caddick und Steve Cable. Es kostet 43 Euro, mehr Infos dazu bei Amazon.

Kennen Sie weitere Programme oder Tipps zur Dokumentation? Dann verraten Sie dies uns doch in den Kommentaren!

Portraitfoto: Jens Jacobsen

Jens Jacobsen

Inhaber

benutzerfreun.de

Bisher veröffentlichte Beiträge: 47

2 Kommentare

  • Steffen

    Vielen Dank für den Interessanten Artikel.

    Ich habe vor Kurzem das Tool specfox (https://specfox.com/) entdeckt. Das Tool ist sehr einfach gehalten. Zuerst läd man seine Screenshots oder Layouts in ein Projekt hoch. Anschließend kann man dort Bereiche markieren und mit einem Kommentar (reine Textbox) versehen. Exportiert wird das ganze dann als PDF.
    Wenn man aber nur schnell ein paar Screen kommentieren möchte (und an Word wieder verzweifelt) eine ganz nette Sache.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.