Eine Frage, die vermutlich jeden Interface Designer beschäftigt, ist die Frage des Tools mit dem man seine Screenshots, bzw. Prototypen erstellt. Neben den üblichen Verdächtigen wie Photoshop oder Illustrator, stehen natürlich auch Anwendungen wie z.B. Flash oder Visual Studio n der Startreihe. Aber der Reihe nach. Was ist das eigentliche Ziel, und welche Vor- bzw. Nachteile bieten mir die unterschiedlichen Tools?
Nach einem kurzen Erfahrungsbericht meinerseits würde ich Euch gerne fragen …
- Wie erstellt Ihr Eure Mockups?
- Welche Vorteile bieten Eure Tools?
- Welche Probleme treten dabei auf?
Mein Ziel sind meistens Screenshots, die dann normalerweise in ein Wordfile mit textueller Beschreibung eingebunden werden. Auf diese Art und weise erstelle ich sowohl normale Hautmasken als auch Abläufe, wenn z.B. eine Funktion betätigt wird.
Diese Art der Beschreibung habe ich bei der CHI 2004 in Wien auch bei einigen großen Firmen wie Palm oder Disney gesehen. Wobei diese meist mit einer Art Wireframe Darstellung, also die Verbindung von unterschiedlichen Screens als Folge von Interaktion, arbeiten.
Mein Tool der Wahl ist seit Jahren Freehand MX. Nachdem ich mich jahrelang mit Photoshop CS geplagt habe (“plagen” in Bezug auf Screenshot Erstellung) und bei den großen Mengen von Korrekturen beinahe wahnsinnig geworden wäre, hab ich mittlerweile komplett auf Freehand umgestellt. Here’s why …
- Erste Entwürfe
Warum ich bereits hier Freehand z.B. Photoshop vorziehe ist die Tatsache, dass ich in Freehand sehr schnell viele unterschiedliche Entwürfe von z.B. einem Dialog erstellen kann. In Photoshop hab ich das immer so gelöst, dass ich an einem File gearbeitet habe und die unterschiedlichen Varianten exportiert habe. So konnte ich zwar am nächsten Tag die unterschiedlichen Möglichkeiten durchsehen, hatte aber das Original dazu nicht. Unterschiedliche Entwürfe in Ebenen abzulegen hab ich ebenfalls nie als befriedigende Alternative empfunden. Zu unübersichtlich wird das ganze am Schluss. Aber der Hauptgrund ist für mich, dass mir Freehand (oder einfach ein Vektorzeichenprogramm) die Möglichkeit bietet intuitiv Dinge zu verschieben, so wie wenn ich auf einem riesigen Blatt Papier arbeiten würde. Ich verzichte dabei komplett auf die Verwendung von Seiten, sondern lege die Entwürfe einfach auf die Arbeitsfläche. Und so sieht das dann aus …
Ansicht einer Freehandarbeitsfläche mit 6% und Vorschaumodus. - Reviews
Bevor ich einen echten Benutzer darauf los lasse, versuche ich meistens meine ersten Entwürfe mit den üblichen Gruppen (Chef, Marketing, Kollegen, Kunde meist noch nicht) durchzubesprechen um ein gesamten, runden Eindruck von den unterschiedlichen Vorstellungen, Möglichkeiten und Rahmenbediengungen zu bekommen. In dieser Phase geht es meist um Farbigkeiten, Layout und solche Dinge. Weniger Interaktion sondern mehr ein grobes Bild.
- User Tests
Wenn ich mal das Glück habe zufällig einem User zu begegnen, ist es mit den Screenshots (vor allem den Abläufen) durchaus möglich Meinungen einzuholen. Nicht mehr, nicht weniger. Natürlich habe ich die Möglichkeit aus den Screens sog. HTML Mockups zu basteln. Aber irgendwie passiert das meist nicht. Zu eingeschränkt ist man doch durch diese HTML Dummies. (Wie weiß der User wo er draufklicken kann?) – Diese eignen sich eigentlich am besten für Präsentationen, wenn man ein bisschen “Eindruck schinden” und ein Gefühl für das Feel bekommen möchte. - Änderungen und Korrekturen
Nachdem ich meine ersten Entwürfe etwas ausgefeilt habe und das ganze schon schön in einem Wordfile zum Review präsentiere, kommen erfahrungsgemäß die Korrekturen und die können natürlich umfassend sein. Wie eingangs erwähnt bin ich dabei mit Photoshop nie wirklich glücklich geworden. Kann sein, dass ich “die” Methode nie gecheckt habe, aber in diesem Punkt finde ich die Bibliothek von Freehand MX fast unschlagbar.
Hier ein (selber gezeichnetes) Control, darunter ein Hauptscreen, der Controls verwendet
Ich gehe so vor, dass ich mir von der sog. Hauptmaske (auf der dann das meiste aufbaut) eine Vorlage erstelle und diese dann als Basis für alle weiteren Darstellungen verwende. Habe ich nun eine gravierende, grundsätzliche Änderung, reicht es, wenn ich diese in der Vorlage ändere. Die Änderung wird dann automatisch von allen Screens die diese Vorlage verwenden übernommen.
Das Geheimnis dabei sind meiner Meinung nach zum einen Verschachtelungen von Vorlagen (z.B. Buttonvorlage auf Hauptmaskenvorlage – Hauptmaskenvorlage als Basis für eine Dialogvorlage. Wird nun der Button geändert, ändert er sich in allen Screens, was normalerweise mein Wunsch ist) und zum anderen der sehr pingelige Einsatz von Vorlagen. Wie erstelle ich die Vorlagen, was nehme ich mit rein und was nicht.
Unter dem Strich ergibt das etwas mehr Aufwand (Hirnschmalz) in der Erstellung der ersten Entwürfe, das sich aber sofort mit dem Auftreten der ersten Korrekturen amortisiert.
Danke für die Ausführung!
Ich war auch gerade dabei für japhy.at einen Artikel zum Thema Prototyping – Tools zu schreiben.
Hier ein paar erste Erkenntnisse zu den von mir verwendeten Tools:
* Papier und Bleistift:
Leider viel zu wenig eingesetzt …
* MS Powerpoint:
Hassliebe. Sehr einfach um schnell mal was zu skizzieren, aber auch sehr ungenau …
* Adobe Photoshop:
Für viele Zwecke unersetzlich. Allerdings nervt das Herumschieben einzelner Pixel um zB eine Tabelle darzustellen …
* MS Visio:
Genial wegen der enthaltenen GUI-Elemente.
* GUI – Design – Studio:
Sehr interessantes Tool. Weniger universell als Visio, kann aber genau das was es können soll. Nicht geeignet für grafiklastige Designs!
* Axure RP RP:
Schaut sehr mächtig aus. Geht auch mehr in Richtung Wireframe – Design.
Zwei interessante Links noch zum Thema:
AOL Newsletter Blog: Auf der Suche nach dem optimalen Prototyping-Tool
Boxes & Arrows: Know Your Place. Your Designs are Modular, but are your Artifacts?
@ MS-Visio:
Genau, hab ich total vergessen. Eine Zeit lang hab ich Visio sehr exzessiv genutzt, aus dem Grund den Jörg nannte – die vorhandenen GUI Elemente.
Mittlerweile bin ich allerdings wieder weitgehend davon abgekommen. Erstens weil man nicht wirklich (pixel-) genau (und letztlich auch nicht “sauber”) damit designen kann und zweitens, es gibt zwar auch die Möglichkeit Vorlagen zu erstellen, allerdings kann man diese nicht in der Form “updaten”, wie es Freehand erlaubt.
Somit werden Korrekturen erst wieder zum Graus. Weiters finde ich die Anordnung mit den Tabs irgendwie umständlich. Ich brauche jedesmal ziemlich lange, bis ich meine Entwürfe wiederfinde 😉
@ AOL Newsletter Blog: Very interesting 🙂
Nochmal @ Visio:
Updaten funktioniert laut dem Boxes & Arrows – Artikel auf bei Visio …
Hab’s allerdings auch noch nicht ausprobiert.
bei uns läufts meistens so ab:
_ papier und kuli/bleistift/marker:
viel und schnell rumzeichnen; sehr viel davon sehr reduziert und oft nicht besonders schön — nur um den anderen besser zu zeigen was einem im kopf rumschwirrt. aufgezeichnet wird alles mögliche: metaphern, interface ideen, abläufe, … die besseren ideen überleben und an denen wird meistens weiter gezeichnet und nochmal umgezeichnet und wieder verworfen. ganz wenige davon werden dann meistens gescannt und dem kunden präsentiert. manchmal machen wir mit diesen scribbles auch schon erste interne tests mit kollegen.
_ OmniGraffle
um ein besseres gefühl für reale größen zu bekommen zeichnen wir die entwürfe dann detailierter mit OmniGraffle. hauptsächlich weils schnell und einfach geht. librarys von gui-elementen verwenden wir nur selten [obwohl wir immer wieder nach guten suchen und kurz probieren und dann doch wieder nicht verwenden :)], uns gehts eher um ein größenverhältnis und nicht wie der button dann schon wirklich ausschaut, oft wissen wir gar nicht ob und wo/wie wir standard-gui-elemente verwenden oder ob wir eigene controls brauchen.
mit diesen entwürfen basteln wir dann auch oft papierprototypen die wir dann intern bei uns/kunden testen.
für web-sachen verwenden wir meistens InDesign um schnell was zu entwerfen.
_ photoshop/illustrator/indesign
die detailierten interfaces bauen wir fast immer in photoshop — mühsam und nervig etwas zu änderen [wie oft hab ich mich mir schon gewünscht, dass das jetzt objektorientiert super wär] — aber noch immer mit abstand das flexibelste tool. für manche sachen verwenden wir illustrator. hängt auch davon ab wer daran arbeitet. die finalen interfaces für die doku werden aber fast ausschließlich im photoshop pixelgenau gezeichnet. und ja, es ist super mühsam änderungen im photoshop nachzuziehen 🙁
_ flash/html
hifi-prototypen bauen wir fast ausschließlich in flash. wir suchen zwar vor jedem projekt nach einem neuen prototyping tool [danke jörg für die hinweise zu den prototyping tools, muss ich mir auf jedenfall näher anschaun] und schauen uns dann alle möglichen sachen [Xcode, Visual Basic, …] an, kommen aber dann doch immer wieder zu flash zurück. vorallem weils platformunabhängig ist und sehr flexibel mit custom controls und animationen. vorallem seit es form applications gibt und nicht mehr alles über die nervige timeline gemacht werden muss ists, zu mindest für mich, viel angenehmer zu verwenden. der großteil der prototypen ist komplett in actionscript umgesetzt — ist zwar zu beginn mühsam eine basis zu schaffen, aber dann umso flexibler sachen auszuprobieren.
abhängig vom projekt setzen wir nur teilbereiche um oder ganze abläufe. diese prototypen verwenden wir dann für externe usability tests mit den kunden vom kunden. ausserdem sind sie sehr oft ein bestandteil der dokumentation und grundlage für die entwickler.
für websachen bauen wir fast ausschließlich html-prototypen.
kennt wer gute flash-libraries für windows-controls? es ist immer problematisch die standard-flash-controls zu verwenden aber zu mühsam die alle zu skinnen/umzuschreiben, dass sie ausschauen und sich verhalten wie windows-controls.
@ Photoshop / Illustrator:
Hätt ich fast vergessen, aber mit Photoshop CS2 und den darin enthaltenen Smart Objects ist es im Grunde auch möglich (im Illustrator) “Vorlagen” zu erstellen, die dann in Photoshop verwendet werden. Siehe dazu den Auszug aus der “Bedienungsanleitung” 😉
… Smart Objects allow non-destructive scaling, rotation and warping of layers within Photoshop CS2. Rich vector data pasted or placed from Adobe Illustrator CS2 graphics remain live and scalable, and edits applied in Illustrator CS2 are automatically reflected in Photoshop CS2. Smart Objects can also work much like symbols in Illustrator CS2 — editing one linked copy will update all other linked copies automatically…
@ Jürgen: Wäre das eine Variante, bzw. habt Ihr damit schon Erfahrungen gesammelt?
hab noch ein paar tipps und reviews zu prototyping tools gefunden:
– diskussion über axure (auch im vergleich zu anderen prototyping tools wie etwa iRise)
– praesentation (pdf), wie die recht pragmatisch prototyping betreibt
Ich bin gerade über eine interessante Abhandlung zum Thema gestoßen: Wireframing With InDesign and Illustrator. Ich arbeite zwar momentan nicht mit InDesign und Illustrator, aber das könnte ja noch werden …