Mockups – Weil Bilder eben doch mehr sagen als tausend Worte.

http://upload.wikimedia.org/wikipedia/commons/d/d8/Information_overload1.jpg
Too much information – Quelle: Wikimedia Commons

Wer schon einmal an einem Projekt mitgewirkt hat, dass auch ein Layout erfordert (z.B. Software (GUI) oder eine Website), wird vielleicht festgestellt haben, es lässt sich lange und breit über Details diskutieren, ein konkretes Gesamtkonzept formt sich aber nur mühsam. Es entstehen viele Ideen, wie einzelner Content und einzelne Funktionen gestaltet werden könnten, es wird viel diskutiert, aber oft bereits in einem Detaillierungsgrad, der es schwer macht den Überblick zu behalten, das große Ganze zu sehen oder eben das Gesamtbild.

Stichwort Bild: Alle Ideen und Entscheidungen werden als Notizen festgehalten und später strukturiert schriftlich zusammengefasst. Was bleibt ist ein “Informationshaufen” (wenn auch ein strukturierter), der bei Detailbetrachtung das jeweilige Fragment zeigt, jedoch wieder kein Gesamtbild formt. Um es etwas anschaulicher, wenn auch abstrahiert [sic], darzustellen: Ich möchte mir die Entwicklung zweier Unternehmen A und B im letzten Jahr anhand von Aktienkursen anschauen. Dazu besorge ich mir die jeweiligen Tageskurse und stelle sie in einer Matrix zusammen. Zusätzlich berechne ich mir die prozentualen Kursveränderungen im Vergleich zum jeweiligen Vortag. Et voilà, mein Informationshaufen (korrekterweise: mein Datenhaufen) ist fertig. Nun kann ich mir vom 1. Januar bis zum 31. Dezember jeden Handelstag anschauen und analysieren, wie stark der Kurs von Unternehmen A im Vergleich zu Unternehmen B gestiegen oder gefallen ist. Auf der Detailebene eines Tages fällt es mir also nicht schwer, die Information zu erhalten, ob Unternehmen A oder Unternehmen B “besser” war. Nach dem 10. Tag werde ich aber vermutlich nicht mehr wissen, wer im Tagesvergleich vorne liegt. Die Lösung ist denkbar einfach: Ich erstelle mir ein Diagramm. Sofort erkenne ich, nur durch betrachten der Linienverläufe, dass Unternehmen A, bis auf eine kurze Periode zu Beginn des Jahres, immer die bessere Tagesperformance hatte. (Wenn ich es dann möchte, kann ich mir, z.B. in der anders verlaufenden Periode zu Jahresbeginn, die einzelnen Tageswerte im Detail anschauen und ggf. noch tiefer einsteigen, wenn ich die Hintergründe dazu wissen wöchte.)

Was ist hier also passiert, dass ich plötzlich das Gesamtbild sehe und zwar “sofort”? Ich habe meine Teilinformationen der einzelnen Tage in ein grafisches Format gepresst. Diese Kompression ermöglicht es mir, dass ich die Aussage nahezu sofort verstehe. Dahinter steckt prinzipiell (neurobiologisch/psychologisch nicht adäquat formuliert!), dass bei einem Bild (gemeint als Oberbegriff für grafische Darstellungen) Schemata abgeglichen werden, die das Gehirn gespeichert hat. Je besser das gesehene Bild in ein bekanntes Schema passt, desto schneller kann das Gehirn das Gesehene verarbeiten, ich erhalte die Information also schneller und mit weniger Anstrengung. Texte lassen sich nicht in solche Schemata pressen, ich muss sie also wesentlich individueller verarbeiten, wodurch die Informationsgewinnung länger dauert und anstrengender ist. Da die Aufnahmefähigkeit (i.S.v. Zwischenspeichern) nun bekanntlich begrenzt ist, lassen sich nicht genügend Informationen zu einem Gesamtbild zusammenfügen, da das Kurzzeitgedächtnis ständig “überschrieben” wird.

