Konversationsaktionen werden am 13. Juni 2023 eingestellt. Weitere Informationen finden Sie unter Einstellung von Konversationsaktionen.

Gestaltungsrichtlinien

Beim Design von Interactive Canvas gibt es zwei Hauptaspekte:

  • Gespräche entwerfen
  • Benutzeroberfläche entwerfen

Ihre Nutzer können mit Ihrer Aktion interagieren, die das interaktive Canvas verwendet, indem Sie Google Assistant sprechen oder die Benutzeroberfläche berühren. Achte darauf, dass deine gesprochenen Unterhaltungen und die Benutzeroberfläche sich gegenseitig ergänzen und es Nutzern leicht und spannend machen, deine Aktion auszuführen. In den folgenden Abschnitten wird erläutert, wie Sie sowohl die Unterhaltung als auch die Benutzeroberfläche so gestalten, dass sie optimal funktionieren.

Eignet sich das interaktive Canvas für meine Aktion?

Bevor Sie mit dem Design beginnen, überlegen Sie, ob Ihre Aktion mit Interactive Canvas gut funktioniert. Sie sollten interaktives Canvas verwenden, wenn Ihre Aktion die folgenden Kriterien erfüllt:

  • Deine Aktion bietet visuelle Vollbilddarstellungen. Interactive Canvas ist ideal für Vollbild-Erlebnisse, die von ausdrucksstarken visuellen Elementen wie immersiven sprachgesteuerten Spielen profitieren.
  • Deine Aktion ist intuitiv gestaltet. Der kritische Pfad durch deine Aktion sollte allein per Sprachnavigation aufgerufen werden können. Eine Aktion, die eine räumliche Genauigkeit erfordert, z. B. eine Zeichenanwendung, kann für eine intuitive Unterhaltung schwierig sein.
  • Bestehende Komponenten und individuelle Anpassungen reichen nicht aus. Sie möchten beispielsweise nicht nur die vorhandenen visuellen Komponenten und Anpassungen von Assistant verwenden. Das interaktive Canvas ist ideal, um Ihre einzigartigen visuellen Markenattribute, dynamischen Elemente und Animationen zu präsentieren. Außerdem können über den interaktiven Canvas Updates für eine einzelne visuelle Schnittstelle bereitgestellt werden, während der Nutzer die Unterhaltung fortsetzt.

Voraussetzungen

Obwohl Interactive Canvas vertraute Webentwicklungsumgebungen verwendet, müssen einige Punkte beachtet werden, bevor Sie Ihre Aktion entwerfen.

Header- oder Toast-Nachricht

Standardmäßig enthält jede interaktive Canvas-Webanwendung eine Überschrift oben auf dem Bildschirm mit dem Namen Ihrer Marke. Der reservierte Bereich für den Header hat eine Höhe von 56 dp für Mobilgeräte, 96 dp für Nest Hub und 120 dp für Smart Displays. Beachten Sie folgende Header-Anforderung:

  • Achten Sie darauf, dass keine wichtigen Informationen oder interaktiven Elemente hinter dem Header versteckt sind. Die Methode getHeaderHeightPx() bestimmt die Höhe des Headers.
Abbildung 1. Beispiele für die Darstellung der Kopfzeile in verschiedenen Aktionen.

Sie können den Header optional durch eine Toast-Meldung ersetzen, die auf dem Ladebildschirm angezeigt wird und den Anzeigenamen der Aktion, den Namen des Entwicklers und Anweisungen zum Beenden der Aktion enthält. Informationen zum Ersetzen des Headers durch die Toast-Nachricht und zum Aktivieren des Vollbildmodus für Ihren Nutzer finden Sie unter Vollbildmodus aktivieren.

Beschränkungen

Beachten Sie die folgenden Einschränkungen, bevor Sie Ihre Aktion mit dem interaktiven Canvas entwerfen:

  • Keine lokale Speicherung von Daten. Wir verhindern, dass die Aktion Cookies speichert und auf die Web Storage API zugreift. Angesichts dieser Einschränkungen empfehlen wir, dass Ihre Aktion den Status im Webhook verwaltet und zum Speichern von Nutzerdaten Nutzerspeicher verwendet.
  • Keine Pop-ups oder Dialoge. Wir verhindern, dass Pop-up-Fenster oder -Fenster angezeigt werden. Außerdem raten wir dringend davon ab, andere standardmäßige Navigations-UI-Elemente zu verwenden, die Sie normalerweise in Webanwendungen wie Tastaturen und Paginierung sehen.

