我们如何为我们的聊天机器人平台创建输入 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 上，经许可转载。]