Was Business Analysten beim Gestalten von Diagrammen von Apples Design lernen können [Business Analyse]

Eins der wichtigsten Kommunikationswerkzeuge eines Business Analysten sind visuelle Darstellungen und unterschiedlichste Arten von Diagrammen. Diagramme sind nichts anderes als visuelle Karten, die den Analysten helfen in der Geschäftslandschaft zu navigieren und Strukturen sowie Abläufe erfolgreich im Projektumfeld zu vermitteln. Ein aussagekräftiges Diagramm kann eine zweistündige Telko auf ein effizientes Kurzgespräch reduzieren. Dabei reicht eine korrekte Syntax und Semantik nicht aus. Der Erfolg der Kommunikation hängt auch wesentlich davon ab, wie übersichtlich und (visuell) einfach verständlich eine solche Karte ist.

In diesem Post möchte ich anhand eines Beispiels folgende Konzepte der Visualisierung von Apple vorstellen, von denen Business Analysten und Prozess Designer bei ihrer visuellen Kommunikation (insbesondere bei der Erstellung von Diagrammen) profitieren können. Hinweis: Das erste Konzept „Verwendung von Kontrasten“ habe ich in zwei Teilkonzepte aufgeteilt und bei der Erklärung des Beispiels getrennt von einander platziert, weil es der Anschaulichkeit förderlich ist.

  1. geschickte Verwendung von Kontrasten
    1. Verwendung von Grautönen (Konzept 1)
    2. Akzentuierung mit Farbe (Konzept 4)
  2. Nutzung von Leerraum (Konzept 2)
  3. Einsatz von Schattierungseffekten (Konzept 3)

Alltag bei Apple

Eine Firma, die sich einen ganz besonderen Namen mit erfolgreicher Kommunikation, einfachem Design und starken Darstellungsformen gemacht hat, ist Apple. Schaue ich mir z.B. die GUI Konzepte von MacOS an, sehe ich eine geschickte Verwendung von Grautönen für einfache Elemente, Farben für Akzentuierung und Schattierungseffekte für die Herstellung räumlicher Wirkung. Auch die Apple Website folgt diesem Muster. Dort findet man viele Elemente des Grundaufbaus, die farblos sind: die Navigation im Header ist grau, die Überschriften an den Produkten sind schwarz und grau, sogar das Apple Logo, welches den höchsten Repräsentanten der Marke darstellt, ist grau (situativ auch weiß auf grau). Ganz ohne Farbe kommt die Website aber nicht aus. Farblich sind auf der Website meist folgende zwei Sachen: persönliche Inhalte (in Form strahlender Gesichter von Erwachsenen und Kindern, die starke Emotionen wecken) sowie Steuerelemente (Buttons), die den Kaufprozess auslösen sollen. Das anscheinend sind die Schwerpunkte, auf die Apple unsere Aufmerksamkeit lenken will.

Alltag in der Business Analyse

Viele Diagramme die mir im Projektalltag begegnen sind entweder sehr bunt oder von schwarzer Farbe dominiert (wobei Schwarz streng genommen keine Farbe ist). Der Einsatz von vielen Farben oder von Schwarz ist nicht schlecht per se. Allerdings nimmt eine überladene Gestaltung dieser Art die Möglichkeit bestimmte Bereiche zu Akzentuieren weil sowohl Farben wie auch Schwarz ein Werkzeug sind, mit dem man Elemente hervorheben kann. Benutzt man dieses Werkzeug zu offensiv, wie in den folgenden beiden Beispieldarstellungen, entsteht leicht der Eindruck, dass alles gleichzeitig hervorgehoben ist. Dadurch verliert der Effekt der Hervorhebung seine Wirkung, weil das Auge nicht mehr entscheiden kann, welches Element hervorgehoben ist und welches nicht. Alle Elemente sind gleich dominant.
Buntes hässliches Prozessdiagramm2.Schwarzweiss
(Klicke auf die Bilder, um sie zu vergrößern)

KONZEPT 1: geschickte Verwendung von Kontrasten – Grautöne

Besser ist es bei der Erstellung eines Diagrams erst einmal auf Farben und Schwarz ganz zu verzichten und nur mit Dunkelgrau anzufangen. Ist das Diagram in dunkelgrau/weiß erstellt, wendet man darauf weitere Grautöne an (das Menschliche Auge kann 500 Abstufungen von Grautönen unterscheiden). Folgend drei Beispiele. In der ersten Darstellung setze ich den Rahmen der Swimlanes sowie die Überschriften auf grau. Dadurch erhalten die Figuren sowie die Verbinder mehr Bedeutung. Die Swimlanes fülle ich im Folgenden nur ganz dezent mit grau aus, damit ein leichter Kontrast zwischen den Swimlanes entsteht. In der zweiten Darstellung wende ich grau auch auf die Rechtecke und die Verbinder an. Es entsteht ein starker Effekt der Hervorhebung von Dreiecken. Diese Hervorhebung ist aber nicht das Ziel dieser Darstellung, deshalb setzen wir die Rauten in der dritten Darstellung auch auf grau und reduzieren die Linienbreiten.