Unterhaltungen gestalten

Du musst zuerst die Unterhaltung deiner Aktion entwerfen. Interaktive Canvas-Funktionen werden weiterhin sprachgesteuert. Daher ist es wichtig, dass der Nutzer durch Ihre Unterhaltung durch Ihre Aktion geführt wird. Sie können sich eine Aktion, die das interaktive Canvas-Element nutzt, als Gesprächsthema mit hilfreichen visuellen Elementen vorstellen. Weitere Informationen zum Entwerfen von Unterhaltungen finden Sie in den Richtlinien für das Erstellen von Unterhaltungen von Google.

Richtlinien

Für eine optimale Nutzererfahrung sollten Sie:

  • Folgen Sie dem Gestaltungsprozess für Unterhaltungen und den Best Practices. In den Google Design-Richtlinien für Unterhaltungen finden Sie Best Practices. Das bedeutet unter anderem Folgendes:

    • Achte darauf, dass deine Aktion für Unterhaltungen gut funktioniert
    • Markenidentität erstellen
    • Fehler in der Unterhaltung verarbeiten
    • Probiere ein sprachgesteuertes Erlebnis aus, bevor du dich entscheidest, wie es auf einem Bildschirm aussehen würde

  • Versuchen Sie, dieselben Funktionen durch Touchbedienung und Sprachsteuerung anzubieten. Achten Sie darauf, dass Sie alles tun können, indem Sie auf den Bildschirm tippen.

  • Sorgen Sie dafür, dass der kritische Pfad durch Ihre Aktion per Spracheingabe möglich ist. Ihre Nutzer sollten die wichtigsten Pfade Ihrer Aktion nur mit Sprachbefehlen aufrufen können.

  • Sorge dafür, dass der Nutzer deine Aktion auch ohne Audio verwenden kann. Auf Mobilgeräten ist der Ton eventuell nicht aktiviert. Aus diesem Grund sollten Sie Ihrer Aktion Transkripte hinzufügen, um den Nutzer zu leiten.

  • Berücksichtigen Sie die kognitive Belastung. Vermeiden Sie zu lange Sprachantworten, um die kognitive Gebühren für den Nutzer zu reduzieren.

UI entwerfen

Nachdem Sie das Gespräch entworfen haben, können Sie Ihre Benutzeroberfläche entsprechend gestalten. Berücksichtigen Sie beim Entwerfen, wie die natürliche Hin- und Herbewegung im Dialog die visuelle Benutzeroberfläche beeinflussen kann, die Sie dem Nutzer präsentieren. Wenn du für Smart Displays konzipierst, findest du im Abschnitt Für Smart Displays entwickeln weitere Informationen.

Richtlinien

