Inhalt des Kurses

Interface Design 1

Bachelor of Arts

Interaktionsgestaltung

Semesterjahr

2. Semester

Wasch geht ab!

Interface Design I - Wasch geht ab!

Das Semesterprojekt im Fach Interface Design I besteht darin ein Waschmaschinen Interface zu gestalten. Es steht im Fokus ein nutzerzentriertes Konzept zu entwickeln, welches eine fehlerfreie Bedienung ermöglicht.

Ideensammlung

Zielgruppe

Für unsere Zielgruppenfindung erstellen wir bewusst Personas, anhand welcher wir die Bedienung und Funktionen anpassen.
Eine unserer Personas ist Lucas. Er ist Student in Schwäbisch Gmünd und lebt mit 3 anderen Mitstudenten in einer Wohn- gemeinschaft. Im Monat hat er zwischen 700 und 800 Euro  zur Verfügung. Da Lucas einen großen Teil seiner Zeit in das Selbststudium investiert, bleibt nicht viel Zeit für häusliche Tätigkeiten. Bei seiner Waschmaschine ist es ihm wichtig,  dass die Bedienung einfach und schnell erfolgt. Er möchte keine Kleinigkeiten in der Bedienungsanleitung nachschauen müssen.

Unsere zweite Persona ist Anette. Sie ist Mutter, Lehrerin und führt ein umweltbewusstes Leben. Sie hat aber nicht allzu viel Zeit. Da sie verheiratet ist und zwei Kinder hat, wäscht sie ca. alle zwei Tage. Eine einfache und schnelle Bedienung ihrer Waschmaschine ist ihr deshalb wichtig.

Konzeption

Recherche

Bei der Recherche ist stark aufgefallen, dass das Interface von Waschmaschinen oft sehr überladen wirkt und die Hintergründe der Waschprogramme unbekannt sind. Das führt dazu, dass der Nutzer schnell den Überblick verliert. Icons sind oft nicht so gewählt, dass sie klar verständlich sind. Meistens wird kein Display verwendet. Der Grund dafür können hohe Kosten sein. Auf dem Markt gibt es nur wenige smarte Waschmaschinen, diese sind meistens mit einer App verbunden. Durch das Card- sorting können weniger wichtige Informationen für unsere Anwendung leichter ausgeschlossen werden. Bei der Recherche sind wir auf das Konzept des Thermomix gestoßen. Dieses führt den Nutzer kontinuierlich. In unserer Anwendung besch- ränken wir uns nur auf Materialien und nicht auf Programme. Unsere Navigation orientiert sich, ähnlich wie bei “Domino´s Pizza”, an einer Breadcrumb Navigation. Einen Timer, der im Uhrzeigersinn läuft, haben wir bei unserer Recherche häufig gesehen. Wir halten diesen für sinnvoll und bauen ihn deshalb in unser finalen Konzeption ein.

Skizzen

Basierend auf unserer Recherche fertigen wir erste Skizzen an. Durch erstes Wireframing konnten wir erste Icons und Screens leicht und schnell entwerfen. Diese bauen wir später als ersten Prototyp in dem Programm Figma nach. Teilweise werden Icons und UI Elemente im finalen Prototyp nachgebaut.Die Skizzen beinhalten bereits die ersten Versuche, herkömmliche Wasch- programme zu umgehen. Dabei können sowohl Kleidungsstücke als auch deren Farbe angegeben werden. Zudem wird die End- zeit eingegeben, sodass der Waschgang endet, wie es in den Zeitplan des Nutzers passt. In den Dialogen wird der Nutzer persönlich angesprochen. Vorherige Einstellungen können auch erneut ausgewählt werden.

Finale Konzeption

In unserem dritten Konzept steht die Finalisierung der Informationsarchitektur im Vordergrund. Aus dem zweiten Konzept werden die Auswahlmöglichkeiten aus dem Unter- punkt “Programm” übernommen. Der Nutzer kann zwischen der Auswahlmöglichkeit “Textil” und “Kleidungsstück” wählen. Diese werden durch Icons gekennzeichnet. Da Kleidungsstücke aus unterschiedlichen Textilien bestehen, kann keine zuverlässige Auswahl der Wascheigenschaften getroffen werden. Zudem müssten sehr viele verschiedene Kleidungsstücke aufgelistet werden. Darum wird diese Auswahlmöglichkeit verworfen. Die Einstellmöglichkeiten “Schleudern” und “Vorwäsche” werden von dem Punkt “Start” auf “Extras” verlegt. Diese Entscheidung muss früher getroffen werden, damit die Waschmaschine ein optimales Waschprogramm erstellen kann. Ansonsten erfolgt diese Entscheidung informationsarchitektonisch zu spät. Auf dem “Startscreen” erscheint somit die vollständige Übersicht über alle Entschei- dungen, welche zuvor getätigt werden. Da eine hohe numerische Auflösung bei den Schiebereglern nicht erforderlich ist, werden diese durch eine Auswahl von fünf möglichen Werten ersetzt. So kann die Eingabe einfacher erfolgen.

