创建用户友好型表单 Creating User Friendly Forms

好久不见,由于懒惰好久没有翻译文章了,这次翻译一篇关于表单的很基础的文章。有些例子较牵强,大家可以有选择性的看

原文地址:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

作者:Momoh Silm

表单对于企业和个人同样至关重要,当涉及到数据收集时,我们大多数情况下会采用表单(或许是因为在互联网繁荣之前我们就已经在线下使用了很久的表单)。因此创建一个用户友好型表单对表单的填写效率至关重要。

 

表单解析

表单的目的、内容、大小虽然各不相同,但是有一些基本的元素助我们轻松地填写。

创建用户友好型表单 Creating User Friendly Forms

Amazon创建账户表单解析

i. 标题

这个元素帮助用户引导完成表单填写的整个过程,尤其当你收集的数据不止有一个标题的时候,它特别有用。例如:个人资料、职业详情、财务明细。

ii. 标签

标签告诉用户在任何特定的输入区域期望他们填写什么内容。

iii. 占位符

占位符是对标签进行额外的信息描述。

iv. 错误信息提示

错误信息提示给予用户错误反馈,提醒用户为什么填错了。

v. 动作按钮

动作按钮是在表单的结尾,有个确认提交的动作控件。

 

表单状态

基本上,表单在用户的交互过程中需要经历三个阶段。

i. 默认状态

用户在未进行任何操作前表单的状态。

ii. 聚焦状态

这个状态强调用户正在填写的区域,帮助用户聚焦和减少反复扫描屏幕的时间。

ii. 反馈状态

反馈状态是指用户收到的反馈时的页面状态(大多数是指错误信息反馈)。有时候,这个状态出现在用户在完成了一个输入框的录入后把焦点移动到下个输入框。当然了,如果数据不能得到立即验证的话,就要等到用户点击提交按钮后再给予反馈提示。

创建用户友好型表单 Creating User Friendly Forms

Amazon创建账户表单的“默认、聚焦、反馈”页面状态

 

最佳实践

1.保持简洁

让你的表单保持简短精炼,只保留最有必要的数据,避免以验证的名义让用户重复输入,例如不要重复密码字段,取而代之的是要让用户直接看到他们输入的密码。

2.使用及时验证

当给予用户输入进行报错时,最好将反馈定位到具体位置。

创建用户友好型表单 Creating User Friendly Forms

Facebook和Amazon采用了两种不同的验证反馈方式

 

3.将相近的字段打组

将相近的字段打组和按标准序列排序是非常重要的。这样的话可以帮助用户减少认知负荷和注意力消耗。

创建用户友好型表单 Creating User Friendly Forms

付款页面相近的功能区域被适当地分组

 

4.将标签左对齐

要将标签放置到输入框上面(像上面所解析的Amazon的表单一样)。不要把占位符文字作为输入框的标签,那样的话用户输入完成后将看不到标签,用户将很难对已输入的内容做最终的核对,会让他们思考很多。

始终将标签放置在输入框上面并左对齐,有一个很全面的研究报告来说明这是高效率的做法。

详见链接:https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

 

5.输入区域与内容类型或尺寸相匹配简单地说,要保证输入字段的长度与预期的输入类型相匹配,例如:地址就要比邮政编码长。

创建用户友好型表单 Creating User Friendly Forms

Flutterwave’s Rave的登录页面,输入区域的尺寸与预期的输入字段的长度比例一致。

创建用户友好型表单 Creating User Friendly Forms

payporte的输入区域与预期的输入字段的长度比例不匹配

 

6.CTA(call to action)按钮

在表单的末尾通常会有个确认按钮或者下一步按钮,在有些场景下,必须有一个以上的按钮。要强调主要的按钮,弱化次要按钮。

创建用户友好型表单 Creating User Friendly Forms

Amazon的主要次要按钮处理的很好

 

当运用模态弹窗进行信息收集时(表单在模态弹窗上),那么次要按钮有时候就是关闭按钮,另一种弱化它的方法就是使用X icon代替关闭按钮,如下所示。

创建用户友好型表单 Creating User Friendly Forms

Medium的登录模态弹窗使用X icon 来代表关闭按钮

 

7.搜索区域

不要隐藏你的搜索框,特别是你的网站内有大量内容时,搜索或许是最好的选择。

创建用户友好型表单 Creating User Friendly Forms

Amazon的的搜索框特别的显眼

 

 

当用户执行了搜索操作后并显示了搜索结果,不要立即清除搜索框内的内容,以便让可以用户很容易地去回顾他起初所搜索的内容。

创建用户友好型表单 Creating User Friendly FormsMedium没有清除搜索后的输入内容

 

 

8.清晰

给用户传达清楚的信息,给予他们所预期的,不要模棱两可。没有人喜欢填写表单,没有人愿意填写两遍。

创建用户友好型表单 Creating User Friendly Forms

Cowrywise 的标签内容非常的清晰,甚至按钮的文字都描述的很好。

 

这里所有的例子既不是为了打广告,也不是为了鄙视某个产品的设计。这仅用于学习。

 

 

原文地址:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

作者:Momoh Silm

翻译仅用于学习,转载请注明出处

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/36541/

(0)
iouedioued
上一篇 2018-04-18
下一篇 2018-04-18

相关推荐

  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • 交互设计案例视频展示

    一款APP的交互原型演示,有能力的话自己动手做个视频吧! [hana-flv-player video=" http://jhxt.org/wp-content/uploads/2015/07/ixdshow.flv" width="640" height="auto" description="Ta APP 交互简介" player="…

    2015-07-01
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • [译]UX设计之复选框和开关按钮

    当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记…

    2016-06-30
  • HoloLens 确炫酷狂拽屌炸天!另外,这不是VR!

    6月2日凌晨,有“互联网女皇”之称的Mary Meeker今天在美国Code大会上发布了2016年的互联网趋势报告。 (关注“艾欧交互设计”微信号:AioUED,回复“2016”可获取报告中英文版PDF下载链接) 作者:朱宏 链接:https://zh…

    2016-06-02
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

    来源:H5广告资讯站 作者:小呆 原创文章,转载请联系本人! 记得在上个月小站推荐万达的第一支一镜到底H5作品时,就有用户曾放下狠话:“你就等着我们的一镜到底吧!” 因为留言的人是圈内的技术大神,自然也就引起…

    2016-10-25
  • 我手机里的应用设计体验

    最近养成了一个习惯,看到手机应用的一些设计点,自己觉得好或者不好的时候就会截图下来,翻了一下手机已经存了一堆图片了,就干脆发出来吧。 应用更新通知弹窗 应用更新弹窗是几乎每个应用都会有的一个模块,但是…

    2016-06-27