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

相关推荐

  • [译]UX设计之按钮使用实例、类型和状态

    按钮是一个普通的、日常交互中都可能碰到的基本元素。但对创建一个流畅的交互体验过程来讲,按钮则是一个至关重要的元素,因此,投入一定精力到该元素的设计上是非常有意义的。另外,我们也为大家梳理出元素的基本…

    2016-06-30
  • Apple Watch应用设计案例-QQ空间

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

    2015-07-15
  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • Apple Watch APP设计第一课:了解Apple Watch视觉和设计原则

    在我们可以开始设计一个Apple Watch应用之前,要先理解其背后的视觉和设计原则。Apple Watch有三个重要主题:个人,整体,轻量级。如果想设计一个具有惊奇体验的应用,还有一个你应该考虑但苹果公司没有提及的,即 …

    2015-09-29
  • AB测试告诉你,你以为的设计不是你以为的设计。

    用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

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

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

    2016-07-11
  • 淘宝天猫个性化推荐技术演进史

    小编说:个性化推荐技术直面用户,可以说是站在最前线的那个。如今,从用户打开手机淘宝客户端(简称“手淘”)或是手机天猫客户端(简称“猫客”)的那一刻起,个性化推荐技术就已经启动,为你我带来一场个性化的购物…

    2017-05-09
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25
  • Facebook 改变「点赞」背后的故事

    Facebook 在上段时间做出了一个改变,堪称是最近科技界的最重磅的新闻之一,那就是他们改变了自己实施已达 7 年的「赞」的功能,增加了 5 种新的回复选择。从某种程度上说,这是 Facebook 近几年在自身产品设计上迈…

    IxD案例 2016-03-03
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30