Spracheingabe macht es möglich, gegessene und getrunkene Lebensmittel intuitiv zu erfassen, ohne ständig auf ein Gerät schauen oder tippen zu müssen. Statt alles mühsam per Hand einzugeben, können Nutzer Mahlzeiten und Snacks einfach per Sprache dokumentieren. Das spart Zeit und senkt die Hürde für eine regelmäßige Erfassung.
Cayas Software GmbH plant jedes Jahr ein gemeinsames Team-Event. Dieses Jahr war es ein Hackathon im Thüringer Wald. Jedes Teammitglied stellte eine Idee vor, an der während des Hackathons gearbeitet werden konnte. Ausgewählt wurde die Idee, die Eingabe gegessener und getrunkener Lebensmittel in einer Fitness-App zu vereinfachen.
Der Hintergrund dieser Idee ist naheliegend: Die [Nutzung von E-Health-Anwendungen nimmt sichtbar zu](Infografik: Jede:r Vierte nutzt Fitness-Apps | Statista). Digitale Gesundheits- und Fitnesslösungen erreichen immer mehr Menschen und unterstützen sie bei ihrer Gesundheit. Blutdruck, Herzfrequenz, Sauerstoffsättigung, Schritte, Schlafverhalten, Kalorienverbrauch, Stress und viele weitere Werte lassen sich inzwischen erfassen. Doch was fehlt bei all diesen Kontrollmöglichkeiten? Genau: die Dokumentation dessen, was wir täglich essen und trinken. Denn Ernährung hat einen erheblichen Einfluss auf Gesundheit und Wohlbefinden. Genauso wie Bewegung fördert eine [gesunde Ernährung](Gesunde Ernährung | gesund.bund.de) langfristig die Gesundheit. Die Vorstellung, jedes Lebensmittel einzeln in eine App tippen zu müssen, klingt nicht nur mühsam - sie ist es auch. Um die Dokumentation zu vereinfachen, sollte es daher möglich sein, Einträge per Spracheingabe zu erfassen. Alles, was gegessen oder getrunken wird, wird in die App gesprochen, vom System erkannt und gespeichert.
Diese ersten Gedanken bilden den Hintergrund der Idee. In diesem Beitrag möchte ich vor allem die Designperspektive beleuchten und zeigen, welche Schritte bei der Entwicklung eines passenden UI-Designs für diese Aufgabe gegangen wurden. Eine saubere Verzahnung aus App Design und Mobile App Entwicklung ist gerade bei ungewöhnlichen Interaktionsmustern wie Spracheingabe der entscheidende Qualitätsfaktor.
Als ersten Schritt muss geklärt werden, welche Elemente überhaupt notwendig sind, um die Aufgabe zu erfüllen. Dabei hilft es, sich konkrete Szenen vorzustellen, in denen eine Dokumentation per Spracheingabe genutzt werden könnte. Die betrachteten [Nutzungsszenarien](Nutzungsszenario | User-Experience-Methoden-Katalog (user-experience-methods.com)) liefern Hinweise darauf, was im Design berücksichtigt werden muss, damit die Nutzung passend und reibungslos funktioniert.
Hier ergeben sich zwei Herausforderungen: Zum einen findet die Eingabe während des Laufens statt, das Smartphone liegt also nicht ruhig in der Hand. Zum anderen gibt es Umgebungsgeräusche, die das Sprechen und Verstehen beeinträchtigen können. Daraus ergeben sich folgende Anforderungen:
Daraus ergibt sich die folgende Anforderung:
Hieraus folgt:
Das sind nur drei von vielen möglichen Situationen, in denen die Dokumentation von Essen und Trinken stattfinden kann. Für einen ersten Entwurf mit den Basisfunktionen reicht das aber aus. Damit dokumentierte Elemente sowohl „besprochen“ als auch gelistet werden können, musste der Screen elegant in zwei Bereiche aufgeteilt werden. Sobald ein Lebensmittel erkannt wird, erscheint es im zweiten Bereich der Oberfläche. Nach Abschluss der Eingabe werden alle erfassten Lebensmittel in einer Übersicht angezeigt. Zusätzlich sollten unterschiedliche Kategorien aus der Ernährungspyramide farblich unterschieden werden.
Für erste Designideen sind Scribbles ideal. Das sind einfache Skizzen, mit denen sich Ideen entwickeln und Struktur sowie Funktionen einzelner Screens schnell klären lassen. Der große Vorteil: Scribbles lassen sich sehr schnell erstellen, wodurch viele unterschiedliche Gedankenansätze ausprobiert werden können. Form und Farbe spielen in diesem Stadium noch kaum eine Rolle. Gerade weil Scribbles bewusst unperfekt sind, gibt es wenig Hemmung, wieder zu verwerfen, zu ändern oder neue Wege einzuschlagen.
Da die geplante App im Bereich der Ernährungsdokumentation angesiedelt ist, haben wir nach geeigneten Farben in einer an Lebensmitteln orientierten Farbwelt gesucht. Zur Auswahl standen folgende Farben (von links nach rechts):
Gurkengrün, Milchweiß, Tomatenrot, Zitronengelb, Himbeerpink und Schokoladenbraun. Weil die verschiedenen Lebensmittelkategorien später selbst schon farbig dargestellt werden sollten, musste die Grundfarbigkeit der App bewusst reduziert werden, um Ruhe und Fokus zu schaffen. Als Basisfarbe wurde daher Milchweiß gewählt, während die Aktionsflächen für Aufnahme und Interaktion in Gurkengrün und Tomatenrot gestaltet wurden. Für die verschiedenen Lebensmittelkategorien wurden zusätzlich passende Illustrationen entwickelt, um die visuelle Zuordnung weiter zu unterstützen.
Auch die Typografie sollte klar und einfach bleiben. Deshalb wurden die Schriften Montserrat und Roboto ausgewählt. Roboto wird für Chat-Nachrichten, Listen und die Übersicht der erfassten Lebensmittel eingesetzt. Montserrat kommt für Überschriften und weitere Fließtexte zum Einsatz.
Die Funktion, die im Hackathon im Mittelpunkt stand, war die Dokumentation gegessener und getrunkener Lebensmittel per Spracheingabe. Das gestalterische Ergebnis des Hackathons umfasst drei Screens, die die zentralen Funktionen der erarbeiteten Lösung zeigen.
Links ist der Startscreen zu sehen. Wird der Aufnahme-Button gedrückt oder nach oben gewischt, startet die Aufnahme, und gegessene oder getrunkene Lebensmittel können erfasst werden. Wenn eine Spracheingabe nicht erkannt wird oder eine Rückfrage nötig ist, reagiert das System entsprechend. Wird ein Lebensmittel korrekt erkannt, erscheint es im oberen Bereich der App, und die bisherige Chat-Historie wird geleert, damit Platz für den nächsten Eintrag entsteht. Bei Fehlern kann ein gelistetes Lebensmittel direkt wieder entfernt werden. Zum Beenden der Dokumentation wird der Stop-Button gedrückt. Anschließend werden alle erfassten Lebensmittel in einer Übersicht angezeigt.
Die Grundfarbe der App ist bewusst zurückhaltend gewählt. Dadurch steht einerseits die Hauptfunktion - die Aufnahme - im Vordergrund, und andererseits wird der Screen nicht überladen, sobald die verschiedenen Kategorien sichtbar werden. Durch die Vergrößerung des geschwungenen Chat-Bereichs, sobald eine Eingabe gestartet wird, entsteht eine klare Trennung zwischen aktivem Kommunikationsbereich und passivem Dokumentationsbereich.
Diese App besitzt Potenzial für weitere Entwicklung. Es gibt bereits weitere nützliche Funktionen, die sich sinnvoll ergänzen ließen.
Im Hackathon ging es darum, eine App-Funktion zu entwerfen, mit der sich gegessene und getrunkene Lebensmittel per Spracheingabe dokumentieren lassen.
Weil sie die Hürde zur Eingabe senkt, schneller funktioniert als Tippen und auch in Situationen nutzbar ist, in denen Hände oder Aufmerksamkeit gerade nicht frei sind.
Wichtig waren Nutzungsszenarien, große und leicht bedienbare Interaktionselemente, visuelle Rückmeldung für Spracheingaben, eine klare Zweiteilung zwischen Eingabe- und Dokumentationsbereich sowie ein ruhiges Farb- und Typografiekonzept.
Als UI/UX Designerin bin ich für alle Themen rund um Design und Nutzungserfahrung zuständig. Unsere Kunden unterstütze ich mit meinem Gespür für intuitive Nutzungsoberflächen und charmante Design- und Farbkonzepte. In meinen Blogs werde ich Einblicke in meine Arbeit geben, über UI/UX Themen sprechen und Designtrends unter die Lupe nehmen.
Kartenfunktionen sind im mobilen Bereich ein wichtiges Feature. Kaum eine App gewinnt nicht an Wert, wenn sie Karten darstellen kann. Apple und Google machen mit ihren Map-SDKs vieles richtig, aber manchmal stößt man an Grenzen - sei es aus rechtlichen Gründen oder wegen eines Bugs. In meinem Fall war Letzteres der Auslöser. Ich brauchte außerdem eine Alternative, die auch offline funktioniert.
Lerne in 5 einfachen Schritten, wie Bluetooth und das External Accessory Framework zusammenspielen, um ein BeeWi-Auto mit Xamarin.iOS zu steuern.
Moderne Anwendungen werden immer stärker design- und damit nutzerzentriert gedacht. Für Nutzer ist die technische Umsetzung selten interessant - sie wird vielmehr vorausgesetzt. Ansprechendes Design, Animationen und eine gute Bedienbarkeit können dagegen einen echten Unterschied machen.