• 
• 
• 
• 
• 
• 
• 
• 
• 7

13. November 2009

Sketch Flow Prototyping – Von altgriechischer Tragödie zu leichter Kost

Die Tragödie von Applikationskonzeption, GUI-Design und Applikationsentwicklung in klassischen drei Akten:

Zu Beginn setzt sich ein Konzeptioner auf den Hosenboden und bastelt eine meist über 100-seitige Wireframe-Darstellung in Powerpoint oder Visio auf Basis des Briefings oder Lastenhefts des Kunden. Diese Wireframes werden in einem Konzept nochmals haarklein beschrieben. Nun haben wir 200 Seiten oder mehr.

Im zweiten Akt produziert der Designer auf Basis seiner Rohentwürfe dann den nächsten Datenwust in Form von durchdeklinierten Photoshop-Dateien als perfekt durchgestyltes Abbild der Wireframes. Der Kunde ist happy, weil er so viel sehen und absegnen kann.

Der dritte Akt beginnt mit einem Programmierer, der sofort loslegt und ein dickes Framework bastelt, der Kunde kann aber leider noch nichts sehen. Um den Auftraggeber bei Laune zu halten, gibt es zwischendurch kleine funktionale Prototypes. Ergebnis: mindestens 10 000 Zeilen Code. Super! Der Kunde ist happy, weil er etwas sieht, das funktioniert.

Nun gilt es, das 3-Wege-Ergebnis zusammenzubringen. Es wird zusammengeführt, was zusammengehört und wir nähern uns dem Höhepunkt. Doch Probleme tauchen auf. Die Grafik passt nicht in die Programmierung, einiges in der Programmierung und der Grafik geht mehr als nur haarscharf am Konzept vorbei und manche anfangs geäußerten Kundenwünsche werden verworfen. Gut, irgendwie setzt man es dennoch irgendwie wie geplant zusammen. Denn vieles ist mittlerweile in Stein gemeißelt und muss umgesetzt werden.

Nach dem User, der die Applikation benutzen sollte, wurde übrigens bis hier noch nicht gefragt. Auch Usability-Tests wurden nicht gemacht – auf welcher Basis auch? Das mühevolle Zusammenfügen von Konzept, Grafik und Programmierung zieht sich einige Zeit hin und am Schluss sind alle glücklich, ist man endlich fertig. Wenn da nicht noch die vielen Änderungswünsche des Kunden wären. Zumal das Konzept so nicht mehr funktioniert oder gewünscht ist. Aber auch die Änderungswünsche lassen sich in einigen Nachtschichten implementieren. Einige Male wird der Release noch verschoben, aber dann kann die Beta endlich vom Kunden überprüft und zum guten Schluss noch ins Usability-Labor gegeben werden.

Durch die Usability-Tests kommt nun der potenzielle Enduser zu Wort, der einiges an Änderungsbedarf aufzeigt – einiges ist eben doch noch nicht optimal und stark verbesserungswürdig. Leider ist es dafür aber zu spät. Der Release ist angekündigt und die Implementierung der Änderungen aus den Usabilty-Tests viel zu teuer, da man das Pferd wieder neu aufzäumen müsste.

Drama, Baby, Drama!

Besser machen hieße, das Publikum von Beginn an einzubinden. Microsoft bietet mit Blend 3 ein Tool, das das Zeug dazu hat, die Sache zu vereinfachen und uns auf Technik-, Kunden- und Userwünsche reagieren lässt. Mit Blend 3 besteht die Möglichkeit, Prototyping von WPF und Silverlight-Applikationen als so genannte Sketch-Flow-Prototypes zu erstellen. Aus diesem Feature ergibt sich ein geänderter Arbeitsprozess und gute Chancen für alle Beteiligten.

Die drei Parteien Konzeptioner, Designer und Entwickler arbeiten gemeinsam an einem Prototyp. Über die Versionskontrolle und das Check-in-Check-out-Management vom Team Foundation Server überschreibt man sich nicht gegenseitig, sondern entwickelt zusammen eine Lösung. Alle drei Gruppen gehen aus Ihrer Perspektive hervor.

Die Konzeptionerperspektive

Der Aufbau der Wireframe Screens erfolgt analog zu den Ideen und Kundenwünschen direkt in Blend. Die Verknüpfungen der Screens sind auf einer Map dargestellt, die man auch zur Navigation nutzen kann. Screen für Screen werden die geplanten Inhalte ein- und aufbauen. Die Texte können in entsprechende Ressource-Files abgelegt werden, was spätere Änderungen sehr vereinfacht. Größere Datenmengen wie z. B. Produktfotos und Texte können über leicht änderbare XML-Schnittstellen abgelegt und verwaltet werden. Zum Aufbau einer entsprechenden sinnigen Usability ist das Agieren mit echten Daten sehr zuträglich. Die für Softwareapplikationen üblichen User Controls sind in Blend entsprechend vorhanden und können in die Screens eingebunden werden. So füllt sich das Ganze nicht nur an wie eine echte Applikation, es ist eine.

Änderungen und neue Kundenwünsche können zu jedem Zeitpunkt in den laufenden Prozess eingearbeitet werden, sodass ich mein Konzept immer wieder zu Gunsten der Sache und des Kunden hinterfragen und korrigieren kann. Der Konzeptioner arbeitet im so genannten Sketchstyle. Das sieht aus wie Bleistiftskizzen und Handschrift und vermittelt so den Eindruck eines nicht designten Konzeptstatus.

Die Designerperspektive

Der Designer arbeitet in die rohskizzierte Applikation hinein. In der frühen Phase können handgescribbelte Entwurfszeichnungen als Bilder eingebunden werden. In diesem Sketch-Modus kann das Layout der Screens grob geradegerückt, Usability Design unabhängig betrachtet und alles bereits mit Animationen angereichert werden. Die tragenden Säulen des Designs sind nicht mehr unendlich viele durchdeklinierte Photoshop-Screens. Vielmehr liefern Moods und Stilrichtungen bei dieser Arbeitsweise die Anmutung des Gesamten und die solide Basis. Es geht um Definition, wie sich Form und Farbe verhalten, welchen stilistischen Tenor und welche emotionale Ausdruckkraft die Applikation haben soll. Layoutraster sind hinreichend vorhanden. Alle relevanten Controls wie Buttons, Scroller usw. können einmalig sauber ausgearbeitet werden. Das Durchdeklinieren von Einzelscreens in gigabyteschweren Photoshop-Dateien mit Copy von Copy von Copy ein und desselben Elements braucht es nicht mehr.

Das Designmaterial kann in den Tools frei nach Belieben (ob Adobe Photoshop und Illustrator oder der MS Designer) erstellt werden. Gut vorbereitete und vektorbasierte Designs lassen sich dann wundervoll in Blend einarbeiten. Die Applikation gewinnt so mehr und mehr an Gesicht, und neben den realen Inhalten bekommt sie nun auch das, was sie schön und ansprechend macht. Ähnlich wie bei CCS (nur reichlich komplexer) baut man analog zu den vordefinierten Detailelementen und Layoutrastern die Applikationsgestaltungskomponenten auf.

Die Programmiererperspektive

Innerhalb dieses Prototypes kann auch programmiert, die Applikation also mit Leben erfüllt werden. Der Programmierer lädt die Applikation wie gewohnt über sein Visual Studio und kann in seiner Arbeitsumgebung die Sache mit Leben füllen. Einziger Unterschied: Es sieht schon schick aus. Der C#-Entwickler hat sein uneingeschränktes, aber etwas verändertes Spielfeld. Er muss sich weniger auf Framework und Strukturelles wie banale Button-to-Screen-Verknüpfungen konzentrieren, sondern setzt eher Schwerpunkte auf Animationsverhalten, Entwicklung von Features, Anbindung von realen Daten und all den Sachen, die das Herzstück der Applikation und ihren Sinn und Zweck ausmachen. Er kann sich auf die anspruchsvolleren Dinge seines Jobs konzentrieren und muss nicht mehr den Grafikern hinterher debuggen.

Alles, was in dem Prototyp geschaffen wurde, kann am Schluss, wenn es gut angelegt ist, ohne viel Aufwand in ein Produktivprojekt gewandelt werden. Idealerweise muss nur noch ein bisschen umkonfiguriert werden und fertig ist die Software oder RIA-App. Manchmal sind es nur noch wenige Steps zur Beta und zum Release. Selbst wenn dieser fast traumhafte Zustand nicht erreicht wird: Alles, was im Prototyp erarbeitet wurde, kann in das Produktivprojekt eingearbeitet und daran angebunden werden. So erspart man sich zwar nicht 100 Prozent, mindestens aber 70 Prozent der Arbeit im Produktivprojekt.

Die Kundenperspektive

Das Ergebnis der Arbeit aller drei Schöpfer einer Prototypapplikation wird direkt als Silverlight oder WPF-Applikation ausgespielt. Prototypen, die im Sketch Flow erstellt wurden, spielt Blend in eine Umgebung aus, in der der Kunde direkt mit dem Rotstift in die Applikation hinein malen und punktgenau seine Kommentare setzen kann. Diese Kommentare kann der Kunde exportieren und seinem Team zuschicken. Die Kommentare werden in Blend geladen und erscheinen wie Layer über den Applikations-Screens. Die Änderung können in die nächsten Arbeitsschritte direkt mit einbezogen werden. So entwickelt sich die Applikation langsam, aber sicher als kundenzentriertes Ergebnis. In der Frühphase sieht der Kunden die Ergebnisse reduziert auf Inhalt, Usability und seine Konzeptwünsche. In einer späteren Phase wird alles angereichert mit Design und wachsenden Funktionalitäten. Viele situationsbedingte Anpassungen und Kurskorrekturen können vom Produktionsteam auf Konzept, Grafik und Programmierseite relativ einfach implementiert werden. Und der Kunde sieht so seine wirklichen Wünsche stetig realisiert.

Die User-Perspektive

Schon frühe Ergebnisse der auf dem Weg des Sketch Flow Prototyping entstandenen Applikationen könnten in Usabitity-Labors gegeben werden. Jedes Stadium kann geschlossen bewertet und betrachtet werden. Kleine Musterzielgruppen könnten mit der Applikation rumspielen und diese kommentieren. Seine Wünsche an eine solche Applikation kann ein zukünftiger Nutzer so frühzeitig anbringen. Damit wäre schon früh gewährleistet, dass ein User das, was er nutzen soll, später auch gerne nutzt.

Nehmen wir doch mal usercentered Design und Usability ernst und übersetzen es mit nutzerzentriert und anwenderfreundlich. Hier haben wir die Chance, diese großen Worte mit Leben zu füllen, dadurch, dass wir die Nutzer frühzeitig zu Wort kommen lassen bei den Anwendungen, die sie benutzen sollen. Durch die stetige Rückkopplung zum User können wir unsere Applikationen konsequent schon während der Entstehung verbessern und schenken ihnen so Nachhaltigkeit, ein langes Leben und stehende Ovationen. Oder wollen wir uns nachsagen lassen, dass es bei all den selbstverliebten Applikationen, die zur Aufführung kommen, der Zuschauer am Ende ganz vergessen wurde?

Peggy Reuter ist selbstständige GUI-Designerin und freut sich, nun gemeinsam mit End-Usern, Kunden, Programmieren, Designern und Konzeptionern neue Wege zu beschreiten.

Gerd Werner 13.11.2009
um 15:06 Uhr Kein seriöser Webentwickler benutzt diesen Mist. #zitieren

Andreas Scheller 13.11.2009
um 16:26 Uhr Das Sketch-Flow-Prototyping Tool ist für mich "DAS TOOL" für interaktive Wireframes.Den Kunden kann man mit einer gewissen Leichtigkeit die Anforderungen aus der Nase kitzeln und Änderungen on the Fly während eines Gesprächs visuell kommunizieren. Man kommt damit viel schneller zu einem allseits zufriedenstellenden Ergebnis und der Kunde weiss eher was er kriegt und ich hab deutlich weniger Änderungsaufwand. Außerdem weiss der Kunde auch viel früher im Entwicklungsprozess wie er mit einer neuen Software eigentlich arbeiten will und fängt schon frühzeitg damit an seinen Workflows gedanklich zu verbessern und zu vereinfachen. Für mich als Freelancer ein wirklich praktisches und einfaches Tool für die Konzeptionierung neuer Anwendungen. #zitieren

Martin 13.11.2009
um 19:59 Uhr (HTML- und sonstige Codeelemente werden nicht angezeigt) Gerd Werner:
Kein seriöser Webentwickler benutzt diesen Mist.


Was für ein Tool verwendet dann ein seriöser Webentwickler? Ich suche gerade ein ähnliches Tool für Flash. Ich möchte insbesondere User Flows darstellen. #zitieren

Bastian 13.11.2009
um 21:07 Uhr Für Flash gibt es da meines Wissens nach absolut nichts. Auch wüsste ich nicht, dass ähnliches für den "Flash Builder" (Flex Builder 4 aka Gumbo) geplant wäre.
Das einzige, was Adobe in Bezug auf "Flows" anbietet ist "Workflowlab" (gibt es noch nicht lange und ist entweder noch in Alpha oder Beta). Aber mit Interfacedesign hat das mal absolut nichts zu tun. Allerdings gibt es im "Flash Builder" ein Sketch-Skin. Sofern man effizient mit Bindings arbeitet ließe sich ein Prototyp damit ebenfalls bewerkstelligen. Allerdings lange nicht so simpel und flexibel wie mit den Mircrosoft-Tools. Auch ein entsprechendes Diagramm für den Kunden, wann, wo und welche Ansichten auftreten lässt sich bei Adobe nicht erstellen ;( #zitieren

FTWK 14.11.2009
um 15:20 Uhr clickdummy prototyping mit: Axure RP. Günstig und ok für 400€. #zitieren

Sonja 24.11.2009
um 15:45 Uhr "Kein seriöser Webentwickler benutzt diesen Mist."
Sehr richtig. #zitieren

Alexander Trefz 22.12.2009
um 23:55 Uhr Gerd Werner:
Kein seriöser Webentwickler benutzt diesen Mist.


Dieses Tool ist schlich der WAHNSINN. Ich BIN wie vermutlich auch der ein oder andere hier ein Seriöser Webentwickler und C# Programmierer und nutze es bereits. Die Kunden zeigen sich äußerst zufrieden da sie bsw. Ihr Feedback sehr präzise erstellen können und es mir zukommen lassen können. zeitlich und Räumlich unabhänging. Sehr nützlich eben.


@FTWK: Günstig?

http://www.amazon.de/s/ref=nb_ss_w?__mk_de_DE=%C5M%C5Z%D5%D1&url=search-alias%3Daps&field-keywords=microsoft+expression

160€ Expression Blend. Plus Umgebung für SL und WPF mit C#.

@ Sonja + Gerd seht euch erstmal an wies funktioniert bevor ihr es verflucht:

http://microsoftpdc.com/Sessions/CL23

Es gab selten etwas revolutionäreres im Bereich Prototyping. Aber ihr macht sicher noch Seiten für Netscape 4 und IE 5.5.... #zitieren

• expression,
• microsoft,
• sketchflow