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

从技术角度来看,表单设计是容易的。一点HTML语言,少许CSS,一份你喜欢的后端代码,你就准备好投入使用了。但你的用户还没准备好。

用户体验需要的不仅仅是漂亮的视觉效果与强大的代码。UX需要引导用户沿着一条路径,暗示可以预期什么结果,并提供可以承诺的内容。

人们不是使用表单来娱乐的。无论是获得信息,注册服务,或购买产品,他们希望他们的努力有一个结果。最好的表单用最少的文本来引导用户。

这里有5个有用的UI模式来提升用户体验和做出转换。

1. Mad Libs 表单

OKCupid (译者注:美国在线约会社交网)


Oscar


问题

输入区域太模糊或太普通。

解决方案

在 空白处填充的格式可以提供相关信息和放松用户心情。这种风格可以适应自然的思维过程,而不是像数据采集器机一样出现。Mad libs更简洁并可以清晰地 解释功能而避免混乱,尤其是相比于其他单个词描述的表单字段。这种表单也提供展示你网站个性的机会。研究表明这种模式可以致使点击率的增加。

提示

· 输入字段的下划线比输入框更自然的和随意,比如mad libs和其他游戏。

· 用第一人称的短语叙述或作为用户对系统的指令进行描述。

· 虽然这种模式增加了日常标准数据的输入,如注册。但如果信息太多会有相反的效果。如果你需要的更多的语句,那么传统的表单模式可能更合适。

2. 多样格式

Airbnb

IMDb

问题

不清楚使用哪种格式的表单区域。

解决方案

采用多种格式。

多样的格式为用户提供更多自由并带来便利,降低他们因系统用户体验的缺点而责怪自己的可能。

提示

· 通常情况下,多样格式最好与在线提示一起使用,这样用户就会知道他们有更多选择。但如果输入提示添加了不必要的长度,可以不加。例如Airbnb就不是从“邮政,国家,国家,省……”等输入开始提示的。

· 伟大作品从登录开始,用户可以从他们的用户名,电子邮件等之间来选择,这取决于哪个最容易记住。

· 对数据库网站(比如IMDB)而言,必须致力于不同类别的内容。

· 与您的开发人员验证,是否信息范围对系统处理而言足够小。

3. 阶段式(向导)

Amazon

问题

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

解决方案

当有大量的数据输入,如某些服务或购买商品时,把这个过程分解成较小的部分。这是 Interaction Design Best Practices的建议,这使得即使信息输入的数量不变也更易管理。

此外,有时早期数据会影响后期数据。例如,选择国际或国内交货会改变航运选择。对于这些情况,一个阶梯式的形式可以阻止不必要的信息,构成正确步骤。

提示

· 使用进度表(描述下一步)向用户显示总进程有多长。

· 大量的输入是对用户的负担,即使是阶段式输入。所以应消减任何不需要的数据,并保持步数最小化。

· 如果您的表单需要5步以上,请考虑添加一个“剩余步骤”模式以显示还有多少。

4. 完成度(进度条)

Quora

 

UXPin

 

LinkedIn

 

Fitocracy

 

问题

用户对某些花费很长的时间的过程感到焦虑,可能会因为这一过程太长而离开。

解决方案

向用户报告完成度的进展情况。

进度条在这些情况下是很常用的:

00001. 入职/远程教程

00001. 简介完成度

00001. 完成表格时

00002. 电子商务的结算页面

步骤的百分比或数量是标准的,尽管还有创造的空间。以LinkedIn为例,给出了“全明星”这样的绰号来匹配的用户填写的档案。

进度条减少了用户对时间期限的关注,并鼓励他们创建一种有意义的“不完整”。

提示

· 如果你有好几步,尽量措辞如“步_ 为了_”来简要告诉用户此时共有多少步。

· 如果步骤很多,考虑细分步骤。  例如,亚马逊的结帐进度表只列出了四个步骤(“登陆 ”,“ 配送&付款,”“ 礼品选项,”“ 地址 ”)。然而,“ 地址&付款”一步分解成三个小步。

5. 强调收益

问题

此时你的网站或APP已经说服人们来操作。这很好,但用户很多变。即使是提供信息,聪明的形式也会使用含蓄的方式来告诉人们为何这么做。

解决方案

向人们传递信息,让人们知道他们在每一步中得到什么。你可以使用这一方法给出指令或建设用户界面:“填写此表格,我们就可以邮寄你一个免费的礼物”。

提示

· 用按钮传递消息。举例来说,把你的表单上的选项变成服务,用“加入我们”代替“提交”。

· 保持消息简短。决定填写这一表格的用户往往会忽视掉给出的指示。试着用一句话来概括。

一个实例

现在是时候把这些技术付诸实践了。在这一课中,我们将解决一个常见的设计问题:说服用户填写一个表格。我们用uxpin打造出下面的中保真原型,当然这一概念适用于任何设计过程或工具。

在下面的中保真原型中,我们的目标是创造一个内容流畅的表单——像素完美是第二步。

1.选择正确的字段。 人们花费越少精力越好。例如,如果您的数据库允许,请使用“姓名”而不是单独的“名”和“姓”。在这个案例中,我们需要他们的三个信息:姓名,电子邮件地址和他们想学习的东西。

2. 讲清楚这么做的益处。 即使用户已经知道他们在做什么,使用“注册就能每周获得免费的有用技巧”比“注册就能接收我们的信息”要好。

3. 不要隐瞒任何事情-但也不要用文字压垮用户。人们希望知道有没有隐藏的费用,意想不到的产品注册或其他陷阱。文字构成的墙壁会阻碍注册。

4. 清晰明了。 当你从尽可能多的表单域中删除标签时,还是要说清楚每个字段的含义。

5. 充实内容。在你结合分析你的团队和客户的反馈后,调整线框图的颜色和字体使之成为高保真原型。注意,我们一直到这一步才能使用“mad lib”技术把文本领域填满,使他们更加非凡。

 

6. 记得带上“ 感谢“ 用户的信息。如果可能的话,使他们有事可做。“这是你的第一个提示……”

结果呢?我们现在有了一个直观的形式来显示用户应该使用什么格式,这都包括在一个只需两步的注册过程。Cheers!

结论

除了代码和视觉效果,还有更多的表单建设方法。最好的做法是把场景下的步骤用简单的消息解释清楚,通常用户最感兴趣的表单才能说服他们。

最后,表单设计是关于如何为用户把事情变容易。用户不在意表单的形式转变。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部