创建用户友好型表单 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

相关推荐

  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • 12个线框图示例,来自Dribbble的UX设计师分享。

    在设计过程的最初阶段,我们知道很有可能直接选择word或邮件原始需求。但是,用线框技术解决问题有很多好处,它可以节省时间,更易于发现可用性问题,并让设计人员专注于创造可靠的用户体验

    2017-12-26
  • 移动端搜索功能研究

    搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些对应的设计方法。 搜索能够帮助用户快速精确找到想要的结果,其中两个重要目标是提高搜索结果…

    2016-10-28
  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25
  • 隐藏在今日头条百亿市值背后的算法:巨大可能与现实困境

    文/余亮 无论2016年科技圈热门的噱头有多少,对数据基础设施方面的耕耘仍然是决定实力的关键。阿里之类电商数据帝国自不待言,今日头条、一点资讯等在资讯数据领域的开拓更加值得注目。比起电商的物流数据,资讯算…

    2016-01-27
  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11
  • [译]UX设计之复选框和开关按钮

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

    2016-06-30
  • 设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。

    2016-10-24
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

    我们的目标是创造一个能够提供最佳写作体验的空间,让故事的讲述者能够触及到他们的听众。现在,我们很高兴地展示我们在标题方面的提升,这个改变微小而又重要,我们认为你每次在发布文章后,都会会欣赏它。

    2016-08-10