我們如何為我們的聊天機器人平台創建輸入 UI 元素
已發表: 2017-01-01當今存在的聊天機器人沒有太多理解自然人類語言的能力。 這也是大多數消息傳遞應用程序（Messenger、Kik 等）在其機器人平台中採用圖形和文本 UI 組合的主要原因之一——想想按鈕、輪播、圖像卡，而不僅僅是文本響應。
在 Tars，我們正在使用瀏覽器作為平台來構建我們自己的聊天界面，供機器人操作。 這讓我們可以完全自由地選擇我們擁有的所有組件。 如果您嘗試過我們的任何機器人（如果您還沒有嘗試過，請先在此處和此處嘗試一個），您就會知道我們強烈支持圖形 UI + 基於文本的方法。 作為這一思考過程的一部分，我們在前端界面中創建了許多自定義鍵盤輸入，以促進不同的用戶交互和情況。
Messenger、Kik、Telegram 是開發人員每天部署數百個機器人的巨大平台。 我仍然覺得這些消息平台在前端組件上做得還不夠，無法幫助繁榮者創建豐富的用戶交互。
這就是為什麼，我想更多地談論我們如何創建每個自定義 UI，為什麼每個自定義 UI 都有意義，以及現在缺少它們如何破壞用戶交互。
所以我們開始：
日期和時間滾動條
想一想您需要詢問用戶何時需要預約的場景？ 可以有多種方式提供相同的信息。
11 月 25 日、11 月 25 日、11 月 25 日、25/11、25–11–2016、11/25/16 — 它們的含義基本相同，但機器很難理解這些數據。
這就是我們加入日期和時間滾動條的原因，用戶可以在其中滾動刻度盤並選擇日期/時間。
到目前為止，我還沒有看到任何其他消息傳遞平台提供此 UI，如果機器人向用戶詢問日期或時間，我覺得這是必須的。
垂直按鈕
將這些視為多項選擇選項，您可以從中選擇有限數量的事物。 點擊按鈕可以更快地進行交互，也可以限制對話的範圍。
當您必須在蔬菜和非蔬菜披薩之間進行選擇時，基於按鈕的方法很有意義，但如果您有 100 份保險單可供選擇，它可能不是最好的 UI。
垂直按鈕還能做什麼？
- 在每個選項旁邊添加一張圖片，使其更具視覺吸引力。
- 您可以讓用戶響應一次點擊，或者讓他在點擊任何選項後點擊“發送”。 後者有助於重新確認用戶是否錯誤地選擇了特定選項。 無法返回聊天流程，這就是為什麼這種定制是有意義的。
- 為每個選項添加一個快速信息菜單，以提供詳細信息並使決策過程更好。
不是每個人都知道高級面部護理和基本面部護理之間的區別。 添加有關所有內容和定價的詳細信息可以使用戶體驗更好。
使用 Button UI 時要記住的另一件重要的事情是以正確的方式構建您的問題。 正如 Leszek 在他的文章中解釋的那樣，最好以限制選項範圍和設置上下文的方式提出問題，而不是提出一個非常開放式的問題。
限制用戶輸入
我覺得這是我們對聊天界面所做的最好的事情之一。 每當我們提供圖形輸入 UI（按鈕、輪播等）時，我們都不允許用戶在文本中輸入任何內容。
為什麼要這樣做？ 因為用戶可以在那裡輸入任何內容，而您的機器人還沒有準備好。 在您到達之前，最好保持簡單和受限，而不是中斷對話。
為你推薦：
元界將如何改變印度汽車業
反暴利條款對印度初創企業意味著什麼？
教育科技初創公司如何幫助印度的勞動力提高技能並為未來做好準備……
本週新時代科技股：Zomato 的麻煩仍在繼續，EaseMyTrip 發布強...
印度初創公司走捷徑尋求資金
數字營銷平台 Logicserve 獲得 80 盧比的資金，更名為 LS Dig...
我們要做的是：
這是我們的聊天界面
這就是當你沒有這樣的東西時會發生的情況：
這是 Facebook Messenger，當您有快速回复時，它不允許受限制的文本輸入
完成並通過按鈕
這是我們最終合併的兩個非常小的細微差別，因為我們一直認為腳本化聊天機器人是形式的演變。
當您通過您的地址發送或通過聊天界面提供詳細反饋時，一般行為是在寫幾個字後按下發送按鈕，整個響應最終分佈在 3-4 個語句中。 使用“完成按鈕”，您可以繼續輸入並在給出完整響應後按下此按鈕。
如果您沒有這樣的選項，機器的下一條消息將在第一個實例本身之後出現，從而導致不完整的響應。
當您必須選擇多個選項或有多行響應時，有一個“完成”按鈕
也可能存在用戶想要跳過問題的情況，為此，我們使用“通過按鈕”代替“發送按鈕”。 一旦用戶開始輸入，Pass 按鈕就會變成 Send 按鈕。
不想提供您的電子郵件？ 點擊“通過”跳過問題。
自動完成建議
這就像您開始輸入的谷歌搜索中的自動完成功能，它會建議可能的選項。 當您有很長的選項列表並且垂直按鈕不是一個可行的選項時，這變得特別有用。 想想一長串地區、城市、汽車型號等。
明星和喜歡
當您要求用戶反饋或體驗並且響應本質上更具定性時特別有用。 您甚至可以將圖標自定義為星星、點贊、心形、表情符號。
形象卡
這在您需要一次展示有關每個項目的多條信息時很有用。 可能是食品訂購過程中的漢堡或購物流程中的襯衫。 所有卡片都相互堆疊，您可以滾動查看所有選項。
這個 UI 元素有 4 個部分——圖像、標題、描述和頁腳。 您可以根據要在其中顯示的內容以不同的方式使用它們。
如果您想測試所有這些輸入 UI 元素，這裡是一個聊天機器人的鏈接，它一次可以帶您完成一個。
聊天是一個只有氣泡和文本框的極簡界面，並沒有提供太大的範圍。 而且我相信我們將不得不重新考慮如何通過使用現有元素並向聊天界面添加新元素來促進各種互動。
想知道您是否自己玩過消息界面並添加了一些其他很酷的 GUI 元素？
[Ish Jindal 的這篇文章首次出現在 Medium 上，經許可轉載。]