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.

20,000,000+

Echo devices sold

10,000,000+

Google home devices sold

Faul-il mettre de la voix partout ?

Oui

Non

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)

Screenshot

Actions on Google

Console

Screenshot

Actions on Google

Créez un nouveau projet

Screenshot

Actions on Google

Selectionnez Dialogflow

Screenshot

Dialogflow

Créez votre agent

Screenshot

Dialogflow

Intents

Screenshot

Dialogflow

Hello World

Screenshot

Dialogflow

Intégrations 1/2

Screenshot

Dialogflow

Intégrations 2/2

Screenshot

Actions on Google

App Info 1/2

Screenshot

Actions on Google

App Info 2/2

Screenshot

Simulateur

II: New Intent + Deep Linking

Screenshot

Dialogflow

New Intent

Screenshot

Dialogflow

Augmented Responses

Screenshot

Dialogflow

Deep linking

III: Dialogflow entities, prompts, actions + actions-on-google SDK

Screenshot

Dialogflow

Actions - Entities - Prompts

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
Screenshot

Dialogflow

Webhook

Screenshot

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

Thank you