Was hat das Ganze jetzt also mit unserem Thema zu tun? Ganz einfach: Visualisierung! Ein Bild sagt mehr als tausend Worte! Anstatt also in stundenlangen Diskussionen Text zu notieren, sollte besser gemalt werden – überspitzt formuliert.

(Ein tolles Beispiel für einen Mittelweg der Informationsdarstellung sind Bild-Text-Kombinationen, die eine schnellere Informationsaufnahme ermöglichen, wie z.B. Info-Grafiken: Suche nach E-Learning auf Pinterest. Durch Formen, Farben, Proportionen, Icons, Logos usw. werden die Informationen bildlich dargestellt bzw. wirken unterstützend zum Text – Stichwort Illustration.)

https://acme.mybalsamiq.com/mockups/456718.png
Wireframe; Quelle: Balsamiq

Gleiches gilt nun für unser Projekt. Die vielen Ideen und Details lassen uns den Wald vor lauter Bäumen nicht mehr sehen, also visualisieren wir das Ganze doch einfach! Wobei, jetzt müssen Grafiker und Programmierer Zeit (=Geld) auf etwas verwenden, was noch eine “Idee” ist und vielleicht in zwei Wochen ganz anders aussehen wird? Vielleicht doch nicht so klug. Die Antwort lautet: Wireframing. Ich baue mir ein grafisches Gerüst, in welchem ich meine Ideen direkt grafisch umsetze. Der Abstraktionsgrad kann dabei anfänglich sehr hoch sein, z.B. nur Flächen enthalten, die Platzhalter sind, dennoch sehe ich stets den Wald und nicht nur einzelne Bäume. Ein weiterer Vorteil ist, diese einfachen Layouts kann ich als “Business-Guy” (oder Business-Gal) selbst herstellen. Dafür brauche ich keine Grafiker oder Programmierer. Statt also in einem Word-Dokument oder auf PowerPoint-Folien nur Text zu horten, “baue” ich direkt ein Modell meines Projekts, z.B. einer Website. Diese Modelle sind auch als Mockups bekannt.

http://docs.moodle.org/dev/images_dev/thumb/d/d7/Balsamiq_Mockups_For_Desktop_-_Users_jerome_Documents_Projects_Mockup_Moodle_iPhone_mockup_private_message.bmml.jpg/800px-Balsamiq_Mockups_For_Desktop_-_Users_jerome_Documents_Projects_Mockup_Moodle_iPhone_mockup_private_message.bmml.jpg
Mockup; Quelle: Moodle App

Natürlich gibt es auch für Mockups spezielle Software. Eines der wohl bekanntesten Tools ist Balsamiq (~ 60€). In einer Art Baukasten finden sich viele verschiedene Objekte und Symbole, die eine schnelle Darstellung eines Konzepts ermöglichen, z.B. für eine App ein Smartphone und die jeweiligen Schaltflächen u.ä. Zudem lassen sich funktionale Aspekte durch Verlinkungen umsetzen, wodurch z.B. auch der “Click-Flow” auf einer Website simuliert werden kann. (Eine Open-Source Alternative ist z.B. Pencil, das allerdings Funktional nicht so umfangreich ist wie Balsamiq.) Durch viele Add-Ons lassen sich unzählige Vorlagen für Grafikobjekte hinzufügen, z.B. ein Package für Android-Smartphones.

Ein Wireframe bzw. Mockup lässt mich aber nicht nur das Bisherige – die gesammelten Informationen – anders darstellen, sondern führt durch die “Anfassbarkeit” auch zu neuen Ideen, lässt Probleme schneller erkennen und bildet etwas ganz wichtiges: Eine konstruktive Diskussionsgrundlage. Auf Grundlage von Text, sei er auch noch so strukturiert, lässt sich einfach schwierig diskutieren, da er wieder Punkt für Punkt durchgegangen werden muss – die Übersicht fehlt.

