Die Komplexität eines Hauses in einer einzigen App vereint

30.10.2017

Die Komplexität eines Hauses in einer einzigen App vereint

Was muss eine Smart Home App können und wie definieren wir Usability und User Experience? Der SARAH Design-Verantwortliche Res gibt Einblick in seine Gedanken und in die Herausforderungen bei der Konzeption.

Autor: Res Finger

Am Anfang stand eine smarte Vision

Vor rund zwei Jahren fand das erste Zusammentreffen zwischen Chris Moser, Tobias Kluge, Michael Schranz und mir, Res Finger, bei Apps with love statt. Schnell war klar, dass wortwörtlich eine smarte Vision für eine App im Raum steht, welche sich durch ein sauberes Design und gute UX von bestehenden Home Automation Lösungen klar abheben soll. Die Herausforderung für das Design-Konzept und die UX kristallisierte sich schnell heraus: Wie kann eine solch grosse Anzahl an verschiedenen Gewerken, smarten Geräte, Fernsteuerungen, Services und Automationsmöglichkeiten aus einem Guss in einer für den Enduser noch bedienbaren App vereint werden? Wir entschieden, dass dieses Projekt sehr iterativ und agil anzugehen, User Story um User Story zu konzipieren, zu wireframen um diese dann in einzelnen Sprints umzusetzen. Nur so konnten wir effizient arbeiten und parallel die bereits finalen Designs durch die Frontend-Entwickler umsetzen lassen. Dieser Blogbeitrag berichtet von den UX- und Design Challenges in der Entwicklung von SARAH.

Was macht eine gute Usability und UX aus?

Usability beschreibt die Gebrauchstauglichkeit eines Produktes. Ziel einer Applikation ist es, dass sie einen spürbaren Mehrwert im Nutzungskontext des Users erbringt. Im Falle einer Smart Home App ist die Voraussetzung für gute User Experience, dass das System, respektive die Software, sehr schnell auf das Verhalten des Users reagiert. Wenn beispielsweise die Steuerung des Lichtes oder der Multimedia-Anlage im Haus mit ein paar Sekunden Verzögerung erfolgt, kann sich das bereits negativ auf das Nutzungserlebnis auswirken. Eine einfache Benutzerführung ist hierfür genauso wichtig wie eine klare Informationsarchitektur.

anfuehrungszeichen_hubware

Usability answers the question, “Can the user accomplish their goal?schlusszeichen_hubware

Joyce Lee, Human Factors Design bei Apple

Iterativ und in enger Zusammenarbeit zum SARAH Design

Nachdem die Vision und das Ziel der App klar, sowie der gesamte Funktionsumfang grob beschrieben war, startete die Detailkonzeptarbeit, welche Schritt für Schritt eine gute und passende User Experience anvisiert. Aus den User Journeys, welche uns deutlich machten, welche elementaren Abläufe und Anwendungsfälle berücksichtigt werden sollen, wurden User Stories und funktionale wie auch nicht funktionale Anforderungen abgeleitet. Ein ganzer Raum bei der App Agentur Apps with love wurde in ein “SARAH-Universum” verwandelt. Jede einzelne Anforderung und jeder Funktionsbeschrieb wurde auf einzelne Post-its geschrieben und aufgehängt.


smart home app UX sketch

Wir führten zudem einen vergleichenden Research durch, um inspirierende als auch weniger gute Beispiele von anderen Smart Device Apps zu sammeln und diese den entsprechenden Funktionen zuzuordnen. Dann folgte die Konzeption der Benutzerführung, welche in sogenannten Flow-Diagrammen dargestellt wurden. Dies führte letztlich zur Definition der gesamten Navigationsstruktur.


smart home app design develoment

Flowdiagramm von SARAH v1.0 (erstellt in Lucidchart)

In enger Zusammenarbeit mit Tobias und Chris von hubware wurde die erste Version des SARAH Interfaces iterativ und in einzelnen Sprints skizziert und weiterentwickelt. Für etliche komplexe Abläufe in der App haben wir funktionale Prototypen gebaut, welche halfen, allfällige Usability Issues noch vor dem eigentlichen Programmieren der App zu erkennen.

anfuehrungszeichen_hubware

Ein Prototyp sagt mehr als tausend Bilder.schlusszeichen_hubware

Res Finger, Head of Concept & Design bei Apps with love

