Interfaces Utilisateurs Vocales Introduction
BrestJS @BrestJS - Alex Nicol @nicol_alexandre
voice2018.webnicol.fr
Me
Alex Nicol - @nicol_alexandre - Github
Developer @ Digital Innovation team // EDF Energy R&D UK Centre
Web / Mobile / AR / Chatbots / Blockchain
Interfaces Utilisateurs Vocales ?
What is VUI?
Interfaces Utilisateurs permettant l'accés à des informations en utilisant la voix.
It has always been a dream
20,000,000+
Echo devices sold
10,000,000+
Google home devices sold
Advantages
Rapide
Mains libres
Intuitive
"La voix parle pour elle même"
Maximes de Conversations réussies (Paul Grice "Logic and Conversation" 1975)
Qualité (Ce que vous pensez être vrai)
Quantité (Autant d'information que nécessaire, mais pas plus)
Pertinence (Ne parlez que de ce qui est pernitent)
Clarté (Il faut pouvoir être compris par les autres)
Bonne pratiques
Contexte
Marqueurs discursifs
"Fail gracefully"
Gérez les attentes de vos utilisateurs
Ce n'est pas la faute de l'utilisateur
Aidez les novices
Help/Repeat/Previous
"Wizard of Oz"
"No screen? No problem!"
Intéractions courtes (Surchage cognitive)
Feedback/Rapidité
Language humain-humain
Correction/Confirmation
Evitez les lists longues
HANDS ON!
Créeons une Google Action pour le Cinéma Les Studios!
I: Hello World (+ Setup)
II: New Intent + Deep Linking
III: Dialogflow entities, prompts, actions + actions-on-google SDK
IV: Firebase functions + Webhook + Fulfimment
Toolbox:
JavaScript / Node.js basic knowledge
Firebase + Firebase CLI
Dialogflow
Google Actions Developer account
I: Hello World (+ Setup)
Actions on Google
Console
Actions on Google
Créez un nouveau projet
Actions on Google
Selectionnez Dialogflow
Dialogflow
Créez votre agent
Dialogflow
Intents
Dialogflow
Hello World
Dialogflow
Intégrations 1/2
Dialogflow
Intégrations 2/2
Actions on Google
App Info 1/2
Actions on Google
App Info 2/2
Simulateur
II: New Intent + Deep Linking
Dialogflow
New Intent
Dialogflow
Augmented Responses
Dialogflow
Deep linking
III: Dialogflow entities, prompts, actions + actions-on-google SDK
Dialogflow
Actions - Entities - Prompts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const functions = require('firebase-functions'); | |
| const admin = require('firebase-admin'); | |
| admin.initializeApp(functions.config().firebase); | |
| const DataLesStudios = require('dataFromSomewhere'); | |
| exports.lesstudios = functions.https.onRequest((request, response) => { | |
| const GET_MOVIE_LIST_INTENT = 'action.getMovieList'; | |
| const DialogflowApp = require('actions-on-google').DialogflowApp; | |
| const app = new DialogflowApp({request: request, response: response}); | |
| function getMovieList (app) { | |
| let date = app.getArgument('date'); | |
| let movies = DataLesStudios.movieList(date); | |
| app.tell('Voici les films à l\'affiche: ' + movies.join(', ') + '.' ); | |
| } | |
| let actionMap = new Map(); | |
| actionMap.set(GET_MOVIE_LIST_INTENT, getMovieList); | |
| app.handleRequest(actionMap); | |
| }); |
IV: Firebase functions + Webhook + Fulfimment
mkdir lesStudios
npm install -g firebase-tools
firebase login --reauth
firebase init // select functions
cd functions/
npm install --save actions-on-google
// code
firebase deploy --only functions // be sure you get the function URL
Dialogflow
Webhook
Dialogflow
fulfillment
Reminders about VUI
• “Will your users benefit from a VUI?”
• “Cognitive load”
• "Fail Gracefully"
• “Don’t ask a questions if you won’t be able to understand the answer”
• Create a character for your bot
• Keep it simple
• Listen to your users