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

Wireframes / Navigation (1)

Details

Erstellt am 27.02.2011

Wireframes oder Mock-ups sind erste Prototypen, die Aufschluss über die Navigation und ggf. auch schon zur Anordnung der Inhaltselemente geben sollen. Es sind keine gestalteten Designentwürfe und eher dem Vorstadium der grafischen Entwicklung zuzuordnen.

Inhalt der Patientenaufklärung

Die von mir geplante Patienteninformation soll prinzipiell alle Aspekte einer AVM-Behandlung beinhalten, da es genau das in dieser Form noch nicht gibt. Dazu gehören also allgemeine Informationen zu arteriovenösen Malformationen, die Möglichkeiten der Behandlung ebenso wie Informationen zu den Untersuchungsverfahren.

Das ist natürlich ein sehr großes Feld und kann leicht ausufern. Daher war eigentlich schon zu Beginn der Bearbeitung des Themas klar, dass ich im Zuge der Bachelorarbeit nicht alles ausarbeiten werde. Donnoch sollten für die Navigation alle genannten Aspekte berücksichtigt und zumindest angedacht werden.

Texte in der Infografik

Text ist für eine Patientenaufklärung dieser Art fast zwingend erforderlich. Bei einem so heiklen Thema kann man sich nicht darauf verlassen, dass jeder alleine in Grafiken die relevanten Informationen wahrnimmt, geschweigedenn versteht. Mein Ziel ist es allerdings, keine Textwüste mit medizinischen Fachbegriffen zu schaffen, davon gibt es schon genug. Das Textdesign ist also für sich genommen auch noch eine Herausforderung.

Schon beim Hauptmenü stellt sich die Frage, wie viel Text erforderlich ist, welche Art von Begriffen geeigent sind und an welcher Stelle Icons/Symbole Sinn machen. Ich hatte mir ja schon mal Gedanken zu möglichen Icons gemacht und war mit dem Ergebnis nicht sonderlich zufrieden. Alleine anhand der Icons lässt sich kaum darauf schließen, was sich hinter dem jeweiligen Symbol verbirgt, das ist einfach zu abstrakt (vor allem, wenn man mit den medizinischen Themen nicht vertraut ist und z.B. noch nie einen MRT gesehen hat).

Also habe ich mir überlegt, bei der Hauptnavigation weitestgehend auf grafische Symbole zu verzichten. Eine Ausnahme bilden die 3 Hauptbereiche, dazu später mehr.

Navigationsstruktur

Schon aus den ersten Mindmaps zu AVM lässt sich eine grobe Struktur erkennen, wonach man drei große Hauptbereich ableiten kann. Diese Hauptbereiche sollten auch Laien helfen, sich schnell in der Fülle der Informationen zurecht zu finden.

• Allgemeine Informationen zu AVM (arteriovenösen Malformationen)
• Informationen zu den Untersuchungsmethoden
• Informationen zu den Behandlungsmöglichkeiten

Diese Hauptbereiche sehe ich als zentrale Einteilung für den Inhalt. Darunter lassen sich die gesamten Inhalte, die zur Patientenaufklärung von Bedeutung sind, zuordnen.

Insgesamt halte ich maximal 3 Navigationsebenen für sinnvoll und angebracht, wobei es auch Ausnahmen gibt, bei denen nur 2 Navigationsebenen nötig sind. Hier die grobe Struktur zum Hauptbereich "Arteriovenöse Malformation":

• AVM - Was ist das?
  • Schnellübersicht
  • Arterien und Venen
  • Die Gefäßfehlbildung
  • Symptome & Auswirkungen
• Risiko Hirnblutung
  • Warum eine AVM blutet
  • Warnsignale (Schlaganfall erkennen)
  • Mögliche Folgen
• Behandlung sinnvoll? (Risikoeinschätzung)

Im Bereich "Untersuchung" stelle ich mir die Unterkategorie "MRT" im Moment so vor:

