AVM Infografik Blog Entwicklung einer interaktiven Patientenaufklärung zu zerebralen arteriovenösen Malformationen

Farbkonzept (1)

Details

Erstellt am 26.03.2011

Der Abgabetermin rückt näher und es ist noch so viel zu tun, dass die Zeit für den Blog auf der Strecke bleibt. In den vergangenen Tagen habe ich mich unter anderem intensiv mit der Hauptnavigation der Patientenaufklärung auseinandergesetzt. Diese scheint zwar nur ein weniger wichtiges Element zu sein und soll später auch möglichst wenig ablenken. Gleichzeitig muss sie aber viele Kriterien erfüllen, um leicht und intuitiv bedienbar zu sein und eben genau dadurch dem Benutzer nicht zuviel abzuverlangen.

Erweiterte interaktive Infografiken

Im Theorieteil habe ich das Konzept der "erweiterten interaktiven Infografiken" erläutert. Kurz zusammengefasst geht es um eine Unterscheidung zwischen einfachen interaktiven Infografiken, die einen einzelnen Aspekt einer Sache erläutern (vgl. Beispiel Infografik zum Aufbau des Auges), und erweiterten interaktiven Infografiken. Erweiterte interaktive Infografiken sind vergleichbar mit Microsites oder Webspecials und können im Internet als eigenständige Website aufgefasst werden (vgl. Beispiel Infografik der Mensch).

Sie befassen sich ausführlicher mit einem großen Hauptthema und haben Inhalte zu mehreren verschiedenen Unterthemen. Diese Unterthemen gehören zwar in den großen Gesamtzusammenhang, können aber auch als einzelne, für sich funktionierende Inhalte angesehen und genutzt werden. Schuhmacher (2009) bezeichnet diese Art der Webinhalte als "interaktive multimodale Darstellungsformen". Bei der Patientenaufklärung ist genau dies der Fall. Es gilt, viele verschiedene Bereiche zu erläutern, die allerdings unter dem Gesamtaspekt "arteriovenöse Malformation" betrachtet werden.

Hauptbereiche der Patientenaufklärung

Ausgehend von den ersten Mindmaps und den viel später folgenden Wireframes haben sich ja bereits drei große Hauptbereiche für die Patientenaufklärung ergeben. Allgemeines zu AVM, Infos zu den Untersuchungsmethoden und Infos zu den Behandlungsmöglichkeiten. Dann gibt es noch die Startseite, welche als Inhaltsübersicht dient und alle drei Bereiche umfasst. Der Nutzer sollte jederzeit erkennen können, in welchem Bereich er sich befindet. Es wäre ein großes Usability-Problem, wenn der Nutzer die Orientierung auf der Website verliert.

Da die Patientenaufklärung neutral entwickelt wird, gelten keine Corporate-Design-Richtlinien irgendwelcher Unternehmen. Entsprechend kann das Farbkonzept für die Hauptnavigation ungebunden, überwiegend nach farbpsychologischen Aspekten, aufgebaut werden. Dabei können die von Eva Heller beschriebenen Farbwirkungen ebenso berücksichtigt werden, wie die Regeln für Farben im Webdesign.

Im ersten Ansatz (vgl. Wireframes) hatte ich geplant, den Titelbalken für alle Inhalte einheitlich zu gestalten, und die drei Hauptbereiche mit Icons/Symbolen zu kennzeichnen. Auf den Unterseiten sollte es dann eine Art Register geben, mit dem man zwischen den drei Hauptbereichen wechseln kann. Diese Idee habe ich inzwischen nach mehreren Gestaltungstests wieder verworfen. Das Tabregister wird problematisch und funktioniert nicht mehr, wenn in der Vorauswahl die Anzeige bestimmter Inhalte unterdrückt wird. Diese Funktion (Inhalte aus-/abwählen) hat sich aus den Anforderungen der verschiedenen Zielgruppen und dem Nutzungskontext ergeben (nicht im Blog erläutert).

Daher habe ich mich dazu entschieden, die Unterscheidung der 3 (4) Inhaltsbereiche durch ein gezieltes Farbkonzept für die Hauptnavigation zu ermöglichen. Dabei wird der Titelbalken je nach aktivem Inhalt anders eingefärbt.

Positive emotionale Wirkung

Eine AVM ist ein ernstes Thema. Die betroffenen Patienten dürften der Patientenaufklärung und der gesamten Thematik wahrscheinlich mit Angst und Unbehagen entgegentreten. Diese Gefühle sollte die Patientenaufklärung nicht verstärken, sondern eher entgegen wirken.

In ersten Überlegungen habe ich dazu tendiert, auf Farben weitestgehend zu verzichten, damit das Thema sachlich, nüchtern und neutral transportiert wird. Ich bin davon aber recht schnell wieder abgekommen - es geht nicht um eine technische Sache, der Faktor Mensch spielt eine zu große Rolle. Einen warmen, positiven Farbeindruck halte ich daher für angebracht, um den sowieso schon vorhandenen negativen Gefühlen entgegenzuwirken.

Bei den Farben der Hauptbereiche habe ich auch aus diesem Grund nicht immer den reinen Farbton verwendet (z.B. einen Orange-Farbwert), sondern durch Verläufe etwas Gelb untergemischt. Die durch das Gelb veränderte Farbwirkung wird deutlich, wenn man die reinen Farbtöne (vgl. Grafik am Anfang dieses Beitrags) mit den nachfolgenden Verlaufsfarben vergleicht.

Farbe der Startseite

Orange wirkt motivierend, aktivierend und läd zum handeln ein. Es symbolisiert Energie, Wärme, Heiterkeit. Nun muss der Nutzer der Patientenaufklärung zwar nicht mehr zur Nutzung motiviert werden, weil sein Interesse ja bereits vorhanden ist. Dennoch halte ich diese Farbe für die Startseite, die alle Inhalte umfasst, als kräftige, positive Farbe besser geeignet, als z.B. ein neutrales Grau. Grau wäre zwar sehr viel neutraler und ließe sich durch leichte rot/gelb-Anteile auch als warmes Grau darstellen, dennoch wäre der Gesamteindruck eher trist und zu sachlich. Ich habe es auch mit verschiedenen Grautönen ausprobiert, der Gesamteindruck ist aber immer zu negativ. Es geht schließlich um ein emotionalisierendes Thema mit betroffenen Patienten, da kann die Farbwirkung von Orange als positive Farbe durchaus genutzt werden.

Farbe des Bereiches "arteriovenöse Malformation"

Rot ist die Farbe der Gefahr, Bedrohung, aber auch der Liebe und Zuneigung. Rot kann positiv wie negativ sein. Rot halte ich für diesen Bereich aus verschiedenen Aspekten für geeignet. Blut ist rot und bei einer AVM geht es um Blutgefäße. Die Erkrankung ist gefährlich, in diesem Bereich wird auch auf die Risiken eingegangen - Rot ist die Farbe der Warnung. Durch die Beimischung von Gelb wird der reine Rot-Warnton aber freundlicher und weniger beängstigend.

Farbe des Bereiches "Untersuchungsmethoden"

MRT, CT, Angiographie - alle Untersuchungsmethoden oder moderne medizinische Bildgebungsverfahren sind sehr technisch. Blau ist eine technische Farbe, die Farbe der Vernunft und ruhigen Kraft. Durch die Beimischung von Gelb erinnert es auch an den Himmel an einem herrlichen Sommertag - eine durchaus positive Wirkung, um die technischen und eigentlich eher beängstigenden Untersuchungsmethoden zu erläutern. Viele Firmen verwenden blau aufgrund der seriösen Wirkung als Corporate Design Farbe. Seriös und korrekt will der Patient auch über die Untersuchungsmethoden aufgeklärt werden.

Farbe des Bereiches "Behandlungsmöglichkeiten"

Grün, die Farbe der Hoffung, Zuversicht und Gesundheit. Eine Behandlung soll heilen, alleine schon aus diesem Aspekt ist Grün eine sehr geeignete Farbe für diesen Bereich. Auch hier wird die positive Wirkung durch das Beimischen von Gelb unterstützt. Grün wirkt auch beruhigend, was bei den Risiken, die von einer Behandlung ausgehen, durchaus angebracht ist.

Der Farbweg durch die Patientenaufklärung

Die Farben der Hauptbereiche sind nicht nur aus den genannten Gründen für die drei Bereiche geeignet - es ergibt sich auch eine logische Abfolge: von der bedrohenden Gefahr, die von der AVM ausgeht, über die technischen Mittel bei den Untersuchungen, hin zu den hoffentlich heilenden Behandlungsmöglichkeiten.

Farben der Links in der Hauptnavigation

Jakob Nielsen (2006) hat in seinen Usability-Sudien immer wieder herausgefunden, dass Links eindeutig gekennzeichnet sein müssen und rät dazu, auch zu kennzeichnet, welche Links man bereits besucht hat. Bei interaktiven Infografiken erhält die Kennzeichnung von Links und klickbaren Flächen besondere Relevanz. Wenn ein Nutzer ziellos in einer Grafik rumklickt, weil er irgendwo einen Link vermutet, ist das keine gute Usability. Zur Kennzeichnung von Textlinks rät Nielsen auch zum klassischen Blau, da die Nutzer bei blauem Text mit einem Link rechnen, was auf den im Internet weit verbreiteten Standard zurückgeführt werden kann. Laut Nielsen sind aber auch andere Farben akzeptabel, so lange sich der Text eindeutig von normalem Text abhebt und der Link als solcher zu erkennen ist.

Für die Hauptnavigation habe ich daher folgende Schriftfarben definiert:

Farben im Inhaltsbereich: Text

Als Textfarbe liegt ein reines Schwarz natürlich am Nähesten. Um den Kontrast zwischen tiefschwarzem Text und weißem Hintergrund geringfügig abzumildern und dadurch das Lesen für die Augen etwas angenehmer zu machen, habe ich auch ein dunkles Grau ausprobiert. Um auch beim Text einen etwas wärmeren Farbeindruck zu erzeugen, habe ich etwas rot und gelb beigemischt - herausgekommen ist ein dunkles Braun, dass noch einen guten Kontrast zum weißen Hintergrund darstellt, damit gut lesbar ist, zugleich aber einen etwas wärmeren Eindruck vermittelt, als ein grauer Text:

Farben im Inhaltsbereich: Links

Im Inhaltsbereich gibt es zwei unterschiedliche Arten von Links: Buttons, die z.B. einen Seitenwechsel auslösen, und Textlinks, welche eine Aktion wie eine Animation in einer Grafik auslösen. Beide Buttons lösen also unterschiedliche Arten von Aktionen aus und sollten daher auch unterschiedlich gekennzeichnet sein.

Für die Buttons, die einen Seitenwechsel auslösen, habe ich folgende Farben definiert:

Buttons, welche z.B. eine Animation in einer Grafik auslösen, können sich auch im Haupttext befinden und müssen daher zwar auffällig sein, dürfen aber nicht den normalen Lesefluss zu stark beeinflussen. Daher habe ich mich für ein dezentes Hellblau entschieden. Blau ist als Linkfarbe wie bei der Navigation beschrieben weitgehend bekannt. Durch das Blau ist auch eine klare Differenzierung zu den normalen Buttons möglich. Nur bei Mauskontakt wird wieder der Bezug zu den normalen Buttons hergestellt: