Cartooneering: Die Kunst des Zeichnens – Wie sehen gute Comics aus und worauf kommt es an?

In unserem letzten Artikel zum Thema Kartonieren haben wir unsere Handlungsempfehlungen dargelegt, um grafische Szenarien mit der richtigen Story zu versehen. Dazu gehören die eindeutige Identifizierung eines Protagonisten und einer Rolle in jedem Comic, die Verwendung von Nebencharakteren als Personen, der Wechsel von Standpunkten, die Verwendung der fünf Akte des Dramas und die Nicht-Fokussierung auf die Interaktion mit dem Produkt und dem Bedarf. Die Handlung muss auf einen Blick erkennbar sein, um sich auf eine einzelne Handlung konzentrieren zu können, und die daraus resultierende Struktur muss sinnvoll sein, um Szenarien zu entwerfen. Was die grafischen Methoden betrifft, ist neben den Inhalten auch eine durchdachte Gestaltung unerlässlich, damit der Comic seinen Zweck erfüllt: klare Kommunikation und effektive Kommunikation. Deshalb befassen wir uns im dritten Teil unserer Cartoon-Blogserie mit Designrichtlinien.

Zusätzlich zu den Empfehlungen für den Aufbau eines Comics haben wir sechs visuelle Gestaltungsrichtlinien identifiziert, die beim Einsatz von Cartoons optimale Ergebnisse erzielen. Folgendes möchten wir Ihnen vorstellen:

1. Reduzieren Sie Details und Farben
2. Heben Sie wichtige Elemente in der Handlung hervor
3. Zeigen Sie die Aktion, nicht (nur) das System
4. Verwenden Sie nicht zu viel Text
5. Zeigen Sie Emotionen
6. Passen Sie den Comic ständig an

Reduzieren Sie Details und Farben

Der Hauptzweck des Comics besteht darin, das Verständnis für das Problem und den Lösungsprozess bei Stakeholdern und Entwicklern zu fördern und eine gemeinsame Vision des Produkts zu entwickeln. Für eine bessere Präsentation ist es wichtig, ein Gleichgewicht zwischen informativem Inhalt und Illustration zu finden. Zu viele Details in den Bildern können leicht von der eigentlichen Lösung des Problems ablenken. Stattdessen sollten die Bilder den Kontext deutlich machen, in dem sich der Protagonist befindet. Markante Gegenstände und angedeutete Umgebungen sind hilfreich, zu viele Dekoelemente wie Vasen oder Lampen können die Verständlichkeit beeinträchtigen.

Bei prototypischen Verwendungen von Cartoons mit unterschiedlichen visuellen Stilen hat sich gezeigt, dass ein Schwarz-Weiß-Design mit wenigen Akzentfarben das Verständnis erleichtert, ohne die Komplexität zu erhöhen oder abzulenken (siehe Abbildung 1).

Heben Sie wichtige Elemente in der Handlung hervor

Durch gezielte Zurückhaltung werden Farben bewusst eingesetzt, um wichtige Handlungsschritte der Hauptfiguren hervorzuheben. Dies kann als einzelne Akzentfarbe verwendet werden, während der Comic in Graustufen vorliegt. Dabei gilt der Grundsatz „Weniger ist mehr“.

Der Vorteil dieses Ansatzes besteht darin, dass er schnell und einfach zu entwerfen ist. Stakeholder können die Handlung schnell verstehen, sodass Lücken in der Geschichte, den Aktionen der Charaktere oder der Interaktion mit dem System sofort erkannt und korrigiert werden können. Farbe ist ein wirksames Mittel, um zentrale Elemente und Personen hervorzuheben (siehe Abbildung 2). Insbesondere Geräte, Objekte oder vorgeschlagene UI-Elemente wie Schaltflächen oder Listen sollten in der Farbe erscheinen, mit der der Protagonist interagiert. Auch hier gilt: Ein minimaler Farbeinsatz sorgt für maximale Wirkung, vermeidet Ablenkungen und überfordert den Leser nicht.

Ein weiterer Vorteil besteht darin, dass die Comics während der Entwicklung des Systems einfach und ohne großen Aufwand aktualisiert werden können, z. B. können Bedingungen definiert, geändert oder Teile des Systems implementiert werden.

Die bewusst reduzierte Darstellung in Form und Farbe macht dem Leser zudem klar, dass das endgültige System nicht ganz so sein wird. Comics vermitteln jedoch eine klare Vorstellung davon, wie das System zur Lösung des Problems des Protagonisten beiträgt und bieten so eine hilfreiche visuelle Unterstützung während des gesamten Entwicklungsprozesses.

Zeigen Sie die Aktion, nicht (nur) das System

Wie in unserem zweiten Blogbeitrag zu Cartooneering beschrieben, liegt der Fokus in den ersten Versionen von Cartooneering nicht auf der Software oder deren Funktionsweise. Zu diesem Zeitpunkt haben weder die Stakeholder noch das Entwicklungsteam eine klare Vorstellung davon, wie das Endprodukt aussehen wird. Stattdessen zeigt der Ansatz, wie Menschen mit ihrer Umwelt interagieren, bis sie einen geeigneten Zustand erreichen. Die zugehörige Software wird lediglich als abstraktes Element dargestellt, häufig ausgedrückt in der Interaktion mit Geräten wie Smartphones oder Laptops.

Unsere Erfahrung zeigt, dass eine zu detaillierte Darstellung von Benutzeroberflächen in diesem frühen Stadium negative Folgen haben kann. Stakeholder erhalten bei der Erfassung von Anforderungen ein zu detailliertes Bild der noch nicht definierten Mechanismen und neigen dazu, sich auf diese zu fixieren. Dies kann dazu führen, dass die Diskussionen zu sehr ins Detail gehen, oder ein Design, das von diesem ursprünglichen Bild abweicht, kann später zu Verwirrung und unnötigen Diskussionen führen.