• MRT
  • Schnellübersicht
  • Vorbereitung zur Untersuchung
  • Ablauf einer Untersuchung
  • Risiken & Nebenwirkungen
  • MRT-Bilder einer AVM

Übersicht auf der Startseite für schnellen Einstieg

Damit auch Quereinsteiger schnell an die gewünschte Information kommen, halte ich es für sinnvoll, die Navigationspunkte der ersten und zweiten Ebene gleich auf der Einstiegsseite aufzulisten. Die dritte Ebene ist in der Gesamtübersicht zuviel, das kann man nicht mehr erfassen. Damit man bei Bedarf aber dennoch gleich zu den gesuchten Informationen kommt, kann ich mir einen Aufklapp-Effekt vorstellen:

Sofern es eine dritte Ebene gibt, befindet sich links neben dem Menüpunkt der zweiten Ebene ein Dreieck oder Pluszeichen. Klickt man darauf, werden die Unterpunkte angezeigt. Das Symbol zum aufklappen (Dreieck oder Pluszeichen) ist allerdings noch nicht fix, dazu muss ich noch mal recherchieren, was bei Nutzern bekannt ist und am ehesten verstanden wird.

Angebot einschränken

Nicht alle Informationen sind für alle Nutzer relevant. Ich hatte als Zielgruppen ja neben den Patienten auch die Familienangehörigen, Ärzte und allgemein interessierte Personen. Ein mögliches Szenario, wie die Patienteninformation genutzt wird, wäre auch folgendes: Ein Arzt möchte in der Klinik dem Patienten nur die Informationen zur anstehenden Untersuchung/Behandlung zeigen. Oder für einen Patienten kommen nur Embolisation oder Bestrahlung in Frage. Beide Beispiele zeigen, dass es von Vorteil wäre, wenn man relevante Inhalte filtern könnte und sich daraufhin nur in bestimmten Bereichen bewegt.

Dazu habe ich im Wireframe der Startseite einen Button ergänzt, mit dem man Checkboxen ein-/ausblenden kann. Durch die Checkboxen, die zunächst alle aktiviert sind, kann man gezielt Inhalte abwählen.

Wireframe der Startseite

Menüpunkte erläutern

Wie man hier sieht, habe ich jedem Menüpunkt noch eine kurze Beschreibung gegeben. Der viele Text erschlägt einen aber fast, zudem ist man durch die 13 sichtbaren Menüpunkte ja fast schon überfordert. Dennoch halte ich es für wichtig, bei den Navigationspunkten kurze Informationen zu geben, was diese bedeuten oder was sich dahinter verbirgt. Eine mögliche Lösung könnte sein, die Beschreibungstexte erst einzublenden, wenn man mit der Maus darüber fährt.

Angebot als Film ansehen

Bei dem gefundenen Benchmark hat mir die Filmfunktion, bei der die Texte vorgelesen werden, gut gefallen. Auch bei den Studien zur Patientenaufklärung, die ich gefunden hatte, handelte es sich immer um Filme. Einen reinen Film möchte ich natürlich nicht erstellen. Dennoch bekommt die Patientenaufklärung einen gewissen Filmcharakter, wenn man sich Texte vorlesen lassen kann. Und sobald mehrere Texte vorgelesen werden, und sich die Anzeige entsprechend automatisch ändert, handelt es sich ja um eine Art Film. Zudem gibt es vielleicht Nutzer, welche von den Interaktiven Funktionen überfordert sind und sich einfach nur berieseln lassen möchten.

Das erfordert eine Art Mediaplayer-Funktion. Hier sehe ich zwei Optionen: entweder, man schaut sich alles als Film an (ggf. eingeschränkt durch die Filterfunktion), oder man spielt nur einzelne Texte/Kapitel ab. Das wirft die Frage auf, wie man diese beiden Funktionalitäten vereinen könnte. Zwei oder mehr Play-Buttons dürften den Benutzer eher verwirren, als das sie weiterhelfen.