Nachdem jeweils alle Screens für einen Sprint abgenommen waren, wurden sämtliche nötigen Assets wie Buttons, Linien, Piktogramme sowie nötige Animationen designed. Am Ende des Design-Loops folgten die Spezifikationen, welche den Entwicklern sowohl visuell als auch durch Text (User Stories) jeden einzelnen Screen detailliert erklärt. Nachdem diese wichtige Dokumentation fertiggestellt war, wurden die einzelnen Tasks eines Sprint durch den Projektleiter an die einzelnen SARAH Entwickler für Apple iOS und Google Android zugewiesen. Sobald erste Alpha- und Betareleases aus der Entwicklerstube kommen, wird ein Design-Review durchgeführt, bei dem genau kontrolliert wird, ob die finale Umsetzung auch wirklich den definierten Designs, Assets und Schriften entspricht. Auch während der Entwicklungsphase gibt es natürlich regelmässige Austausch Calls, an denen Rückfragen zu den Entwicklerspezifikationen oder Animationen geklärt werden. Mehr zur Projektumsetzung von SARAH findet ihr auch auf dem Apps with love Blog.


SARAH design concept postits

Zeitdruck und Vielfalt sowie Komplexität der Gewerksteuerungen als grösste Herausforderungen

Gutes und passendes Design braucht seine Zeit und oftmals mehrere Iterationen bis es optimal für alle definierten Zielgruppen und Anwendungsfälle funktioniert. Die grösste Herausforderung im Erarbeiten des Use Interfaces für SARAH bestand darin, die unterschiedlichsten Gewerke in einer konsistenten Art und Weise bedienen zu können. Bei einem Lichtsystem gibt es verschiedenste Anbieter auf dem Markt. Die Kunst des Konzeptes bestand darin, dem Bewohner etwas intuitives, das nicht zu weit vom gewohnten Interface des Lichtsystems weg ist, anzubieten.

Es gab auch Momente, in denen es schwierig war, das System überhaupt zu verstehen. Dass man eine Szene EIN-schalten kann, nicht aber AUS-schalten, hat mir lange Zeit nicht eingeleuchtet. Unzählige Diskussionen aus der Sicht der User sowie aus der Sicht der technischen Entwicklung haben uns schliesslich zu immer besseren Lösungen getrieben.

Eine weitere Hürde bestand darin, die App nicht mit allzu vielen Funktionen zu bestücken, so dass man diese auch ohne Handbuch verstehen kann. Aus zeitlichen Gründen haben wir die Version 1.0 jedoch mit allen erdenklichen Funktionen gebaut, um in einem weiteren Schritt Nutzerrollen einzuführen. Diese werden uns ermöglichen, dass nicht jeder Bewohner/Bewohnerin denselben (tiefen) Blick ins System braucht. Kinder sollen bspw. keine Automationen selber erstellen, geschweige denn das Heiz- oder Lüftungssystem manipulieren können. Dies wird uns in Zukunft die Möglichkeit bieten, das Interface auf den Benutzer und seine Rolle anpassen zu können.

anfuehrungszeichen_hubware

Rule of thumb for UX: More options more problems.schlusszeichen_hubware

Scott Belsky, Vice President of Products & Community at Adobe


SARAH design concept remote

anfuehrungszeichen_hubware

The biggest challenge for us as designer is to create great UI/UX, keep convenience, beauty and style through over 300 screens of this all in one smart home app.schlusszeichen_hubware

Res & Sergey, Senior Designer von SARAH und SVEN

SARAH at a glance

  • Über 1’200 Stunden Designwork
  • Rund 300 pixelgenaue Screens
  • 1070 verwendete Icons zur Benutzerführung
  • >100 UX Tests und Trials
  • Rang 1 bei ‘Best of Swiss Apps’ 2016 (Kategorie IoT) (4. Rang Gesamtwertung)

Was kommt als nächstes?

Um die UX kontinuierlich anhand von User Bedürfnissen weiterzuentwickeln, steht für SARAH ein Design-Refresh an, bei dem viele kleine Verbesserungen umgesetzt werden. Das Design wird kontinuierlich überarbeitet. Etliche Änderungen in der Interaktion mit den Gewerken (Remote Controls) sollen in Zukunft ein noch besseres Erlebnis bieten.

anfuehrungszeichen_hubware

Anything we can do to make things simpler and more transparent is a plus.schlusszeichen_hubware

Cap Watkins


SARAH gui on iphone x und galaxy s8

Res Finger – Seit fünf Jahren Head of Concept & Design bei Apps with love. Vorher beim SRF u.a. verantwortlich für Konzept und Design der ersten SRF App. Nebst SARAH und SVEN von hubware hat er zum Beispiel die “Patrouille des Glaciers” App von Swisscom und die erste Version des “Mobile Wallet” Twint der PostFinance konzipiert und designed. Mit Ruhe und Gelassenheit erfindet er die wildesten Ideen.

Mehr Informationen

Teile diesen Beitrag: