Top 3 Tools für Feedback in Webdesign

28. Mai 2010
by Mag. Werner Aschenbrenner

Gutes Webdesign lebt von konstruktivem Feedback. Hier finden Sie einen Überblick über aktuelle Tools und Anforderungen. Wenn Webdsign als Prozess verstanden wird, dann helfen Ihnen und Ihren Kunden diese Tools dabei großartige Ergebnisse zu produzieren.

Anforderung an Tools

Der Kunde sieht etwas und hat (in der Regel) eine Meinung.  Ein klassisches Problem dabei ist, dass sich Änderungswünsche nur schwer verbal formulieren lassen und kaum am Telefon besprochen werden können ohne Missverständnisse zu provozieren. Nicht immer sind Webdesigner und Kunde am selben Ort um Änderungen zu besprechen. Gefragt sind also Tools die es ermöglichen mit einfachen Mitteln Screenshots zu kommentieren oder Skizzen hinzuzufügen. In manchen Fällen sind auch Screencasts (Bildschirm Mitschnitt) von Vorteil, wobei hier angemerkt werden sollte, dass die Hemmschwelle von Kunden hier i.d.R. eher hoch ist.

Einfache Bedienung

Die wohl wichtigste Eigenschaft ist eine einfache Bedienung des Tools. Jedes Tool ist nur so gut wie der  Anwender damit umgehen kann. Ideal wäre wenn sich dieser Gedanke auch auf die Installation des Tools erstreckt (auch das kann eine Hürde sein).

Plattformunabhängig

Wenn ein Prozess standardisiert werden soll, ist es von Vorteil wenn Software zum Einsatz kommt die für alle Kunden zugänglich ist (Unabhängig von Betriebssystem oder Browser).

Screenshots kommentieren mit Werkzeugen

In der Regel sind es nur  drei Werkzeuge die von Kunden in Screen Reviews (Feedback Sessions) benützt werden. Kommentare (um Gedanken zu formulieren), Pfeile (um Kommentare zuzuweisen und Dinge zu bezeichnen), Rechtecke (um Formen zu skizzieren). Zusätzlich dazu wäre auch eine verweisende Nummerierung hilfreich, wobei dies den Bedienerwillen des Kunden oftmals überfordert. Zusammengefasst ist es wichtiger dass „Sprechblase“ und „Pfeil“ gut und intuitiv funktionieren, als zusätzliche Funktionen die den Kunden ev. überfordern. (Bedenken Sie der Kunde wird das Tool nur verwenden weil Sie ihn darum ersuchen und hat kein Interesse daran Funktionen zu „lernen“) – Weniger ist in diesem Punkt definitiv mehr.

Screencasting mit Sprachaufzeichnung

In diesem Punkt scheiden sich die Geister. Oftmals erscheint es sinnvoll einen Klickverlauf oder aber ein Verhalten im Browser nicht nur statisch zu betrachten sondern in Bewegung.   Hier stößt man in er Praxis gerne an eine Grenze die der Kunde nicht bereit ist zu überschreiten, was respektiert werden sollte. (Anm.: Eine Alternative für diesen Fall wäre der Einsatz eines Fernwartungs-tools  wie z.B. Teamviewer, das dem Kunden die „Arbeit“ abnimmt. Eine weitere Alternative ist  Skype mit Screensharing, wobei es auch hier Ressentiments gibt die zu respektieren sind.)

Universelles Outputfile

Ein Tool bietet nur dann Vorteile, wenn das Ergebnis des Reviews möglichst einfach betrachtet und übermittelt werden kann. Oftmals integrierte Upload und Sharing Funktionen sind sicherlich attraktiv treffen aber in der Regel nicht den Wunsch des Kunden. Exportierte Dateiformate wie JPG oder PNG haben sich in der Praxis bewährt, da diese auf jedem Rechner geöffnet werden können.

Fireshot – Der Platzhirsch als Browser Erweiterung

(Browser Extension, MS)
URL: http://www.screenshot-program.com/

Eines der beliebtesten Tools für Webdesigner ist sicherlich Fireshot. Speziell die Integration in Firefox wird von Webdesignern gerne genutzt, da diese ohnedies mehrheitlich mit Firefox arbeiten. Aktuell gibt es Fireshot sowohl als Erweiterung für Firefox als auch neuerdings als Erweiterung für den Microsoft Internet Explorer. Sowohl eine kostenlose als auch ein kommerzielle Version (Pro) stehen zur Verfügung.

Fireshot mit allen Funktionen im Überblick

