Exploring Multimodal Design – Ein Adobe XD-Tutorial

Eine Mutter, die sich bereit macht, zu Hause das Abendessen zuzubereiten, öffnet eine Koch-App auf ihrem iPad oder SmartTV. Per Berührung und Stimme interagiert sie mit der App und weist das Video an, anzuhalten, vorzuspulen oder einen bestimmten Abschnitt erneut abzuspielen . Wenn sie möchte, kann sie auf den Bildschirm tippen, anstatt ihre Stimme zu verwenden.

Multimodales Design basiert auf der Verwendung mehrerer Interaktionsmodi.

Bevor wir uns mit dem multimodalen Design befassen, beginnen wir mit einem grundlegenden Verständnis von zwei Arten von Interaktionen: Computer-zu-Mensch und Mensch-zu-Computer. Jede dieser Interaktionen umfasst verschiedene Modalitäten wie Sprache, Berührung und taktisches Feedback.

Computermenschliche Modalitäten

Computer-Mensch- (oder Computer-zu-Mensch-) Modalitäten helfen einem Computer zu verstehen, was der Benutzer will. Die gängigsten Computer-Mensch-Modalitäten beruhen auf Seh-, Hör- und Tastfähigkeiten. Einige Beispiele sind Computergrafik, Audiowiedergabe, Telefonvibrationen und Smartwatch-Feedback.

Mensch-Computer-Modalitäten

Wir haben mehrere Möglichkeiten erfunden, mit Computern zu interagieren. Einige Beispiele sind Tastaturen, Mäuse, Touchscreens, Trackpads und Spracherkennung. In diesem Fall verlassen sich Benutzer auf verschiedene Mechanismen, um mit Computern zu kommunizieren und diese zu steuern.

Komplexere Beispiele sind Beschleunigungsmesser, Gyroskope und Magnetometer, die bei der Bewegungserkennung helfen. Stellen Sie sich vor, Sie spielen eine Partie Tennis auf einer Konsole und verwenden das Gamepad, um die Bewegung des Schlägers zu emulieren. Dies bietet viele weitere Möglichkeiten, ein einzigartiges und ansprechendes [multimodales] Benutzererlebnis zu schaffen.

Warum multimodales Design

Die Idee hinter multimodalem Design ist es, mehrere Modalitäten zu kombinieren, um die Benutzererfahrung eines Produkts zu verbessern. Da jeder Produkte auf unterschiedliche Weise und in unterschiedlichen Kontexten verwendet, stehen den Benutzern mehrere Feedback-Mechanismen und mehrere Möglichkeiten zur Interaktion mit ihrem Computer zur Verfügung.

Designer erleichtern Benutzern das Leben, indem sie Aktionen durch verschiedene Modalitäten integrieren und automatisieren. Wenn es nur einen Modalitätsmechanismus gäbe, würde dies die Benutzererfahrung negativ beeinflussen und das Design würde in der Meinung des Benutzers „versagen“.

Ein Beispiel ist ein Auto-Infotainmentsystem. Die meisten dieser Systeme ermöglichen Benutzern die Interaktion mit Sprache und Berührung. Beim Fahren ist es naheliegend, unsere Stimme zum Telefonieren oder Navigieren zu verwenden, aber beim Parken ist es höchstwahrscheinlich einfacher, den Touchscreen oder ein Scrollrad zu verwenden, um mit dem System zu interagieren.

Hier sind ein paar weitere Beispiele, die wir häufig im multimodalen Design finden:

• Eine grafische Benutzeroberfläche verlässt sich auf unsere Vision, um beispielsweise mit einer Website oder einer digitalen Werbetafel zu interagieren.
• Eine Sprachbenutzeroberfläche ist auf unsere auditiven Fähigkeiten angewiesen, um zu interagieren. Dazu gehören alle Sprachassistenten wie Alexa, Google Assistant oder Siri.
• Haptik, Gesten und Bewegung verlassen sich auf unsere Berührungswahrnehmung (taktile Fähigkeiten), um eine Interaktion auszulösen. Das Empfangen einer Nachricht oder das Wischen nach links, um einen Song zu überspringen, sind zwei Beispiele.

Multimodales Design ist auch beim Designen für Menschen mit bestimmten Einschränkungen und Behinderungen hilfreich.

