Project Description

Gesundzeit

Projekt

Seminar „Prozesse visualisieren“
Semesterprojekt (20 CP)

Zeitraum

Oktober 2018 bis Januar 2019

Beteiligte Personen

Miriam Peters
FH Aachen
Fachbereich Gestaltung
Studentin Kommunikationsdesign

Betreut durch

Prof. Dipl.-Des. (FH) Eva Vitting
FH Aachen
Fachbereich Gestaltung
Lehrgebiet: Gestaltungslehre und angewandte Farbgestaltung

Tools

Stift & Papier
Microsoft Excel & Powerpoint
draw.io
Adobe Creative Suite
Axure RP 8
IIyama PROLITE Multitouch

Kategorien

Konzept
Interactive Design
UI Design
UX Design
Prototyping

Hintergrund

Viele Krankheiten im Alter sind auf unsere Gewohnheiten in jungen Jahren zurückzuführen. Osteoporose, Herzinfarkt, Schlaganfall – durch Sport, richtige Ernährung, wenig Alkohol und ein rauchfreies Leben sinkt das Risiko für diese Krankheiten enorm. Der Aufwand, einen gesunden Lebensstil zu führen, ist außerdem deutlich geringer, als die Krankheiten zu behandeln oder gar mit ihnen leben zu müssen.

Ziel

Mit einer Infotainment-Anwendung soll deutlich werden, dass jetzt der Moment ist, sich für seine zukünftige Gesundheit einzusetzen. Auf einem Multitouch-Tisch können junge Menschen ihre Gewohnheiten in Bezug auf Zigaretten- und Alkoholkonsum, Sport/Bewegung im Alltag und Ernährung in ein Steuer-Element eingeben. Während der Eingabe verändern sich die Animationen rundherum und führen die konkreten Einflüsse auf Arterien, Knochen und das Krebsrisiko vor Augen.

Recherche & Skizzen

Zu Beginn stand die Eingrenzung des Themas auf die wichtigsten Informationen und Werte. Um die Zusammenhänge und die medizinischen Vorgänge zu verstehen, war viel Recherchearbeit nötig. Skizzen haben mir im Verständnisprozess geholfen.

User Flow

Aus der Strukturierung der Informationen ergaben sich bereits erste Flow-Charts, die den User Flow durch die UI beeinflussten. Die untenstehenden Flowcharts verknüpfen den User Flow mit den Informationen zu medizinischen Vorgängen und zu alltäglichen Gewohnheiten.

Flow Chart Teil 1: Einstellung der Gewohnheiten im Bezug auf Zigarettenkonsum, Alkohol, Sport (aerob/muskulär) und Bewegung im Alltag.

Flow Chart Teil 2: Die richtige Ernährung ist sehr viel komplexer als die anderen Gewohnheiten. Für ihre Darstellung müsste die Navigation wahrscheinlich kurzzeitig vollständig verändert werden. Diesen Punkt habe ich bisher nicht weiter umsetzen können.

Eingabeelement

Mit dem Einsatz des Multitouch-Tisches (statt z.B. eines Tablets) eröffneten sich neue Möglichkeiten in der UI. Die Elemente sollten alle beweglich sein, um sie von allen Seiten des Tisches aus bedienen zu können. Die Standard-Schieberegler entwickelten sich zu einer kreisrunden, von überall bedienbaren Steuerung.

Select: Der Nutzer wählt die Gewohnheit aus, deren Werte er einstellen will. – Adjust: Der Nutzer passt die Werte der gerade gewählten Gewohnheit an. – See: Der Nutzer sieht, was er gerade eingestellt hat.

Skizzen zum Steuerungselement

User Interface

Mit Einführung des Multitouch-Tisches als Medium wurde schnell klar, dass ein fester Raster den Möglichkeiten des Touchscreens nicht mehr gerecht werden würde. Die UI besteht daher aus “fliegenden” Elementen, die verschoben werden können, sodass man sie von jeder Position des Tisches aus betrachten kann.

Mit der Steuerung in der Mitte des Tisches kann der Nutzer seine Werte einstellen. Die Steuerung ist beweglich und rund, sodass sie von allen Seiten des Tisches bedient werden kann.

Danach kann er sich detaillierter durchlesen, was bei seinen Gewohnheiten im Körper passiert.

Die Benutzeroberfläche zu Beginn.

Nach der Einstellung von Werten verändern sich die Animationen rundherum dementsprechend.

Der Nutzer kann Genaueres zum Gesundheitszustand erfahren, indem er mit dem Avatar durch die Benutzeroberfläche navigiert.

Dabei kann er mit dem Pfeil Stück für Stück vorwärts gehen, oder über die Buttons an den Kreisen direkt zu einem anderen Punkt springen.

Animationen

Die Animationen basieren auf einem Punktraster und verändern sich je nach Eingabe von Gewohnheiten. Hier ein Beispiel für die Darstellung der Knochenstruktur und des Knorpels und wie diese Schaden nehmen können.

Gesunder Knochen

Osteoporose

Arthrose

Animationen

Die Animationen basieren auf einem Punktraster und verändern sich je nach Eingabe von Gewohnheiten. Hier ein Beispiel für die Darstellung der Knochenstruktur und des Knorpels und wie diese belastet werden können.

Gesunder Knochen

Osteoporose

Arthrose

Abschlusspräsentation

Ausstellung

Projekt

Seminar „Prozesse visualisieren“
Semesterprojekt (20 CP)

Zeitraum

Oktober 2018 bis Januar 2019

Beteiligte Personen

Miriam Peters
FH Aachen
Fachbereich Gestaltung
Studentin Kommunikationsdesign

Betreut durch

Prof. Dipl.-Des. (FH) Eva Vitting
FH Aachen
Fachbereich Gestaltung
Lehrgebiet: Gestaltungslehre und angewandte Farbgestaltung

Tools

Stift & Papier
Microsoft Excel & Powerpoint
draw.io
Adobe Creative Suite
Axure RP 8
IIyama PROLITE Multitouch

Kategorien

Konzept
Interactive Design
UI Design
UX Design
Prototyping