Daher ist es wichtig klarzustellen, dass die UI-Darstellung nur illustrativer Natur ist. Der Fokus liegt auf User-Journey-Prozessen, nicht auf visuellem Design. Dies wird durch einfache, schematische und sehr reduzierte Skizzen des Produkts erreicht, die nur die grundlegenden Zusammenhänge veranschaulichen.

Verwenden Sie nicht zu viel Text

Die Gestaltungsrichtlinien für Comic-Texte basieren auf den bewährten Prinzipien klassischer Comics. Diese Prinzipien tragen dazu bei, Texte funktional und optisch ansprechend zu gestalten. Ein Beispiel ist in Abbildung 3 dargestellt. Die wichtigsten Aspekte sind:

• Sprechblasen stellen die Mimik der beteiligten Personen dar und sind das wichtigste Mittel, um Gespräche lebendig und verständlich zu gestalten.
• Gedanken werden durch drei nacheinander vergrößerte Kreise dargestellt. Der letzte Kreis fängt Gedanken ein und gibt Einblick in die inneren Monologe der Charaktere.
• Oft reichen kurze Schlüsselwörter in Sprechblasen aus, um den Zusammenhang zu verdeutlichen. Es sind nicht immer vollständige Sätze erforderlich, da die Bilder einen großen Teil der Handlung tragen.
• Kontextinformationen wie Ort, Zeit oder Hintergrunddetails können in separaten Feldern im Bild platziert werden, vorzugsweise im oberen Fünftel oder Sechstel des Bildes. Dies ist hilfreich bei Szenenwechseln oder Zeitsprüngen.
• Mit Symbolen können Emotionen oder Situationen ausgedrückt werden. Zum Beispiel das Fragezeichen (»?”), um Verwirrung oder mehr auszudrücken Ein „Z“ um ein Bild kann auf Müdigkeit hinweisen (siehe Abbildung 3, linkes Bild).

Text sollte sparsam verwendet werden, da Bilder den Großteil der Handlung vermitteln. Der Text dient vor allem dazu, die Handlung und die Emotionen der Charaktere für den Leser verständlicher zu machen. Das Betrachten des Comics sollte keine intensive Lektüre erfordern. Wann zu viel Text vorhanden ist, hängt von mehreren Faktoren ab. Grundsätzlich sollte der Text gut lesbar sein und den Lesefluss nicht behindern, denn zu viel Text kann das Tempo der Erzählung schnell verlangsamen.
Zeigen Sie Ihre Gefühle
Im Comic sind die Emotionen, die der Protagonist während der Reise des Nutzers erlebt, sehr gut zu erkennen, wie in Abbildung 4 dargestellt. Der Protagonist durchläuft verschiedene emotionale Phasen, die oft mit Frustration, Unsicherheit oder Angst verbunden sind, während er sich einer Herausforderung stellt. Damit sich der Leser in den Protagonisten hineinversetzen kann, ist es wichtig, neben der Beschreibung der Situation auch die Emotionen klar zu beschreiben. Dies schafft ein tieferes Verständnis für die Bedürfnisse, Herausforderungen und Ziele des Protagonisten und verdeutlicht gleichzeitig die Motivation hinter der Softwarelösung.

Durch das Kennenlernen möglicher ähnlicher Probleme oder Herausforderungen entwickelt der Leser eine persönliche Verbindung zur vorgestellten Lösung. Der Protagonist erreicht schließlich einen Wendepunkt, an dem er das System nutzt und sein Problem löst. Am Ende des Comics sollte ein positives Gefühl stehen, etwa Erleichterung, Freude oder Zufriedenheit.

Visuelle Elemente wie Farben, Bilddetails und Stilisierung – etwa durch übertriebene Mimik oder Gestik – spielen eine wichtige Rolle, um die Stimmung und Emotionen des Protagonisten klar zum Ausdruck zu bringen. Diese brauchbaren visuellen Ressourcen tragen dazu bei, die innere Gefühlswelt des Protagonisten direkt zu berühren und den Leser emotional in die Geschichte einzubeziehen.

Passen Sie den Comic ständig an

Je weiter das Projekt voranschreitet und je konkreter der Prozess, desto detaillierter wird der Comic. Die Darstellung der Interaktion mit dem Produkt wird genauer, sodass z.B. B. erste Visualisierungen der Benutzeroberfläche erstellt werden. Schaltflächen und Felder können übersichtlich dargestellt werden. Um die Benutzerinteraktion deutlich darzustellen, können Zeigefinger verwendet werden, um explizit auf Bereiche zu zeigen, auf die der Benutzer klickt. Diese Visualisierungen verdeutlichen die einzelnen Schritte der Software und helfen, die Softwarelösung besser zu verstehen.

der Abschluss

Kurz gesagt bietet Cartooneering einen strukturierten Ansatz zur Entwicklung und Kommunikation von Produktvisionen. Eine klare Struktur und Gestaltungsprinzipien sind entscheidend für eine erfolgreiche Bewerbung.

Unsere sechs Designrichtlinien ermöglichen eine effektive visuelle Kommunikation:

1. Reduzieren Sie Details und Farben
2. Heben Sie wichtige Aktionspunkte hervor
3. Konzentrieren Sie sich auf die Aktion und nicht nur auf das System
4. Vermeiden Sie zu viel Text
5. Darstellung von Emotionen
6. Eine fortlaufende Adaption des Comics

Im nächsten Beitrag geht es darum, wie Cartoons in Kreativworkshops eingesetzt werden können.