Voiceflowでやってみるシチュエーショナルデザインの第3回です。今回は「わかりやすくする」がテーマです。「わかりやすくする」というのはどういうことでしょうか？サブテーマの方も「階層型のメニューではなく、すべてのオプションをトップに配置すること」とあります。ちょっとよくわかりませんね。実際に試しながら見ていきましょう。
Alexa道場のシチュエーショナルデザインの回はこちら。
シチュエーショナルデザインの日本語ドキュメントは以下にあります。
ちなみに、今回はこちらではなくて、まず英文の「シチュエーショナルデザイン」のホワイトペーパーの方をベースに説明します。ホワイトペーパーは以下でダウンロード可能です。
そのあとで日本語のドキュメントにあるプリンシパルに沿ってVoiceflowでどう実装するか？を説明します。ちょっと長くなりそうなので、2回に分けます。
この記事は「Voiceflowでやってみるシチュエーショナルデザイン」シリーズの第3回 Part1の記事です。他の記事は以下にあります。よろしければあわせて読んでみてください。
第1回
第2回
第3回 Part2
第4回
「階層型のメニューではなく、すべてのオプションをトップに配置すること」とは？
まず、GUIとVUIの違いを理解するために、題材としてショッピングアプリを考えてみましょう。
GUIの場合
Amazon.co.jpのiPhoneアプリで「ギフトカードの番号を入力したい」とします。アプリを開いてみましょう。
最も頻度が高いと思われる「商品検索」は上のテキストボックスから行います。その他、今のおすすめ商品やよく使われるメニューが並んでいますね。で左上にハンバーガーメニューがありますので、ここをクリックします。
「アカウントサービス」をクリックします。
「アマゾンギフト券を登録する」をクリックします。
はい、ここですね。
GUIだとこんな感じで、順にメニューをたどっていくのは一般的によく見ますよね。ではこれをVUIでそのままやるとどうなるでしょうか？
GUIでやることをVUIで同じようにやってみる
アレクサ、「ショッピング」をひらいて
ショッピングへようこそ。メニューから選択してください。
（メニューって何があるのかな・・・）何ができるの？
商品名で検索する場合は「◯◯で検索」と言ってください。それ以外にも、カテゴリー検索、注文履歴、再び購入、欲しい物リスト、アカウントサービス、・・・などがあります。どれにしますか？
（長くて覚えられない・・・もう一度聞いてみよう・・・）もう一度言って
商品名で検索する場合は「◯◯で検索」と言ってください。それ以外にも、カテゴリー検索、注文履歴、再び購入、欲しい物リスト、アカウントサービス、・・・などがあります。どれにしますか？
（たしかギフトカード番号の登録はアカウントサービスだったっけ？・・・）とりあえず、アカウントサービスで
アカウントサービスでは、注文履歴、定期お得便、支払方法の変更、・・・、ギフトカード番号の登録、・・・、などが行なえます。どれにしますか？
（またこれも長いなぁ・・・でも、ギフトカード番号の登録はできるみたい・・・）ギフトカード番号の登録
ギフトカード番号の登録、ですね。番号を言ってください。
えっと、１２３４５６７８９０で
ギフトカード番号は、１２３４５６７８９０，ですね。よろしいですか？
はい
ごめんなさい、エラーが発生しました。時間をおいてもう一度最初からやりなおしてください。
もういいよ！！！！
これはちょっとたいへんですね・・・
VUIならでのやり方
ではこのやり方ならどうでしょうか？
アレクサ、「ショッピング」をひらいて
ショッピングへようこそ。何をしますか？
（何ができるかわからないけど試してみるか・・・）ギフトカード番号を登録したいんだけど
ギフトカード番号の登録ですね。番号を言ってください。
（あ、できるんだ！）えっと１２３４５６７８９０
ギフトカード番号１２３４５６７８９０を登録しました。お客様の残高に5000円が追加されました。それではショッピングをお楽しみください
わーい
これなら楽にできそうですね！
VUIとGUIの違いを理解する
一般的にGUIは情報量を多く表示することができますので一覧性に優れています。ただそれでもあまりにも多すぎるとわからなくなります。そこで使用頻度などに応じて、よく使うものはトップに、それほど使われないものは階層化されたメニューを用意してカテゴライズされた各メニューからやりたいことを絞り込んでいくという形を取ることが多いです。その上、選んだメニュー内に見つからなかったとしても、戻って別のメニューを探すというのもそれほど負荷が高いわけではありません（数タップで戻れるわけですし、一覧を見ればいいだけなので）
これに対して、VUIの場合、
- 多すぎるメニューは説明が長くなり、覚えていられない。
- 深すぎるネストは、今自分がどの階層にいるのか、わからない。
- やり取りが多くなると、時間がかかる上、やり直しになると、やる気を失う。
つまり、より「ダイレクトに目的にたどり着ける」ような作りにすることが求められるというわけです。これが「階層型のメニューではなく、すべてのオプションをトップに配置すること」ということなのですね。
実践してみよう
ということで前フリがながくなりましたが、実際に見てみましょう。第2回で紹介した「お菓子フレンド」を少し変えてみました。
最初にレシピを知りたいお菓子の名前を言うと、3つのメニューが選択できて、それぞれ動きが変わるというものになっています。選択できるのは以下の3つです。
- 材料と手順の両方を知りたい
- 材料を読み上げたあと、手順の動画が再生される
- 材料だけを知りたい
- 材料の説明だけをしてくれる
- 手順だけを知りたい
- 手順の動画再生だけをしてくれる
実際の動きはこんな感じです。サンプルなので「クッキー」にしか対応できていないこと、実際に動画は再生されないことをご了承ください。まず両方聞きたい場合。
材料だけの場合。
手順だけの場合。
はい、想定通りには動いてますね。3つのメニューのところを少し見てみましょう。
最初にdessert_intentでお菓子名を取得したあと、このChoice Blockで発話に応じたメニューの分岐を行っています。
- 材料と手順の両方を知りたい
- recipe_intent
- 材料だけを知りたい
- ingriedient_intent
- 手順だけを知りたい
- direction_intent
それぞれのインテントはこんな感じになっています。
ちゃんと分岐もできてはいますが、最初にお菓子名を言ってから毎回この分岐を行うというステップを踏まないといけないのは手間ですね。普通、レシピが知りたい場合は両方を知りたい場合が多いでしょうし、ユーザが慣れてきてどちらかだけでいいならもっと具体的に発話することになると思います。ということで、最初のChoice Blockですべてのインテントを受けれるようにしましょう。最初のChoice Blockの現在の設定はこうなっています。
dessert_intentが一番一般的な発話になっているので、この場合は材料と動画をそのまま再生することにします。ここに、材料だけを知りたい場合のingriedient_intentと、手順だけを知りたい場合のdirection_intentを追加します。Voiceflowでは一旦登録したインテントは別の場所では選択するだけで呼びだすことができますので、1からインテントを登録し直す必要はないです。
"Add path"をクリックします。
ingridient_only_intent がリストに出てきますのでこれを選択します。
最初のChoice Blockのインテントとして追加されました。Utterancesをクリックしてみてください。
サンプル発話も最初に登録してあるものがそのまま呼び出されていますよね。ただ、ここにはお菓子名を受け取るスロットが含まれていませんので変更しましょう。
こんな感じです。
同じようにして、direction_intentも最初のChoice Blockで受け取れるようにします。
これで、メニューに使っていた真ん中のChoice Blockは不要になりますので、フローを以下のように変更します。
最初のChoice Blockで受け取るインテントによってフローが分岐するようになりました。ではテストしてみます。
まずは普通に。
材料だけ。
手順だけ。
はい、余分なステップが減って、いろんな応答に一発で答えれるようになりましたねー。
シチュエーショナルデザインの第3回「3. わかりやすくする：階層型のメニューではなく、すべてのオプションをトップに配置すること」Part1でした。VUIでは音声のみの対話となり、メニューによる手続きが増えたり時間が長くなったりすると、ユーザにとってはそれを学習するための手間や頭の中で考えることが増えてしまいます。なるべくダイレクトにユーザの要望に答えれるようにしましょう。
次回はPart2です。日本語ドキュメントにある個々のプリンシパルを見ていきたいと思います。
続きはこちら
