超全面!聊天机器人的界面交互设计实战经验总结 - 优设-UISDC

超全面!聊天机器人的界面交互设计实战经验总结

2017/08/01 评论区

最近在做智投App的机器人Neo的原型设计,是一个chatbot聊天机器人,整理了一下关于聊天机器人设计的一些心得。

欢迎关注作者的微信公众号:「交互视角」

一. 背景:

这是Neo的第一个版本。Neo通过问答的方式了解用户的基本信息、投资偏好及投资目的等信息,用户通过直接文字回复和点击选项进行回复对话,最终产出供用户参考的资产配置方案。

二. 设计要点:

1. 以问答的方式开始与用户互动,不要让用户一进来就不知道该干什么

机器人进来跟用户寒暄之后需要跟用户进行有效互动,让用户知道接下来能干嘛,不能陷进死胡同里。如果可以的话,机器人应该尽快跟用户表明自己的功能,是一个有明确目的的机器人。

左图中,机器人上来就是打了个招呼,用户不知道该如何回复。并且在用户回复完之后,又无缘无故的不搭理用户。即使用户的问题机器人不知道怎么回答,也要勇于承认,及时给用户反馈。

如果需要问一些用户有可能不太愿意直接回答的问题时,一定要解释清楚问问题的原因以及对于用户的意义是什么。如图中我们需要问用户的真实年龄,虽然有些无理,但是这对于输出资产配置方案很重要。

2. 采用多种方式循序渐进地向用户提问

Neo需要通过对话了解用户的信息,从基本信息收集到投资偏好了解到投资目的的挖掘,超过10道题。

应该循序渐进的方式依次问用户,最好是采用多种形式提问,并形成有效互动,这样才更容易让用户接受。如果直接按部就班提问而不与用户互动,很有可能用户就失去耐心而离开界面。

本版本的Neo采用问答对话、单选题、多选题的方式向用户提问收集用户资料。

3. 用户做了回答以后,机器人要有相应的反馈

如图,当用户选择了退休后在杭州西溪湿地旁时,Neo会回复与杭州相关的会话,让用户觉得Neo是聪明的,是在听他讲话并能做出相应回应的,而不是一个收集数据的机器。

4. 记住用户的答案,下次进来时不需要重新开始对话

如果用户已经做完了Neo的所有问题,产出了具体的配置方案,那么当用户下次再点击进入该会话时,不需要重新从第一个问题开始,而是会记录用户所有问题的答案,并在第一屏给出配置方案的快捷入口。

当然,间隔一段时间之后,用户可以选择重新回答Neo的相关问题,产出新的资产配置方案。

5. 不需要机器人完成所有的任务

机器人只负责手机信息并产出产品配置方案就完成了,用户查看、挑选、申购产品并不是由机器人来完成。

三. 相关交互细节

1. 在对话框中,有些不是用户直接输入回答,而是需要进行选择的。

当遇到单选题时,Neo先说出问题,并在用户会话的那一侧(右侧)显示出选项,这样用户就很自然的选择点击某一个选项,用户点击选择之后,则会将该答案作为对话发出来。用户浏览整个对话时,看上去还是一问一答的对话形式。

下图是单选的交互方式:

一开始设计的时候,是将问题的选项放在Neo那一侧,后来调整为放在右侧,并新增提示语,“请选择一个”。放在左侧作为题目,用户不仔细看,都不知道该操作什么,而放在用户的那一侧,是在想用户暗示,这属于用户输入的部分。如下图:

2. 设计多选题时,当用户选择完多个选项之后,需要点击提交按钮确认之后才形成有效对话。

3. 当Neo询问年龄时,弹出数字键盘,用户只可以输入数字,在键盘上显示出单位“岁”,默认值显示30,引导用户输入,有助于降低用户的出错率。

4. 当机器人在输入内容或运算产出方案时,可能需要一些时间,这时需要向用户展示Neo正在输入或运行,否则用户不知道该做什么,会话是否已经结束。

5. 当用户回答出错时,可以友好的提醒用户。但如果用户一直出错,告知用户答案不正确,及时进入下一题,不要在同一个无问题上纠结太久陷进死胡同。

四. 总结

Neo机器人扮演的是一个投资理财顾问的角色,通过与用户的聊天,收集用户基本信息、投资偏好、投资目标等信息,而这些信息以前都是用户在线下填写相当冗长复杂的表格完成的。并且可以通过对话产出符合用户的资产配置方案。机器人正在潜移默化的改变着各个行业的操作模式。

聊天机器人刚开始可能并不是非常聪明,但是我们可以通过设计来让它尽可能表现得聪明;即使有时候它犯错了或不知道该如何处理与用户的对话,及时告知用户,时刻表明它现在所处的状态,不让用户等待或困惑,也是一种不错的方式。

「对话式交互相关好文合集」

  1. 《图形界面的末路?聊聊未来可能会流行的「对话式交互」》
  2. 《2016年最火的对话式UI,2017年会走向何处?》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/guide-to-chatbots-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 设计理论 海报设计 字体下载 神器下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里