对话式设计简介(和 3 个杰出的例子)

已发表: 2018-08-05

现在几乎每个人都有一个网站,所以如果你想让你的网站脱颖而出,你必须在设计时带来你的 A-game。 人们希望网站能够满足他们的特定需求,并使他们觉得自己很重要(他们确实如此!)。 如果您不能提供这种经验,您可能无法在大联盟中竞争。

对话式设计就是创建为每个用户量身定制并预测他们需求的网站。 在本文中,我们将为您提供一个简短的会话式网页设计速成课程,并讨论一些示例。

让我们谈谈!

对话式设计导论

在对话式网页设计方面,有一个重要的区别。 当人们谈论这个概念时,他们主要指的是超个性化。 例如,当您登录 Facebook 帐户时,该平台会询问您的想法/感受并通过姓名提及您:

脸书时间线。

这是对话式设计的一个例子。 另一方面,当人们谈论对话式用户界面 (UI) 时,他们指的是文本驱动的体验,例如聊天机器人和 Slack。

无论如何,会话设计这个术语涵盖了很多领域。 然而,它们都有一个共同点,即为用户提供更加个性化的体验。 这就是为什么这是一件好事:

  • 它可以帮助您建立信任。 对话式设计可以帮助用户感到受欢迎,这反过来又可以激发信任并带来更多转化。
  • 您可以充分利用收集的数据。 如今,大多数网站都会从用户那里收集一些个人信息。 通过对话式设计,您可以将这些数据用于实际用途。

至于哪些网站可以从采用对话式设计中受益,这取决于您为访问者提供的互动水平。 如果您的用户需要以某种方式与您的网站进行交互,那么您应该考虑研究对话式设计以提供更个性化的体验。

在下一节中,我们将向您展示一些对话式网页设计和 UI 的示例。 我们将讨论他们的正确做法以及如何在自己的网站上应用他们的方法。

3 个使用对话式设计的网站示例

对话式设计是一个广阔的领域,因此您可以通过多种方式在您的网站上实现它。 在本节中,我们将探讨三个示例,每个示例都使用不同的方法来实现个性化和对话式 UI。

1. 嗡嗡工作室

Buzzworthy Studio 的网站具有出色的联系表单体验,可提供高度个性化的体验。 进入联系页面后,您可以点击START A PROJECT号召性用语:

开始一个新项目。

然后,页面会询问您想从事的项目类型:

选择要启动的项目类型。

例如,如果我们点击Marketing选项,我们可以从SEOPPC Campaigns或两者中进行选择:

发起营销活动。

做出选择后,该网站会为您提供粗略的预算和时间表,具体取决于它:

项目的粗略预算和时间表。

就联系页面而言,这种体验是我们遇到的最吸引人的体验之一。 在给你预算之前问几个问题,会让你觉得在雇佣他们之前你正在与自由职业者进行对话。

此外,它们还包括一个简单的表格,您可以在其中添加他们在制定更全面的项目提案之前可能想知道的任何详细信息:

一个快速表格,询问有关您的项目的更多详细信息。

对话设计和联系页面是天作之合,特别是对于投资组合页面。 您面临的最大挑战之一是让潜在客户感到放心,为他们量身定制您的页面是实现这一目标的好方法。

如果您想尝试创建更具交互性的客户入职体验,一种很好的方法是使用 Typeform。 不久前,我们讨论了如何使用该平台创建时尚的调查,但您也可以使用它向潜在客户提出问题,类似于此示例。

2.陆地机器人

对于我们的第二个示例,我们将探索对话式 UI。 Landbot 等平台以非常字面的方式处理对话设计的概念,因为它们完全围绕文本交互构建。

Landbot 可能不像我们之前的例子那么出名,但这并不意味着他们没有什么有趣的东西。 简而言之,此服务使您能够创建基于聊天机器人的登录页面。 我们之前已经讨论过如何为 WordPress 设置由 Facebook 驱动的聊天机器人,但这个平台更容易上手。

该网站本身是对话式 UI 的大师班。 这一切都围绕着一个单一的聊天而构建,它使用了一个干净、现代的设计:

Landbot.io 的主页。

在对话的每个阶段,您都可以选择如何回复聊天机器人。 由于您使用的是预先确定的选项,因此聊天机器人更容易编程。 这也是一个很好的例子,说明对话式 UI 不需要无聊。

您应该从 Landbot 的对话设计方法中吸取两个突出的要点。 首先,如果你想在你的网站中包含对话式 UI,你需要让它们引人注目。 玩转颜色、字体,甚至是用户在打字时看到的小动画,以创造引人注目的内容:

Landbot.io 聊天。

其次,对话式 UI 非常适合推动转化。 例如,聊天机器人使您能够通过提供强大的号召性用语 (CTA) 来引导用户采取您希望他们采取的行动:

通过聊天机器人交付的几个 CTA 示例。

实现这些类型的功能可能需要一些技术知识,但结果非常值得付出努力。 您可以随时尝试创建自己的 Landbot 聊天机器人,并使用它来将用户引导到您的网站,反之亦然。

3. 科迪

对于我们的最后一个示例,让我们看一下另一个会话 UI。 Cody 展示了来自 Chop Chop 机构的一个简单聊天机器人。 他们的业务是围绕创建聊天机器人而建立的,因此他们想炫耀自己的能力是理所当然的。

与 Landbot 示例不同,Cody 不太适合公开营销。 相反,它试图让您感觉像是在与朋友交谈,同时向您提供重要信息。 例如,Cody 会问你是否不介意网站使用 cookie,这是对通知的一个重大转折:

正在运行的 Cody 聊天机器人。

这里的对话 UI 非常简单。 背景干净,文字气泡非常低调。 这是您可以看到添加到任何专业网站的聊天机器人类型,而不会带走其内容。

这里的关键要点是对话式 UI 不需要只专注于营销,有很多方法可以为聊天机器人添加一些天赋。 例如,你可以给它一个面孔和一个名字,让它感觉独特和个性化。 同样,您可以优化您使用的语言,让对话感觉更随意,而不是像在向 Google 提问。

结论

在网页设计方面,您可以订阅很多思想流派。 有材料设计、流体形状、手绘元素等等。 然而,对话式网页设计不仅仅是一种趋势。 如果您可以提供为每个访问者量身定制的独特体验,那么您将拥有很少有网站可以匹敌的优势。

让我们再看一些我们最喜欢的对话式设计示例:

  1. Buzzworthy Studio:通过个性化,您甚至可以让联系表格变得更有趣。
  2. Landbot:提供了一个引人注目的对话 UI 示例。
  3. Cody:这个简单的聊天机器人在让你觉得你是在和真人而不是机器说话方面做得很好。

您认为在网站上实施对话式设计的最佳方式是什么? 在下面的评论部分与我们分享您的想法!

Art Alex / shutterstock.com 的文章图片缩略图