Aus Sicht ihres Kunden (resp. der Kundenbeziehung) sollte Ihnen bewusst sein, dass die Existenz einer kommerziellen Version für unseren konkreten Anwendungsfall eher hinderlich ist. Die kostenlose Version kann bereits (gemessen an obigen Kriterien) weit mehr als der Kunde jemals brauchen wird. Wird mit kostenlosen Versionen von Programmen gearbeitet (und diese auch dem Kunden empfohlen) bei denen es auch kommerzielle Versionen gibt, besteht stets das Risiko, dass beim Kunden ungewollt der Eindruck entsteht er wäre nicht „gut“ genug nicht „komplex“ genug oder nicht „potent“ (finanziell) für die kommerzielle Version des Programms.

Installation von Fireshot (Browser Extension)

Die Installation von Fireshot ist zwar einfach stellt aber für die meisten Kunden dennoch eine Neuerung dar (die wenigsten haben sich jemals freiwillig eine Erweiterung für den Browser installiert)

Bedienung / Usability

Fireshot wird mit einem einfachen Klick auf das Logo in der Toolbar ausgelöst und bietet dem User eine breite Palette an Werkzeugen die mit etwas Übung gut eingesetzt werden können. In Relation zu anderen Programmen hat hier Fireshot sicherlich die Nase vorne, was die Vielfalt der Optionen im Editor betrifft. Speziell die Funktion halbtransparente Formen (mit Beschriftung) einfügen zu können ist von Vorteil. Der große Funktionsumfang stellt zugleich für manche Kunden eine Herausforderung dar die eventuell vermieden werden sollte.  In der Praxis reduziert sich Fireshot gerne auf die Funktion des Pointers (Pfeil mit Text) die sicherlich gut gelungen ist.

Kompatibilität

Der definitiv größte Nachteil des sonst sehr gut gelungenen Programms ist die Fixierung auf eine Microsoft Umgebung. (Es existieren weder Versionen für Mac OS-X noch für Linux) Für den einfachen Austausch der erstellten Screenshots können sowohl GIF, PNG, JPG als auch BMP Files erstellt werden. In der Praxis wird man hier zu JPG Files greifen. Die Integration in den Microsoft Internet Explorer erweitert das Spektrum der Anwendung für Kunden erheblich.

Zusammengefasst…

In reinen Microsoft Umgebungen ist Fireshot sicherlich die erste Wahl im Produktiveinsatz mit dem Kunden wenn es um Webdesign geht und dieser lernbereit ist. Für wenig versierte Kunden könnte der große Funktionsumfang des Editors zum Problem werden und Verwirrung stiften

Jing – Keep it simple

(Client Software Mac & MS)
URL: http://www.jingproject.com/

Jing ist der Alleskönner unter den Capture Programmen. Von Screenshots mit integrierte Kommentar Editor bis hin zu Screencasts bietet Jing in einer Anwendung ein breites Spektrum an Einsatzgebieten ohne den User mit Funktionen zu erschlagen. In Summe ist Jing sicherlich das beste Allroundtool zur spontanen Dokumentation von Webinhalten. Jing ist sowohl für Mac OS-X als auch für Microsoft Windows erhältlich und in der Basisversion Kostenlos. Ebenso wie schon Fireshot verfügt auch Jing über eine kommerzielle Version die für die hier avisierte Anwendung jedoch nicht notwendig ist.

Der Editor von JING

Der Editor von JING

Bei genauer Betrachtung bemerkt man, dass sich Jing in Mac OS-X nahtlos Integriert während es in Windows den Umweg über das .NET Framework wählt. (Was letztlich auch zu einem guten Ergebnis führt aber in der Regel zumindes bei Windows XP die zusätzliche Installation des .NET Framework 3.0  erfordert)
Die kommerzielle Version von Jing empfiehlt sich nur wenn Screencasts produziert werden sollen, die kein Branding (Jing Logo) haben dürfen oder aber wenn Flash als Exportformat für Videos nicht in Frage kommt.

Installation / Client Software

Die Installation von Jing ist sofern das .NET Framework (Windows) bereits installiert ist einfach und unkompliziert. Bei Mac OS-X erfolgt die Installation gewohnt einfach.

Bedienung / Usability

Die Bedienung des Editors zum kommentieren von Screenshots ist einfach in der Handhabung und auf das wesentlichste reduziert. Screecasts gelingen ebenfalls auf Anhieb. Anders als bei Mac OS-X wird Jing bei Microsoft nicht durch ein dezentes Icon dargestellt sondern platziert sich als „Sonne“ am oberen Bildschirmrand.  Es ist gut vorstellbar, dass der ein oder andere Kunde damit ein Problem haben könnte.

Halbtransparenzen (Highlighting mit Farbauswahl) in JING

Halbtransparenzen (Highlighting mit Farbauswahl) in JING

Kompatibilität