Meine persönliche Erfahrung ist, dass Wireframes bzw. Mockups die Geschwindigkeit bei der Projektdurchführung merklich steigern. Von einem kreativen Standpunkt aus, formen sich viel spontaner gute Einfälle, da das Gehirn nicht damit beschäftigt ist, aus allen Teilinformationen ein Bild zusammenzusetzen – das Bild ist schon da. Außerdem sieht man sehr schnell, was “funktioniert” und was “funktioniert” überhaupt nicht. Diskussionen auf Textbasis formen zudem stets bei jedem Mitwirkenden ein anderes Bild im Kopf, man spricht also oft aneinander vorbei oder drumherum. Noch schlimmer ist, wenn man denkt, dass man sich versteht und merkt erst viel zu spät, dass man andere Vorstellungen hatte. Zudem lässt es sich mit Wireframes bzw. Mockups wunderbar iterativ arbeiten. Einen professionellen Entwurf (i.S.v. Grafikdesign bzw. Programmierung) dauernd “in die Tonne zu treten”, würde wohl sehr ineffizient und unbefriedigend sein. Durch die einfache Erstellung und Veränderbarkeit, lässt es sich mit Wireframes bzw. Mockups sehr viel flexibler arbeiten. Man denke nur an einen totalen Umwurf des bisherigen Konzepts – mit Wireframes bzw. Mockups kein Problem, mit professioneller Umsetzung schon. So kann ab dem Kick-off-Meeting auf etwas Konkretem aufgebaut werden. Nach – oder sogar während – jedem Meeting kann der neue Stand in Form eines Wireframes bzw. Mockups umgesetzt werden und dient als weitere Grundlage des Projekts. Zudem können später, für die Realisierung, die Wireframes bzw. Mockups als Anforderungsdefinition dienen bzw. als Anhang zu einem Ticket (für Programmierer und Designer) beigefügt werden. Auch hier kann wieder Problemen vorgebeugt werden, falls Programmierer/Grafiker den reinen Text des Tickets anders interpretieren, als das Projektmanagement es meint.

Also, hört endlich auf nur zu schreiben und fangt an zu malen! In diesem Sinne, höre ich jetzt auf zu schreiben…

http://25.media.tumblr.com/tumblr_m336suCIGd1qzx36ho1_500.gif
Quelle: http://www.los-list.com/blog/bookworm-david-mccandless/
Print Friendly, PDF & Email

5 thoughts on “Mockups – Weil Bilder eben doch mehr sagen als tausend Worte.

  1. Ich finde Mockups sind eine wirklich nützliche Möglichkeit die Kommunikation zwischen IT-lern und Nicht-IT-lern zu verbessern. So können Vorstellungen, wie Inhalte umgesetzt werden sollen visualisiert werden, was die Missverständnisse zwischen den eben erwähnten Personen minimiert. Mockups können auch eine gute Diskussionsgrundlage für Desings darstellen, weil man Entwürfe zeigen kann, ohne sie vorher zu programmieren. Als Tool habe ich bisher Balsamiq genutzt. Manchmal reicht aber auch eine Skizze auf einer Flipchart aus. Gut geeignet zur Diskussion von Design Entwürfen sind auch Post-its in unterschiedlichen Formen und Farben. Damit kann man offline Änderungen in Echtzeit vornehmen 🙂

  2. Ein ganz toller Artikel, danke auch für die vielen Werkzeughinweise! Im Rahmen einer agilen Entwicklung kann so ein Mockup als Modell für einen Prototypen gesehen werden und damit können die Vorteile, die du aufgeführt hast, eingeheimst werden: insbesondere als Grundlage für einen verbesserten, zielgerichteten, möglichst “bullshit”-freien Dialog zwischen Entwicklern oder zwischen Entwicklern und Kunden. Durch zwei aktuelle Semesterprojekte mit MBA-Studierenden interessiere ich mich zurzeit vor allem auch für die “Kulturabhängigkeit” solcher Methoden. Und damit meine ich nicht so sehr die Projekt-Kultur (da ist es klar, dass traditionelle Teams mit diesen Methoden zunächst Schwierigkeiten haben werden), sondern die Landeskultur. Natürlich suggeriert uns die globale Berichterstattung qua Internet, Twitter usw. dass wir die sumpfigen Niederungen der Landeskultur längst hinter uns gelassen haben und uns im fröhlichen Weinberg tummeln, in dem alle Unterschiede (Nation, Geschlecht, Klasse usw.) verschwunden sind und wir uns nur mehr auf das Gelingen unserer Arbeit konzentrieren können… das ist natürlich zum Teil Selbsthypnose der “Digital Natives”. Das erinnert mich an das Ausrufen des “globalen Kunden”, der in allen Ländern und durch alle Schichten hindurch dasselbe globale Produkt verlangt. Im letzteren Fall wissen wir jetzt, dass das so nicht für alle Produkte, alle Länder und alle Schichten funktioniert. Okay, das war jetzt mehr Meditation als Kommentar…trotzdem an dich vielleicht ganz konkret die Frage: meinst du, oder hast du vielleicht sogar Informationen, ob die Arbeit mit Mockups bspw. in Asien genauso gut funktioniert wie im Westen? Zugegebenermaßen ist das keine leichte Frage…

  3. Dominik

    Das ist defintiv nicht leicht zu beantworten. Ich denke, was grundsätzlich festzuhalten bleibt, ist, dass – von der Grundfunktionsweise her – das Gehirn überall auf der Welt gleich funktioniert (ich beziehe mich hierbei natürlich auf den Homo sapiens ;-)). Die bessere (i.S.v. einfachere bzw. schnellere) Informationsaufnahme durch Verbildlichung sollte also unabhängig von Einflüssen wie Kultur o.ä. sein.

    Dass dann das Visualisierte unterschiedlich wahrgenommen wird (WIE wird WAS visualisiert), sei es durch kulturellen Kontext oder schlicht die Persönlichkeit (z.B. Einstellungen, Erfahrungen) der Person (die ja auch kulturell geprägt ist), ist natürlich klar. Man denke beispielsweise an Farbinterpretationen: http://www.informationisbeautiful.net/visualizations/colours-in-cultures/ | http://mastersofmedia.hum.uva.nl/2012/03/28/cultural-bias-in-data-visualization/ Ähnliches gilt mit Sicherheit auch für Formen usw.

    Auch der Dialog (wie diskutiert man) ist natürlich kulturell unterschiedlich. Daran wird auch die Visualisierung nichts ändern. In Asien wird man z.B. wohl eher diskret auf “Bullshit” hinweisen. In Deutschland könnte das Wort “Bullshit” (bzw. ein germanisches Equivalent) dann auch mal explizit fallen. Das der “Bullshit” durch die Visualisierung aber auch in Asien schneller auffällt, würde ich jetzt mal definitiv behaupten. Ob der Effekt der Visualisierung (schneller, verständlicher, inspirierender) dann verpufft, ist also m.M. nach schon kulturell beinflusst, nicht aber der Punkt, ob der Effekt auftritt.

    (Bei Projekt-Kulturen ist das dann ja eher eine Frage der Konditionierung auf bestimmte Arbeitstechniken, Stichwort Change-Management.)

    My 2 Cents…

  4. Lennart Bolduan

    Mockups sind also Modelle. Geht es dabei nur um die Visualisierung und das Zusammenfasen von Datenmengen?

    LG und danke für den gelungenen Einstieg zum Thema Mockups!

  5. Floyd

    Super Artikel! Mockups erleichtern definitiv die Arbeit und außerdem werden Fehler und Missverständnisse vermieden, da Mockups in einem Stadium verwendet werden, in dem noch Sachen verändert werden können. Nutze Mockups regelmäßig für Produktpräsentationen. Häufig kommt bei mir das iPhone 11 pro Mockup von https://www.chris-hortsch.de/webdesign-blog/kostenlose-iPhone-11-pro-PSD-mockups.html zum Gebrauch. Kann ich nur weiterempfehlen! Bearbeiten tu ich die dann mit Photoshop, hab aber auch schon gehört, dass das mit Gimp (kostenlos) funktionieren soll.

    LG, Floyd

Leave a Reply

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


CAPTCHA-Bild
Bild neu laden