Zudem legen wir genauer fest, welche Information auf dem Startscreen sinnvoll ist und wie diese dargestellt werden soll. In unserer Anwendung kann eine Endzeit für den Waschgang festgelegt werden. Damit wird vermieden, dass der Nutzer eigenständig rechnen muss, zu welcher Zeit der Waschgang beendet ist. Dazu bilden wir zwei verschiedene Varianten. In der Ersten wird ein Scrollcontainer verwendet. Dieser ist für unsere Anwendung allerdings nicht brauchbar, da die Uhrzeit versehentlich falsch eingestellt werden kann. Um die Fehler- anfälligkeit zu minimieren, kann die Endzeit durch das Tippen auf “+” und “-” Symbole beliebig verändern.
In dem dritten Testing wird nochmals darauf hingewiesen, dass die Auswahl von Kleidungsstücken nicht sinnvoll ist, da diese oft aus unterschiedlichen Textilien bestehen. Basierend auf dieser Auswahl kann kein richtiges Waschprogramm erstellt werden. Somit fällt diese Auswahlmöglichkeiten und gleich- zeitig auch die Icons für die Auswahl weg. Auch der Scrollcontainer für die Zeiteinstellung wird wegen zu hoher Ungenauigkeit durch dieses Testing verworfen.

Gestaltungsprozess

Bedienung

Die Bedienung des Interfaces erfolgt durch einen Touchscreen. Unser Interface besteht hauptsächlich daraus, einzelne Punkte aus einer Liste anzuwählen. So kann die Eingabe oder auch das Ändern einer Eingabe schnell und fehlerfrei erfolgen. Die Navi- gation ist in unserer Anwendung sehr flexibel. Ein idealer Prozess ist für eine lineare Struktur vorgegeben, allerdings kann innerhalb des Prozesses flexibel gesprungen werden. Man ist somit nicht an eine feste Reihenfolge gebunden.
Für eine einfache Bedienung der Waschmaschine und eine gute Lesbarkeit, soll sich der Bildschirm ausklappen. Dies ermöglicht auch im Stehen ein einfaches Bedienen.

Farben

In unserer Anwendung beschränken wir uns auf sieben Farben (einschließlich Weiß und Schwarz). Es handelt sich dabei jeweils um verschiedene Helligkeitsabstufungen. Durch die Beschränkung in unserer Farbwahl können mögliche Fehler vermieden werden. So sind ausgewählte Elemente immer in der Farbe #3C88BB gefärbt. Anwählbare Elemente sind mit der Farbe #D8E7F1 hinterlegt. Davon ausgenommen ist die Navigation, da diese Feedback darüber gibt, wo sich  der Nutzer befindet. Hier wird für den aktuellen Navigations- punkt die Farbe #3C88BB verwendet, für alle übrigen die Farbe #8A8989. Die Schriftfarbe ist je nach Hintergrundfarbe, um den Kontrast zu gewährleisten, Schwarz oder Weiß.

Icons

Bei dem Erstellen unserer Icon Familie achten wir darauf einen runden, weichen Stil zu verfolgen, da unsere UI Elemente ebenfalls mit einem Eckenradius von 8 Pixeln gestaltet sind. Symbole wie zum Beispiel die Schneeflocke für “kalt”, verän- dern wir kaum, da unser Nutzer diese Symbole schon kennt. Auch hier halten wir uns an unser Farbschema.

Schrift

Bei der Auswahl der Schrift gibt es zunächst mehrere Möglich- keiten. Avenir Next, Roboto und Source Sans. Durch blindes Testing, welche Schriftart am besten am Screen lesbar und einfach gehalten ist, entscheiden wir uns für die Schrift Roboto. Die Schriftschnitte Light, Regular und Medium stellen außer- dem eine Hierarchie dar. Da der Schriftschnitt “Light” in der verwendeten Schriftgröße nicht gut lesbar ist. Diesen simu- lieren wir mit dem Schriftschnitt “Regular” und dem Herunter- setzen der Helligkeit auf 50%. Stattdessen verwenden wir ihn auf dem Screen “Abbrechen”, da die Schriftgröße hier um einiges größer ist. Hier können die Schriftschnitte “Regular” und “Medium”, aufgrund der großen Schriftgröße (96 px), nicht verwendet werden.

UI Elemente

Bei den UI Elementen halten wir uns, an das zuvor festgelegte, Farbschema. Wir verwenden durchgehend einen Eckenradius von 8 Pixeln. Durch die einheitliche Gestaltung der einzelnen Elemente kann die Fehleranzahl bei der Benutzung minimiert werden.

Navigation

Die Navigation besteht aus vier Unterpunkten, über die der Nutzer direkt mit einem Tippen in den gewünschten Punkt weitergeleitet wird. Da die Einstellmöglichkeiten “Textilien”, “Optionen” und “Starten” aufeinander aufbauen, haben wir  uns für eine Breadcumb Navigation entschieden. Die Pfeile stellen visuell den Prozess dar, welchen der Nutzer durch- laufen kann. Der Unterpunkt “Schnellstart” grenzt sich von  dem Einstellungsprozess ab, da die Schnellauswahl den Nutzer direkt auf die Starten-Oberfläche weiterleitet.Bei der Gestaltung der Navigation wird auch ein Eckenradius von 8 Pixeln verwendet. Zusätzlich sind die Elemente mit einem Dropshadow hinterlegt, welcher dem Nutzer die Klickbarkeit surgerieren soll. Die Icons dienen als visueller Anhaltspunkt für die Funktionen unter dem jeweiligen Navigationspunkt.