チャットボット プラットフォームの入力 UI 要素の作成方法
公開: 2017-01-01今日存在するチャットボットには、自然な人間の言語を理解するための多くの機能がありません。 これが、ほとんどのメッセージング アプリ (Messenger、Kik など) がボット プラットフォームでグラフィカル UI とテキスト UI を組み合わせて使用している主な理由の 1 つです。テキスト応答だけでなく、ボタン、カルーセル、画像カードを考えてみてください。
Tars では、ブラウザーをプラットフォームとして使用して、ボットが動作する独自のチャット インターフェイスを構築しています。 そして、これにより、私たちが持っているすべてのコンポーネントを完全に自由にすることができます。 ボットのいずれかを試したことがある場合 (まだ試していない場合は、まずこことここで試してください)、グラフィカル UI + テキストベースのアプローチを強力にサポートしていることがわかります。 この思考プロセスの一環として、さまざまなユーザーの操作や状況を容易にするために、フロントエンド インターフェイスに多数のカスタム キーボード入力を作成しました。
Messenger、Kik、Telegram は、開発者が毎日何百ものボットを展開している巨大なプラットフォームです。 これらのメッセージング プラットフォームは、ブーメーカーが充実したユーザー インタラクションを作成するのに十分なフロントエンド コンポーネントを提供していないと感じています。
そのため、各カスタム UI をどのように作成したか、それぞれのカスタム UI がなぜ理にかなっているのか、そしてそれらの欠如が現在どのようにユーザー インタラクションを台無しにしているかについて、もっと話したいと思いました。
だからここに行きます：
日付と時刻のスクローラー
ユーザーがいつ予約を取りたいかを尋ねる必要があるシナリオを考えてみてください。 同じ情報を提供する方法は複数あります。
11 月 25 日、11 月 25 日、11 月 25 日、11 月 25 日、2016 年 11 月 25 日、2016 年 11 月 25 日 — これらはすべて基本的に同じ意味ですが、マシンがこのデータを理解するのが難しくなります。
これが、ユーザーがダイヤルを回して日付/時刻を選択できる日付と時刻のスクローラーを組み込んだ理由です。
これまで、この UI を提供する他のメッセージング プラットフォームは見たことがありません。ボットがユーザーに日付や時刻を要求する場合、これは必須だと思います。
縦型ボタン
これらは、選択肢の数が限られている形式の多肢選択オプションと考えてください。 ボタンをタップすると、やり取りが速くなり、会話の範囲も制限されます。
ボタンベースのアプローチは、野菜ピザと野菜以外のピザのどちらかを選択する必要がある場合には理にかなっていますが、100 の保険証券から選択できる場合は最適な UI ではない可能性があります。
垂直ボタンでさらに何ができるでしょうか?
- 各オプションの横に画像を追加して、視覚的に魅力的なものにします。
- ユーザーが 1 回タップするだけで応答できるようにするか、ユーザーがいずれかのオプションをタップした後に [送信] をクリックするようにすることができます。 後者は、ユーザーが特定のオプションを誤って選択していないかどうかを再確認するのに役立ちます。 チャット フローに戻る方法はないため、このカスタマイズは理にかなっています。
- 各オプションにクイック情報メニューを追加して、詳細情報を提供し、意思決定プロセスを改善します。
アドバンス フェイシャルとベーシック フェイシャルの違いを誰もが知っているわけではありません。 すべての内容と価格に関する詳細を追加すると、ユーザー エクスペリエンスが向上します。
ボタン UI を使用する際に留意すべきもう 1 つの重要な点は、質問を正しい方法で構成することです。 Leszek がこちらの記事で説明しているように、非常にオープンエンドな質問をするのではなく、選択肢の範囲を制限し、コンテキストを設定する方法で質問する方がよいでしょう。
ユーザー入力の制限
これは、私たちがチャット インターフェースに加えた最高の機能の 1 つだと思います。 グラフィカルな入力 UI (ボタン、カルーセルなど) を提供する場合は常に、ユーザーがテキストに何も入力できないようにします。
なぜそれをするのですか？ ユーザーは何でも入力できますが、ボットはその準備ができていないためです。 あなたがそこにいるまでは、会話を中断するよりも、シンプルで制限されたままにしておく方が良い.
あなたにおすすめ:
メタバースがインドの自動車産業をどのように変革するか
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
私たちがしていることはこれです：
これは私たちのチャットインターフェースです
そして、これはあなたがこのようなものを持っていないときに起こることです:
これは、クイック返信がある場合に制限されたテキスト入力を許可しない Facebook Messenger です
完了して合格ボタン
これらは、スクリプト化されたチャットボットをフォームの進化として常に考えてきたため、最終的に組み込むことになった 2 つの非常に小さなニュアンスです。
自分のアドレスに送信したり、チャット インターフェースを介して詳細なフィードバックを提供したりする場合、一般的な動作は、いくつかの単語を書いた後に送信ボタンを押すことであり、応答全体が最終的に 3 ～ 4 ステートメントに広がります。 「完了ボタン」を使用すると、入力を続けて、完全な応答を返したらこれを押すことができます。
このようなオプションがない場合、マシンの次のメッセージは最初のインスタンス自体の後に来るため、応答が不完全になります。
複数のオプションを選択する必要がある場合、または複数行の回答がある場合は、「完了」ボタンを用意してください
ユーザーが質問をスキップしたい場合もあります。そのために、「送信ボタン」の代わりに「合格ボタン」を用意しています。 ユーザーが入力を開始するとすぐに、[Pass] ボタンが [Send] ボタンに変わります。
あなたのメールアドレスを教えたくないですか？ 「合格」をタップして質問をスキップします。
オートコンプリートの提案
これは、Google 検索のオートコンプリート機能のようなもので、入力を開始すると可能なオプションが提案されます。 これは、オプションのリストが長く、垂直方向のボタンを使用できない場合に特に便利です。 地域、都市、車のモデルなどの長いリストを考えてみてください。
星といいね
ユーザーのフィードバックや経験を求めており、その応答が本質的に質的なものである場合に特に役立ちます。 また、アイコンを星、いいね、ハート、絵文字にカスタマイズすることもできます。
画像カード
これは、各アイテムに関する複数の情報を一度に表示する必要がある場合に便利です。 食品の注文プロセスにおけるハンバーガーや、ショッピング フローにおけるシャツである可能性があります。 すべてのカードは互いに積み重ねられており、スクロールしてすべてのオプションを見ることができます。
この UI 要素には、画像、タイトル、説明、フッターの 4 つの部分があります。 そこに表示したいものに応じて、これらをさまざまに使用できます。
これらすべての入力 UI 要素をテストしたい場合は、一度に 1 つずつ実行できるチャットボットへのリンクを次に示します。
チャットはバブルとテキスト ボックスだけのミニマリスト インターフェースであり、あまり範囲がありません。 また、既存の要素を使用し、チャット インターフェイスに新しい要素を追加することで、さまざまな対話を容易にする方法を再考する必要があると思います。
自分でメッセージング インターフェイスをいじって、他のクールな GUI 要素を追加したかどうか知りたいですか?
[Ish Jindal によるこの投稿は、Medium に初めて掲載されたもので、許可を得て転載しています。]