Daraus entstanden ist die Idee, einen zentralen Play/Pause-Button zu integrieren, sowie Buttons um zum nächsten/vorherigen Inhaltselement zu springen, und zum nächsten/vorherigen Kapitel (Navigationspunkt) zu springen. Diese Buttons machen erst Sinn, wenn man die Startseite verlassen hat und sich auf einer Unterseite befindet:

Navigation auf den Unterseiten

Verschiedene Usability-Tests haben ergeben, dass die Mehrheit der Nutzer an eine Navigation am linken Seitenrand gewohnt ist und sie dort erwartet. Bei der Patientenaufklärung sollen die Nutzer nicht durch eine ungewohnte Navigation abgelenkt werden, zumal sich die Patienten eventuell in einem schlechten psychischen Zustand befinden, nachdem sie von der Diagnose erfahren haben. Die Experimentierfreude dürfte sich also in Grenzen halten und eine ungewohnte Hauptnavigation führt eventuell dazu, dass die Aufmerksamkeit für das eigentliche Thema schneller nachlässt. Das alles sind für mich starke Argumente, sich an die klassische Webdesign-Regel zu halten. Ebenso habe ich den Link zur Startseite oben links vorgesehen, damit die Nutzer jederzeit zur Hauptübersicht finden können.

Das linke Menü zeigt die Inhalte der zweiten Navigationsebene, ggf. ist die dritte Navigationsebene aufgeklappt. Auch hier soll jederzeit die Möglichkeit bestehen, die Unterpunkte der anderen Inhalte anzuzeigen. Daher gibt es auch hier die Symbole zum auf-/zuklappen.

Die Hauptbereiche stehen ganz oben und habe ich im Moment als Tabregister integriert. Hier kommen ggf. Symbole ins Spiel, wie am Anfang dieses Artikels erwähnt. Ich sollte also noch drei Symbole für die Hauptbereiche entwickeln. Der Name des aktuellen Hautbereiches soll ausgeschrieben in dem aktiven Tab stehen. Fährt man mit der Maus über einen der anderen Bereiche, ändert sich die Breite der Tabbeschriftung, vom aktuellen Tab ist nur noch das Symbol zu sehen. Vom Tab, über dem man sich gerade mit der Maus befindet, wird die Beschriftung angezeigt.

Navigation in den interaktiven Elementen und Infografiken

Die eigentlichen Inhalte der Menüpunkte sollen ja weitestgehend aus interaktiven Infografiken bestehen (das ist zumindest mein Ziel).  D.h. man sieht eine Grafik und kann diese interaktive erkunden, z.B. Elemente anklicken woraufhin eine Beschreibung oder weitere Grafiken angezeigt werden.

Abgesehen von dieser interaktiven Nutzung halte ich aber auch eine zusätzliche Navigationsleiste für sinnvoll, die ebenfalls Zugang zu den Informationen gewährt. Dadurch kann der Nutzer sicher stellen, dass er alle Inhalte der aktuellen Grafik gesehen hat.

In diese Navigationsleiste kann mam zudem diverse andere Funktionalitäten integrieren:

• Hat der Nutzer in der Infografik ein Element angeklickt, änder sich dessen Pendant in der Navileiste so, dass sofort erkennbar ist, dass man es bereits angeklickt hat (färbt sich z.B. grün ein).
• Sofern die Filmfunktionalität genutzt wird, kann die Navileiste als integrierter Fortschrittsbalken dienen.
• Fährt der Nutzer mit der Maus über die Navileiste, bekommt er Stichworte angezeigt, was sich dahinter verbirgt (im Beispiel Infos für Piercing-Träger). Ebenso sollte in der Infografik der jeweilige Bereich hervorgehoben sein oder irgendwie auf sich aufmerksam machen, damit ein Zusammenhang hergestellt werden kann.