チャットボットインターフェースを構築する方法

著者: Randy Alexander
作成日: 2 4月 2021
更新日: 16 5月 2024
Anonim
10分で解説! Watson Assistantでチャットボットを開発する
ビデオ: 10分で解説! Watson Assistantでチャットボットを開発する

コンテンツ

2000年代半ば、仮想エージェントとカスタマーサービスチャットボットは、あまり会話的ではありませんでしたが、多くの称賛を受けました。内部では、仮想エージェントとカスタマーサービスチャットボットは、Webサーバーとのデータ交換で構成されていました。

今日では、「弱いAI」の例が多数存在し(Siri、Alexa、Web検索エンジン、自動翻訳者、顔認識など)、レスポンシブWebデザインなどの他のトピックが脚光を浴びていますが、チャットボットは依然として騒動を引き起こしています。大企業からの大規模な投資により、将来の会話型インターフェースをハッキングする機会はまだたくさんあります。

  • チャットボットエクスペリエンスを設計する方法

評判が悪いこともありますが、チャットボットは便利です。ユーザーが入力フィールドに入力して検証を待つ、標準のWebフォームの基本的な代替品のように感じる必要はありません。会話体験を提供できます。


基本的に、ウェブブラウザのポイントアンドクリックやモバイルジェスチャーではなく、専門家や友人と会話するなど、より自然に感じるようにユーザーエクスペリエンスを強化しています。目的は、共感的で状況に応じた応答を提供することにより、このテクノロジーが人々の生活に直接組み込まれるようになることです。

以下のビデオを見るか、読んで、サービス設計の実践における実際のプロジェクトインテークアプリケーションに基づいて、チャットボットを設計および構築するための実用的な方法を見つけてください。

01.性格を設定する

このプラクティスは世界中で11万人を超えるメンバーにサービスを提供しているため、目標は、混乱するフォームに記入する代わりに、内部の利害関係者が効果的なデジタルサービスを要求できる迅速で便利で自然なインターフェイスを提供することでした。

最初のステップは、チャットボットの個性を確立することでした。これは、サービス設計チームの利害関係者への声を表すためです。私たちは、アーロン・ウォルターのデザインペルソナに関する独創的な作品に基づいて構築しました。これは、私たちのチームがボットの性格特性を開発するのに大いに役立ち、それが挨拶、エラー、ユーザーフィードバックのメッセージを決定しました。


これは、組織の認識に影響を与えるため、デリケートな段階です。できるだけ多くの情報を確実に入手できるように、ボットを操作する際の適切な性格、色、タイポグラフィ、画像、ユーザーの流れを明確にするために、すぐに利害関係者のワークショップを設定しました。

弁護士を探すなど、必要なすべての承認を得た後、古風なリクエストフォームを、利害関係者と設計サービスチームの代表者との会話を模倣した一連の前後の質問に変換することに着手しました。

02.RiveScriptを使用する

処理部分のAIマークアップ言語に深く入り込みたくないことはわかっていました。必要なのは、エクスペリエンスをすぐに開始することだけです。

RiveScriptはシンプルなチャットボットAPIであり、学習が簡単で、ニーズに対応できます。数日以内に、ボットからプロジェクトリクエストを受け取り、それを検証および分類するのに十分なビジネスロジックで解析して、JSONRESTサービスを介して適切な内部プロジェクトタスクキューに送信できるようにするロジックを作成しました。


この基本的なチャットボットを機能させるには、RiveScriptリポジトリに移動し、クローンを作成して、すべての標準ノード依存関係をインストールします。リポジトリでは、さまざまなサンプルスニペットを使用して追加できるインタラクションを味わうこともできます。

次に、web-clientフォルダーを実行します。これにより、基本的なGruntサーバーを実行してボットをWebページに変換します。この時点で、ニーズに合わせてエクスペリエンスを強化できます。

03.ボットの頭脳を生成する

次のステップは、ボットの「頭脳」を生成することです。これは、拡張子が.RIVEのファイルで指定されており、ありがたいことに、RiveScriptには、すぐに使用できる基本的な操作が付属しています(たとえば、「あなたの名前は何ですか?」、「あなたは何歳ですか?」、「あなたは何歳ですか?」などの質問です。好きな色?')。

適切なNodeコマンドを使用してWebクライアントアプリを起動すると、HTMLファイルはこれらをロードするように指示されます.RIVE ファイル。

次に、プロジェクトのリクエストを処理するチャットボットの頭脳の一部を生成する必要があります。私たちの主な目標は、プロジェクトタスクの摂取に関する質問の選択を定期的な会話に変換することです。

したがって、たとえば:

  • こんにちは、私たちはどのように助けることができますか?
  • よし、どれくらい早く始める必要があるの?
  • 予算の大まかなアイデアを教えてください。
  • あなたのプロジェクトについてもっと教えてください...
  • 私たちのことをどこで知りましたか?

一般的なアクセス可能なWebフォームは次のようになります。

form action = ""> fieldset> legend> Request Type:/ legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> option 3 / label> br> / fieldset >フィールドセット>凡例>タイムライン:/凡例>入力id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1か月/ label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1〜3か月/ label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4か月以上/ label> br> / fieldset> br> label for = "request-budget">予算情報/ label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description">プロジェクトの説明/ label> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>

ウェブフォームでは、特定のパターンに精通しています。[送信]ボタンをクリックすると、すべてのフォームデータが別のページに送信され、そこでリクエストが処理されます。その後、生意気なありがとうページがポップアップ表示されます。

チャットボットを使用すると、リクエストを送信するというやり取りを利用して、より意味のあるものにすることができます。

04.声をデザインする

このフォームをRiveScriptのチャットボットWebクライアントで提供される会話型ユーザーインターフェイスに変換するには、情報アーキテクチャを厳密なものから流動的なものに変換する必要があります。またはフィールドラベルをUI文字列に変換します。

アクセス可能なフィールドラベルとそれに関連する質問のトーンについて考えてみましょう。

  • リクエスト: どのように我々は助けることができます?わからない?いくつか質問してもよろしいですか?
  • タイムライン: どれくらい早く始める必要がありますか?
  • 予算情報: 予算の大まかなアイデアを教えてください。
  • プロジェクトの説明: OK、解決すべき問題の概要を教えてください。
  • 参照: また、誰があなたを私たちに紹介しましたか?

次に、双方向の会話のためのRiveScriptの非常に学習可能な処理ロジックに従って、WebフォームのコードをAIスクリプトに変換する必要があります。

- どのように我々は助けることができます? + *%どのように支援できますか-set area = varSure、いくつか質問してもよろしいですか? + *%いくつか質問してもよろしいですか?このリクエストを開始する必要があるのはいつですか? + *%このリクエストを開始するのにどれくらいの時間が必要ですか-set when = var予算の大まかなアイデアを教えていただけますか? + *%予算の大まかなアイデアを教えてください-setbudget = varOK、解決すべき問題の概要、影響を受けるコンポーネントと環境、または全体的な説明を教えてください。 + *%ok解決すべき問題の概要、影響を受けるコンポーネントと環境、または全体的な説明を教えてください-set project = varAlso、誰が私たちを紹介しましたか? + *%またあなたを紹介してくれた人-setreferal = vargreatこれが私がこれまでに得たものです: n必要なサービス:エリアを取得> n開始する必要があります:いつ取得するか> n大まかな予算:予算を取得する> nあなたのプロジェクトについて:プロジェクトを取得> n参照元:紹介を取得> nすぐに連絡します今日、他に何かお手伝いできることはありますか?コール>インテーク取得エリア>取得時>予算取得>プロジェクト取得>紹介取得> /コール>

05.提出を要求する

標準のフォーム変数が別のページまたはサービスに送信されて処理されるのとは対照的に、チャットボットはユーザーがチャットウィンドウに入力した(または音声で)情報をすぐに検証して送信できます。つまり、ユーザーは以前に入力した値に簡単に再アクセスできます。

チャットボットUIに入力されたユーザーのリクエストをJSONRESTAPIを介して外部プロジェクトタスクサーバーに送信する必要がありました。

RiveScript-jsでは、自由に利用できます。 XMLHttpRequest ユーザーがデータを入力するときに、ほぼ同時にリクエストを送信するオブジェクト:

>オブジェクトインテークjavascriptvar http = new XMLHttpRequest(); var a = rs.getUservar(rs.currentUser()、 "areas"); var b = rs.getUservar(rs.currentUser()、 "when"); var c = rs.getUservar(rs.currentUser()、 "budget"); var d = rs.getUservar(rs.currentUser()、 "project"); var e = rs.getUservar(rs.currentUser()、 "referal"); var url = "http:// localhost:3000 / send"; var params = "areas =" + a + "&when =" + b + "&budget =" + c + "&project =" + d + "&referal =" + e; console.log(params); http.open( "POST"、url、true); http.setRequestHeader( "Content-type"、 "application / x- www-form-urlencoded"); http.setRequestHeader( "Connection"、 "close"); http.onreadystatechange = function(){//状態が変化したときに関数を呼び出します。 if(http.readyState == 4 && http.status == 200){alert(http.responseText); }} http.send(params);オブジェクト

06.チャットボットを恐れないでください

間もなく、情報を取得するためにコンピューターと対話する現在の方法は、チャットボットなどのAIベースのテクノロジーに取って代わられます。チャットボットでは、AmazonEchoやGoogleHomeなどのテクノロジーで見たように、人々は単純な音声コマンドを作成するだけです。

ウェブデザインコミュニティは恐れる必要はありません。私たちは皆、この新しいテクノロジーの付加価値を受け入れるべきです。

それは、完全にスケーラブルな顧客サービスと改善された顧客インテリジェンスを提供し、それが働いている企業にとって画期的なものになる可能性があります。

この記事はもともとネットマガジン、ウェブデザイナーと開発者のための世界で最も売れている雑誌。 ここで購読.

魅力的な記事
インタラクティブな魚のインフォグラフィックはリールの御馳走です
発見する

インタラクティブな魚のインフォグラフィックはリールの御馳走です

Creative Bloqにはたくさんのインフォグラフィックが浮かんでいますが、True Fi h Tale は本当に私たちを魅了しました。それは、海の下に潜むモンスターの驚くべき「実話」をまとめることで、漁師が背の高い話をすることで有名であるという考えに基づいています。 。それを際立たせているのは、そのスムーズでユーザーフレンドリーな双方向性であり、コンテンツの発見を楽しく楽しい体験にします。イ...
Generate NewYorkに参加する12の理由
発見する

Generate NewYorkに参加する12の理由

コードを入力します generate100 今週のチェックアウトで、Generate NewYorkのチケットが$ 100オフになります!Generate New Yorkは、ネットマガジンとCreativeBloqが発表したウェブデザイナーのためのカンファレンスです。チケットはもう手に入れましたか?ここに現れる12の優れた理由があります。このイベントのためにたくさんの人々を集めました。基調講演者...
今年の縦スクロールトレンドの5つ
発見する

今年の縦スクロールトレンドの5つ

縦スクロールは、2014年に急成長する流行から主流のトレンドへと泡立ち、すばらしい広告、主要なポートフォリオ、細工されたコンテンツがすべて1ページのスクロールの恩恵を受けており、この手法が定着していることは間違いありません。これらの50の素晴らしい視差スクロールウェブサイトに触発されてくださいそれは、デザイナーが技術をコントロールし、達成できることの限界を押し広げた年でした。 2010年にトレンド...