{"id":13170,"date":"2024-10-24T15:35:00","date_gmt":"2024-10-24T13:35:00","guid":{"rendered":"https:\/\/www.iese.fraunhofer.de\/blog\/?p=13170"},"modified":"2024-10-24T15:35:00","modified_gmt":"2024-10-24T13:35:00","slug":"cartooneering-gestaltungsrichtlinien","status":"publish","type":"post","link":"https:\/\/www.iese.fraunhofer.de\/blog\/cartooneering-gestaltungsrichtlinien\/","title":{"rendered":"Cartooneering: The Art of Draw \u2013 Wie sehen gute Comics aus und was ist dabei wichtig?"},"content":{"rendered":"

Im letzten Beitrag \u00fcber Cartoneering<\/a> haben wir unsere Handlungsempfehlungen erl\u00e4utert, um grafische Szenarien mit einer passenden Geschichte zu versehen. Dazu geh\u00f6rten die klare Erkennbarkeit eines Protagonisten und einer Aufgabe pro Comic, der Einsatz von Nebenfiguren als Personas, der Perspektivenwechsel, die Anwendung der f\u00fcnf Akte des Dramas, die Nicht-Fokussierung auf die Interaktion mit dem Produkt und die Notwendigkeit, dass die Handlung auf einen Blick erkennbar sein muss, und die daraus resultierende Struktur f\u00fcr die Gestaltung aussagekr\u00e4ftiger Szenarien. Bei den grafischen Methoden ist neben dem Inhalt vorrangig die durchdachte Gestaltung entscheidend, damit der Comic seinen Zweck \u2013 klare Vermittlung und effektive Ansprache \u2013 erf\u00fcllen kann. Daher k\u00fcmmern wir uns im dritten Teil unserer Blogreihe zu Cartooneering<\/a> um die Gestaltungsrichtlinien.<\/p>\n

Neben den Handlungsempfehlungen f\u00fcr den Aufbau eines Comics haben wir sechs Gestaltungsrichtlinien f\u00fcr die visuelle Gestaltung identifiziert, die bei der Anwendung von Cartooneering zu optimalen Ergebnissen f\u00fchren. Diese m\u00f6chten wir im Folgenden vorstellen:<\/p>\n

    \n
  1. Reduziere Details und Farbe<\/strong><\/li>\n
  2. Hebe entscheidende Elemente f\u00fcr die Handlung hervor<\/strong><\/li>\n
  3. Zeige die Handlung, nicht (nur) das System<\/strong><\/li>\n
  4. Verwende nicht zu viel Text<\/strong><\/li>\n
  5. Zeige Emotionen<\/strong><\/li>\n
  6. Passe den Comic kontinuierlich an<\/strong><\/li>\n<\/ol>\n
    \n

    Cartooneering auf einen Blick<\/strong>
    \nIhre Mitarbeiter und Projektpartner verstehen nicht, was die Vision des Projekts ist? Unklare Anforderungen und unterschiedliche Erwartungen k\u00f6nnen bei neuen Entwicklungsprojekten schnell zu Kommunikationsproblemen und Verz\u00f6gerungen f\u00fchren. \u00bbCartooneering\u00ab bietet eine innovative L\u00f6sung, um diese H\u00fcrden zu \u00fcberwinden. Mit ausgefeilten Personas und lebendigen Comics schaffen wir ein gemeinsames Verst\u00e4ndnis f\u00fcr Nutzer und Problembereiche, wodurch eine klare und einpr\u00e4gsame Produktvision entsteht.
    \nProfitieren Sie von einem genauen Verst\u00e4ndnis der Bed\u00fcrfnisse Ihrer Zielgruppe, einer klaren Vision von Anfang an und anschaulichen visuellen Szenarien, die Ihr Produkt jederzeit verst\u00e4ndlich erkl\u00e4ren.     Bringen Sie Ihr Team auf Erfolgskurs und sichern Sie sich eine solide Grundlage f\u00fcr Ihr Projekt mit \u00bbCartooneering\u00ab!<\/a><\/p>\n<\/div>\n

    Reduziere Details und Farbe<\/h2>\n

    Das Hauptziel des Comics ist es, das Verst\u00e4ndnis der Stakeholder und Entwickler f\u00fcr das Problem und den L\u00f6sungsprozess zu f\u00f6rdern und eine gemeinsame Produktvision zu entwickeln. Dabei ist es wichtig, ein Gleichgewicht zwischen Informationsgehalt und Illustration zur besseren Vorstellung zu finden. Zu viele Details in den Bildern k\u00f6nnen leicht von der eigentlichen Probleml\u00f6sung ablenken. Stattdessen sollten die Bilder klar den Kontext vermitteln, in dem sich der Protagonist befindet. Relevante Objekte und eine angedeutete Umgebung sind dabei hilfreich, w\u00e4hrend zu viele dekorative Elemente wie Vasen oder Lampen die Verst\u00e4ndlichkeit beeintr\u00e4chtigen k\u00f6nnen.<\/p>\n

    In prototypischen Eins\u00e4tzen von Cartooneering mit unterschiedlichen visuellen Stilen hat sich gezeigt, dass eine schwarz-wei\u00dfe Gestaltung mit wenigen Akzentfarben das Verst\u00e4ndnis erleichtert, ohne die Komplexit\u00e4t zu erh\u00f6hen oder abzulenken (siehe Abbildung 1).<\/p>\n

    \"\"
    Abbildung 1: Vergleich zweier Comics mit reduzierter und vollst\u00e4ndiger Einf\u00e4rbung<\/figcaption><\/figure>\n

    Hebe entscheidende Elemente f\u00fcr die Handlung hervor<\/h2>\n

    Durch gezielte Reduktion wird Farbe bewusst eingesetzt, um wichtige Handlungsschritte der zentralen Figuren hervorzuheben. Dies kann so weit gehen, dass nur eine Akzentfarbe verwendet wird, w\u00e4hrend der Rest des Comics in Graustufen gehalten ist. Das Prinzip \u201eweniger ist mehr\u201c steht im Vordergrund.<\/p>\n

    Der Vorteil dieses Ansatzes liegt in der schnellen und einfachen Gestaltung. Stakeholder k\u00f6nnen den Handlungsverlauf schnell erfassen, sodass eventuelle L\u00fccken in der Geschichte, den Handlungen der Charaktere oder der Interaktion mit dem System sofort erkannt und angepasst werden k\u00f6nnen. Farbe ist ein wirkungsvolles Mittel, um zentrale Elemente und handelnde Personen hervorzuheben (siehe Abbildung 2). Insbesondere Ger\u00e4te, Objekte oder angedeutete UI-Elemente wie Buttons oder Listen, mit denen der Protagonist interagiert, sollten in Farbe erscheinen. Auch hier gilt: Ein minimaler Einsatz von Farbe f\u00fchrt zu maximaler Wirkung, indem Ablenkungen vermieden werden und der Leser nicht \u00fcberfordert wird.<\/p>\n

    \"\"
    Abbildung 2: Gezielter Einsatz von Farbe zur Hervorhebung der Protagonistenpersona und anderer wichtiger Elemente der Handlung<\/figcaption><\/figure>\n

    Ein weiterer Vorteil ist, dass die Comics w\u00e4hrend der Entwicklung des Systems einfach und ohne gro\u00dfen Aufwand aktualisiert werden k\u00f6nnen, wenn z.\u00a0B. Anforderungen pr\u00e4zisiert, ge\u00e4ndert oder Teilbereiche des Systems umgesetzt werden.<\/p>\n

    Die bewusst reduzierte Darstellung in Form und Farbe verdeutlicht dem Leser zudem, dass das endg\u00fcltige System nicht genau so aussehen wird. Dennoch erm\u00f6glichen die Comics eine klare Vorstellung davon, wie das System zur L\u00f6sung des Problems des Protagonisten beitr\u00e4gt und bieten somit eine hilfreiche visuelle Unterst\u00fctzung w\u00e4hrend des gesamten Entwicklungsprozesses.<\/p>\n

    Zeige die Handlung, nicht (nur) das System<\/h2>\n

    Wie bereits in unserem zweiten Blogbeitrag zum Cartooneering beschrieben, liegt der Fokus in den fr\u00fchen Versionen des Cartooneerings nicht auf der Software oder ihrer Bedienung. Weder die Stakeholder noch das Entwicklungsteam haben zu diesem Zeitpunkt eine klare Vorstellung davon, wie das Endprodukt aussehen wird. Stattdessen zeigt die Vision, wie die Personas mit ihrer Umwelt interagieren, bis ein zufriedenstellender Zustand erreicht ist. Die zugeh\u00f6rige Software wird nur als abstraktes Element dargestellt, oft angedeutet durch die Interaktion mit Ger\u00e4ten wie Smartphones oder Laptops.<\/p>\n

    Unsere Erfahrung zeigt, dass eine zu detaillierte Darstellung von Benutzerschnittstellen in dieser fr\u00fchen Phase negative Auswirkungen haben kann. Stakeholder erhalten ein zu konkretes Bild von Mechanismen, die in der Anforderungserhebung bislang nicht definiert sind, und neigen dazu, sich auf diese zu fixieren. Dies kann dazu f\u00fchren, dass Diskussionen zu sehr ins Detail gehen oder ein sp\u00e4teres Design, das von diesem fr\u00fchen Bild abweicht, zu Verwirrung und unn\u00f6tigen Diskussionen f\u00fchrt.<\/p>\n

    Es ist daher wichtig klarzustellen, dass die UI-Darstellung nur illustrativen Charakter hat. Der Fokus liegt auf den Prozessen der User Journey und nicht auf dem visuellen Design. Dies wird durch einfache, schematische und stark reduzierte Skizzen des Produkts erreicht, die nur die grundlegenden Interaktionen verdeutlichen.<\/p>\n

    Verwende nicht zu viel Text<\/h2>\n

    Die Gestaltungsrichtlinien f\u00fcr den Text im Comic basieren auf den bew\u00e4hrten Prinzipien des klassischen Comics. Diese Prinzipien tragen dazu bei, den Text funktional und visuell ansprechend zu gestalten. Ein Beispiel ist in Abbildung 3 dargestellt. Die wichtigsten Aspekte sind:<\/p>\n