0文章
0评论
0获赞

UI原则会话-网站聊天机器人设计全过程(下)

1,062 0

第二部分.非语言类沟通的设

1.信息排布

机器人和用户的头像及其消息的排列方式也不应随意。以下有两种最常见的对话显示类型

A.头像 消息对齐(在多数情况下左对齐)一个个纵向排列

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

消息对齐的布局

B.头像 信息两端对齐

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

两端对齐的消息布局

我们认为方案B更能反映真实的对话。通常,当两个人谈话时,他们会互相看着对方。因此为了使对话式UI更自然,对话者的头像和他们的消息也应该这样显示。

2.聊天机器人的形象

们很幸运,因为chopchop有一个品牌形象。更重要的是,因为他拥有一个预先设计好的外观素材库可供我们使用,所以Cody可以非常完美的适用于任何目的的对话式UI。我认为很快公司就会开始通过测试不同的聊天机器人头像来衡量和优对话式UI的转化率

不仅如此,我可以肯定,如果我们有Cody的女版形象,那么用户的反应将与现在使用男性形象的表现完全不同。

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

Cody的头像变体

另一方面,我认为应该避免使用真人照片作为聊天机器人头像。这将令人困惑——我是在跟机器人说话,还是跟人说话?设计师对于机器人的视觉外观真的应该非常小心。顺便一个,这是一个进化的事实过程:面部识别是儿童成长的首要能力之一,而且通常在他们学会说话之前几个月就会发生。

注:这块笔者是举例人类幼儿在成长过程中的自然发育过程,如果聊天机器人使用人类形象可能会对幼龄及其他方面有困难的用户在使用过程中带来阻碍

除此之外,如果你想用你的真名作为你的机器人的名字,请确保你的脚本也反映了你的真实性格。否则和机器人聊天可能会对你的真实形象产生不利影响。

3.聊天机器人的面部表情

面部表情是非常重要的。我们也想把它包含在我们的项目中。

眨眼的讯息:

人们平均每分钟眨10次眼。Cody也是如此。此外,眨眼可以是一个额外的非语言信号(例如:呃,我只是开玩笑,只是开玩笑)。

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

眨眼状态下的聊天机器人头像

六种基础的情感:

另外,聊天机器人的反应可以归结为6种基本情绪之一:

  • 幸福
  • 悲伤
  • 惊讶
  • 恐惧
  • 厌恶
  • 愤怒
UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

科迪的表情样本

4.用户的面部表情(实验)

我们希望用户能够向Cody发送非语言类信息。我们使用用户头像来做到这一点。通过将光标悬停在头像处,用户可以改变他们的面部表情,作为对Cody信息的反应。它并不能很明显地反映真实的面部表情,但它会利用对话式UI进行另一种形式的交流。

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

代替用户的面部表情

5.使用表情符号

现在人们都使用表情图这并不奇怪。这很普遍也很有用这些表情图大大丰富了非语言层面的书面沟通。

比较以下两条短语

A.我讨厌你!

B.我讨厌你!

我想对于我们大多数人来说,B可以很容易地被翻译成:我喜欢你,伙计! 显然,Cody和我们大多数人一样使用表情符号。

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

带有表情符号的信息

6.交流感情的表达——动画对

动画可以将对话式UI的用户体验提升到下一个层次,使用户的UI交互过程更加自然和愉快。但这并不是全部,动画元素可以在整个对话中扮演一个重要的角色,负责所谓的phatic expression(情感表达)的部分工作。简单地说,这就是使谈话顺畅的一切。

注:此处动画化对于聊天机器人的意义译者认为:更多的是增加机器人的情感化图像表达,phatic expression在此处更多的是代表“图像化情感(回应式)表达”联想一下我们平时使用表情的情景吧,也许对于你的理解有所帮助

动态化的聊天机器人头像

人见面时,他们通常会用握手来开始交谈。它可以让谈话者更接近对方,观察他们的眼睛,更清楚地看到他们的脸。因此,Cody的头像在对话开始时稍微大一些,允许用户熟悉Cody,当第一个消息被交换时,头像又会变小。

输入状态

简单的输入状态展示可以起到情感上语言交流的效果,它可以告诉用户:保持冷静,亲爱的,我还在这里,请给我些时间回复。

输入状态有很多种形式。这是最常见的一个:

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

输入状态展示

输入状态和悬停状态

此外,我们决定利用表达输入状态的图标来启发用户——嘿,该你说了。用户头像旁边会显示一个静态的输入状态图标,然后当用户的鼠标划过或悬停在一些区域时,比如说下图所示的按键,输入状态的图标将会进行动效展示。

UI原则会话-网站聊天机器人设计全过程(下)
UI原则会话-网站聊天机器人设计全过程(下)

悬停激活输入指示器

结尾

这绝对是The Rectangles(团队名)近期研究的最有趣的项目之一。 当他们在线的人还是很少的时候,为他们设计一个对话式的网站,对我们的团队来说是一个有趣的挑战。 这让我们学到了很多东西,说实话 – 我们可能等不到另外一个这样的项目。

现在,我们也可以看到 – 用户体验设计的未来已经到来。

原文链接:medium

译文地址百度用户体验中心

评论 (0)
请登录以参与评论。
立即登录

UI原则会话:网站聊天机器人设计全过程(上)

773 0

在本文中,我将向您展示一项项目研究,它描述了一个B2B网站设计会话UI的完整过程,包括对话脚本的片段、通信理论的基础和一些我认为使这个项目具有独特性的技巧和途径。

开始

在2016年末。许多人说会话式用户介面(UI)是网页介面的未来。即时通讯程序(IM应用程序)、聊天机器人、基于文本的用户介面或表情图片可能从未如此流行过。有人可能会说这只是另一种设计潮流,或者基于文本的介面并不是什么新东西,但坦率地说我们不得不承认——随着iPhone Messages,Slack或Facebook Messenger的出现,我们交流信息的方式发生了不可逆转的转变。如今,文字消息已经成为一种非常自然的交流方式。

所以,当我们有机会为我们的客户设计一个会话式网站时,我们毫不犹豫便接了下来。

项目目标

客户:CHop-Chop —一家网络开发公司

我们在项目中的主要任务是:

  • 设计一套完整的会话式用户介面语言
  • 创建一个会话脚本处理
  • 处理最常见的会话随机性类型(指的是类似于和谐文本使用的规则,如游戏沟通中常见的我***)
  • 传达品牌个性(也就是使用公司的品牌英雄人物Gody)
  • 提高用户(对话者)的好奇心和喜好(注:此处指用户粘性)
  • 展示公司网站的开发技术

我会告诉你我们是如何一步一步做的,但首先…

一点理论

让我们从基础开始。我认为,有时在进入更复杂的问题之前先退一步是很重要的。在这种情况下,它确实帮助了我们。不管你是否相信,只要阅读所有这些基本定义,我们就可以看到一些创造性的解决方案,并推动整个构思过程。

我想你也不应跳过这一部分。

沟通的原则

有数百种定义解释了沟通。下面是我发现的几个混合版本。

交流是分享有意义的信息的过程

信息(一般来说)可以是口头的非口头的

最常见的口头交流工具是语言,它是一组用来组合可以转化为意义的词汇形式的信息的符号。

例如:你好;谢谢;你今天看起来不错

非口头的相比之下,是指与文字不同的任何类型的交流。它可以是手势,面部表情,语调,还可以是具有共同社会意义的行为或符号。

例如:

沟通是一个各方面都会互相影响的过程。这意味着沟通具有整体性,沟通的整个过程创建了一个系统,其中所有的元素(所有信息)一起为共同的利益而工作。

这些信息是功能性的,这意味着我们可以通过使用它们来获得预期的效果,但也具有适应性——这意味着,根据不同的情况,可以对它们进行修改和调整,以获得更好的结果。

最后,我们用来沟通的语言是基于通信代码的,这是一套原则和表意。他为理解奠定了基础。这种通信代码也称为某种原则分为两种:

  • 1、构成性原则:指的是特定词语的意义和含义,以及我们该如何解读它们。此外,它们还告诉我们如何理解特定的上下文中的消息。
  • 2、规范性规则:帮助根据给定的消息解释来确定适当的反应。换句话说,他们告诉我们在特定情况下我们应该做(说)什么,不应该做(说)什么。

当然,最自然和最常见的交流方式之一就是对话。所以在讨论会话用户介面时,我想我们还应该看一个对会话做定义的示例:

对话是两个或两个以上的人之间的谈话,通常是非正式的谈话

那么是否有可能在没有强大的人工智能策略的情况下创建一个符合沟通原则的介面呢?

这就是对话式UICUI)的定义:

一种基于功能、自适应和有意义的信息交换的整体系统的介面,在这种交流中,对话双方使用和解释语言代码,以友好、非正式的方式维护和遵守构成规范和规范性规则

这是我们想创建的用户介面

将理论付诸实践 – 建立会话介面

定义目标

B2B功能的聊天机器人有特定的功能。人们访问这些网站是出于某种特定的原因,因为他们想要一些东西。这就像去餐馆或者走进实体店一样。当然,有时人们这样做是因为他们没有更好的事情做,或者只是想自娱自乐,但总的来说,这背后是有目的的:点菜,买双鞋或了解价格。另一方面,当与客户交谈时,服务员或店员也有他们的任务和脚本。会话网站的工作方式也一样,而聊天机器人的角色可以类似于店员或服务员。

在这种情况下,我们清楚地知道我们想要达到的目标,因为我们多年来一直使用Chop-Chop(实际上,我们在2010年就创建了它),但是如果你需要帮助来定义聊天机器人 或用户的目标,你可以使用以用户为中心的设计画布

我们为chatbot指定了以下目标:

  • 表达Chop-Chop的品牌个性
  • 使用网站本身来彰显网站网页开发技术能力
  • 向用户提供关于Chop-Chop服务的信息
  • 励用户为网站添加标签
  • 学习(采集)一些关于用户信息(姓名,职业,电子邮件,电话)
  • 帮助取得联系(CUI作为联系表格的替代方案)
  • 鼓励用户注册账号

*注:CUI指冯诺曼依体系机构Command User Interface 命令行用户交互,是和GUI相对应的一种说法。

第一部分.设计语言交流

建立对话脚本

交互设计师应该能够预测。在这个项目中,我们知道这是我们建立一个没有人工智能支持的整体通信系统的唯一途径。我们需要一个使用自适应语法的优秀对话脚本,这也将使会话愉快并有意义。

<1.对话框

使用白板,我们从一个简单的思维导图开始。牢记聊天机器人的目标,我们记下了所有可能的话题和会话部分。我们想快速检查一下最终脚本的复杂程度。

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

写对话脚本的早期阶

然后,我们划分并安排了功能组的部分(我们称它们为块)。我们已经开始看到了一些模式。其中一些小组是与目标相关的(我们称之为核心),其他小组则负责让对话不那么官方(聊天),而另一个小组为用户提供了选项或额外的信息(附加信息),并对用户的反应也有回答。最后,可以将对话快速跳过推进到一个不同的脚本块中。

脚本块的最终列表:

  • 开始脚本块
  • 附加内容脚本块
  • 跳跃脚本块
  • 核心内容脚本块
  • 会话形式脚本块
  • 结束脚本块

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

简单的对话框时间线的例子

当然,最后的脚本结构比线性框架要难得多。基于对话整体性的所有依赖和无尽的组合使整个事情变得异常复杂。

<2.剧本

这是我们从项目一开始就一直在等待的时刻:我们终于可以编写实际的对话脚本了。这部分很有趣,但也需要最大限度的关注。 把脚本分成块,这样就容易多了,因为所有的对话部分都可以单独编写。

好的是 – 您需要编写CUI脚本的唯一工具是笔和纸或文本编辑器。

以下是一些脚本块的例子

开始脚本块:

你好

我是Cody 我很期待和你聊天呢

你好,Cody

你今天怎么样?

一般,马马虎虎吧

很糟呢,是吧?那个会发生…

附加内容脚本块:

我希望你不要介意我使用cookies

这些是什么?

我的早餐!

哈哈,多搞笑的笑话呀

cookies是由浏览器储存的有关你的数据

听起来令人毛骨悚然,但是,嗯…还好吧

好的

跳跃脚本块:

你好!

你看起来很面熟,我们之前见过吗?

是的

哈!我的记忆真好!

上次我们谈到了Magento的发展,你想继续我们的话题吗?

我们继续

核心内容脚本块:

介绍一下你吧

非常荣幸!

你想知道我从哪来的吗?听听我的故事?或者,也许我知道我该怎么办?

你从哪来?

那么,我的想法来自用户体验设计工作室The Rectangles但是,是波兰设计师Jan Kallwejt给我穿衣服,做了我的头发

会话形式脚本块:

你看到在左上角的分享了吗?

这些是什么?

如果你喜欢我们的聊天,把我介绍给你的朋友!我也乐意和他们交谈

也许以后会

结束脚本块:

我该走了

按住Cmd D

哈哈!

你有收藏我吗?

还没

那就收藏吧!

好的,我该走了让我们保持联系

拜拜,Cody

&lt;3.语法

一个好的脚本应该让你创建一个不同的对话场景。如果对话以英语作为基础则语法相对简单,那就容易多了。但是,在许多语言中,您应该能够通过将一个词替换为另一个词来创建多个消息(词组)的选项。此外,脚本设计师应该能够指定用户的答案、选项等地方。

要创建这样的脚本符号,您需要一组符号:圆括号、括号、大括号,以及您和您的团队可以阅读和理解的任何内容。这对于将执行脚本的开发人员来说也是非常重要的。他们也应该能够理解它。

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

在某些情况下,聊天机器人可以随机从特定集合中选取一个单词(你好;嗨,嘿)而且它也可以更智能化一些,并根据用户的时间显示一些情景化的消息(早上好;晚上好)。

以下是一组符号及其功能:

  • { }大括号:定义一组选项
  • | 分隔号:分离集合中的选项
  • ( )圆括号:指定集合中与条件有关的选项
  • [ ]括号内:表示用户输入
UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

简单的对话框时间线的例子

<4.机器人信息

这次谈话的视觉展示是这个项目最重要的用户体验挑战之一。下面是一些亮点。

单个语句与完整的段落

人们不会讲段落。我们用单句说话。当然,有时候这些单句也会串联成很长的话,但在交谈中,人们往往会轮流发言。此外,我们认为,在回答之前显示长段的用户需要阅读的文本,可以比作与一个语速很快的人交谈。因此,我们决定显示单个(短)句的组合,而不是段落。

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

用文本气泡的透明度标记以前的信息

淡出VS滚动

显示会话流程的最常见方法是不断在旧的消息之下添加新消息,并让用户滑动。

作为一个实验性的选择,旧的消息可能会淡出,因此滚动不再是必要的。我知道这样的解决方案的可用性是值得怀疑的,但是从不同的角度来看——这样的解决方案反映了对话的真实本质。当和某人交谈时,你也不能一直随时访问所交换的信息。

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

用文本气泡的透明度标记以前的信息

此外,在某个时间点,你可以简单地使用跳转来询问用户是否想返回到任何前面的对话部分,或者显示一个永久的“跳转到”按钮,当点击时,会触发机器人返回任何过去的段落。

<5.用户消息(答案)

对于一个不使用人工智能来解释用户答案的会话用户介面,这是编写脚本时最具挑战性的部分。脚本应该让聊天机器人提供有逻辑的答案(我们在这里称他们为对话者)给用户(记住,构成性原则和规范性原则),但是更自然和更开放的对话,对对话者来说是更有趣的。

我们使用了两种类型的答案:

A:定义(受控,封闭)

  • 他们相对容易处理
  • 他们需要良好的预测技能
  • 用户可能不被允许说出他们想要的
UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

举例定义的答案

B:未定义的(不受控制,开放式的)

  • 他们更难以处理
  • 他们可能需要一些预定义的字数据库进行分析
  • 用户可以自然交流
UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

举例未定义的答案

也许没有通用的方法来处理开放式的答案。我们不能假定人们会遵循通信代码。一些未定义的消息将违反(特别是)规范性规则。当然,有些用户会说(写),因为他们会和一个人类说(写),当然,其他人会通过发送色情短信、咒骂或胡言乱语来挑战你的机器人。

这里是一些提示如何控制未定义的消息:

  • 输入可以仅限于指定的一组标志(例如,如果询问名字,则只允许字母
  • 正则表达式(regexp)可用于某些输入(例如电子邮件)
  • 使用最流行的发誓词的数组
  • (我会小心这个,但是)使用一些字典与API来检查你所期望的答案是否真的是单词

当然,一个理想的谈话应该是不受约束的,但是对于没有AI支持的对话UI来说,一点控制是不可避免的。

还有一件事:

在使用定义的问题时,可以通过一个小小的改进使答案稍微好一些。不要问这样的问题:

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

没有选择的封闭式问题

像这样问:

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

关闭选项的问题

这是纯粹的心理学——在第一个例子中用户可能拥有的无限选择范围其实是有限的,而在第二种情况下,你指定了这个范围并给你的用户一个选择。在这两种情况下,结果都是相同的,但是在后者中用户体验更好。

<6.感叹词,填词,非词汇对话的声音

人们在说话时,含糊不清,会犯错误,会犹豫不决,甚至会失去思路。这是正常的。我们希望和聊天机器人聊天也很自然。所以我们也用了它们。

这里有一些流行的非语言对话的声音:是啊,好吧,哦,哦,啊,嗯,嗯,嗯,呃,你知道,呃,

这里有一些流行的对话式的非词汇语音(口头语):是的,好的,哦,噢,嗯,嗯,嗯,嗯,嗯,你知道,嗯。

UI原则会话:网站聊天机器人设计全过程(上)
UI原则会话:网站聊天机器人设计全过程(上)

对话式非词汇语音的事例用法

原文链接:medium

译文地址:百度用户体验中心

评论 (0)
请登录以参与评论。
立即登录