Voice Commerce UXR | UX | UI (Bachelor-Thesis)

SmartBlue – UX für einen mobilen Sprachschnittstellen Prototyp

SmartBlue-Headerbild-
SmartBlue entstand im Rahmen meiner Bachelor-Thesis. Durch die Kombination von Sprache als effiziente Eingabe- und der Bildschirm als zusätzliche effiziente Ausgabemethode entwickelt sich die Mensch-Maschine Interaktion weiter, die das Benutzererlebnis beeinflusst. 
Voice Commerce kann zum erfolgreichen Vertriebsinstrument werden und eine entscheidende Rolle im Kundenerlebnis spielen. Dennoch zeigen die Schnittstellen enorme Usability Probleme auf, da sie nur begrenzt und bei einfachen Abfragen gut funktionieren. Und wer will ungesehen ein Produkt kaufen?

Meine Rolle

Die gesamte Verantwortung für das Projekt SmartBlue lag bei mir. Von der Planung, der Recherche-Phase bis zur Evaluation des Remote Usability Tests. Ein externes Unternehmen war nicht beteiligt.

Innerhalb von einem Zeitraum von drei Monaten entwickelte ich auf Basis meiner Fragestellung einen mobilen sprachbasierten Prototyp mit visueller Unterstützung, für den Einsatz im E-Commerce. Dieser wurde durch die Zielgruppe remote statt in einem Usability Test mit persönlicher Anwesenheit getestet.

 

PROZESS // 

Desktop Recherche, Fokusgruppe; Affinitätsdiagramm; Benutzer- & Systempersona, Szenario; Informationsarchitektur; Dialogflow, Wireframes, Mockups, mobiler Prototyp; Remote Usability Test

ZEITRAUM //

Von März 2020-Mai 2020

SOFTWARE // 

Adobe Creative Suite – Xd, InDesign, Illustrator

Referentin beim World Usability Day in Stuttgart 2020

Ziele

Sprache ist Trumpf //

Die Kommunikation per Sprache gehört zu den natürlichsten Interaktionsmöglichkeiten zwischen den Menschen, dass Wissen zur Sprache trägt nicht nur maßgeblich zur Entwicklung einer Sprachschnittstelle bei, sondern beeinflusst auch die Mensch-Maschine Interaktion.

Bildschirm zur Kontrolle //

Der visuelle Zugriff auf Inhalte ist schneller als der sequentielle. Die kognitive Belastung der Nutzer sinkt, wenn neben einer Sprachschnittstelle eine visuelle Unterstützung genutzt wird, um das Ziel effektiv und effizient und vor allem zufriedenstellend zu erreichen.

Mentale Modelle beachten //

Für die Entwicklung einer sprachbasierten mobilen Applikation ist es von Bedeutung, auf mentale Modelle der Nutzer zurückzugreifen. Um ein Verständnis vom Nutzer und seiner Interaktion mit einem digitalen Endgerät zu entwickeln.

LEITFRAGE

Wie kann eine mobile Applikation im Voice Commerce mit einer Sprach- und grafischen Benutzerschnittstelle entwickelt werden, damit die Benutzer positive Erfahrungen während der Nutzung machen?

UX DESIGN PROZESS

NUTZUNGSKONTEXT VERSTEHEN & BESCHREIBEN

Die Desktop Recherche ergab Domänenwissen aus Umfragen, Fachartikeln & Studien

Obwohl die Nutzung von Sprachschnittstellen kontinuierlich zunimmt, zeigten Recherchen enorme Usability Probleme, hinsichtlich:

  • des Sprachverstehens
  • Nutzung ausschließlich mittels prägnanter Befehle „Wetter Stuttgart“, oder
  • Benutzer nutzten die Technologie nicht mehr, weil es nicht richtig funktioniert.

Diese erste Recherche gab mir auch die Möglichkeit die Zielgruppe einzugrenzen: 

Das Geschlecht spielt keine Rolle, Online-Einkauf erfahren, technologieinteressiert

Fokusgruppe für ein tieferes Verständnis zu den Emotionen, Bedürfnisse und Schwierigkeiten und Wünsche der Zielgruppe in Bezug zu Sprachschnittstellen

Mithilfe eines digitalen Sprachassistenten ohne Bildschirm sollten die sieben Teilnehmer einen Einkauf per Sprache durchführen und über diese Erfahrung bzw. im Vorfeld gemachte Erfahrung miteinander sprechen.

Ich moderierte die Veranstaltung und beobachtete die Teilnehmer im Umgang miteinander und mit der Sprachschnittstelle. Erfasste deren Aussagen digital.

Die Fokusgruppe ergab, dass ein schneller Kaufvorgang das Nutzungskriterium Nr. 1, der App ist.

Grundsätzlich deckten sich die Erkenntnisse der Fokusgruppe mit der Desktop Recherche. Weitere wichtige waren:

  • schneller Kaufvorgang,
  • verbessertes Sprachverstehen,
  • Display zur Kontrolle,
  • Teilnehmer würden keine Sprachschnittstelle nutzen,
  • gewünschte Funktionen: Produkt merken, Filter, zentrale Eigenschaften des Produkts, Alternative, persönlicher Bezug der Sprachschnittstelle.

Affinitätsdiagramm, um die Ergebnisse aus der Recherche sinnvoll zu filtern & gruppieren

Auf diese Weise konnte ich die Erkenntnisse von den Menschen, ihren Geschichten und Aufgaben, Herausforderungen, interpretieren und für das Konzept auf eine strukturierte Datenbasis zurückgreifen.

SmartBlue Affiniate

Recherche-Ergebnisse in eine Benutzer- & Systempersona konsolidieren, um den Designfokus zu schärfen

Jonas Bauer steht stellvertretend für einen Benutzer der Zielgruppe und beschreibt dessen Verhaltensmuster.

Die Systempersona nimmt die Perspektive des Systems ein und hilft, die Wahrnehmung des Benutzers bewusst zu steuern und diesem ein Bild von der Sprachschnittstelle zu vermitteln. 

Mithilfe der Personas, konnte ich mich Schrittweise dem Konzept der App annähern, um es möglichst nutzerzentriert erstellen zu können. 

Persona-Jonas
Persona-Vicki

NUTZUNGSANFORDERUNGEN SPEZIFIZIEREN

Szenario – eine Geschichte vom Nutzungskontext & den zu erreichenden Zielen der Personas Jonas Bauer & Vicki 

Für ein Produkt, welches in dieser Form noch nicht existiert, war es notwendig sich in die Personas Jonas Bauer und Vicki hineinzuversetzen und ein Szenario zu verfassen.

Das half mir dabei, später Entwürfe zu entwicklen, die ein ideales Ergebnis aus Sicht der Personas Jonas und Vicki beschreibt.

Daraus entstanden die Funktionen der App sowie die zu stillenden zentralen menschlichen Bedürfnisse. 

01 | FUNKTIONEN

Funktionen-und-Beduerfnisse-2

02 | BEDÜRFNISSE

Funktionen-und-Beduerfnisse2

Sinnvolle Informationsarchitektur als Grundlage für gute Usability & positive UX

Informationsarchitektur-3

Parallele Entwicklung des Dialog-Flow am Happy Path und der Wireframes für übereinstimmende Ein- und Ausgaben der Modalitäten

Für einen ansprechenden Dialog nutzte ich verschieden sprachliche Elemente, wie einfache Satzstellungen, implizite Bestätigung und Rückmeldung über aktuelle Systemzustände, sowie die Bekanntmachung benötigter Informationen. 

Diese eingesetzten Elemente wecken beim Benutzer Sicherheit, Verständnis und die Möglichkeit den benötigten Zeitaufwand abschätzen zu können. Zudem ist der Dialog klar und einfach bis zum Ziel und verbessert dadurch das Sprachverstehen der Sprachschnittstelle 

Dialogflow-neu-2

Bei der Entwicklung der Wireframes achtete ich besonders auf die Struktur der inhaltlichen Darstellung und auf die Benutzerführung, die ausschließlich per Sprache stattfand.

Auch die mentalen Modellen der Nutzer, die sie bereits aus Apps und Desktop-Anwendungen entwickelten, bezog ich in die Entwicklung ein. Wie bspw. Buttons, Chips mit verschiedenen Status.

In dieser Phase waren einige Iterationen nötig, bis ich ein nützliches Ergebnis hatte. Weil ich die Wireframes und den Dialog von Personen aus der Zielgruppe testen ließ:

Die Anordnung der Elemente, die nicht sinnvoll war. Geringe Schriftgröße für einige Anwender, der Dialog und Wireframes waren nicht optimal aufeinander abgestimmt.

Wireframes-SmartBlue

Zurückhaltende visuelle Gestaltung des E-Commerce Konzepts, um keine Ablenkung beim Nutzer zu erzielen.

  • Hauptfaben: verschiedene Grautöne,
  • Sekundärfarben: Zwei Blautöne, die bspw. bei den Button-Status genutzt werden.
  • Akzentfarbe: Dynamischer Farbverlauf, der die innovative Idee verkörpern soll.
  • Font: Die moderne Font Comfortaa in den Schnitten Regular und Bold. 
SmartBlue-Farbe-Font
2710-Mann-SmartBlue-Website

GESTALTUNGSLÖSUNG

Onboarding durch Vicki in die Funktionsweise der App

Das ist vor allem dann wichtig, wenn er noch keine Berührungspunkte mit einem Bestellprozess per Sprache hat. 

Das Video ist ohne Ton und startet automatisch.

SmartBlue-Launch-Screen

Der Nutzer öffnet die App mit dem Aufrufnamen "SmartBlue" 

Der Launch Screen ist anschließend für wenige Sekunden zu sehen.

Die Ansicht wechselt zu Home und die Sprachschnittstelle begrüßt den Benutzer, persönlich. Sie stellt die Frage, wie sie behilflich sein kann. Am Fuß der Navigation sieht der Nutzer Tipps, die er für die Beantwortung der Frage nutzen kann.

Unterschiedlicher Farbverlauf kennzeichnet Ein- und Ausgabe

Spracheingaben und -ausgaben werden in der Ansicht Home mit einem Audiovisualisierer dargestellt.

Durch die unterschiedliche Farbgebung, weiß der Nutzer wann er verbal einen Befehl durchführen kann und wann die Sprachschnittstelle antwortet.

  • Spracheingabe: violett-blauer Farbverlauf,
  • Sprachausgabe: türkis-blauer Farbverlauf

Tipps als Navigator

Der Benutzer sieht am Fuß der Applikation Tipps, mit deren Hilfe er durch die App navigieren kann.

Diese Form der Darstellung findet zu Beginn in der Ansicht Home und beim Kaufabschluss statt. Ziel ist, dass die Sprachschnittstelle die Benutzereingabe ohne Probleme versteht, sodass der Benutzer schnell zum Ziel kommt. 

SmartBlue-Fokus-Tipps-

Die Sprachausgabe wird durch den Benutzer wahr genommen und gefragt, wie er fortfahren möchte. Die Tipps zeigen einen normalen Status. Der Benutzer verbalisiert die Absicht des Smartphone-Kaufs.

Danach wird der Tipp "kaufen" aktiviert. Sowohl die visuelle Rückmeldung als auch die verbale Bestätigung durch die Sprachschnittstelle zeigen dem Nutzer, dass die Eingabe entgegengenommen wurde.

Filter, um das Suchergebnis einzugrenzen

Für die Festlegung der Eigenschaften setzte ich einen Filter ein. Auf Grundlage der gesetzten Filter soll die Sprachschnittstelle ein passendes Produkt finden und dem Nutzer präsentieren.

Die Sprachschnittstelle fordert den Nutzer dazu auf, die Eigenschaften Speicherleistung, Kameraleistung, Display-Diagonale sowie Preisspanne verbal festzulegen. 

Das System meldet die Spracheingabe nach jeder festgelegten Eigenschaft visuell zurück, indem die gewählten Optionen aktiviert werden. 

Filter-2

Produkt-Eigenschaften & die Darstellung bei SmartBlue

SmartBlue-Eigenschaften-Prototyp

Zentrale Eigenschaften (Bildschirmdiagonale, Prozessorleistung, Kameraleistung) werden durch die Sprachschnittstelle nacheinander vorgestellt.

Der Nutzer erhält durch unterschiedliche Status zusätzlich eine visuelle Rückmeldung, welche Eigenschaft vorgestellt wird. 

  • Aktiviert mit einem Filled Icon: Weißes, gedrücktes Element. Die Eigenschaft wurde gerade vorgestellt. 
  • Fokus: Hellblaues, hervorstehendes Element. Die Eigenschaft wird gerade vorgestellt.
  • Normal: Weißes, hervorstehendes Element. Die Eigenschaft wurde noch nicht vorgestellt.
