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.
Das Ziel war es, eine Smartphone Anwendung zu gestalten, die den Stromverbrauch in des Einzimmerappartments von Maya anzeigt. Maya arbeitet als Projektmanagerin bei einer Consulting Firma, ist von Farbenblindheit betroffen, legt viel Wert auf Nachhaltigkeit und interessiert sich für Technologie und Optimierung.
Recherche und Moodboard
Für die einfache Bedienbarkeit und verstädnliche Gestaltung der App suchten wir uns Elemente von anderen Apps, die uns die Arbeit erleichterten. Zum Beispiel gibt es Toggle-Schalter, Drop-Down-Menüs, horizontales oder vertikales Sliden und weitere Darstellungsarten. Allein für die Navigationsleiste am unteren Rand des Smartphones gibt es viele unterschiedliche Darstellungsarten.
Für das Moodboard suchten wir nach 3 Stichwörtern. Das waren “Verbrauch”, “Strom” und “Nachhaltigkeit”.
Farben
Über das Moodboard kamen wir von den ersten Skizzen zu den Farbvarianten.
Wir erstellten Varianten für den dunklen Modus und für den hellen Modus. Am besten hat uns die helle Variante gefallen, da sie schlichter und weniger verspielt wirkte und die Farben nur für Aktionen oder leichte Hervorhebungen dienten.
UX Hürden
Es ist gar nicht mal so einfach, eine App so zu gestalten, dass für den Nutzer alles verständlich ist. So hingen wir lange daran, wie Maya die App einrichten kann. Gibt es eine Liste, an vorgegebenen Geräten, die sie auswählen kann? Wie kann Maya ein eigenes Gerät hinzufügen? Oder wie wird zwischen Smart-Home Gerät und Nicht-Smart-Home Gerät unterschieden?