Jing läuft ausgenommen Linux auf allen Plattformen stabil und produziert als Output File PNG Grafiken, die von jedem Browser dargestellt werden können. Der integrierte Upload zu Screencast.com dürfte (obwohl sehr einfach) die meisten Kunden eher überfordern und ist damit obsolet sein.

Zusammengefasst…

Jing ist das Allroundtool mit klaren Stärken in der einfachen Bedienung. Für gemischte Arbeitsumgebungen ist es ideal und liefert schnell Ergebnisse. Wenn es erreicht werden kann, dass der Kunde sich an Jing gewöht und auch die Schwelle zum Screencasting überschreitet, dann erleichtert das den Prozess ungemein.

Notable – Top für Teams und Entwickler

URL: http://www.notableapp.com/
(Online Dienst)

Einfache Auswahl nach dem Login

Einfache Auswahl nach dem Login bei Notable

Im Gegensatz zu Jing und Fireshot arbeitet der Kunde bei Notable serverbasiert. Der Dienst wird über eine Toolbar im Browser per Klick ausgelöst. Dabei wird zuerst ein Capturing der gesamten Seite erstellt, das nicht nur grafische Oberflächen erfasst sonder auch den Code mit einbezieht.

Nach dieser Aufnahme steht dem User ein Editor zur Verfügung der darauf ausgelegt ist nummerierte Kommentare zu verwalten. Anders als bei Jing und Fireshot kann mit Notable  auch der Quellcode kommentiert werden. Eine lokale Kopie oder ein Export ist nicht vorgesehen kann aber via PDF generiert werden. Das Ergebnis des Reviews wird online gespeichert und kann an weitere Teammitglieder zur erneuten Überarbeitung weitergesendet werden. Zusätzlich zur Toolbar steht auch eine Iphone App zur Verfügung, mit der nicht nur Websites via Safari bearbeitet werden können sondern auch lokale APP‘s, was speziell für Iphone Entwickler hilfreich sein dürfte.

Der Editor von Notable mit Nummerierungen

Notable geht einen Schritt weiter in der Anwendung und stellt dem User ein gesamtes Verwaltungstool für diskutierte Websites zur Verfügung. Die absolute Stärke von Notable liegt darin anderen Usern sowohl einzelne Arbeitsbereiche als auch einzelne Screenshots freizugeben oder aber die entsprechenden URL’s an nicht registrierte User zu schicken. Speziell in virtuellen Organisationen wird man diesen Vorteil zu schätzen wissen.

Installation

Eine Client Installation ist nicht notwendig. Die Toolbar für Firefox ist schnell und einfach installiert und bietet Vorteile.

Bedienung / Usability

Den Quellcode kommentieren mit Notable

Wenn man sich einmal an das Handling gewöhnt hat, bietet Notable erhebliche Vorteile für versierte Benützer. Es kann schnell und effizient im Team gearbeitet werden und zugleich ein geordnetes Versioning via Workspaces organisiert werden. Speziell für umfangreiche Entwicklungen und Kunden die auch den Quallcode kommentieren wollen, ist Notable ein veritables Tool.

Zusammengefasst…

Notable ist mit Fireshot oder Jing nur schwert zu Vergleichen. Für umfangreiche Review Sessions mit Teammitgleidern oder erfahrenen Kunden ist es optimal geeignet. Für konventionelle Kunden Feedback Sessions ist es aus unserer Sicht nur bedinngt geeignet.

Fazit

Wenn lediglich Designaspekte zur Diskussion stehen, empfehlen wir Fireshot oder Jing für den produktiven Einsatz mit Kunden. Entscheiden sollten Sie sich für die Variante die Ihren Kunden eher entgegenkommt. Fireshot bietet einen größeren Funktionsumfang im Editor, Jing hingegen ist einfacher in der Anwendung und etwas universeller im Einsatz.

Für umfangreiche Entwicklungen in virtuellen Teams oder Review Sessions mit erfahrenen  Kunden liegt der Vorteil klar bei Notable. Hier ist der Fokus klar auf einer kontinuierlichen Entwicklung und weniger auf punktuellem Einmalfeedback.

Alternative Tools

Sollte für Sie das passende Tool nicht dabei sein finden Sie hier noch eine kurze Liste mit möglichen Alternativen zu Fireshot, Jing & Co.

Screenpresso - http://www.screenpresso.com/ (Nur Windows)
Skitch – http://www.skitch.com/ (Nur Mac)
Snagit – http://www.techsmith.com/screen-capture.asp (eher für Privatanwender)

About

Werner Aschenbrenner geschäftsführender Gesellschafter der Lorem Ipsum und konzentriert sich in seiner Arbeit auf die Optimierung von Conversion Rates und Usability im E-Business. Folgen Sie ihm via RSS oder Twitter.