Für eine optimale Nutzererfahrung sollten Sie:

  • Responsive Designs erstellen Achte darauf, dass deine Designs sowohl im Hoch- als auch im Hochformat funktionieren und von kleinen Smartphones bis hin zu größeren Bildschirmen verwendet werden können. Ihre Nutzer sollten die Benutzeroberfläche für jeden Oberflächentyp einfach lesen können.
  • Berücksichtigen Sie die kognitive Belastung. Damit die Nutzer nicht überfordert werden, sollten Sie die Informationen und Inhalte auf dem Bildschirm übersichtlich und übersichtlich halten.
  • Sprachausgabe für den Bildschirm anpassen Seien Sie kreativ bei der Verwendung von visuellen Elementen, die die Audioinhalte ergänzen. Schreiben Sie nicht nur, was gesagt wird. Wenn ein Bildschirm verfügbar ist, ist die Sprachausgabe möglicherweise kompakter als bei einer fehlenden Ausgabe.
  • Platzieren Sie keine wichtigen Informationen oder Komponenten am unteren Bildschirmrand. Auf Mobilgeräten erscheint das Nutzertranskript über der Mikrofonplatte und kann zu einigen Zeilen führen. Auch wenn dieses Transkript vorübergehend ist, solltest du keine wichtigen Inhalte am unteren Bildschirmrand schreiben. Schaltflächen, die den Chips für Vorschläge ähneln, sind unten auf dem Bildschirm in Ordnung, da die Nutzereingabe eine Alternative zur Verwendung von Chips für Vorschläge darstellt.
  • Beheben Sie Fehler in Ihrer Unterhaltung visuell. Fehler können auftreten, wenn der Nutzer nicht antwortet, Sie ihn nicht verstehen oder nicht die gewünschte Erfüllung anbieten. Finden Sie heraus, wo diese Fehler auf der UI angezeigt werden. Das kann überall sein, wo du Aufforderungen für das Displaynetzwerk eingibst (z. B. im Titel) oder etwas anderes (z. B. ein spezieller Inhaltsbereich, der nach Bedarf angezeigt wird). Weitere Tipps zur Fehlerbehandlung finden Sie unter Fehler in den Richtlinien für das Unterhaltungsdesign.

Design für Smart Displays

Die oben beschriebenen Richtlinien gelten zwar weiterhin, aber du solltest beim Design für Smart Displays auch andere Aspekte berücksichtigen. Es ist verlockend, Smart Displays wie Tablets zu behandeln. Smart Displays sind aus zwei Gründen eine ganz andere und neue Gerätekategorie:

  • Smart Displays sind sprachgesteuert und Google Assistant ist das Betriebssystem.
  • Smart-Displays sind unbeweglich und werden anders als Mobilgeräte oft in der Küche oder im Schlafzimmer platziert, wenn sie zu Hause verwendet werden.

Aus diesem Grund befinden sich Nutzer manchmal nicht in der Nähe des Geräts und interagieren per Sprachbefehl nur mit ihrer Stimme mit Smart Displays. Nutzer verwenden möglicherweise auch Multitasking, während sie Smart Displays verwenden. Das sollten Sie berücksichtigen, wenn Sie Smart Displays verwenden.

Richtlinien

Für eine optimale Nutzung von Smart Displays sollten Sie Folgendes tun:

  • Design mit Fokus auf Sprache Bei Smart Displays ist es umso wichtiger, die interaktive Canvas-Aktion so zu gestalten, dass eine Sprachausgabe möglich ist. Im Gegensatz zu einem Mobilgerät kann der Nutzer im gesamten Raum stehen und nur per Sprachbefehl über sein Smart Display kommunizieren. Aus diesem Grund können Sie sich nicht immer darauf verlassen, dass der Nutzer das Gerät berührt, um die Aktion auszuführen. Sie müssen auch dafür sorgen, dass die Nutzer die Aktion per Sprachbefehl fortsetzen können.
  • Beim Design ist ein bestimmter Abstand erforderlich. Entwickle Inhalte auf dem Smart Display, damit du sie aus der Ferne ansehen kannst. Je nach Größe des Raums liegt der typische Anzeigeabstand bei Smart Displays zwischen 3 und 10 Fuß.
    • Verwenden Sie eine Mindestschriftgröße von 32 pt für primären Text wie Titel. Verwenden Sie für sekundäre Texte wie Beschreibungen oder Textabschnitte mindestens 24 pt.
  • Konzentrieren Sie sich immer nur auf einen Touchpoint. Zeigen Sie jeweils nur eine Art von primären Informationen oder Aufgabe an, um die kognitive Arbeitslast zu reduzieren und den Inhalt aus einiger Entfernung lesbar zu halten. Wenn Nutzer beispielsweise fragen: Wie ist mein Tag?, Google Assistant antwortet mit Wetter-, Kalender-, Pendler- und Nachrichteninhalten. Jede Art von Inhalten nimmt den gesamten Bildschirm ein und wird der Reihe nach angezeigt und nicht alle auf einmal auf dem Bildschirm.

Ressourcen

Weitere Informationen zum Entwerfen einer Aktion, die interaktives Canvas verwendet, finden Sie in den folgenden Ressourcen: