恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计高效的表单:结构,输入,标签和操作
0.0°
2017-07-06 自译外文 经验/观点 原作者: Nick Babich 举报 3127 7 4 0

使用你应用或网站的人有一个特定的目标。通常,在用户和他们的目标之间的一件事就是表单。表单也是网络和应用程序中用户最重要的互动类型之一。

封面图来自https://dribbble.com/shots/3545287-HL-Billing

事实上,表单通常被认为是完成目标的最后一步。表单只是一种手段。用户应该能够快速完成,而不会疑惑。

在本文中,你将看到从可用性测试,现场测试,眼动跟踪研究和不满的用户的实际投诉中收集的实用技术。这些技术 ,正确使用时,使设计人员能够生成更快,更简单和更高效的表单体验。有一种方法可以创建和设计自己的原型:你只需下载Adobe XD(免费)即可开始使用。在文章结尾处,你还将找到设计表单的新方法。

表单的组成部分

典型的表格有以下五个组成部分:

a.结构

这包括字段的顺序,表单在页面上的外观以及多个字段之间的逻辑连接。

b.输入字段

这些包括文本字段,密码字段,复选框,单选按钮,滑块和为用户输入而设计的任何其他字段。

c.字段标签

这些告诉用户相应的输入字段是什么意思。

d.操作按钮

当用户按下此按钮时,执行操作(如提交数据)。

e.反馈

用户通过反馈了解其输入的结果。大多数应用程序和网站都使用纯文本作为反馈形式。反馈信息将通知用户有关结果,并且可以是积极的(表示表单提交成功)或否定的(“你提供的号码不正确”)。


表单也可能包含以下组件:

f.帮助

任何关于表单填写的帮助说明。

g.验证

此自动检查确保用户的数据有效。

本文涉及与结构,输入字段,标签,操作按钮和验证有关的许多方面。


1.表单结构

表单是一种对话类型。和任何对话一样,它应该由双方之间的逻辑沟通组成:用户和应用程序。

只问所需

确保只问你真正需要什么。你添加到表单的每个额外字段将影响其转化率。一定要考虑为什么要从用户那里请求某些信息以及如何使用它。

逻辑地排列表单

从用户的角度逻辑地询问详细信息,而不是从应用程序或数据库的角度。通常,再问别人名字之前询问地址是不合逻辑的。

组织相关信息

将相关信息组合成逻辑块或集合。从一组问题到下一个问题的流程更类似于一个对话。将相关领域分组在一起,也将帮助用户了解他们必须填写的信息。请在下面的联系信息表中比较它的工作原理。

Image title


一列VS多列

将表单域排列成多个列的问题之一是用户可能会不一致地理解这些字段。如果表单是水平排列的,则用户必须以Z图案扫描,减慢理解速度并使路径变得复杂。但是,如果表单是一列,则完成的路径是页面上的直线。

Image title


在左边,是解释表单字段在标准的两列布局中如何关联的一种方法,而在右侧则是页面上的直线。


2.输入字段

输入字段是用户填写表单的方式。存在于你需要的各类信息的字段:文本字段,密码字段,下拉列表,复选框,单选按钮,日期选择器等。

字段数量

表单设计中的经验法则是越短越好。直观的,用户填写的越少,就有越高的转化。因此,尽量减少字段的数量。这会使你的表单感觉更轻便,特别是当你要求填很多信息时。但是,不要过度; 没有人喜欢一次填3个循环30次。在给定时间只显示五到七个输入字段是常见的做法。

Image title


在一个易于填写的字段中组合多个字段。

强制 VS 可选择

尽量避免表单中的可选字段。但是如果你使用它们,至少要明确区分哪些输入字段不能留空。惯例是为必填字段使用星号(*),对于非必填字段使用“可选”字样(在多个必填字段的长表单中最好使用可选字样)。如果你决定使用星号作为必填字段,请在表单底部显示一个提示,说明星号是什么,因为并不是每个人都明白这是什么意思。

Image title

MailChimp的邮件列表订阅表单

设置默认值

避免设置默认值,除非你认为大部分用户(例如,其中90%的用户)将选择该值。尤其避免需要的字段。为什么?因为你可能会引入错误。人们快速扫描在线表单,所以不要以为他们会花时间来解析所有的选择。他们可能会跳过已经有价值的东西。

但是,此规则不适用于智能默认值,即基于有关用户可用信息设置的值。智能默认值可以使表单更快更准确。例如,根据地理位置数据预先选择用户的国家/地区。不过,请谨慎使用它们,因为用户往往会保留预选的字段。

Image title

在结帐表格中智能预选的国家

输入掩码

掩码是一种帮助用户格式化输入文本的技术。一旦用户关注一个字段,掩码就会出现,并且会在字段被填写时自动格式化文本,从而帮助用户专注于所需的数据并更容易地注意到错误。在下面的示例中,随着手机和信用卡号码的输入,自动应用括号,空格和破折号。当输入电话号码、信用卡、货币等等时,这种简单的技术可以节省时间和精力。

Image title


桌面端:使键盘友好

用户应该只能使用键盘来专注和编辑每个字段。倾向于使用键盘的高级用户应该能够轻松地勾选和编辑字段,而不用把手指从键盘上移开。你可以在W3C的设计模式指南中找到键盘交互的详细要求。

Image title


即使是一个简单的日期选择器也应遵循W3C的指导方针。

桌面端:输入字段,自动对焦

自动对焦一个字段为用户提供了一个指示和起点,快速开始填写表单。提供了一个清晰的视觉信号,焦点已经移动到那里,无论是通过改变颜色,在框中消失,闪烁的箭头,任何形式。亚马逊的注册表格具有自动对焦和视觉指引。

Image title


移动端:将键盘与输入相匹配

手机用户喜欢为为请求文本提供适当键盘的应用程。在应用程序中始终如一地实现这一点,而不仅仅是为了某些任务。

Image title


联想打字(自动完成)

随着越来越多的人使用移动屏幕,任何减少不必要的打字的事情都将改善用户体验并减少错误。自动完成可以消除大量打字。例如,填写地址字段通常是任何注册表单中最有问题的部分。诸如Place Autocomplete Address Form(使用地理位置和地址预填充功能的工具可以根据用户的确切位置提供准确的建议),使用户能够以比常规输入字段更少的按键输入地址。

Image title


3.标签

明确书写的标签是使UI更易于访问的主要方式之一。一个好的标签告诉用户该字段的目的,当焦点在字段本身时保持其有用性,并且即使在字段被填写之后仍然可见。

字数

标签不是帮助文本。使用简洁,简短的描述性标签(一两个字),以便用户可以快速扫描表单。以前版本的Amazon的注册表单包含很多单词,导致完成很慢。目前的版本好多了,标签很短。

Image title


句子案例VS标题案例

在今天的大多数数字产品中,有两种方式来表示字词:

标题案例:大写每个字。“This Is Title Case”。

句子案例:大写第一个字。“This is sentence case”。

用于标签的句子案例比标题案例有一个优点:它稍微更容易(并且因此更快)阅读。虽然短标签的差异可以忽略不计(“Full Name” and “Full name),但对于较长的标签,句子情况更好。Now You Know How Difficult It Is to Read Long Text in Title Case(哈哈).

避免所有字母大写

切勿使用所有字母大写,否则表单将难以阅读,并且难以快速扫描,因为字符高度不会有变化。

Image title

全部大写很难阅读。

标签对齐:左对齐VS 右对齐 VS顶对齐

Matteo Penzo 2006年关于标签放置的文章表明,如果标签位于字段之上,则表单更快地完成。如果你希望用户尽快扫描表单,顶部对齐的标签是很好的。

Image title

左对齐,右对齐和顶对齐的标签

顶部对齐标签的最大优点是不同尺寸的标签和本地化版本可以更容易地适配UI。(对于小屏幕特别好)

Image title


左对齐标签的最大缺点是完成时间最慢。这可能是因为标签和输入字段之间的视觉距离。标签越短,距离输入框越远。然而,缓慢的完成速度并不总是一件坏事,特别是如果表单要求敏感数据。如果你要求的是驾驶执照号码或身份证号,你可能会故意放慢用户的速度,以确保其正确输入。因此,读取敏感数据标签所花费的时间并不重要。左对齐标签还有其他缺点:需要更多的水平空间,移动端可能就是个问题。

Image title


右对齐标签的最大优点是标签和输入框之间的较强的视觉连接。靠近的物品似乎是相关的。这个原则不是新的;,来源于格式塔心理学的邻近定律。对于简短的表单,右对齐的标签可以很快完成。缺点是不舒服, 这种形式左边缘较硬,这使得看起来不舒服,更难阅读。

Image title


如果你希望用户快速填写表单,就将标签放在字段上方。布局将更容易浏览,因为视线将直接向下浏览页面。但是,如果你希望用户仔细阅读,请将标签放在字段的左侧。这种布局会减慢阅读器的速度,并使它们以Z形浏览。

内联标签(占位符文本)

在输入字段中设置为占位符的标签将在获得焦点后消失, 用户将无法再查看。虽然占位符文本可能适用于两个字段的表单(简单的用户名和密码字段的登录表单),但是从用户需要更多信息时,占位符文本是可视化标签的一个很差的替代品。

Image title


一旦用户点击输入字段,标签就会消失,因此用户无法仔细检查他们是否写了正确的内容。这增加了错误的几率。另一个问题是用户可能会将占位符文本误认为预先输入的数据,因此忽略它(Nielsen Norman Group的眼动跟踪研究证实)。

Image title

占位符文本作为字段标签

占位符文本的一个很好的解决方案是浮动标签。默认情况下会显示占位符文本,但是一旦输入了一个字段,则占位符文本会淡出,并且顶部对齐的标签将呈现。

Image title


不要只依靠占位符标签,因为一旦一个字段已经填写,占位符将不再可见。使用浮动标签,以便用户确信已填写正确的字段。


4.操作按钮

单击时,操作按钮会触发某些活动,例如提交表单。

主要操作 VS次要操作

主要和次要动作之间缺乏视觉上的区别很容易导致失败。减少次要行为的视觉突出性可以最大限度地减少错误的风险,并强化人们操作成功的途径。

Image title

等视觉重量与视觉差异

按钮位置

复杂表单通常需要一个后退按钮。如果这样的按钮位于输入字段的正下方(如下面的第一个屏幕截图),用户可能会意外点击它。因为后退按钮是次要操作,所以使其更少可访问(下面的第二个表单具才是正确位置)。

Image title


命名

避免使用通用单词,例如“提交”操作,因为它们给人的印象是表单本身是通用的。相反,说明按钮在单击时将执行什么操作,例如“创建我的帐户”或“订阅每周优惠”。

Image title


多个按钮

避免使用多个操作按钮,因为它们可能会分散用户提交表单的目的。

重置按钮是纯邪恶的

不要使用重置按钮。这个按钮几乎永远不会帮助用户,经常损害他们。如果把几乎所有重制按钮都删除,网页将是一个很好的地方。

Image title


视觉外观

确保操作按钮看起来像按钮:明确指示可以点击。

Image title

阴影表示可以点击。

视觉反馈

设计“提交”按钮,要清楚地表明用户在操作后正在处理表单。这样可以在防止双重提交的同时向用户提供反馈。

Image title


5.验证

表单验证错误是不可避免的,并且是数据输入的一个自然部分(因为用户容易出错)。是的,容易出错的情况应该最小化,但验证错误永远不会消除。所以最重要的问题是,如何使用户从错误中恢复。

内联验证

用户不喜欢填完表单提交后才发现错误。尤其是填完一个长的表单,按“提交”后,你会收到多条错误消息。当不清楚你所犯的错误和在哪里时,这更麻烦了。

Image title


一旦用户输入数据,就应该验证并告知用户正确的文本。表单验证的主要原则是:与用户交谈!告诉他们是什么错!实时内联验证立即通知用户其数据的正确性。这种方法允许他们更快地纠正任何错误,而不必等到他们按“提交”按钮来查看错误。

但是,避免对每个按键进行验证,因为在大多数情况下,只有在完成键入答案之后才能验证。在数据输入期间验证表单,让用户很不爽。

Image title

完成打字之前,Google表单会声明电子邮件地址无效。

另一方面,数据输入后验证的表单不会很快通知用户他们已经更正了错误。

Image title

Apple Store中在数据输入后执行验证。

Mihael Konjević在他的文章“Inline Validation in Forms: Designing the Experience ”中,研究了不同的验证策略,并提出了一种满足双方的策略:早奖励,晚惩罚。

1.如果用户在处于有效状态的字段中输入数据(即先前输入的数据有效),则在数据输入后验证。

2.如果用户在处于无效状态的字段中输入数据(即先前输入的数据无效),则在数据输入期间进行验证。

Image title早奖励,晚惩罚。


6.保护数据

Jef Raskin曾经说过:“系统应该把所有的用户输入视为神圣的。”这对于表单是绝对正确的。当你开始填写表单,然后意外刷新页面但数据保留在字段中时,这是非常好的。像Garlic.js这样的工具可以帮助你把表单数据保存在本地直至提交表单。这样,如果用户意外关闭标签页或浏览器,用户将不会丢失任何宝贵的数据。

Image title


7.对话界面:表单设计的新方式

最近,我们已经看到了很多会话界面和聊天室。有几个趋势正在促成这一现象,尤其是人们在信息应用中花费的时间比在社交网络上花费更多的时间。这导致了大量的实验来支持一系列的交互,比如购物,在线程会话中,通常是模仿消息传递的方式。在这种趋势下,表单元素已经发生了变化。设计师正在将传统的网络表单转化为交互式会话界面。

自然语言界面

每个界面都是一个对话。传统表单(我们每天设计的)与会话非常相似。唯一的区别是我们问问题的方式。但是,如果我们的表单以更加真实的人(而不是机器)对话的格式提出问题呢?因此,与其用自己不人道的术语与机器交流,不如与它进行交互。下面所示的表单不依赖于传统元素(如标签和输入字段),而是创建了一个上下文会话,便于理解。

Image title

这种表单设计,使用会话模式,更类似于任务。

会话形式

会话形式是一个开源的概念,它很容易将网页上的任何形式转换为会话接口。它具有会话替换所有输入元素,可重复使用的变量,以前的问题,以及完整的定制和控件的样式。这个项目代表了我们如何看待用户体验和交互的有趣转变,更倾向于基于文本的对话来帮助用户实现他们的目标。

Image title


8.结论

用户可能不愿意填写表单,因此尽可能简化流程。小的改变,比 如将信息进行分组,就可以显著提高可用性。可用性测试在表单设计中是必不可少的。通常,只需要几个人测试,或者只是让一位同事使用一个原型,就能让你更好地了解表单的可用性。


更新:2017-07-06

收藏

7人已收藏

  • 5

    作品

  • 12

    粉丝

  • 2

    关注

  • 复杂应用的表单设计
  • 如何设计好表单
  • 如何设计好表格
  • B端金融交易类App

    猜你喜欢

      2017-07-06 自译外文 经验/观点 原作者: Nick Babich 举报 3127 7 4 0

      设计高效的表单:结构,输入,标签和操作

      0.0°

      你确定要举报设计高效的表单:结构,输入,标签和操作

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录