Visual Prototyping fokussiert auf die Grundlagen der nutzerzentrierten Gestaltung digitaler Produkte. Mithilfe von Prototyping Software werden die Konzepte (z.B. Wireflows) schnell als voll bedienbare Anwendungsprototypen umgesetzt.
Der Kurs vermittelt den Gestaltungsprozess im digitalen Bereich. Dabei liegt der Fokus auf einer schnellen, einfachen und iterativen Konzeptvisualisierung. Nach der Untersuchung und Überprüfung der aktuellen Implementierung werden die neu generierten Ideen zunächst anhand von Skizzen und Papierprototypen festgehalten, bevor sie Schritt für Schritt zu Mid-Fidelity und später zu High-Fidelity Prototypen weiterentwickelt werden. Die Prototypische Umsetzung erfolgt durch den Einsatz geeigneter Software, anhand welcher sich Nutzerführung, Interaktionen und Animationen darstellen und testen lassen. Hierbei steht die nutzerzentrierte Gestaltung
stets im Vordergrund.
“Homebility” ist der Name einer Smarthome Application, welche speziell für farbenblinden Menschen im entwickelt wurde.
Aufgabenstellung
Wir bekamen die Aufgabe, eine Smarthome Application für einen farbblinden User zu entwickeln. Hierfür sollte es ein Dashboard und eine Detailseite geben. Auf der Homeseite der App sieht die Userin all Ihre Haushaltsgeräte welche Sie selbst in der Application hinzufügen kann. Außerdem soll Sie einen Überblick über den Verbrauch dieser hinzugefügten Geräte bekommen. In der Detailansicht soll die Nutzerin eine genauen Überblick über die Geräte bekommen, inklusive Informationen und Statistiken zu Verbrauche und zusätzlich die Steuerung der Geräte über die Detailseite.
Herangehensweise
Unser Designprozess startete mit einer Zielgruppendefinition. Hier legten wir fest wer die Zielperson ist, und auf welche Dinge Sie Wert legt. Im Anschluss erstellten wir eine dazugehörige Empathymap und Moodboards. Natürlich folgten darauf auch Userflows und Feature Ideas für die App.
Im Anschluss erstellten wir erste Skizzen und versuchten unsere Userflows in diesen umzusetzen. Nachdem wir die besten Lösungen und Ideen aus den Skizzen gefiltert hatten, entwickelten wir die Skizzen weiter aus und verknüpften sie, um sie auch zu testen. Viele Iterationen und Varianten später, wurden die Prototypen zu einem finalen, real aussehenden Prototypen umgesetzt.
Homebility Showcase
Finaler Entwurf
Getting Started
Beim ersten Öffnen von Homebility loggen sich die Nutzer:innen mit Ihrem Namen ein. Darauf folgen die ersten Einträge von Geräten in die App. Man bekommt hierfür eine Anleitung und Erklärungen wie man sein Gerät auf verschiedene Möglichkeiten scannen und einstellen kann. So wissen die User:innen wie die Application zu nutzen ist.
Home
Auf der Home Seite angekommen, befindet sich ganz Oben eine Übersicht über den gesamten Verbrauch aller Geräte. Man kann in allen Statistiken die Zeiträume verstellen und auswählen welchen man sehen möchte. Unterhalb der großen Übersicht kann man mittels eines Menüs auswählen, ob man die Übersicht aller Geräte in allen Räumen einsehen will, oder ob man nur Geräte eines speziellen Raumes sehen möchte. Über einen Klick auf das jeweilige Gerät, wechselt man zur Detailseite des jeweiligen Gerätes.
Detailseite
Angekommen auf der Detailseite, bekommt man einen Überblick über das Gerät, welchen Namen es hat, wie der Verbrauch des Gerätes aussieht und zu welcher Kategorie das Gerät gehört. Zudem kann man die Geräte über die Detailseite an- und ausschalten.
Bearbeiten
Natürlich kann man die Geräte auch über die Detailseite bearbeiten. Hierfür muss man nur das Bearbeiten- Icon (hier ein Stift) wählen und das Gerät nach belieben bearbeiten.
Consumption
In dem Menü “Consumption” bekommen die User:innen einen genauen und ausführlichen Überblick, über den gesamten Verbrauch aller Geräte. Um die Nutzer:innen zu motivieren, mehr zu sparen, haben wir Levels eingebaut und darin gezeigt, wie viel noch getan/ gespart werden muss um ein neues Level zu erreichen.
Auch hier kann man die Übersicht aller Räume, oder einzelner Räume wählen. Hinzufügend kann man die Statistiken auch nach gewünschtem Zeitraum verändern.
Einstellungen
Da wir einen großen Wert auf Barrierefreiheit gelegt haben, kann man in den Einstellungen verschiedene Dinge wählen um auf besondere Einschränkungen von Nutzer:innen einzugehen. Man kann sowohl die Sprache, als auch die Größe des Textes ändern. Es gibt die Möglichkeit “text to speech” zu wählen und natürlich auch die Möglichkeit, den Farbkontrast anzupassen, um farbblinden Menschen zu ermöglichen alles gut leserlich zu erkennen.
