Web表单设计最佳实践:5种有用的UI模式

发布时间:2019-08-30 10:55:37 阅读:53

从技术角度来看,表格很容易。一堆HTML,一些CSS,一份你最喜欢的后端代码,你准备好了。但是你的用户不是。

用户体验需要的不仅仅是具有健壮代码的美观视觉效果。他们需要引导用户沿着一条路走,提示他们的预期,并兑现承诺。

人们不会使用表格来获得它的乐趣。无论是获取信息,注册服务还是购买产品,他们都希望获得成果。最好的表格引导用户以及最小的麻烦。

以下是5种有效的UI模式,用于改进UX和转换。

1.疯狂的自由形式

OKCupid(https://www.okcupid.com/)

image14

奥斯卡(https://www.hioscar.com/)

image04

问题

输入字段太模糊或太平凡。

填空格式为信息提供背景并减轻情绪。这种风格适应自然的思维过程,而不是像数据收集机器那样出现。Mad libs更加放松并且清楚地解释函数以避免混淆,特别是与其他表单字段的单字描述相比。他们还提供展示您网站个性的机会。研究甚至表明这种模式可以导致转换率的增加

提示

  • 强调输入字段比表单框更自然和非正式,让人想起疯狂的libs和其他游戏。
  • 短语作为第一人称叙述,或作为用户对系统的命令。
  • 虽然这种模式增加了标准数据输入的生命,如注册,但它可能会产生相反的效果,信息太多。如果您需要多个句子,更传统的表单字段策略会更快。

2.原谅格式

制作的Airbnb(https://zh.airbnb.com/)

image00

IMDB(https://www.imdb.com/)

image07

问题

目前还不清楚用于表单字段的格式。

接受多种格式。

宽松的格式为用户提供了极大的自由和便利,降低了他们为系统的UX缺点而自责的可能性。

提示

  • 通常,这最适合使用内联提示,因此用户知道他们有选项。但是,如果输入提示添加了不必要的长度,则可以绕过此步骤。例如,Airbnb不包括输入提示,因为写“ZIP,国家,州,省......”等会破坏目的。
  • 适用于登录,用户可以在用户名,电子邮件等之间进行选择,具体取决于哪些内容最容易记住。
  • 数据库网站(如IMDb)的必备工具,专门用于不同类别的内容。
  • 与您的开发人员确认信息范围是否足够窄,以便系统处理。

3.阶梯表格(向导)

亚马逊(https://www.amazon.com/)

image08

问题

服务或功能需要大量数据输入。

当存在大量数据输入时,如某些服务或购买,将过程分解为一次一个地呈现的较小部分。正如交互设计最佳实践中所建议的那样,即使信息量相同,这也使得输入更易于管理。

此外,有时早期数据会影响以后的数据。例如,在国际或国内交货之间进行选择将改变运输选项。对于这些情况,阶梯形式通过防止不必要的信息来创建正确的速度。

提示

  • 使用完整度计模式(下面介绍)向用户显示整个过程需要多长时间。
  • 即使是阶梯形式,大量的输入也会对用户造成负担。消除任何不必要的数据,并将步骤数量保持在最低限度。
  • 如果您的表单需要5个以上的步骤,请考虑添加“ 左步 ”模式以显示剩余的数量。

4.完整度计(进度条)

Quora的(https://www.quora.com/)

image03

UXPin(https://www.uxpin.com/)

image13

LinkedIn(https://www.linkedin.com/)

image12

Fitocracy(https://www.fitocracy.com/)

image10

问题

用户担心某些过程需要多长时间,并且可能因为花费太长时间而离开。

使用完整性仪表通知用户进度。

完整度计通常用于:

  1. 入职/教程
  2. 档案完成
  3. 表格填写
  4. 电子商务结账

尽管存在创造性的空间,但步数的百分比或步数是标准的。例如,LinkedIn提供“全明星”等昵称,以匹配用户填写的个人资料数量。

完整性计量表减轻了用户对时间承诺的担忧,并通过创造“不完整”感来激励他们。

提示

  • 如果您的指标是步数,请尝试使用“Step#out of#”等措辞来简明扼要地说明总共有多少步,以及此刻用户的距离。
  • 如果步骤数量令人生畏,请考虑子步骤。例如,亚马逊的结账完整度表仅列出四个步骤(“登录”,“运送和付款”,“礼品选项”,“下订单”)。但是,“运费和付款”步骤分为三个较小的步骤。

5.强调福利

问题

因此,您的网站或应用已说服人们采取行动。这很好,但用户是一群善变的人。智能表单可以找到微妙的方法来提醒人们为什么提供信息,即使他们这样做。

在表单中添加消息,提醒人们在每一步都会得到什么。您可以按照说明进行操作 - “填写此表单以便我们向您发送免费礼物” - 或者使用UI本身。

提示

  • 将消息传递到按钮中。例如,如果您的表单将人员签入服务,请说“加入我们”而不仅仅是“提交”。
  • 保持短信。决定填写表格的人通常会忽略指示。尽量保证承诺一句话。

一个实际的例子

现在是时候将这些技术付诸实践了。在本课中,我们将解决一个常见的设计问题:说服用户填写表单。我们使用UXPin构建了下面的中保真原型,尽管这些概念适用于任何设计过程或工具。

使用下面的中等保真原型,我们的目标是在窗体上创建平滑的内容流 - 稍后像素完美。

1.选择正确的字段。人们花费的努力越少越好。例如,如果您的数据库允许,请使用“name”而不是单独的“first name”和“last name”字段。在这种情况下,我们要求三件事:他们的姓名,电子邮件地址以及他们想要学习的内容。

image02

2.用副本说明好处。即使用户知道他们所追求的是什么,重申“每周注册以获得有用的生产力提示”比“注册接收我们的新闻通讯”更强。请注意,即使提交按钮也会增强效益,而不是行动。

image06

3.不要隐瞒任何事情 - 但不要淹没。人们知道没有隐藏的费用,意外的产品注册或其他陷阱。文本墙将阻碍注册。

图像11

4.简化和澄清。在尽可能多的表单字段中删除标签时,拼出每个字段的预期内容。

image09

把它充实。一旦您迭代了团队和客户的反馈,就可以将线框转换为带有颜色和排版的高保真原型。请注意,我们一直等到这一点使用“疯狂的lib”技术,并填写了文本字段,使它们不那么平凡。

image05

6.跟进一个伟大的“谢谢!”消息,如果可能的话,还有一个额外的gimme让他们保持参与。“这是你的第一个提示......”

image01

结果?我们现在有一个视觉上引人入胜的表单,指示用户应该使用的格式,所有这些都在两步注册过程中完成。干杯!

结论

形式构造比代码和视觉效果更多。最佳做法是将步骤放在上下文中,简单的消息传递,并且通常使人们相信使用表单符合他们的最佳利益。

最后,它是关于做出让用户轻松的决策。转换的表单是他们不介意的表单。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"Web表单设计最佳实践:5种有用的UI模式",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560