设计高效好用表单的10个技巧

让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。
以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。
时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式
当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

不论是网页设计还是APP UI设计,表单都是界面中最常见、最重要的组件之一。它们的应用范畴非常广,用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等等等,从数据输入到信息搜索,几乎无处不在。对于设计师、前端和开发者而言,应当对于表单的设计尽量多上心,让它们更加易用,细致的设计对于用户的体验、交互的效率有极大的加成。

在今天的文章中,你会看到许多关于表单设计的切实可行的建议,它们涉及到可用性测试、现场测试、眼动追踪以及用户反馈等多个不同的环节。

1、梳理逻辑,保留必需

表单是同用户进行沟通的语言。和任何对话一样,它应当以符合逻辑的方式帮助双方完成交流。所以,你需要这么做:

  • 让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。
  • 以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。
  • 时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

2、使用单列列表布局

待填写的多列表单容易让用户漏填,并且打断填写体验。用户需要按照Z字形的轨迹来完成整个表单的填写,这样不仅影响整个书写路径,降低效率,而且具备一定的干扰性。但如果是使用单列的表单的话,这种填写路径是单一、直接而更为直觉高效的。

设计高效好用表单的10个技巧

3、减少待输入字段和工作量

减少待输入的字段能够让你的表单更精悍,减少加载时间,对于信息量较大的表单尤其重要。

设计高效好用表单的10个技巧

单纯减少输入的字段数当然是不够的,你还要注意用户填写表单的方式、内容和工作量。通过打字录入内容是一种高交互性的输入方式,出错率高,时间成本高,所以,应当尽量减少用户打字输入的情况,多用复选框、单选按钮、下拉菜单等选项来降低用户犯错的概率。

设计高效好用表单的10个技巧

4、匹配输入框和内容的尺寸

Baymard 研究所通过研究发现,如果一个字段和输入框相比太长或者太短,都会让用户怀疑他们输入的内容是否正确,而这种情况在CVV(信用卡验证值)之类的字段输入时,显得尤其明显。

设计高效好用表单的10个技巧

为了保持良好的可用性,你应当那个输入框的宽度,让它尽量和输入内容的长度保持匹配,适当的保留空间,能让用户更加安心。

5、标签置于相应输入框的上方

用户快速浏览表单是否足够方便?如果表单很难为用户快速扫视,那么填写所需的时间就更长了。所以,好看好填才是好表单设计的准则。Matteo Penzo 的文章曾经研究过表单中的表单和输入框应该如何布局才能让用户更好更快的浏览和填写,结论是标签应该置于输入框上方。

设计高效好用表单的10个技巧

如果你想用户尽快浏览,让标签和输入框纵向排列,靠左对齐。请注意,这里说的是快速浏览。这样的布局方式的优势在于,它们不需要太多的横向的空间,用户无需左右扫视而只需要向下浏览就好了,并且这样的布局更容易构成响应式的UI,兼容不同的屏幕和不同的应用场景。

6、支持灵活多样的格式

有些字段的填写需要用户进行精准的填写,但是要求用户输入特别精准或者特定格式的内容可能会在易用性上存在那么一点问题。如果你要求用户输入数字内容(比如电话号码),那么最好是灵活多样的,支持多种不同输入方式和显示方法,让人更容易查看(而不是机器),防止出错。

设计高效好用表单的10个技巧

比如座机电话的格式常常为(777)666 – 5544,这样的格式更易于用户查看、记录和记忆。

7、不要混用占位符和字段标签

设计师通常会将文本占位符放到表单内,作为额外的提醒,作为示例告知用户如何填写。当用户开始在其中输入的时候,占位符文本会消失。

设计高效好用表单的10个技巧

有一些设计师会将出于降低表单长度、降低视觉混乱度的原因,将标签直接作为占位符置于输入框内。对于简单的表单设计,这种设计影响不大,当表单信息量大,内容类型多变的时候,这种方式就不合适了。这种设计的缺陷在于:

  • 一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式
  • 当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

如果你仍然需要在你的表单中使用占位符,不妨让占位符以浮动标签的形式而存在。默认显示占位符,当用户输入的时候,向上浮动作为标签提醒用户。

设计高效好用表单的10个技巧

8、混淆可选和必填字段

正如同我在之前说过的,尽量避免在表单中加入可选填的字段。但是如果你非得加入,那么至少该明确哪些字段是可选,哪些是必填的。将选填字段控制在1~2个之内,并明确告知用户,这是可选的。

设计高效好用表单的10个技巧

9、别用“重置”按钮

“重置”很容易让用户删除表单上所有内容并且从头开始,这样的风险太大了,在现实生活中这个按钮实际从来没有给用户以帮助,相反因为误触带来的伤害更多一些。

设计高效好用表单的10个技巧

10、提供高可见度和特定的报错信息

理想状况下,用户完成表单的填写,上传就可以完成任务。但是实际的状况下,错误不可避免。所以,当错误发生的时候,要以高度可用、可见的形式告知用户,有问题发生了,所以,你所提供的报错信息应当符合下面的规则:

1)当用户输入字段之后,应该实时告知用户他们填写的信息是对的还是错的,而不是等他们完成全部信息填写之后再告诉他们出错了。

设计高效好用表单的10个技巧

2)报错信息应当一目了然,从用色、图标到文本都应当起到高亮的效果,而且报错信息应当靠近输入框,而非表单的底部或者顶部或者按键旁边。

设计高效好用表单的10个技巧

3)如果输入格式特定,那么应当事先声明。

设计高效好用表单的10个技巧

4)出现错误之后之后,不要将已经填写的表单清空。

结语

填写表单的时候,用户的犹豫是不可避免的,我们应当尽量让这个过程变的便捷而轻松。我们应当让表单设计成为优势,而非弱点。一个高度有针对性的表单设计,贴心细致的细节和体验,坚持不懈的改良和调整,高效快速的提交,顺畅的流程,这些才是优秀表单应有的样子。

 

译者:@陈子木

译文来自:优设

原文地址:uxplanet

原文作者:Nick Babich

 

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

(0)
CatherineCatherine
上一篇 2017-05-21 03:55
下一篇 2017-05-21 05:51

相关推荐

  • 使用无序列表的7项注意

    小圆点有助于分割大段文字,使得复杂的文章和博客更容易消化,突出关键信息。如何运用好无序列表?这篇文章提出了7个注意点。

    2017-05-02
  • 开始自己的建筑笔记 | Sketch Journal 作品展示

    大家是否在网络时常看到精美的建筑师手绘本?是否也准备打造一本属于自己的建筑笔记?今天为大家带来笔者大一阶段的Sketch Journal。笔记虽不算精美,但却是自己一年辛勤努力后的结果,它记录的不只是这一年的想法,更是自己一年的学习历程。相信这也是大家在不断完成自己的建筑笔记时最享受的一个过程吧。建筑笔记的几点心得:慎用大尺度手绘本!笔者本科第一年的Sketch Journal选择了A3尺寸,结局是很悲惨的。你需要付出比常人多的时间去完...

    2018-04-21
  • UX 设计中的「环境」元素思考

    随着 AR/VR/MR 大潮来临,传感器等技术的不断发展,「环境」已经逐渐成为 UX 设计师在「人」与「设备」之外重点关注的第三极。

    2017-04-27
  • 什么是用户体验设计,用户体验设计标准是什么?

    我理解的用户体验,是让用户付出最小成本满足需求。用户体验无法用一个通用方法整体衡量,只能在理解产品全貌的前提下评测分解属性。我仅结合搜索领域经验提供些参考。个人对用户体验的目标是,做到“自然”。用户体验设计是什么?用户体验(User Experience,简称UE)设计 是用户在使用产品或服务过程中建立起来的一种纯主观的感受。用户体验产生于客户与你的品牌、公司、组织所发生的一切互动。这些互动的对象包含了你的产品、官网、帮助中心、广告、微...

    2018-03-20
  • 回顾交互设计的过去,并展望其未来

    你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和视觉设计师该何去何从?人机交互的未来在哪?这些问题都值得我们去思考……

    2017-05-04
  • 成也排版败也排版:一个选择的过程

    作为设计师有一个重要的技能:如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
    1.000x 1.618 = 1.618
    1.618x 1.618 = 2.618
    2.618x 1.618 = 4.236
    4.236x 1.618 = 6.854
    6.854x 1.618 = 11.089GoldenRatio (1:1.618)

    11.089x 1.618 = 17.942
    17.942x 1.618 = 29.03
    29.030x 1.618 = 46.971
    46.971x 1.618 = 75.999
    75.999x 1.618 = 122.966MinorSecond 15:16
    MajorSecond 8:9
    MinorThird 5:6
    Major Third 4:5
    …PerfectFourth (3:4)

    9.969x 1.333 = 13.288
    13.288x 1.333 = 17.713
    17.713x 1.333 = 23.612
    23.612x 1.333 = 31.475
    31.475x 1.333 = 41.956
    41.956x 1.333 = 55.927FontSizes
    Header1: 55px
    Header2: 42px
    Header3: 31px
    Header4: 24px
    Header5: 14px
    Body:17px
    Caption:14px

    2017-05-01
  • PC端产品的三种姿态

    这篇依旧是读书笔记,只不过记录的不是整本书,而是《About face 3交互设计精髓》中的一个知识点,这个知识点非常重要,重要到需要单独提出来记录一篇。 在《About face 3交互设计精髓》一书中,将PC端应用分为了3…

    2016-06-01
  • 在设计注册/登录界面时要注意的常见问题

    当用户完成注册之后,可以选择性地提供额外的信息,而这些信息可能会给给用户带来更加定制化的用户体验 。为了安全起见,绝大多数的网站还是提供了邮箱验证甚至电话验证的环节,甚至提供备用安全邮箱的验证机制。

    2017-05-29
  • iPhone十年,移动用户体验领域已经到达成熟阶段

    译者:Daisy全文共 3904 字 7 图,阅读需要 8 分钟———— / BEGIN / ————最开始的iPhone于2007年6月发布。2008年末,当我们开始研究第一版移动报告时,大多数人还是在使用有着最极其糟糕的用户体验的原始移动设备。在那个时候,相较于体验糟糕的移动设备和移动网站,任何稍微像样的产品都会带给用户愉悦的体验。三年前,移动报告第三版出来时,我们对移动端可用性做了严密的评估。我们很高兴移动端可用性报告不再是一种矛...

    2018-04-11
  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04