Mental Health in Tech Workplace

Mental Health in Tech Workplace

Lena Bauer

Der Schwerpunkt des Kurses besteht darin, einen Datensatz nach eigenen Gestaltungskonzepten zu visualisieren um damit Zusammenhänge klar abzubilden. Diese Gestaltungskonzepte sollte durch Farben, Formen, Animationen und Typografie bestmöglich aufbereitet werden.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker

Datenvisualisierung

Datensatz

Die Wahl des Datensatzes fiel auf eine Umfrage aus dem Jahr 2014, die sich mit Mental Health in Tech Workplaces beschäftigt. Das Thema Mental Health bekommt immer mehr Gewicht in der heutigen Gesellschaft. Aufgrund von steigenden Erwartungen an die eigene Person, die durch die Gesellschaft ausgelöst wird. Das eigene Wohlbefinden in emotionalen, körperlichen als auch sozialen Bereichen bildet das, was man unter Mental Health versteht.

Für die Visualisierung werden die bedeutsamsten Parameter herausgefiltert und so miteinander kombiniert, dass sich interessante Fragestellungen herauskristallisieren, die wie folgt lauten:

  • Wie viele Personen haben in welchem Bundesstaat an der Umfrage teilgenommen?
  • Lassen sich die Personen, die einen Familienhintergrund im Bereich Mental Health haben auch dagegen Behandeln? Spielt das Geschlecht diesbezüglich eine Rolle? Wie sehr stört Mental Health die Personen bei ihrer Arbeit?
  • Würden die Befragten mit ihren Arbeitskollegen oder mit ihren Vorgesetzten über Mental Health reden? Würden die Befragten annehmen, dass wenn sie über Mental Health reden es Konsequenzen geben würde? Spielt das Alter als auch das Geschlecht eine Rolle?
    Datensatz
Visualisierung

Aus diesen Fragen ergeben sich die ersten Skizzen, deren Fokus auf einer komplexen Darstellung liegt.

komplexe Varianten

Durch die Frage: Was soll dem Betrachter als Erstes auffallen?, nahm die Komplexität der Darstellungen ab. Um einen multidimensionale Ansicht zu gewährleisten, wurden Filtermöglichkeiten am linken Screen hinzugefügt.

vereinfachte Screens
Farbgebung

Unsere Stimmung kann durch viele Faktoren beeinflusst werden. Unter anderm auch durch Farben. Aus diesem Grund sollten die ausgewählten Farben zusammen harmonieren und ein Gefühl von Ruhe ausstrahlen. Demzufolge ist die Wahl der Hauptfarbe auf ein helles Blau gefallen, denn Hellbau bedeute frei zu sein.

Farbgebung
Prototyp

Where

Der erste Screen dient zur allgemeinen Informationswiedergabe. Hier sieht der Betrachter die Verteilung der Menschen auf die jeweiligen Staaten der USA. Je größer ein Punkt ist, desto mehr Personen haben an der Umfrage in dem Bundesstaat teilgenommen.

Mit einem Hover über einen Punkt erscheint, auf der linken Seite des Screens, die Information um welchen Bundesstaat es sich handelt und wie viele Menschen an der Umfrage teilgenommen haben.

Where Screen

Where Code

Die Punkte werden nach Längen- und Breitengrad der US-Amerikanischen Bundesstaaten positioniert. Dabei wird die map()-Funktion der gmynd.js Library verwendet. Die Größe der Kreise ist abhängig von dem Minimal- und Maximalwert der einzelen Teilnehmer die in einem Staat teilgenommen haben. Mit der dot.mouseover()-Funktion wird der Name des Staates und die Anzahl der Teilnehmenden der, durch das Hovern über einen Punkt, preisgegeben.

Where Code

Interfere

Um tiefer in das Thema Mental Health einzutauchen, stellt der zweite Screen jeden einzelnen Menschen als Punkt dar, die nach Beeinträchtigung am Arbeitsplatz durch Mental Health geclustert werden. Ist der Punkt ausgefüllt, bedeutet dies, die Person hat einen Familienhintergrund im Bereich Mental Health. Die Farbe sagt aus, ob eine befragte Person sich behandeln lässt.

Interfere Screen

Ob das Geschlecht etwas mit der Beeinträchtigung am Arbeitsplatz zu tun hat, kann der Nutzer ganz einfach durch das anklicken eines Geschlechts, am linken Rand, beantworten.

Interfere Filter

Interfere Code

Für die Positionsänderung der einzelnen Punkte bei einem Screenwechsel müssen alle Berechnungen inerhalb einer Funktion stehen. Die createDots()-Funktion ist hierfür zuständig. Innerhalb der Funktion wird zuerst durch eine for…in Schleife iteriert, die durch eine gegrouptes Objekt läuft. Diese Schleife ist nur für das Zählen zuständig.

for…in Schleife zum Zählen

Die eigentlichen Berechnungen für die geclusterten Spiralen werden in einer anderen for…in Schleife durchgeführt. Die Position errechnet sich durch Radius, Cosinus, Sinus und Größe der Spiralen. Mit dem einen if-Befehlen wird die Farbe der Punkte bestimmt, die abhängig davon sind, ob die Person sich behandeln lässt. Mit dem anderen if-Befehl wird bestimmt, ob die Punkte einen Stroke bekommen, welches durch den Familienhintergrund bestimmt wird.

Interfere Berechnungen

Talk about

Die Punkte, des letzten Screens, sind spiralförmig angeordnet, um somit Jahresringe zu erzeugen. Wie bei einem Baum bedeutet ein Ring = ein Jahr. Je älter ein Mensch ist, desto weiter außen wird dieser abgebildet. Die farbliche Codierung ist abhängig von ihrer Einstellung, ob die Person mit den Mitarbeitern und/oder dem Arbeitgeber über Mental Health reden würde.

Talk about Screen

Würden die Menschen denken, die nicht über Mental Health reden, das es Konsequenzen gibt?

Durch die Filter lässt sich diese Frage ganz einfach klären. Der Nutzer könnte die Frage noch weiter einschränken indem er nach einem Geschlecht filtert.

Talk about Filter

Talk about Code

Die Kreisringe entstehen durch eine verschachtelte for…in Schleife, die jeden Dot an die richtige Position innerhalb eines Rings zuordnet. Der Abstand der einzelnen Punkte innhalb eines Ringes ist abhängig von der Anzahl der Personen, die dasselbe Alter haben. Damit nicht jeder Ring an der gleichen X-Position anfängt, was zu einer Linie an Punkten nebeneinander führen würde, wird ein angleOffset verwendet.

Talk about Berechnungen

Die if-Befehle sind für die verschiedenen Farben der Punkte zuständig. Es wird abgefragt, ob eine Person mit den Mitarbeitern und/oder ihrem Arbeitgeber über Mental Health reden würde. Jede Kombination hat ihre eigene Farbe.

Talk about If-Befehl

Video