Mit dem ab sofort auch in Deutschland und Österreich verfügbaren Echo Spot erhalten Nutzer ein kompaktes Gerät, dass Sprache mit einem interaktiven Touch-Bildschirm kombiniert. Dies verschafft Entwicklern ganz neue Möglichkeiten, um multimodale Inhalte zu erstellen, die zusätzlich zur Sprache (VUI, Voice User Interface) auch durch grafische Inhalte (GUI, Graphical User Interface) begeistern.
Hier findest du einige hilfreiche Tipps, um deinen Skill für das Erlebnis auf Echo Spot zu optimieren.
Voice-First
Sprache ist eine natürliche, intuitive und effiziente Interaktionsform, die bei Geräten wie dem Echo Show und dem Echo Spot durch einen Bildschirm erweitert wird. So kann der Nutzer ergänzende Inhalte wie die Zutatenliste eines Kochrezeptes oder zusätzliche Informationen wie weitere Suchergebnisse anzeigen lassen.
Standardmäßig werden die in der Alexa App angezeigten Zusatzinformationen durch Cards automatisch auf dem Bildschirm mit Hilfe des sogenannten BodyTemplate1 dargestellt (siehe unten). Cards können sowohl Text als auch Bild enthalten. Wer sich das manuelle Programmieren der zugehörigen JSON-Objekte erleichtern möchte, der kann dafür diverse Programmiersprachen und SDKs nutzen. Mit dem JavaScipt-basierten Alexa Skills Kit für Node.js sieht solch ein Intent-Handler zur Erzeugen einer Card dann so aus:
this.response.speak(speechOutput).cardRenderer(cardTitle, cardContent, cardImage);
this.emit(':responseReady');
Unterstützte Schnittstellen
Damit du weißt welche Features ein Gerät unterstützt (zum Beispiel einen Bildschirm), werden diese vom Alexa Skills Kit als JSON geliefert. So kannst du je nach Gerät die passenden Inhalte anzeigen und dadurch Fehler vermeiden:
if (this.event.context.System.device.supportedInterfaces.Display) {
// Spezifische grafische Inhalte sofern Templates unterstützt werden und im Skill aktiviert sind
this.response.renderTemplate(myTemplate);
this.emit(':responseReady');
} else ...;
Echo Show und Echo Spot erlauben neben der Audio-Ausgabe zusätzlich die Anzeige von einfachem Text, formatiertem Rich Text und Bildern über Templates. Sobald du „Render Templates“ für den Skill innerhalb des Reiters „Skill Information“ aktivierst, werden sowohl zusätzliche Intents zur Steuerung der Inhalte angelegt als auch zahlreiche unterschiedliche Templates für die Anzeige (body template) unterstützt:
// Hilfsmethoden aus dem Alexa Skills Kit SDK for Node.js
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeImage = Alexa.utils.ImageUtils.makeImage;
const builder = new Alexa.templateBuilders.BodyTemplate1Builder(); const bodyTemplate = builder.setTitle('Mein BodyTemplate1') .setBackgroundImage(makeImage('https://url/to/my/img.png')) .setTextContent(makePlainText('Textinhalt')) .build();
this.response.speak(speechOutput).renderTemplate(bodyTemplate);
this.emit(':responseReady');
Es gibt außerdem spezielle Templates, die auch die Auswahl von Inhalten via Touch erlauben („list templates“):
// Hilfsmethoden aus dem Alexa Skills Kit SDK for Node.js
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeImage = Alexa.utils.ImageUtils.makeImage;
const itemImage = makeImage('https://url/to/my/img.png', imageWidth, imageHeight);
const listItemBuilder = new Alexa.templateBuilders.ListItemBuilder();
const listTemplateBuilder = new Alexa.templateBuilders.ListTemplate1Builder(); listItemBuilder.addItem(itemImage, 'listItemToken1', makePlainText('Listenelement 1')); listItemBuilder.addItem(itemImage, 'listItemToken2', makePlainText('Listenelement 2')); const listItems = listItemBuilder.build(); const listTemplate = listTemplateBuilder.setToken('listToken') .setTitle('Mein ListTemplate1') .setListItems(listItems) .build();
this.response.speak(speechOutput).listen(repromptSpeech).renderTemplate(**listTemplate);**
this.emit(':responseReady');
Das vom Nutzer gewählte Element wird anhand des im Programmcode vergebenen Tokens erkannt und als ElementSelected-Ereignis ähnlich einem Intent an die Programmlogik gesandt:
"ElementSelected" : function() { console.log("ElementSelected " + this.event.request.token); this.response.speak("Gewähltes Token" + this.event.request.token);
this.emit(':responseReady');
}
Auch wenn zum Beispiel das Scrollen durch die Anzeige bereits automatisch per Sprache funktioniert, musst du für die eigentliche Auswahl der Inhalte weiterhin mindestens ein Intent anlegen, dass die Auswahl zum Beispiel über „wähle“, „öffne“ und „zeige“ sowie bei Listen über „nummer eins“, „nummer zwei“, „eins“, „zwei“ usw. erlaubt.
Echo Show und Echo Spot unterstützen neben verschiedener Templates auch die Anzeige von Videos, sofern du „Video App“ für den Skill innerhalb des Reiters „Skill Information“ aktiviert hast:
if (this.event.context.System.device.supportedInterfaces.VideoApp) {
// Spezifische Video Inhalte, sofern Video unterstützt wird und im Skill aktiviert ist
this.response.playVideo('https://path/to/my/video.mp4');
this.emit(':responseReady');
} else ...
Unterschiede
Bei der Gestaltung der Inhalte ist es ratsam, die unterschiedlichen Bildschirmgrößen von Echo Spot und Echo Show zu berücksichtigen: Das Echo Show hat einen rechteckigen Bildschirm mit einer Auflösung von 1024 x 600 Pixel bei 7 Zoll Bildschirmdiagonale. Der Bildschirm des Echo Spot hingegen hat eine runde Form mit einer Auflösung von 480 x 480 Pixel bei 2,5 Zoll. Die Unterschiede sowie Gestaltungsempfehlungen sind in der Dokumentation unter: Best Practices for Designing Skills for Echo Devices With a Screen zusammengefasst.
Um einen ersten Eindruck der Darstellung zu erhalten, kannst du den neuen Test-Simulator nutzen, der die Templates so anzeigt, wie sie auf dem Echo Show dargestellt werden. Ein Test mit realen Geräten ist ratsam, um auch zu sehen, wie die Darstellung auf dem Echo Spot aussieht. So kannst du die Unterschiede der Geräte sowie das Nutzerverhalten in einer echten Umgebung erleben.
Weitere Tipps und Beispiele zum Aufbau und Design deines Alexa Skills findest du in unserem Sprachdesign Guide.
Weitere Ressourcen
- Best Practices for Designing Skills for Echo Devices With a Screen
- Alexa Skills Kit für Node.js
- Code-Beispiele:
- How to Build Alexa Skills for Echo Show
- Building for Echo Show and Echo Spot: VUI & GUI Best Practices
Webinar: Designing Multimodal Skills for Alexa
In unserem Webinar lernst du, wie du Skills für Echo Show, Echo Spot sowie alle weiteren Alexa-fähigen Geräte designst. Melde dich an und erfahre, wie du Bilder, Videos und formatierten Text zu deinem Skill hinzufügst. Das Webinar findet in Englisch statt. Jetzt anmelden!
Skill entwickeln, Entwickler-Goodie erhalten
Verwirkliche deine Alexa Skill Idee und mach mit bei unserer Entwickler-Aktion. Alle deutschen und österreichischen Entwickler, die zwischen dem 1. und dem 31. Januar 2018 einen deutschsprachigen Alexa Skill entwickeln und im Skill Store veröffentlichen, haben die Chance ein Hoodie im Alexa-Design zu bekommen. Erreicht dein Skill in den ersten 30 Tagen nach der Veröffentlichung mehr als 75 Nutzer (unique users), kannst Du Dich für ein Echo Dot bewerben. Der Skill mit den meisten Nutzern in diesem Zeitraum gewinnt ein Echo Plus. Sobald dein Skill veröffentlicht ist, kannst du dafür die Werbetrommel rühren. Falls du Inspiration oder Beispielcode suchst, findest du im Alexa Cookbook englischsprachige Tutorials für Templates. Leg jetzt los und entwickle deinen Skill!
Source: Alexa Developer Blog
