Painless Wireframing

Wireframes sind heute im Entwicklungsmainstream angekommen. Richtig angewendet sind sie ein wirklicher Produkivitäts- und Kreativitätsbooster und bereiten pure Freude. Falsch angewendet bringen sie dagegen oft wenig.

Ich habe mal einige typische Anzeichen gesammelt, bei denen ich Wireframing falsch angewendet sehe:

  1. Wireframes enthalten sehr viele Details
  2. Wireframes sind Pixel-genau ausgerichtet
  3. Wireframes enthalten viel Farbe
  4. Wireframes sind Teil von Spezifikationen, es wird nicht mündlich damit kommuniziert
  5. Es gibt nur einen Wireframe je Funktion
  6. Wireframing nimmt sehr viel Zeit in Anspruch
  7. Es wird ein Master-Layout entwickelt, welches in allen Wireframes wiederverwendet wird
  8. Wireframing wird immer am PC begonnen

Diese Liste lässt sich sicher noch fortsetzen, aber aus meiner Sicht beschreiben sie die am häufigsten fehlverstandenen Eigenschaften von Detailtiefe (bzw. Untiefe), Kreativitätswirkung und Kommunikationseffekt.

Wireframes sind eine Technik, um Programmfunktionen via Oberflächen zu beschreiben. Sie sind das erste Instrument was man einsetzt, um Ideen zu sammeln und darzustellen. Übertrieben kann man sagen: Vor einem Wireframe hat man keinerlei Ahnung, wie das System aussehen und was es leisten soll. Wireframes leisten das Beeindruckende: Sie verschaffen eine konkrete Vorstellung von dem gewünschten System.

Wenn man erst einmal eine Idee generiert hat, können viele mehr folgen. Wireframes beflügeln die Vorstellungen, sowohl die eigenen, als auch die anderer. Damit das funktioniert, müssen Wireframes eine geringe Detailtiefe (=Lo-Fi, Low Fidelity) besitzen, um sie schnell entwerfen und auch verwerfen zu können.

So macht Wireframing Spaß und Sinn:

  • Wireframing mit Stift und Papier beginnen, ein Screen: 30 Sekunden!
  • Masse statt Klasse, am PC sollte ein Screen 5-10 Minuten benötigen. In einer Stunde kann man locker 15 Screen-Ideen erstellen!
  • Die Ideen hinter Wireframes sollte man im persönlichen Gespräch diskutieren, eine Quelle für neue Ideen!
  • Mut zur Ungenauigkeit!
  • Mut zum Verwerfen von Ideen!

Lo-Fi versus Hi-Fi Prototyping

Wireframes und Lo-Fi Prototyping sind Synonyme. Zusätzlich zu Lo-Fi Prototypen kann man später Hi-Fi Prototypen wie z.B. ein Screen-Design in Photoshop oder ein Prototyp in HTML, WPF oder Flash entwickeln. Viele Anwendungen wie z.B. LOBs benötigen keine Hi-Fi Prototypes, da UI Feinheiten eine untergeordnete Rolle spielen. In keinem Fall sollte man jedoch Hi-Fi und Lo-Fi Prototypen vermischen!

Zum Schluß ein Beispiel

http://qualityspy.wordpress.com/2013/09/15/applying-gamification-idea-collection/

Keiner der dortigen Screens hat länger als 5 Minuten in der Erstellung benötigt!