Web 界面是延迟的对话:设计对话界面

已发表: 2018-06-18

网站是延迟的对话:设计对话界面 用户通过 Web 界面进行“延迟对话”。

也就是说,公司会对用户提出的问题或他或她希望提前完成的操作做出所有可能的回应。

  • 当它起作用时,感觉就像是一次愉快的讨论。 当用户向用户界面询问某些内容并且界面会立即将其显示出来时,就会出现这种情况。
  • 当它不起作用时——当用户正在寻找一种设计者事先没有想到的交互方法时,当界面产生 404 错误时——这对用户来说可能是一个非常烦人的“对话”,他或她可能永远不会再与您的公司交谈。

将您的网页视为会话用户界面。 对于对话,您需要两方之间的理解。 对于 Web 界面,您需要公司和访问者之间的理解。 下面我们将向您展示设计对话界面的基础知识,以便您改善网站用户体验:

1. 心理模型:有效对话的最低要求

如果你不熟悉心智模型,它基本上是关于事物如何运作的观点

当您询问您的朋友在访问网站时会发生什么时,他们可能会谈论加载页面和执行操作。 当您询问网络技术人员访问网站时会发生什么时,它可能涉及“cookies”和“令牌”以及“传递的参数”。 两种观点都可以是“正确的”,但它们不会“匹配”。

对于网站设计师来说,要考虑的最重要的事情之一是确保界面和用户的心理模型正确匹配

要记住的是,模型是基于信念而不是事实。 您需要用大大小小的信号来影响这种信念,以尝试将用户的心理模型放在正确的位置。

以下是您可以做的几件事:

  • 当用户有一个可能需要一段时间的任务时,添加一个“加载器”。 这会让他们认为,在他们点击“某事正在发生,但需要一些时间”而不是错误的心智模型之后,“什么都没有发生”。
delta icon loader-something is happening example-designing conversational interfaces

Delta.com 的加载程序告诉用户正在发生一些事情,但需要一些时间。

  • 如果下面有内容,请确保您切断了主页上的一些文本,或者有一些指示访问者可以进一步滚动。 这样一来,用户的心智模型将是“下面还有更多内容”,而不是“页面上的所有内容”。

由于您不能直接与用户交谈,因此匹配心智模型的很大一部分归结为能指

2. 可供性和能指——我能从这次谈话中得到什么?

网页设计师需要考虑“可供性”和“能指”。

  • 可供性——你可以对系统或对象做的一切。 搜索引擎“提供”搜索; 一个底座抽屉“支持”拉动。
  • 能指——告诉人们你可以用系统或对象做什么的符号。 放大镜“表示”您可以搜索; 把手“表示”您可以拉抽屉。
amazon-search bar-magnifiying glass-signifier example-designing conversational interfaces

放大镜“表示”用户可以搜索。

对于 Web 界面,能指可以决定或破坏设计与用户心智模型的匹配程度

如果按钮是半透明的,即使它在悬停时发生变化,您也可能无法传达该按钮可以单击的信息。 如果您网站上的链接与文本的其余部分没有明显不同的颜色,那么您就有一个能指问题,这将导致人们的心智模型不匹配。

就像对话中的问题表明您正在等待答复一样,放置得当的指示符可以让用户知道他们如何与设计进行交互。 确保您在整个界面中都有指示符,告诉用户他们可以与之交互的内容。

3. 分配重要性——确定网络环境中的基调

当你与人交谈时,你可以用你的语气告诉人们什么是重要的。 由于 Web 界面是延时对话,因此您没有奢侈的语气。 但是,您确实可以使用各种其他工具:

  • 颜色对比——如果你的网站大部分是灰色和黑色的,而你的号召性用语是红色的,那么你就是在告诉人们更多地关注 CTA 而不是网站文本。 这就是您可以用来将注意力吸引到正确位置的东西。
Asos Product Detail Page CTA Color Contrast Example Designing Conversational Interfaces

Asos.com 通过使用绿色作为 CTA 按钮来吸引人们对号召性用语的关注——该颜色在产品详细信息页面的其他地方没有使用。

  • 尺寸——人们关注较大的元素。 使用它来引起人们对人们常用元素的关注。 但是,请注意不要过度使用它。
  • 不规则的形状——我们的眼睛比规则的更喜欢不规则的形状。 如果您的模板有圆角的空间,请使用它来巧妙地将注意力吸引到重要的地方。

通过在页面上具有清晰的视觉层次结构,告诉人们什么是重要的以及他们可以浏览的内容。

4.匹配用户的情绪——在延时对话中说服

当用户比较开心时,他或她会以“广度优先”的方式处理事情。 用户更有可能对轻微的中断感到满意,并且不会因事情不符合他们预期的方式而受到太大威胁。

当用户比较焦虑时,他或她会切换到“深度优先”模式。 该用户的注意力被锁定——这是您认为您的银行帐户被黑客入侵时进入的状态。 在您确定自己的帐户没有问题之前,恐惧会让您在试图找出问题时归零,从而损害所有其他任务,并且您更有可能错过一些事情。 (或者发现可爱的东西。)

在 Web 界面上,您需要了解这两种情绪状态。

  • 您的旅行类别页面可能会吸引用户的“广度优先”处理,您可以放入滑块、标签和其他交互元素,访问者可以使用这些元素来找到他们需要的东西。
  • 但是,您的表单和结帐页面需要处理访问者的“深度优先”处理,并显示大型信任符号以减轻焦虑,以便他们可以继续并开始与您进行交易。

匹配用户可能的状态将使您的网站“看起来”更易于使用。

设计对话界面以改善用户体验

请记住:界面基本上是对话,但提前为用户制定了可能的响应。

使它起作用的原因是您与用户的心理模型的匹配程度。 当心智模型匹配时,访问者可以做他们需要做的事情,并且他们会很高兴地离开。 当心智模型不匹配时,情况正好相反。

你可以做几件事来确保你帮助人们弄清楚界面是如何工作的:

  • 确保你使用符号来告诉人们系统提供了什么。
  • 使用颜色、大小和形状将注意力吸引到正确的位置。

完成所有这些后,您只需要确保正确考虑用户的情绪状态,并针对该状态使用适当的网站元素。

如果你把这一切都做好了,人们应该更愿意一次又一次地和你交谈。

与最好的人一起工作!

从转化率优化先驱的90 分钟网站评论开始您的优化。 我们在 SiteTuners 的 CRO 专家可以帮助您从转换和可用性的角度诊断您的网站。

订购我的 90 分钟网站评论