3.Rahmen.grau4.Rechtecke.grau5.Rahmen.Duenn
(Klicke auf die Bilder, um sie zu vergrößern)

KONZEPT 2: Leerräume nutzern

Ein anderer weit verbreiteter Fehler ist das Quetschen von Elementen auf möglichst kleinem Raum. Das führt dazu, dass alle weißen Bereiche des Arbeitsblattes ausgefüllt sind. Das ist zwar aus Gründen der Ökonomie sinnvoll, doch nimmt es dem Auge die Möglichkeit schnell und einfach Strukturen zu erkennen, denn es muss länger „scannen“. Schafft man genug Raum für das Auge, kann es mühelos die Inhalte aufnehmen. In der folgenden Darstellung habe ich die Anordnung der Elemente entzerrt, damit sie besser wahrgenommen werden können.

6.Nutzung.von.White.Space(Klicke auf das Bild, um es zu vergrößern)

KONZEPT 3: Schatten statt nur Rahmen

Ein im Apple Design sehr häufig verwendetes Werkzeug sind Schattierungen. Kontakte Icon in IOS
Viele halten Schattierungen für eine Spielerei der Apple Designer. Doch sie haben einen veritablen Zweck. Sie sollen räumliche Wirkung erzeugen, welche wichtig ist, da das menschliche Auge neben einander stehende Objekte in räumlicher Tiefe viel besser von einander trennen kann, als neben einander befindliche Objekte, die nur durch „flache“ Umrandungen oder Einrahmungen repräsentiert werden. Um dem Auge zu helfen sich schnell zurecht zu finden, können Schatten eingeführt werden. Das ist auch der Grund, warum alle Fenster im MacOS immer einen leichten Schatten besitzen. Auch auf dem IOS eines iPhones oder eines iPads wird dieses Konzept eingesetzt. Rechts anbei eine Abbildung eines Icons eines IOS-Desktops, welches mit einem leichten Schatten ausgestattet ist, welches räumliche Wirkung erzeugt.
In einem Diagram mit vielen Formen wie z.B. einem Prozessdiagramm ist das Problem von vielen neben einander stehenden Rahmen besonders akut. Dadurch benötigt das menschliche Auge länger, um die Information des Diagramms aufzunehmen. Diesem Manko lässt sich entgegenwirken in dem man für alle Formen einen Schatten einführt. Angewendet auf unser Prozess Diagramm sieht es so aus.

7.Nutzung.von.Schatten
(Klicke auf das Bild, um es zu vergrößern)

KONZEPT 4: geschickte Verwendung von Kontrasten – (b) Akzentuierung mit Farbe

Jetzt, da das visuelle Fundament in Konzepten 1 bis 3 gelegt ist, kann man mit bestimmten Farben Akzente oder Hervorhebungen setzen. Eine Akzentuierung ist nur dann möglich, wenn ein ausreichend starker Kontrast hergestellt werden kann. In unserem Beispiel benutze ich drei Kontrastarten. (1) Weiß zu Mittelgrau, im Hintergrund zur den Formen, (2) Grau zu Farbe, in Formen zur Farbmarkierungen und (3) Grau zu Schwarz, in den Kopfzeilen der Swimlanes. Es lässt sich eine allgeimene Empfehlung für die Verwendung von Kontrasten aussprechen, die auch ein Ankerpunkt im Design mit Akzentuierung und Hervorhebung genutzt werden kann. Der Unterschied zwischen den gewählten Stilen muss stark genug sein, damit ein hinreichender Kontrast entstehen kann. Folgende Beispiele für hinreichend starke Kontraste:

  • weiß zu grau
  • weiß/grau zu schwarz
  • weiß/schwarz/grau zu Farbe
  • Farbe zu Farbe (bei Farben mit ausreichend großem Differenzierungspotenzial)

.
Ungünstige Konstellationen für einen starken Kontrast sind z.B. weiß zu hellgrau oder zwei Farben, die sehr ähnlich sind. Folgend das fertige Prozess Diagramm. Bei der Akzentfarbe kann z.B. die Akzentfarbe des Unternehmens verwendet werden: Rot für DHL, Magenta für die Telekom oder Blau für Deutsche Bank etc.

8.Nutzung.von.Farben(Klicke auf das Bild, um es zu vergrößern)

Kurzinfo: What Process Designers and Business Analysts can learn from Apple design?

Anton

Anton

Anton ist freiberuflicher Software-Ingenieur und Projektleiter mit den Schwerpunkten: Prozessdesign, strukturierte Business Analyse / Fachkonzeption sowie fachliche Entscheidungsunterstützung.

More Posts - Website