Ein einfaches multimodales Gestaltungsbeispiel: Das SmartHome

Robert kommt nach einem langen Tag nach Hause. Sein Hausautomationssystem wird ausgelöst, sobald er sich seiner Garage auf eine Meile nähert. Das System erkennt, dass er angekommen ist und startet eine Abfolge automatisierter Aktionen. Schaltet beispielsweise das Licht ein, regelt Heizung und Kühlung und deaktiviert die Alarmanlage.

Als nächstes könnte Robert entweder eine Fernbedienung verwenden oder den KI-fähigen Assistenten bitten, die Heizung herunterzudrehen, wenn er hereinkommt.

Ein komplexes multimodales Designerlebnis: Gesundheit

Wir sind jetzt in der Lage, komplexere Eingaben von Benutzern mit intelligenten Geräten zu erfassen. Wir können Eingaben wie Stresslevel, Herzschlag, Schlafzyklen, Wasseraufnahme und in naher Zukunft auch Glukosewerte messen.

Sobald diese Eingaben gespeichert sind, geben Geräte und Dienste wie Fitbit und First Aid by The Red Cross wertvolle, lebensrettende Warnungen in Form eines Vibrationsalarms, eines klopfenden „Klopfens“ am Handgelenk oder eines akustischen Alarms.

Dies ist eine komplexere Verwendung des multimodalen Designs, da das Gleichgewicht von Inputs zu Outputs korrekt berechnet werden muss. Das Design darf keine Fehlalarme auslösen, die den Benutzer möglicherweise in Panik versetzen.

Unabhängig davon, ob Sie einfache oder komplexe multimodale Erlebnisse entwerfen, eine der besten Möglichkeiten, multimodales Design besser zu verstehen, besteht darin, mit dem Designen im Hinterkopf zu beginnen. Schauen wir uns an, wie wir dies mit Adobe XD erreichen können.

Prototyping eines multimodalen Erlebnisses in Adobe XD

Adobe XD, ein beliebtes UX-Designtool, hat kürzlich Sprachbefehle und Wiedergabe zu seinem Funktionsarsenal hinzugefügt. Indem wir sie nutzen, können wir Modalitäten wie Sprach- und Audiowiedergabe hinzufügen, um ein multimodales Benutzererlebnis zu schaffen.

Lassen Sie uns als Beispiel die mobile Reise für eine Koch-App prototypisieren. Ein Koch zeigt, wie man ein Steak kocht, und die Leute können der App mit Stimme oder Berührung sagen, dass sie pausieren, wiederholen oder fortfahren soll.

Wir erstellen zunächst Prototypen aller Bildschirme, die zur Veranschaulichung der Erfahrung erforderlich sind:

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Als nächstes fügen wir einen Sprachbefehl hinzu, der eine Sprachmodalität emuliert. Im Prototypenmodus verbinden wir zunächst den ersten und den zweiten Bildschirm. Dann wählen wir die Stimme unter Trigger aus und schreiben eine Äußerung unter Befehl , um diesen Übergang auszulösen. Wenn wir zwei oder mehr Sprachbefehle hinzufügen möchten, müssen wir für jeden einen Connector hinzufügen.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Für den nächsten Bildschirm möchten wir, dass das System dem Benutzer antwortet. Wir tun dies, indem wir einen Zeitauslöser erstellen und die Sprachwiedergabe unter Aktion hinzufügen. Da wir eine sofortige Reaktion erzeugen wollen, setzen wir die Zeit auf 0 Sekunden.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Wir können auch traditionelle Trigger hinzufügen. In diesem Beispiel fügen wir dem zweiten Element der Liste einen Tap-Trigger hinzu. Wenn der Benutzer auf dieses Element tippt, wechselt die App zum nächsten Bildschirm. Die Kombination von Sprachbefehlen und Berührungsbefehlen ist ein großartiges Beispiel für die Bereitstellung einer besseren, durchdachteren Benutzererfahrung durch multimodales Design.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Als Nächstes möchten wir veranschaulichen, wie der Benutzer die Erfahrung innerhalb der App anhalten und fortsetzen kann. Da wir diese App mit Blick auf das Amazon Echo entwerfen, möchten wir einen Sprachbefehl wie „Echo, Pause“ hinzufügen.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Um das Video fortzusetzen, führen wir die gleiche Aktion aus, indem wir den Sprachbefehl „Echo, weiter“ hinzufügen.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Dies ist ein grundlegendes Beispiel für multimodales Design unter Verwendung des Sprachauslösers. Zusätzliche Auslöser sind Tippen, Ziehen und Verwenden der Tastatur oder eines Gamepads zur Steuerung des Prototyps.

Es ist leicht, in die Falle zu tappen, Trigger zu verwenden, nur weil sie existieren. Um eine bessere Benutzererfahrung mit multimodalem Design zu gestalten, möchten Designer testen und lernen, welche Interaktionen zu welchem ​​Zeitpunkt am sinnvollsten sind.

Multimodales Design und mentale Modelle

Beim Entwerfen mithilfe von Modalitäten ist es wichtig, daran zu denken, dass Benutzer eine Reihe vorgefasster Erwartungen (mentale Modelle) darüber haben, wie eine Interaktion ablaufen sollte. Beispielsweise erwarten die meisten Benutzer, dass sich ein Bildschirm nach oben bewegt, wenn sie auf einem Trackpad oder mit dem Scrollrad der Maus nach unten scrollen.

Beachten Sie, dass diese mentalen Modelle in vielen Fällen noch gebildet werden. Das Schütteln des Telefons ist ein Beispiel. Es ist immer noch eine obskure Interaktion, da einige Anbieter es verwenden, um die Eingabe „rückgängig“ zu machen, während andere es verwenden, um Songs zu mischen.

Es ist wichtig, sich dieser mentalen Modelle bewusst zu sein, wenn man auswählt, welche Modalitäten in das Produktdesign integriert werden sollen. Die Verwendung vertrauter Modalitäten kann die Benutzererfahrung verbessern. Modalitäten, die sich noch in der Entwicklung befinden, könnten Benutzer verwirren und die Erfahrung verschlechtern.

Neue Modalitäten: Gesprächsdesign

Zwei Modalitäten, die viel Zugkraft gewinnen, sind Chatbots und Sprachbenutzerschnittstellen. Manchmal auch als Conversational User Interfaces bezeichnet, liegt der Hauptfokus auf Text- und Sprachinteraktionen.

Ein Chatbot kann eine Schnittstelle verwenden, um Eingaben wie Text zu empfangen, und ist in der Lage, Grafiken, Links, Karten und Dialoge anzuzeigen. Einige Chatbots können Befehle per Sprache entgegennehmen und die Ergebnisse dann als Text oder mit synthetischer Stimme anzeigen.

Auch reine Sprachinteraktionen entstehen. Denken Sie an die Erweiterung von Siri oder Alexa auf Smart-Home-Geräte, bei denen Benutzer nichts eingeben, sondern nur mit Sprache vollständig interagieren. Dies ist für Designer wichtig, da fast jede Erfahrung im Gesprächsdesign multimodal ist.

Ein tolles Beispiel ist Lily von Maybe. Ein Bot, der Ihnen Chinesisch (und andere Sprachen) beibringt und auf verschiedenen Kanälen funktioniert. Gespräche können in der App oder durch Gespräche mit dem Bot geführt werden.

Zusammenfassung

Unter Verwendung von Sprach-, Berührungs-, Text- und Taptik-Feedback kombiniert multimodales Design verschiedene Modalitäten, um bessere Benutzererfahrungen zu schaffen. Computer-Mensch- und Mensch-Computer-Interaktionen können kombiniert werden, um einzigartige Produkterlebnisse zu schaffen.

Multimodales Design bietet auch neue Möglichkeiten und Herausforderungen für Designer. Tools wie Adobe XD erleichtern das Prototyping von Produkten mit verschiedenen Modalitäten, aber es ist eine Kunst und Wissenschaft, sie zusammen zu verwenden.

Das Erreichen dieser perfekten Balance, kombiniert mit dem Aufkommen neuer Modalitäten, wird Designer herausfordern, die Messlatte für die Verbesserung der Benutzererfahrung höher zu legen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Design mit Präzision – Ein Adobe XD Review
• Erforschung der Gründe für Design Thinking-Kritik
• Chatbot UX – Designtipps und Überlegungen
• Der Chat-Crash – Wenn ein Chatbot ausfällt
• Die Bedeutung von Human-Centered Design im Produktdesign