1920px-SmartBlue-Eigenschaften@2x-2

Persönliche Ansprache durch Vicki

Durch die persönliche Ansprache der Sprachschnittstelle kann das Bedürfnis Verbundenheit beim Benutzer gestillt werden.

Diese Art der Ansprache trägt neben einer guten Ausgestaltung der App dazu bei, dass beim Nutzer Vertrauen entsteht und diese weiterhin nutzt.

PROTOTYP 

SmartBlue die Voice Commerce App

Der Prototyp SmartBlue ist eine Voice Commerce Applikation mit grafischer Unterstützung. Ein Ausschnitt des Prototyps zeigt die Farbwahl bis zum Kaufabschluss. Vicki als digitaler Sprachassistent leitet das Verkaufsgespräch mit Jonas, der ein leistungsstärkeres Smartphone benötigt. 

Bitte den Lautsprecher am Gerät anstellen, um den Prototyp vollständig nutzen zu können.

GESTALTUNGSLÖSUNG EVALUIEREN

Feedback durch die Nutzer

Der Remote Usability Test und der Fragebogen AttrakDiff fand mit Teilnehmern der Zielgruppe statt. Dabei lösten sie mithilfe des Prototyps und anhand eines Szenarios vier Aufgaben.

  1. Das Bedürfnis einen Smartphone-Kauf durchzuführen, verbalisieren.
  2. Die Filteroptionen – 512 GB, Triple Kamera, Unter 5,9 Zoll und Preisspanne ab 1.000 EUR, festlegen.
  3. Die Farbe Space-Grau wählen
  4. Den Kauf abschließen

Die Teilnehmer hatten keine Probleme und lösten die gestellten Aufgaben. Lediglich beim Filter wussten zunächst zwei der Personen nicht, wie sie die Optionen festlegen sollen. Alle Teilnehmer verstanden die audiovisuelle Darstellung ohne Probleme und empfanden den Einkauf als "einfach". Sie können sich vorstellen künftig einen Einkauf per Sprache durchzuführen. 


"Das fand ich sehr, sehr gut. Perfekt, als ich das gehört habe. [...] genau richtig weil das Produkt super dargestellt wird und zwar genau so, wie ich mir das vorstelle."

Teilnehmer – Remote Usability Test

Rückblick &
Resümee

Der Zeitraum der Bachelorthesis war sehr intensiv, weil ich viel Zeit in die Entwicklung des Prototyps steckte und dabei viele verschiedene, für mich neue Methoden nutzte.

Gründliche Recherche ist das A & O //

Weil ich ein nutzerzentriertes Produkt entwickeln wollte, verließ ich mich nicht nur auf eine reine Desktop Recherche sondern veranstaltete zusätzlich eine Fokusgruppe. Dadurch konnte ich noch sehr viel besser nachvollziehen, welche Emotionen und Bedürfnisse die Nutzung einer Sprachschnittstelle bei den Teilnehmern hervorruft.

Mentale Modelle, um nicht zu überfordern //

Während ich die Fokusgruppe auswertete stellte ich fest, dass die Teilnehmer von Interaktionsproblemen mit Sprachschnittstellen berichteten und diese in ihrem Alltag eher nicht verwenden. Aus diesem Grund entschied ich mich dafür, bekannte Elemente von Desktop- und von mobilen Anwendungen zu nutzen.

Remote oder einen normalen Usability Test? Kommt darauf an //

Den Usability Test führte ich mit den Teilnehmern remote durch. Obwohl ich den Teilnehmern ausführlich das Thema vorgestellt und den Testdurchgang erklärte, stelle ich rückblickend fest, dass ein üblicher Usability Test besser gewesen wäre. Weil ich als Testleiter den Teilnehmer während der Durchführung besser unterstützen hätte können.

Sprach- und grafische Benutzerschnittstelle als nützliche Kombi //

Die Usability Tests zeigten eindeutig, dass eine Sprachschnittstelle mit einer ausgewogenen Darstellung an visualisierten Elementen für die Nutzer, nützlicher sind. 

© Yvonne 2021

Back to top Arrow