VoiceUI / VoiceUX デザインことはじめ

# はじめに
長々と書いていますが、VUIのキモはたった一つと言っても過言じゃありません。
**エラーハンドリング**です。
エラーの対応ができていないと全てが台無しです。

筆記とは違い、老若何女問わず毎日会話していますから、会話だけは人間誰でもプロなんです。
話の通じない人と話すのは誰もが嫌がります。
普通に指示して、「わかりませんでした」と、これほど失礼なことはありません。
せめて、「分かんなかったけれど、こう言ってもらえればわかる」を示して挽回するのです。

エラーハンドリングをして、次に何を言って欲しいかきちんと言えば大半のタスクが完了できます。

あ。二つだった。

# VUIとは
Voice User Interface、声で操作するインターフェイスです。
今ご覧になっているGraphic UIや、エンジニアの利用するCommand UI、チャットボットのConversational UIとは異なり、基本的には画面がなく、入力も出力も音声で行ってタスクを完了します。

## メリット・デメリット
VUIは画面がなく、物理キーもなく、筆記具を持つ必要もありません。
ユーザーをより自由にすることができるインターフェイスです。
その為、下記のような特長がありますので、それを考慮した設計にする必要があります。

### メリット
* 手を使わずに操作できる
* 声さえ届けば、どこからでも入力できる
* 出力をその場にいる複数の人と共有できる
* 読み書きができない人でも操作できる

### デメリット
* 秘密のお話ができない。音声の届く全員に伝わってしまう
* 「読み飛ばし・早送り」ができない
    * どちらも画面をざっとみて欲しい情報を探す方法なので、画面が無いとできません
* 入力を修正することができない
* テキスト変換が正しいか確認できない

### 今日のスマートスピーカーでの制限
また、今日のスマートスピーカーにおける制限も忘れてはいけません。

* ユーザーの発話からタスクを開始する必要がある
    * 話しかけられていないのに、突然通知メッセージを届けることはできません
    * 会話の中でにおいても任意のタイミングで発話はできません
        * つまり「loading中です」→「loadしました。再生します」ができません
* スピーカーの発話を遮ることができない
* 音声でのユーザー認識が正確ではない
* インターネットにつながれている必要がある
* 音声が機械的になる。また、抑揚がない
* 長い会話を理解できない

# VUIデザイン
## 会話をデザインする理由
**ユーザーは会話のプロです。** 幼少のときより会話を操り、日々会話を行っています。
新しいソフトを利用したり、新しい端末を扱ったりするのとは異なり、ユーザーは操作方法を熟知しています。
**ユーザーが知らないのは、そのアプリが「何ならできるか」、その一点です。**

## VUIデザインのポイント
* 会話はシンプルに
* 応答は『一答一問』になるようにする
* エラーはない。説明が足りないだけ

## 詳細
### 会話はシンプルに
VUIは会話をするインターフェイスです。**話し言葉で構成します**。
ユーザーは必ず会話が終わるまで時間的に拘束されます。**過度な丁寧言葉や回りくどい言い回しはフラストレーションの素**です。
また、「ヘルプと言ってください」などの言い回しは、人間同士の会話ではありえません。「『ヘルプ』でアクションの機能をお伝えします。」など、人間同士の会話に近づけるようにします。

### 応答は『一答一問』になるようにする
システムどんな発話を望んでいるのか、どうアプローチすればいいのか、VUIではシステムの発言からしか得ることができません。
**常に次の発言へのヒントや質問を盛り込み、ユーザーの回答をサポートします。**

```
NG:
 user:「カートに何が入ってる？」
 speaker:「カートには牛乳2本、小麦粉1袋が入っています。」
OK:　
 user:「カートに何が入ってる？」
 speaker:「カートには牛乳2本、小麦粉1袋が入っています。会計に進みますか？」
```

### エラーはない。説明が足りないだけ
VUIでのエラーの多くは、システムが認識できない・カバーしてない部分になります。
エラーが発生した場合、ユーザーには**どのように発話したらシステムが作動できるか**伝える必要があります。

```
user:「人参を購入する」
speaker:「どのくらい購入しますか？」
user:「1山」
speaker:「すみません。わかりませんでした。人参はいくつ購入しますか？」
user:「1山」
speaker:「もう一度おっしゃってください。人参は、一袋、一本、一箱で購入できます」
user:「1袋」
```

# VUXデザイン
視覚情報もなしに言葉だけで会話を行うのは、電話が近いでしょう。特に他人に電話をすることに似ています。うまく意図が伝わらなかったり、サポート窓口の長々と続くアナウンスをまってイライラした経験はありませんか？
不快感を減らすため、VUIでは主に**会話を人間のそれに近づけたり、選択肢を示す（絞る）ことでVUXの改善**を行います。

## VUXデザインのポイント
* 一般的な操作をできるようにする
* 機能を伝える
* 入力を確認する
* 何度も同じことを言わせない。学習（記録）する
* 長い会話は避ける

## 詳細
### 一般的な操作をできるようにする
ユーザーは学習します。GUIではメニューに行けばヘルプや設定があり、いらなくなったら「ｘ」で閉じます。VUXはまだ発展途上で、そういった暗黙知はありません。ひとまず、日常の一般的な語とGUIで利用していたワードは動作するようにしましょう。


