ほとんどのチャットボット インターフェイスは、入力領域、メッセージ スレッド、各メッセージのコントロールという同じ部分を共有します。良いチャットボットとイライラするチャットボットの違いは、主に、それらの部分とその状態の詳細にあります。
空の状態から始めます。テキスト ボックスが表示された空白の画面では、ボットが何ができるのかわかりません。短い説明と、ユーザーがタップできる 3 つまたは 4 つのプロンプトの例を追加します。
スレッドを読みやすくします。読みやすいメッセージ幅を維持し、ユーザー メッセージと AI メッセージを明確に分離し、リストやコードなどの書式設定を適切に表示し、新しいテキストが流れ込む間も、ユーザーが上にスクロールした場合にジャンプすることなく、最新のメッセージを表示し続けます。
あらゆる状態をデザインします。送信、思考、ストリーミング、完了、停止、失敗はそれぞれ異なって見えるはずです。思考インジケーターは、アニメーション化されたドット パターンやオーブであることが多く、リクエストが受信されたことを人々に伝えます。ストリーミング中に停止ボタンを押すと、制御が戻ります。エラーは何が起こったのかを示し、再試行を提案する必要があります。
回答にコントロールを追加します。前のプロンプトをコピー、再生成、編集し、フィードバックを提供します。音声アシスタントの場合、聞き、考え、話すための明確なビジュアルを使用して、人々がいつ話すべきかを理解できるようにします。私たちが作成した ExodeUI には、React、Vue、SwiftUI、Flutter およびその他のフレームワークで実行される、これらの状態の無料のアニメーション オーブがあります。