UX JAM 21登壇用資料です 資料に関するお問い合わせは→ https://www.facebook.com/toshimitsu.miyachi

1. 株式会社ベストティーチャー 代表取締役社長
宮地俊充 Toshimitsu Miyachi
: toshimitsu.miyachi

2. スマートスピーカー買いましたか？
Photos by Toshimitsu Miyachi

3. ローンチパートナーとして
出典： CNET Japan https://japan.cnet.com/article/35109426/

4. Google Homeでできること
出典： au Google Home でできること https://www.au.com/googlehome/

5. 英語の勉強も

6. スマートスピーカーがある生活？
出典： Google Home：毎日がちょっと変わる 篇 https://www.youtube.com/watch?v=OWoKzNxZWw8

7. 今日のお話
Graphical
User Interface
Voice
User Interface
スマートスピーカー向けアプリのUX設計のコツ
Photos by Toshimitsu Miyachi

8. Status / 状態
Command / 命令
ざっくりサービスの流れ
DeviceUser
認識 表示
入力 受信

9. GUIとVoice UIの比較
状態表示
or
状態認識
ボタンが押せる状態と
いうことは、レッスン
を選択できるんだな
沈黙してるということは、
話しかけていいんだな
…

10. GUIとVoice UIの比較
命令入力 命令受信
OK, Google. ベスト
ティーチャーと話す
画面
遷移
分かりました。
ベストティー
チャーですね

11. Voice UIの挙動
• 発話と沈黙により、デバイスの状態表示や命令
受信を伝えるのが基本
 デバイス上部の光の点滅・回転により情報を
補足する
すみません。お役に立て
そうにありません
命令
受信

12. ①Voice
Command
システム構成図
④SSML
Assistant app
Action
動的ロジック
テキスト・MP3
③Webhook
⑥HTTP通信
⑦テキストやMP3ファイル
などを返す
②
⑤⑧音声
発話
Intro
Help
会話文 問題1 問題2 問題3 次へ
アプリ外へ
「OK」
「Help」
「A」 「B」 「B」
「OK」
「終了」

13. Voice UIでのUX設計のコツ
• (基本的には)視覚情報がなく、音声のみで情報を
受け取ることになる。多くの情報を一度に発話さ
れても、ユーザーは記憶できない
**の場合は「はい」
**の場合は「いいえ」
**の場合は ......
？？？

14. Voice UIでのUX設計のコツ
• 「ユーザーと会話する」というより、「ユーザー
にVoice Commandを発話させる」くらいの感覚で
会話の流れを設計する方がワークする(かも)
そうだといえばそうで
すし、そうじゃないと
いえばそうじゃないで
すし......
？？？

15. 「ベストティーチャー」での会話例
それではレッスンを
始めましょう！
「OK」と返事をして
ください。
答えは1、2、3、4の
いずれかで
答えてください

16. 参考: Actions on Googleの開発者向けドキュメント
https://developers.google.com/actions/extending-the-assistant
• GET STARTED
• Basics＞How to Design Your Apps
• BUILD CUSTOM APPS
• Design＞Overview＞The Conversational UI and Why It Matters
• Design＞Overview＞Understanding How Conversations Work: The Key
to a Better UI
• Design＞Design in Action＞Design Principles and Methodology
• Design＞Best Practices＞Instilling User Confidence Through
Confirmations and Acknowledgements