| 機能 | 発話サンプル |
|---|---|
| 使い方 | ヘルプ 使い方 何ができる |
| 繰り返し | もう一度 もう一回 繰り返し |
| リセット | 戻る 最初から やり直す |
| 終了 | おしまい さようなら さよなら またね やめる 終了 終わる 終わり |
| 肯定 | はい もちろん そうです お願い どうぞ |
| 否定 | いいえ そうじゃない 違う 結構です |

### 機能を伝える
GUIとは異なり、VUIではざっとみて全体を把握することができません。
**アプリが何ができるのか、どう操作するのか、説明する必要があります。**
この説明がないと、初めて使うユーザーは、何をすればいいのかわからず、結果、使ってもらえない残念なアプリになります。

#### 起動時に挨拶とともに機能を伝える
```
# 機能を列挙する
「こんにちは。xxショップアプリでは、商品の価格・在庫状況を調べたり、購入できます。」
# 一部の機能をすすめる
「こんにちは。xxショップアプリです。今日のセール内容をお伝えしますか？」
```
#### ヘルプメニューを用意する。
```
user:「使い方を教えて」
speaker:「商品の価格・在庫状況を調べたり、購入できます。詳しく知りたい機能はありますか？」
user:「商品の在庫の調べ方を知りたい」
speaker:「商品の在庫を調べるには、『xx店に秋刀魚は置いてますか？』などでお調べできます。他の機能についてしりたいですか？」
```

### 入力を確認する
VUIでは指示が正しく実行されるか、視認して確認することができません。
また、一つの指示に対して複数の会話を行って実行することが多く、そうなりますと結局どの指示が実行されるのか見失います。
また、汲み取った指示について修正が行えるようにします。

#### 指示を確認する
商品の在庫を調べる場合、ユーザーが知りたいのは、在庫がどれくらいあったという情報だけですが、そもそもそのどの条件の検索結果か伝えないと、結果が正しいのかわからなくなります。

```
user:「在庫状況を調べる」
speaker:「どの商品を調べますか？」
user:「人参」
speaker:「どの店舗を調べますか？」
user:「A店」
speaker:「A店の人参の在庫はxx袋です。」
```

#### 実行を確認する
特に決済などの重要な行動については、強い確認が必要です。

```
user:「レストランｘを予約する」
speaker:「いつの予約を取りますか？」
user:「今日のイチ時」
speaker:「本日のシチ時ですね。何人ですか？」
user:「違う。イチ時。」
speaker:「今日のイチ時ですね。何人ですか？」
user:「５人」
～～～割愛～～～
speaker:「レストランxの予約を本日1時から5名でとります。お間違いないですか」
user:「はい」
speaker:「レストランxの予約を本日1時から5名でとりました。予約番号はxxxです。控えはメールで送信しました。ほかにありますか？」
```

### 何度も同じことを言わせない。学習（記録）する
冗長な会話ほど疲れるものはありません。また、そうであればあるほど、より機械的に感じてしまいます。

#### 学習（長期的）
よく行くカフェで、注文を覚えてくれるスタッフがいるように、過去の行動を元にユーザーが端的に目標を達成できるように工夫します。
特に、最初の挨拶での機能説明の簡略化は有効的です。

#### ショートカット・キャッシュ（短期的）
特に達成まで複数ステップのある機能で、別のパスを実行する時にまた全てを選びなおさなくてもいいようにコンテキストを保持し直前の会話から流用します。

```
user:「東京の今日の天気を調べる」
speaker:「東京の天気は晴れです」
user:「明日は？」
speaker:「東京の明日の天気は雨です」
user:「大阪は？」
speaker:「大阪の明日の天気は雨です」
```

### 長い会話は避ける
ユーザーを無駄に拘束しないよう、長いアクションになる場合、実行するか確認しましょう。

```
user:「カートに何が入ってる？」
speaker:「30点がカートに入れられています。すべて確認しますか？」
``` 

# 終わりに
長々と書きました。「何を当たり前なことを言ってんだ」と思う方も多いと思います。
全くもって正しいです。当たり前のことなんです。

VUIのデザインは、『目隠しをして、知らない人にタスクを達成するために必要な案内をしてもらうためのデザイン』に近いと思います。
視覚からヒントは得られないし、アプリ側がどんなスキルを持っていて、どこまでできるかわからないからです。

そこからユーザーは徐々に学習します。それに合わせてアプリ側も学習してその時のユーザーに必要なサポートをする。それだけです。


# 参考文献
* [Designing for voice differs from traditional UX](https://techcrunch.com/2016/08/21/designing-for-voice-differs-from-traditional-ux/)
* [Designing Voice Experiences](https://www.smashingmagazine.com/2017/05/designing-voice-experiences/)
* [Why designing for a VUI is more difficult than designing for a GUI](https://hubtechinsider.wordpress.com/2009/05/11/why-designing-for-a-vui-is-more-difficult-than-designing-for-a-gui/)
* [Actions on Google - Design](https://developers.google.com/actions/design/)