UI Design

gestaltung verschiedener User Interfaces

Modul

Interface Design

Leistungen

Interface Design

Jahr/Semester

2020/ Sem.2

Projektbeschreibung Tracker App

Dieses Projekt entstand im Rahmen des Moduls Interface Design. Aufgabe dabei war es, ein Interface für eine Tracking App zu entwickeln. Es sollte eine benutzerfreundliche App gestaltet werden, welche es dem User im Alltag vereinfacht, bestimmte Ziele oder Gewohnheiten zu tracken, damit diese anschließend von der App analysiert werden können. Da viele Menschen ständig unter unterschiedlichen Kopfschmerzen leiden und oft nicht einmal wissen warum, wurde eine Kopfschmerz-Tracker App entwickelt um Muster und Auslöser zu ermitteln. Durch einige Fragen, welche dem User gestellt werden, erfasst die App Daten über beispielsweise die Kopfscherzart- und intensität. Diese Daten werden anschließend gespeichert und analysiert. So kann im Laufe der Zeit eine Analyse für jeden User erstellt werden, wodurch er die Gründe für seine Kopfschmerzen erfährt. Ebenso bekommt er Lösungswege vorgeschlagen, um die Schmerzen zu verhindern bzw. zu minimieren. Durch ein schlichtes, übersichtliches Design, soll es dem User einfach gemacht werden, sich in der App zurechtzufinden. Die App selbst wurde dabei in Grautönen gehalten, wobei die Akzentfarbe Grün ist. Diese Akzentfarbe soll den gesundheitlichen Aspekt der App widerspiegeln.
Aufgabenstellung/Betreuung: Prof. Damian Gerbaulet

Startseite

Beim Starten der App erscheint eine Startansicht, bei welcher der User zunächst begrüßt wird. Er kann hier zwischen zwei Buttons wählen. Durch diese kann er entweder seine analysierten Daten einsehen oder aber einen neuen Track-Test beginnen. Bei dem Test werden seine Kopfschmerzen getrackt, gespeichert und zur Datenbank hinzugefügt und anschließend analysiert.

Track

Bei dem Track-Test werden dem User verschiedenste Fragen über seine Kopfschmerzen gestellt. Der User muss zwischen mehreren präzisen Antworten auswählen. So können bspw. Art und Intensität der Schmerzen herausgefunden werden.

Analyse

Der Analyse Bereich besteht aus drei verschiedenen Seiten, die durch einen Slider erreicht werden können. Bei der ersten Seite handelt es sich um eine Anzeige, welche dem User sein allgemeines Kopfschmerz-Muster angibt und Tipps zur Vermeidung der Schmerzen bereitstellt. Bei der zweiten Seite kann der User seine genauen Daten in Prozentzahlen einsehen. Bei der dritten Seite handelt es sich um einen Kalender, in dem durch Auswahl des Tages, die Daten des jeweiligen Tages noch einmal nachgesehen werden können.

Wetter Webapp

Bei dieser Wetter-Web App handelt es sich um eine responsive HTML Seite. Sie wurde auf Basis von HTML und CSS erstellt und zeigt das aktuelle Wetter, inklusive Regenwahrscheinlichkeit, Niederschlagsmenge und Windgeschwindigkeit, sowie das bevorstehende Wetter an. Der Darstellungsfokus liegt dabei auf Smartphone-Größe im Hochformat und Tablet-Größe im Querformat. Die Einschränkungen lagen in der Verwendung von ausschließlich 2 Schriften, 2 Farben und zusätzlicher Graustufen. Die App soll die wichtigsten Wetterdaten schnell und kompakt auf einen Blick zeigen. Um diese Anforderung zu erreichen und die Usability so einfach und zeitsparend wie möglich zu halten, wurde ein One-Pager angelegt, in welchem alle wichtigen Daten durch einfaches Scrollen erreicht werden können und nicht etwa in Untermenüs etc. verborgen sind. Beim Farbdesign wurde auf den Trend des Dark-Modes gesetzt, der gerade sehr modern ist. Als zusätzliche Akzentfarbe wurde ein Türkiston verwendet, welcher die App frisch und modern wirken lässt.
Aufgabenstellung/Betreuung: Prof. Damian Gerbaulet

Mobile Ansicht

Die Wetter-Web-App wurde mit Fokus auf ein mobiles Endgerät konzipiert und gestaltet. Oben mittig befinden sich plakativ die, für den aktuellen Tag wichtigen Daten wie Temperatur, Datum, Ort, Niederschlagswahrscheinlichkeit und so weiter. Darunter kann das stündliche Wetter eingesehen werden, das in grobe Tages-Kategorien eingeteilt wurde, was für eine genauere aber immer noch schnell einsehbare Informationsvermittlung sorgt. Scrollt der Nutzer weiter nach unten erhält er Einblick in das Wetter und die Niederschlagswahrscheinlichkeit für die kommende Woche.

Tablet Ansicht

Die Wetter-Web-App wurde hauptsächlich für ein mobiles Endgerät gestaltet, jedoch weiter auf Tablet-Größe angepasst, um eine größere Zielgruppe zu erreichen und dem gängigen App-Standart zu entsprechen. Den größten Unterschied von mobilem Endgerät zu Tablet stellt das Verhältnis dar. Um einem horizontalen Tabletformat gerecht zu werden, wurden die einzelnen Kategorien mit mehr Zwischenraum angeordnet um ein harmonischeres Gesamtbild zu erhalten.

Letztes
Projektauswahl
Nächstes