GoogleのUXデザイナーがサイトをチャットボット化して学んだ9つのこと

私は数ヶ月前から自分のWebサイトをチャットボット化する実験を行いました。このひとときの間に多くのご意見を頂き、マスコミがニュースで紹介してくれたりもしました。公開24時間の間に300通あまりのメールも頂きました。たくさんの方々が私のWebサイトと会話してくれたようで、まずは本当にありがとうございます。

何人かの方が今回の施策に関してのインサイトに興味を持ってくれたので、その辺を少しお話していきたいと思います。今回はそもそも対話型、ということで少し語りかける風にいきたいと思います。

それでは、まいりましょう！

botなどの対話型トレンドに対する憂鬱

私の母は毎日お決まりのように「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武器にもなる」と言っていました。失敗を乗り越えることで自分自身を大きく変えることができ、成長を遂げることができるのです。

私が対話型のWebサイトを生み出すきっかけとなったのは、数週間前にTwitterとLinkedInである質問をしたことから始まります。

もしbotが私たちデザイナーの仕事を奪ったら、あなたはどうしますか？

冗談のつもりで聞いたのですが、このときはまさか次のようなストレートな返答をもらうとは思ってませんでした。

「あなたをクビにすると思う」―Google製品開発部長のラファエル・ライテリッツ氏

ラファエルは物凄くいい人です。もちろん彼は冗談で言ったのでしょうが（だといいのですが…）、とはいえ、この言葉を聞いて私はこう思いました。

botなどの対話の時代で、私のようなデザイナーはどうすれば生き延びれるだろう？

むしろ重要なのは、botがUXデザイン全体に与える影響はどんなものでしょうか？　この動きは大企業だけに関係あるものなのか、もしくは誰でも参加できるものなのか？　ここ数年のアプリ通知における論争は対話型インターフェースの議論に本当に通ずるものだったのか？　疑問は増えるばかりです。

そこで私は身近な実験を行うことで、この漠然とした恐怖に立ち向かうことを決めました。自分のWebサイトを「対話型のWebサイト」に改良したのです。実際のサイトはこちらで見てみて下さい。

それでは、今回の施策を通して得られた９つの発見について紹介していきましょう。

（ネタバレ：もし鏡の前で自分自身と話すのが日課となっているような人がいれば、自分のチャットボットを作る体験はすごく楽しいはずです）

Webサイトを対話型にしてみて学んだ９つのこと

1. 今までより格段にライティングが重要になった

この実験を行う上で、botのデザインとプログラミングに一番時間を費やすだろうと思っていたのですが、やってみるとそれは大きな間違いでした。

文章のライティングはデザインとプログラミングを合わせた時間よりもかかるのです。

会話の実験をする点において一番肝心な点は、その会話の内容です。つまり、言葉です。だからbotの文章を書くのに必ず時間がかかるということにまず驚かないでほしいのです。

iA Writerの会話の下書きを見てください。

初期段階の下書き

私はここで「会話への筋道」を作りました。チャットでの短い文がさらに違う文を呼び出していくようなトリガーを作って、私の望んでいる形の会話に近づけていきました。

ですが、これはまだまだ序の口です。

2. 断片的なメッセージでは人間らしさが損なわれる

現実の世界で人と話すとき、会話がどう始まったか、どう発展させていったかで会話の内容が変わってきます。多くの場合、同じトピックを繰り返すのはおかしいですよね。一度天気について話したならば、次はもっと相手が興味がありそうな話題へ変えていくのが一般的で、天気の話はもうしているので避けるのが一般的でしょう。

典型的でロボットのようなつまらない会話を避けるために、私はそもそものテストの方法を変える必要がありました。

機能的な観点でリンクがちゃんとつながっているか追っていくだけではなく、個別の対話も１クリックずつ追っていき、より人間社会的な観点でチェックしていきました。

この作業が大きな違いを生みました。よく見ていくと微妙に繰り返しになってしまっている内容や、少しつながりに違和感がある会話など、対話がうまく成り立っていないケースが多く見られました。

ひとつひとつの断片的なメッセージを積み上げただけではそれを対話と呼べません。自然な対話を作り出すのは、全体の流れそのものなのです。

3.  ディテールを楽しくすべき

楽しいディテールでユーザーとふざけあいましょう。

丁寧なライティングと技術を掛け合わせれば、人々の関心を引く対話ができます。

例えば、ページを更新するとbotのセリフを変えたりするといいでしょう。毎回「こんにちは」と言わせるより、「おかえり！」と言わせたほうが興味を引きますよね。場合によってはのちの会話の筋道も変わったりもしますが、これは後述します。

このとき何が起きたのか

はじめて上のような機能をみたとき、ユーザーはきっと想像以上にbotの頭が良いということに気づくでしょう。インターフェースに対する印象が変わるのです。そして更に：

他には何ができるのだろう？

と興味津々に考えます。

今回の実験的なbotの開発中、気が付いたことがあります。人々は実際、あれこれbotをいじりまわし、いたずらすら始めるのです。

今回一つの目標として、この対話から従来の問い合わせフォームにシームレスに移行させたいというのがありました。

“Get in touch!（連絡を取る）“と表示されたボタンをタップすると、ユーザーが任意のメッセージを書くことができます。

「Get in touch!」をタップしたあとの遷移

これが失敗の始まりでした。

下ネタやいたずらを書き込むユーザーはもちろんのこと、間違ったメールアドレスを送ってくるユーザーも絶えませんでした。このbotはあくまで対話の手助けとしてデザインしているわけですし、いたずらのためではありません。私は解決策を模索する必要がありました。

そこで、まずはメールアドレスが有効かどうかのチェックを実装しました。

「入力されたメールアドレスはうんち絵文字を想起させますね。何かがおかしいみたいです…。」

メールアドレスの代わりに「You suck（あんたダサい）」と書かれた場合の遷移

この対話でのバリデーション（認証）はユーザーを喜ばせ、ツイートなどもされました。いたずらして終わりだと思っていた彼らは、まんまとやられたと思ったことでしょう。

つまり、ユーザーが自分のインターフェースでふざけ始めたら、ふざけ返してやりましょう。それが自然なユーザーとのつきあい方です。

実際のユーザーとどう楽しんだかは、いつかあなたが自分の目で確かめてみてくださいね。

4. 文脈によって話題の切り出し方は変わる

あなたがデザイナーで、お洒落なカクテルパーティに行ったとしましょう。もしここに招かれた人も全員デザイナーだと知っていたら、誰かと話すときの話題の切り出し方に影響はあると思いますか？

大抵の人にとっては、影響はあるでしょう。

「こんにちは、ここのバナナシェイクおいしいですよね」などといった誰にでもするような質問から始めず、「あなたもデザイナーですか？」「どんな仕事してるんですか？」などと単刀直入に聞くでしょう。

後者のほうがそもそもの「デザイナーの」パーティという文脈に沿っていますし、バナナシェイクの話よりよほど興味を惹かれます。

感情の伴った本質的な質問のほうがより印象深い会話となることをわかっていつつも、多くの人は当たり障りない質問から会話を始めることでしょう。「ネットワーキング」イベントなどに行ったことある人なら、その日の一番の話題が天気の話題だった、なんて経験もあるのではないでしょうか？

そこで私はこの文脈に沿った会話の切り出し方を今回の体験に盛り込めないか考えたのです。

文脈を理解することは会話の滑り出しを大きく改善できます。例えばMediumかTwitterから私のサイトに来訪した方は高い確率でデザインに興味があることがわかります。彼らはツイートや記事、あるいはその他のソースから来ているかもしれませんので、下記のような対話を盛り込んでみました：

文脈に基づいた会話

Kenny Chen氏のUX newsletterから私のサイトに来た人にも同じく、「KennyのNewsletterから来てもらったみたいだけど、多分あなたもデザインに興味があるんですよね？」と出したのですごく驚かれましたね。

この小さい調整は対話のフローや人間らしさを演出できただけではなく、中の機能やコンテンツを発見しやすくしています。

5. 文脈によってコンテンツは見え隠れする

私のWebサイトではQuartzというメディアのインターフェースに似たような形でUX記事を勧めることができるのですが、ユーザーがUXに興味がない限り、むやみに勧めたりはしません。

そうしないと変ですよね。道端で全く知らない人にモバイルデザインにおけるハンバーガーメニューを撤廃すべきだと論争を始めるようなものです。

Mediumから来たユーザーだとわかれば、下記のような文脈に沿った質問をシームレスに繰り出すことができます：

あなたもUX界隈の人ですか？

この質問に対して「はい」と答えることではじめて、最近のUXの記事や私の個人的な考えなどをbotに喋らせることができます。もちろん、前日の通り、繰り返しを避けるために、同じ記事を二回勧めることはしません。

記事に関する会話が展開されている様子

一度始まってしまったUX記事の議論からどう抜け出すかというのはまた大きな課題です。が、その議論はまた今度にしましょう。

6. タイミングによって発言の解釈が変わる

私が以前話したプレゼンテーションでは、「時間の長さ（デュレーション）」が私たちの行動や環境、そして知覚に対して大きな意味合いを持つということを取り上げました。

時間という概念はアニメーションやその他をすべて超越してしまうのです。時間は普遍的ですし、ソーシャルダイナミクスの観点でも非常に関連性が高いのです。

例えばあなたがたった今すごく好きだと思える人と出会ったとしましょう。連絡先も交換して、またその人に会うのが待ちきれない状態です。そんなとき、どのタイミングでメッセージを送ればよいでしょう？　すぐにメッセージしたほうがいいでしょうか、それともしばらく経ってから？　だとしたらどのくらい待てばいいでしょう？

時間は私たちの都合の良いほうに働くときもあれば、そうでないときもあります。それは非常に微妙ですし、つかみどころのないものなので、具体的にどう私たちの言葉を変えていくのかを理解するのは難しいです。

例えば先ほどの人がアンナという女性だったとします。彼女にこのようなメッセージを送ったとしましょう：

アンナさん、お会いできてよかったです！　―ボブ

さて、ここでボブはどのようなレスを期待するでしょうか？　即答でしょうか、それとも３日以内の返事でしょうか。

ボブがどう望むかは別として、一つだけ確かなことは、レスにかかった時間は解釈に影響するということです。即答のほうがポジティブな印象を与えはしますが、遅れてきたレスは「期待感」という魔法のスパイスを加えていることにもなるかもしれません。

期待感と遅延は私たちの対話の質やありがたみのようなものに大きく影響します。対話における時間の区切り方には４つステージのがあると思っています。

対話のタイミング

Instantaneous : 10秒以下

すぐに返信をもらえる場合。現状の「会話」とされるものです。

... : 30秒以上

少し考えて返信をもらう場合。上司との会話中、「なんで今日は朝遅れたの？」と聞かれたとき、きっとあなたは気の利いた言い訳を考えるのにこれくらい時間をかけるでしょう。

もし対話にタイピングなどの行動が関係してくる場合、実世界では対話以外のダイナミクスが多く追加されますが、デジタル領域では多くの場合伝わらないことが多いです。

Break : １時間以上

多くの場合その人は中断せざるを得ない状況にあり、またあとで連絡しようと思っています。忙しいということの暗示であり、今日（こんにち）ではビジネスでもプライベートでも大事な間のとり方です。

Catching up：３日以上

会話は途切れてしまい、どちらかが遅延に対してのお詫びから再開するか、もしくはまったく新しい話題で再度始まる場合です。

今回のサイトでの実験はシンプルなものだったので、一番最初のカテゴリについてのみ、取り入れてみました。

サイトには下記の要素に応じて遅延時間が変わるようなタイピングのアニメーションを入れてみたのです。

―メッセージの長さ
―画面を占めるスペースの量

これらは主に２つのことを考慮していて、１つはやはりこの方が人間らしくなるということで、より長いメッセージには長い時間がかかります。

もう１つは対話する側、つまりユーザーが各メッセージをきちんと消化できるという点です。botが動画を貼り付ければ、画面上の大半を埋め尽くすことになりますが、動画と長いテキストが両方短い時間内に送られてきた瞬間にきっとスパムのような体験に早変わりし、とたんにbotらしいbotと話している気分にさせられてしまうでしょう。

自然言語処理などを取り入れた、もっと複雑なチャットインターフェースなら「戸惑い」のような心理学的な要素を入れ込むことも可能でしょう。

「Hey Siri、今晩デートしない？」
・・・
（タイピングが止まる）
・・・
「どうでしょう…」

7. アニメーションは対話の一部になる

モーション（動作・動き）は私たちのインターフェースの感じ方に大きく影響します。インタラクションなど、今までの情報設計では成し得なかった方法でユーザーとの関係性を築くことができます。

私はモーションの調整曲線をいじり、アニメーションを細かく調整することに時間を費やしました。そもそもこの施策が好評だった一番の理由が、アニメーションだったのではないかとさえ考えています。

アニメーションなしでは対話は成り立たない

と言ってしまってもいいほどです。どうしてそこまで言い切れるか説明しましょう。

まずはじめに、アニメーションはインターフェースにダイナミズム（強弱）を与えます。対話そのもののキャラクターづけにもなるような強弱です。

わずかに弾むような「もどる」アニメーションはマンガにおける吹き出しのような遊び心をイメージしています（マンガの種類にも変わってきますが、ここではシリアスなマンガのことを言っています）。

２つ目は、アニメーションは注意を引きやすいということです。botが喋り終わると、２つの選択肢が画面下部にアニメーションを伴って出現します。私はひたすら最後のメッセージと次に現れる最初のボタンの間のタイミングを調整し続けました。その末、botが話し終わって、ユーザーがきちんと下部のボタンに目線を向けてくれるようなちょうどいいタイミングを見つけることができました。

３つ目は、アニメーションはインタラクティブ性を強化してくれるという点です。ボタンを遊び心のある感じでわずかに動かすことで注意を引きますし、ユーザーに弄りたいと思わせる事ができます。そして今回はボタンを押すとそれがそのまま返答としてメッセージになるように演出しました。

ボタンがメッセージ化するトランジション

実際、このアニメーションが中でも一番重要なものと考えています。

それはユーザーが対話に対する感じ方が変化するからです。たくさんの人が私にどの自然言語処理を利用したのか尋ねてきましたが、最初は何故そのようなことを聞かれているのかがわかりませんでした。

やがてわかったのですが、ユーザーが自分の選択肢が対話の一部になるのを目の辺りすると、その対話自体の捉え方や感じ方が変わるのです。途端にこちらが用意した選択肢が自分の言葉のように思え、主体的に選んだ選択肢のように見えるのです。アニメーションがなければそこは断絶されたままで、この対話もスクリプトめいた、不自然なものに感じたかと思います。

アニメーションはこの対話体験をリッチにしただけではなく、なくてはならないものだったのです。

8. チャットはWebサイトで伝えられないものも伝えられる

気の利いたキャッチコピーや巧妙に作られたタイトルで広告代理店などは差別化を図ろうとします。私も同じようなことをしていて、私は自分のことを熱狂的なコーヒーオタクだと名乗っています。

ただ、他と違うことをしようとすることは必ずしもいいことではありません。行き過ぎてしまったり、他と違う風になろうとするあまり、一周して全くおなじになってしまったりもします。

私の今回の対話体験は自分のWebサイトありきのものです。下までスクロールすると従来のWebサイトが現れます。はじめてこの対話部分をスキップしたとき、私はショックを受けました。

対話部分と従来のサイトの２つの体験の間には大きな隔たりがあったのです。

私のWebサイトは基本ホワイトスペース多めで色も少なめな、いわゆるミニマルなものです。端的に言うと、無表情で無感情です。

一方、botの方はというと絵文字を多用するし、ジョークを言って笑ったりもして、非常に感情に溢れており、表情や個性があります。

この２つのデザインアプローチは私の人格の中でも異なる２つの側面を映し出しています。従来のWebサイトでは合理的な側面、botの方ではより感情的な側面、といった形です。

デザインは常に私たちを写しだす鏡のようなものです。対話体験の方がより私という人間を色濃く映し出すものとなっています。

9. 対話は枠組みを越える

対話インターフェースを考えるとき、私たちは四角い画面の中に吹き出しがある画面をまず思い浮かべると思います。ですが、もし突然この対話体験が、当初設計されたキャンバスから逸脱したらどうなるでしょうか？

私が「House of Cards」（海外ドラマ）をはじめて観たときに、不思議な瞬間がありました。突然劇中のキャラクターのフランクが私に話しかけてきたのです。彼は私に彼の計画のことを話したり、ジョークを言って聞かせたりもして、それは私にとってはじめての体験でした。最初は少し違和感もあったのですが、次第にそれはこの番組の特徴とも言える要素となっていきました。それはまるで自分もストーリーの一部かのような体験でした。

演劇ではこれを第四の壁を破るという言い方をするそうですが、例えばこれを対話型インターフェースに応用したらどうでしょうか？

例えば私がプッシュ通知を送るとしましょう。UXデザインの教えでは、通知を送る理由などを前もって説明して、ユーザーに理解を得られたほうが通知の承認を得やすいとされています。

この流れを対話の文脈に取り入れてみましょう。今回の場合は次のようなことを言わせてみます：

「こんにちは、よくここに来ているみたいですね。なにか新しいものがあればお知らせできるようにプッシュ通知を有効にしませんか？」

ユーザーは「いいね、そうしよう」か「今はいいや」のいずれかを選択することになります。ユーザーが前者を選択すると、会話は続きます。

「ありがとう！ ブラウザの右上にポップアップが出ているからそこで承認してくれれば完了です。」

承認ボタンをクリックすると即座にチャットでこんなメッセージが表示されます。

「ありがとう！これから私たち、仲良くやっていけそうですね！」

・・・

これが対話デザインにおける第四の壁の破り方のイメージです。対話は枠組みを越えることができますし、もしかするとそうあるべきなのかもしれません。

まとめ

対話に対する人々の期待は多岐に渡るので、対話体験のデザインは非常に難しいです。その期待に応えることができれば、私たちはそのインターフェースを「自然」なものと捉えることができますが、少しでも踏み外せば、どんなにわずかな点でも違和感を感じてしまいます。

今回のように、Webサイトに対話体験を追加するというのは、かなり限定的なアプローチです。実験としては楽しいですが、対話型のUIのポテンシャルはこんなものではありません。

FacebookメッセンジャーやWhatsApp、LINEなどのメッセージング系のサービスがサードパーティのサービスと本格的に連携しだせば、私たちの毎日のインタラクションにより価値を付加できるようになるでしょう。個別のアプリをインストールすることも減っていくかもしれません。

対話型のインターフェースの開発は技術的な挑戦だけではなく、ソーシャル（社会的）な側面でも多くの挑戦を抱えています。私たちはデザイナーとして、このあたりも設計し、解決していかなければなりません。

チャット吹き出しだけが、対話型インターフェースではありません。その未来はサードパーティのサービスやコンテンツが私たちの毎日にシームレスに埋め込まれていくリッチな体験そのものなのです。

ですので、さっそく既存の枠を飛び越えて、いえむしろ「チャットの吹き出し」から飛び出して、新しいことを考えていきましょう！