{"id":8414,"date":"2018-04-26T15:57:32","date_gmt":"2018-04-26T13:57:32","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/?p=8414"},"modified":"2021-01-07T14:40:29","modified_gmt":"2021-01-07T13:40:29","slug":"qual-der-wahl-vier-konzept-tools-im-vergleich","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/qual-der-wahl-vier-konzept-tools-im-vergleich\/","title":{"rendered":"Die Qual der Wahl \u2013 vier Konzept-Tools im Vergleich"},"content":{"rendered":"

Wenn aus einem kleinen Konzept hundert Wireframes werden und die wiederum schnell noch zum Prototyp, stellt sich manchmal zu sp\u00e4t die Frage: Welches Tool w\u00e4re das richtige gewesen? Im Arbeitsalltag pr\u00fcfen wir h\u00e4ufig, mit welchen Werkzeugen wir Konzepte erstellen. Das h\u00e4ngt nat\u00fcrlich (wie immer) von vielen Faktoren ab; wir entscheiden daher nicht in jedem Projekt anhand der gleichen Kriterien. Zum einen entscheidet der Kontext: Wird das Konzept zum Beispiel direkt umgesetzt? Werden Spezifikationen geschrieben? Gestalten wir das Konzept visuell oder \u00fcbergeben wir es direkt zum Kunden? Entscheidend kann auch sein, ob ein Klick-Prototyp gebaut werden soll, ein Usability Test stattfindet oder animierte \u00dcberg\u00e4nge zwischen den einzelnen Wireframes\/Screens f\u00fcr das Projekt von Anfang an hoch priorisiert sind. Zum anderen haben Kunden auch Vorlieben f\u00fcr Tools die sie selbst nutzen.<\/p>\n

Unterm Strich gibt es also keine generelle Empfehlung f\u00fcr ein bestimmtes Tool. Ich m\u00f6chte aber aufschl\u00fcsseln, welche Vor- und Nachteile ich pers\u00f6nlich in einigen der g\u00e4ngigen Tools sehe, um anderen Designern ihre Entscheidung zu erleichtern.\"\"<\/a><\/p>\n


\nIn den meisten meiner Projekte ist es mir am wichtigsten, schnell Konzepte zu erstellen, die ein konkretes Nutzungsszenario abbilden und dabei den generellen Aufbau der Software, das Navigations- und Interaktionskonzept zeigen \u2013 und nicht die visuelle Gestaltung. Unsere Erfahrung zeigt, dass Kunden bei zu realistischen Wireframes h\u00e4ufig mit einer falschen Erwartungshaltung in die Diskussion gehen \u2013 dann diskutieren wir in Reviews \u00fcber die Schriftart\/-gr\u00f6\u00dfe oder die Hintergrundfarbe statt \u00fcber den Interaktionsfluss durch das Nutzungsszenario. In dieser Hinsicht hat das gute alte Balsamiq aus meiner Sicht immer noch einen gro\u00dfen Pluspunkt durch den handgezeichneten Stil des Standard-UI-Kits.<\/p>\n

Dienste in der Cloud wollen manche Unternehmen aus datenschutzrechtlichen Gr\u00fcnden nicht nutzen, so dass Tools, die ohne Cloud auskommen, besondere Bedeutung zuf\u00e4llt. Daher betrachte ich neben dem klassischen Scribbeln auf Papier oder am Whiteboard die Programme Balsamiq Mockups, Adobe XD und PowerPoint. Au\u00dfen vor gelassen habe ich unter anderem Sketch, weil es MacOS-exklusiv ist, ich aber auf Windows arbeite. Zudem beschr\u00e4nke ich mich auf die Konzeptionsphase zu Beginn eines Projekts und klammere die sp\u00e4tere Zusammenarbeit mit visuellen Designern zun\u00e4chst aus \u2013 je nach Projekt ist aber ein Tool sinnvoll, das es erlaubt, die Ergebnisse aus der Konzeptphase als Assets weiter zu verwenden.<\/p>\n

Pro Tool werde ich ein Beispiel-Konzept zeigen. F\u00fcr eine gewisse Vergleichbarkeit verwende ich jeweils die selbe User Story:<\/p>\n

\n

Immer wenn Paula, die Schichtleiterin, einen Wartungsbericht per Mail erh\u00e4lt, m\u00f6chte sie diesen zentral bereitstellen, damit sich ihre Kollegen in der n\u00e4chsten Schicht \u00fcber den aktuellen Stand informieren k\u00f6nnen.<\/p>\n<\/blockquote>\n

 <\/p>\n

Dieses begrenzte \u201eDatei hochladen\u201c-Szenario, soll nicht vom eigentlichen Fokus \u2013 der Wahl des Werkzeugs \u2013 ablenken. Los gehts!<\/p>\n

Stift und Papier<\/h3>\n

Nein! Wirklich? Ja, gerade zu Beginn der Konzeptphase finde ich es wirklich sinnvoll, mich selbst zu begrenzen indem ich von allen fancy Tools Abstand nehme. In Workshops geht nichts \u00fcber ein Whiteboard, aber auch in der n\u00e4chsten Phase der ersten Reinzeichnung bietet sich diese Methode an, um grobe Denkfehler aufzudecken und beispielsweise ein \u00fcbergreifendes Navigationskonzept und die generelle Platzaufteilung zu pr\u00fcfen. Schwieriger und ineffizienter werden Stift und Papier, wenn es ins Detail geht und kleine und gr\u00f6\u00dfere \u00c4nderungen auf ganzen Papierstapeln nachgezogen werden m\u00fcssten.
\nDie Umsetzung von Paulas User Story mit Stift und Papier kann zu Beginn beispielsweise so aussehen:<\/p>\n

\"\"<\/a><\/p>\n

Vorteile (mehr dazu im Blogartikel meines Kollegen Jonas Laux<\/a>):<\/h5>\n

\u2022 Geschwindigkeit: schnell Ideen kommunizieren.
\n\u2022 Grobkonzepte sofort durchdenken und ihre Sinnhaftigkeit pr\u00fcfen.
\n\u2022 Einfache Werkzeuge wie Stift und Papier f\u00f6rdern durch ihre Zug\u00e4nglichkeit Zusammenarbeit in gemeinsamen Besprechungen.
\n\u2022 Low-Fi-Charakter: Als Konzepterin komme ich nicht in Versuchung, detailgetreue Screens abzuliefern; die Kundin kommt nicht auf die Idee, Schriftart oder Abst\u00e4nde zu kritisieren und kann sich voll auf den User Flow konzentrieren.<\/p>\n

Nachteile:<\/h5>\n

\u2022 F\u00fcr detaillierte Konzepte sind Papierskizzen nicht sinnvoll, da \u00c4nderungen recht aufwendig sind.
\n\u2022 Der Teufel steckt im Detail: Viele Probleme eines Interaktionskonzepts werden erst beim detaillierten Ausarbeiten sichtbar, das beim Skizzieren eher ausgeklammert wird.<\/p>\n

Balsamiq Mockups<\/h3>\n

Balsamiq habe ich in den letzten Jahren f\u00fcr die meisten Projekte verwendet. Mit dem Programm lassen sich schnell Wireflows \u2013 also eine Abfolge von Wireframes \u2013 bauen, die ein gutes Gef\u00fchl f\u00fcr Gr\u00f6\u00dfenverh\u00e4ltnisse, Platzbedarf und die Interaktion im fertigen Interface geben. Probleme macht Balsamiq jedoch bei komplexen Szenarien und bei nachtr\u00e4glichen \u00c4nderungen \u2013 je nachdem wie oder ob man Master angelegt hat, sind \u00c4nderungen schnell eingepflegt oder bedeuten doch wieder manuellen Aufwand auf jedem einzelnen Wireframe, selbst wenn man Master verwendet. Der Wireflow durch die User Story ist relativ schnell erstellt:<\/p>\n

\"\"<\/a>Vorteile:<\/h5>\n

\u2022 Handgezeichneter Stil \u2013 der Wireframe ist als solcher gut erkennbar.
\n\u2022 Grundlayouts lassen sich schnell und fokussiert erstellen.
\n\u2022 Control- und Icon-Bibliothek: Mit ein bisschen Erfahrung k\u00f6nnen per Shortcut und mit Eingabe eines Keywords innerhalb von Sekunden ein passendes UI-Element oder ein sprechendes (Platzhalter-)Symbol eingef\u00fcgt werden.
\n\u2022 Master lassen sich anlegen und einzeln editieren.<\/p>\n

\"\"<\/a>

Schnellsuche nach einem passenden Icon<\/p><\/div>\n

<\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
Nachteile:<\/h5>\n

\u2022 Die \u00dcbersichtlichkeit und Geschwindigkeit leidet bei vielen Wireframes in einer Datei sp\u00fcrbar.
\n\u2022 Spezifizieren ist nicht m\u00f6glich, Notizen liegen auf dem Wireframe \u201eim Weg rum\u201c.
\n\u2022 Balsamiq exportiert nur Bilder, Texte im PDF sind nicht durchsuchbar.
\n\u2022 Fr\u00fcher oder sp\u00e4ter muss bei den Mastern getrickst werden (z.B. Bereiche \u201eausblenden\u201c indem man sie mit wei\u00dfen Fl\u00e4chen \u00fcberdeckt), weil sie nicht sehr flexibel sind.<\/p>\n

PowerPoint<\/h3>\n

Es klingt eher wie eine Methode aus den 90ern, aber tats\u00e4chlich hat PowerPoint f\u00fcr das Erstellen von Konzepten mittlerweile einiges zu bieten. Ich habe damit in j\u00fcngster Zeit in zwei Projekten gearbeitet und kann sagen: Es gibt b\u00f6se Nachteile, aber auch sehr nette Vorteile, die mich milde stimmen. UI-Kits mit g\u00e4ngigen Controls und Icons sind durch Zukauf erh\u00e4ltlich. Die normalen Folienmaster k\u00f6nnen sehr gut f\u00fcr das Grundlayout eingesetzt werden, sodass sich \u00c4nderungen, die alle Screens betreffen, recht gut verwalten lassen. Formen und Gestaltungsformen sind im Gro\u00dfen und Ganzen schlicht und verlocken nicht, sich in Details zu verlieren:<\/p>\n

\"\"<\/a>Vorteile:<\/h5>\n

\u2022 Master in einem separaten Modus anzupassen und genau zu wissen, wo sie welche Auswirkungen haben, ist beruhigend angenehm. Wer es von Beginn an richtig angeht, kann mit wenigen Klicks \u00c4nderungen auf vielen Screens nachziehen.
\n\u2022 Wundersch\u00f6ne Animationen brauchen kaum Animationskenntnisse \u2013 PowerPoint \u00fcbernimmt die Arbeit mit dem Folien\u00fcbergang \u201eMorph\u201c, sobald man verstanden hat, wie man ihn einsetzt. Dadurch k\u00f6nnen \u00dcberg\u00e4nge zwischen UI-Zust\u00e4nden schon in einer fr\u00fchen Konzeptphase verdeutlicht werden, um z.B. die Aufmerksamkeit des Nutzers zu lenken.
\n\u2022 Jeder kennt PowerPoint \u2013 auch Kunden k\u00f6nnen die Dateien ohne Probleme \u00f6ffnen, kollaboratives Arbeiten ist m\u00f6glich.
\n\u2022 Notizen lassen sich gut im Notizfeld unterbringen und k\u00f6nnen sp\u00e4ter als \u201eNotizenseiten\u201c-PDF f\u00fcr die Konzept-Spezifikation genutzt werden.<\/p>\n

\"\"<\/a>

Aufteilung: Seiten\u00fcbersicht links, Inhaltsbereich rechts, darunter die Notizen<\/p><\/div>\n

Nachteile:<\/h5>\n

\u2022 Das Programm ist nicht prim\u00e4r f\u00fcr das Konzepten ausgelegt, das sp\u00fcrt man immer wieder schmerzlich, z.B. bei Shortcuts und beim Verlinken von Seiten (m\u00f6glich, aber sehr umst\u00e4ndlich).
\n\u2022 Animationen von Seiten\u00fcberg\u00e4ngen sollten eher exemplarisch eingesetzt werden, da \u00c4nderungen viel Aufwand mit sich bringen.
\n\u2022 Gesamte Screen-\u00dcberg\u00e4nge k\u00f6nnen nur animiert werden, wenn sie nicht auf Mastern beruhen.
\n\u2022 Auch bei PowerPoint l\u00e4sst die \u00dcbersichtlichkeit in Konzepten mit vielen Wireframes zu w\u00fcnschen \u00fcbrig. Immerhin helfen Abschnitts\u00fcberschriften um Inhalte zu gliedern und aus-\/einzublenden.<\/p>\n

Adobe XD<\/h3>\n

Adobe XD habe ich erst vor kurzem das erste Mal verwendet und daher noch wenig Erfahrungswerte. Eine ausf\u00fchrlichere Betrachtung von Adobe XD aus der Sicht eines visuellen Designers<\/a> hat mein Kollege Roger Towae vorgenommen. Mein erster Eindruck: das Tool ist noch etwas unfertig, gerade f\u00fcr reine Konzeptarbeit. Einiges ist sehr sch\u00f6n umgesetzt, allem voran die Prototyping-Funktionalit\u00e4t. Gr\u00f6\u00dftes Manko ist aber, dass sich viele Funktionen nur nutzen lassen, wenn die Daten in der Cloud gespeichert\/ver\u00f6ffentlicht werden \u2013 das ist in vielen unserer Kundenprojekte nicht m\u00f6glich. Die Anmutung der Screens kann der von PowerPoint entsprechen, allerdings gibt es viel mehr M\u00f6glichkeiten der freien Gestaltung, die f\u00fcr die Konzeptphase nicht relevant sind, aber bei der Weiterverwendung der Datei im visuellen Design von Vorteil sein k\u00f6nnen:\"\"<\/a>Vorteile:<\/p>\n

\u2022 Das Programm hilft bei der Ausrichtung von Elementen und dem Anlegen von Wiederholungsmustern, so dass Wireframes schnell ordentlich gebaut sind.
\n\u2022 Wireframes lassen sich schnell und angenehm miteinander verlinken, Prototypen sind im Handumdrehen erstellt.
\n\u2022 Der Arbeitsbereich kann \u00fcbersichtlich eingerichtet werden, indem verwandte Wireframes nahe beieinander und andere Konzepte weiter entfernt platziert werden, zum Beispiel in unterschiedlichen Spalten:<\/p>\n

\"\"<\/a><\/p>\n

Nachteile:<\/h5>\n

\u2022 Wichtige Funktionen fehlen noch. Master lassen sich zwar anlegen, aber nicht praktikabel verwenden. Soll der Button mal etwas kleiner sein, ist er sofort \u00fcberall kleiner \u2013 noch nicht einmal die Farbe l\u00e4sst sich individuell an einer Stelle \u00e4ndern. Sicherlich aber etwas, was in k\u00fcnftigen Releases kommen wird.
\n\u2022 Es gibt weder Standard-UI-Kits noch Icon-Bibliotheken. Stattdessen kann man XD-Dateien mit solchen Elementen herunterladen und sie in die eigene Datei kopieren \u2013 das ist aber m\u00fchselig und zeitaufwendig. Diese Dateien lassen sich auch nicht per Stichwort durchsuchen.
\n\u2022 Die bereits angesprochene Cloud-Anbindung f\u00fchrt dazu, dass wir viele Funktionen nicht in Kundenprojekten nutzen k\u00f6nnen.<\/p>\n

Fazit<\/h3>\n

Wie eingangs bereits erw\u00e4hnt, h\u00e4ngt das passende Werkzeug immer von der Aufgabe ab. F\u00fcr die Ideenfindung und ein erstes Durchdenken eignen sich Stift und Papier. Sollen Wireframes entstehen, die einen Ablauf (statisch) zeigen, so w\u00fcrde ich nach wie vor Balsamiq als geeignetes Tool empfehlen. Geht es mehr um Screen-\u00dcberg\u00e4nge, kollaboratives Arbeiten mit dem Kunden und die M\u00f6glichkeit, alle Designentscheidungen festzuhalten, ist PowerPoint sinnvoll. Adobe XD ist vielversprechend, die Prototypenerstellung macht hier richtig Spa\u00df. Auch komplexe Konzepte k\u00f6nnen relativ \u00fcbersichtlich dargestellt werden. Essentielle Funktionen f\u00fcr das Erstellen eines \u201eLow Fi Konzepts\u201c werden hoffentlich bald folgen \u2013 wenn dem so ist, sehe ich in Adobe XD gro\u00dfes Potential, nicht zuletzt auch, weil die Weiterentwicklung vom Konzept zum visuellen Design im selben Tool stattfinden k\u00f6nnte. Es bleibt also spannend im Tool-Universum f\u00fcr Konzepter.<\/p>\n

 <\/p>\n

Wir haben Ihr Interesse geweckt? Schauen Sie sich unsere Leistungen<\/a> an!<\/strong><\/p>\nUX Design<\/span><\/a><\/span>\n

 <\/p>\n","protected":false},"author":35,"featured_media":0,"template":"","tags":[518,166,100,116,526,105,62],"class_list":["post-8414","blog","type-blog","status-publish","hentry","tag-adobe","tag-design-prinzipien","tag-design-prozess","tag-konzeptuelles-design","tag-power-point","tag-scribbles-de","tag-visuelles-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/8414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/35"}],"version-history":[{"count":2,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/8414\/revisions"}],"predecessor-version":[{"id":11857,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/8414\/revisions\/11857"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=8414"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=8414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}