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

相关推荐

  • Smartisan OS v3.1.0 功能列表(M1 / M1L),创新交互设计“One Step”与“Big Bang”变革安卓阵营。

    本次更新主要增加了两大重磅功能“One Step”与“Big Bang”,前者将常用的点击与分享操作放置于边栏,快捷切换与分享,快人岂止一步;后者可以将大面积按压下的文字区域,智能拆成字和词,你可以自由选择与搭配,同时…

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

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

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

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

    2017-12-26
  • O2O/商场权限管理系统设计方案

    一、管理权限分级概览 二、管理账号管理逻辑 三、账号权限定义 管理账号预设角色分为四种:超级管理员、商场管理员(独立收银)、商场管理员(统一收银)、店铺管理员; 超级管理员: 具有商场后台所有功能的权限,…

    2017-12-28
  • 如何改版一个3亿用户的神奇网站

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

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

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

    2016-06-02
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • 如何写一份出色的交互设计文档,给程序员以美的享受?

    交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

    2016-07-11
  • 产品设计师的自我重启

    有几个月没喝威士忌了,半年都有了,今天又捡起来了。这两周因为喵的事焦虑万分了,恢复的不太稳定,几乎每天都有不同的状况,让人揪心。揪到后面自己也不好了,各种代表焦虑的梦算是梦了个一溜够。那么让自己放松…

    2014-12-13
  • 消灭空状态

    设计师在做设计的时候,常常会忽略的一个页面状态就是空状态。空状态,顾名思义就是空白的状态,比如说:一个新闻的列表中没有新闻,这个时候列表就是空的,用户打开之后看到的就是白惨惨的一片。空状态的用户体验…

    2016-01-29