用户可以不愿意挖空心思写表，尽量简单，小小的改动就能大大提升用户体验。
目录
形式
模板结构
输入栏
标签
按钮
做考证
对话:想象形式的新方法
摘要
摘要
用户使用或者网站是有目标的。一般来说，用户实现目的的方式之一就是表单。表单仍然是用户在网页中使用的最重要的交互例子之一。在大多数城市，表格往往是实现目标的第一步。用户应该能够快速完成表单。
在这篇文章中，你会看到从可用性测试、实验测试、眼球追踪研讨会以及用户的好评中获得的实用技巧。当这些技巧被准确地运用时，一种更简单和更低效的形式体验就会出现。在文章的开头，我将介绍一种想象表单的新方法。
1.形式构成
经常看到的表格有以下五个部门:
构造:它包括字段的顺序、表单在页面上的外观以及多个字段之间的逻辑关系。
输入字段:这些字段包括文本字段、稀疏代码字段、复选框、单选按钮、滑块和任何其他用于输入的字段。
文本标签:报告用户响应的输入字段的含义。
动作按钮:当用户按下这个按钮时，一个动作被执行。
响应:通过流程响应，用户可以了解自己的输入结果。大部分大学利用战争网站利用杂七杂八的文字作为反应。
表单还可以包括以下内容:
帮助信息:解释如何挖掘和编写表单。
考证:主动查看用户的数据是否有用。
本文将介绍表单构造、输入字段、标签、按钮和考证的许多圈。
2.模板结构
形式是一种对话。就像对话一样，它应该由两个圈子之间的逻辑交流组成:用户和用户。
仅保存必填字段。
只要必填字段为真。增加表单中每个额外字段的转换率。我们应该不断地考虑为什么我们应该向用户询问那些疑问，以及我们将如何利用它们。
根据逻辑安排
站在用户的角度提问，而不是站在使用或者数据库的角度。例如，提问的地点或人名前面没有正当理由。
散射相干场
相干场被分组和合并。从一组结果到下一组结果的方法更像是对话。将相关字段分组在一起也可以帮助用户理解写作的要求。与以上两种信息形式的方法相比。
相干场(图片:尼尔森诺曼集团)
是一栏借一栏多？
表单字段的多列显示的一个成果是，用户挖掘和写入字段的顺序可以与预期不同。如果一个表单有多列字段，用户必须停止扫描Z的形式，这降低了理解的速度，混淆了完成的方式。但是，如果你在一个列中，完成它的方式是一条清晰的曲线。
右边是多种方式标注表单字段之间的关系，左边是一条清晰的曲线。
3.上场
输入字段是用户可以挖掘和编写的字段，例如文本字段、稀疏代码字段、下拉菜单、复选框、单选框、日期选择器等等。
字段数量
表格中设想的体验方式之一是越短越好。当然看起来很不雅:降低用户资本，提高转化率。因此，尽量减少字段的数量。这会让你的表单感觉更简单，尤其是当你需要用户挖掘大量问题的时候。不过，也不过分。通常情况下，一次只出现五到七个输入字段。
分散多个领域，如地方(图像:卢克乌鲁布莱夫斯基)，在一个简单的领域。
必须借还是选择挖？
只需停止表单中的可选字段。但是，如果你想使用它们，你必须清楚地区分哪些输入字段需要被挖掘。对于常见的必填字段，请使用星号(*)。如果您决定在必填字段中使用星号，请在表单页面中显示一个提醒，以澄清星号的用法，因为如果不使用，每个人都会理解它的含义。
MailChimp邮件列表订阅表格。
设置默认值
停止设置默认值，除非您认为主要部门的用户会选择该值，尤其是必填字段。为什么？
如果可以删除故障。用户将快速浏览表单，这样他们就可以跳过一些曾经有默认值的字段。
然而，在那个定义的规则中没有针对智能的默许值——即根据用户的怀疑设置的默许值。智能默许值可以让表格更快更准。例如，根据定位数据预先选择用户位置的国家/地区。不，请小心使用。
智能预选国家的形式
输入掩码
字段掩码是一种帮助用户对输入文本进行模式化的技术。一旦用户将核心集放在一个字段上，它就会呈现一个掩码，并在挖掘和书写的同时主动停止格式化文本，这有助于用户专注于所需的数据，更容易发现故障。在上面的例子中，当输入电话号码和xyk号码时，会主动使用括号、空和破折号。那种简单的手艺，可以减少输入电话号码、xyk、商品d簧时的耗时和斗志。
(图片:乔希·莫罗尼)
PC端:键盘适配
用户应该能够仅通过使用键盘来完成表单。用户的脚趾可以在不分离键盘的情况下收紧编译字段。你可以在W3C的虚形“北”中找到键盘交互的具体要求。
即使是简单的日期选择器也应该服从W3C的指示。(图片:销售力量)
PC端:主动散焦
活动焦点字段为用户提供了一个煽动的起点，以便快速开始挖掘和写表。提供一个清晰的视觉标志，核心已经转移，无论是通过改变颜色的过程，闪烁的箭头。亚马逊的注册表单既有主动聚焦，又有视觉煽动。
移动端:适配键盘
电脑用户喜欢提供合适的键盘。是时候全面使用实现键盘适配了，而不仅仅是一些任务。
(图片:谷歌)
有限输入(主动完成)
随着越来越多的人使用脚踏电话，删除不必要的单词将改善用户体验，减少故障。主动补全可以减少字数。比如挖写place一栏，通常是表单中最成功的部门。地方主动挖填之类的东西(基于用户的定位和精准的输入供给主动性)帮助用户用更少的文字完成输入。
4.标签
清晰的标签是使界面易于理解的方法之一。一个好的标签将向用户报告该区域的目标，并且当核心在该区域时，甚至当它正在被挖掘时，它应该是可见的。
字数
不，标签是辅助文件。我们应该使用简单的形态墨水，这样用户可以快速浏览表单。之前版本的亚马逊注册表单包含了很多单词，导致完成率很低。现在版本很多，标签都很短。
句子风格，借用标题风格？
大多数大学都在使用这种方式，有两种方式接受书面信函:
题目:写出每个单词的最后一个字母。"这是一个标题案例."。
文体:句子的最后一个字母是用英语写的。"这是一个判决案件."。
与标题风格相比，句子风格的标签有一个优势:它稍微容易阅读(从而更快)。虽然短标签之间的差异可以忽略(“全名”与“全名”)，但标签越少，这种差异就会越大。
停止本地写入
不要在本地写，否则表单很容易浏览和快速扫描。
本地编写的标签的长度通常易于浏览。
标签的对齐方式:左对齐、左对齐、上对齐。
MatteoPenzo在2006年发表的一篇与标签排列紧密相关的文章指出，如果标签位于字段上方，表单的完成速度会更快。如果你希望用户尽快浏览表单，顶部对齐的标签是不错的选择。
左对齐、左对齐和对齐顶部标签(图片:UX事项)
顶级标签最大的缺点是不同大小的标签更容易融入用户世界。(这对于空)之间的有限屏幕尤其有效)
(图片:CSS-Tricks)
左对齐标签最大的缺点是完成的时间最慢。这可能是标签战争导致的输入字段之间的视觉分离。标签越短，间隔越近。然而，慢的完成速度并不总是一件好事，尤其是当表单需要敏感数据时。如果你要的是驾照号或者社交安静号，可以故意放慢用户速度，保证输入准确。因此，浏览敏感数据标签是可以承受的。左对齐标签还有一个缺点:它们需要更多的水平后空空格，这在移动和使用方式上是一个成就。
(图片:CSS-Tricks)
左对齐标签的最大优点是标签和输入之间清晰的视觉关系。彼此接近的项目应该是相关的。对于短表单，左对齐标签可以快速完成。但体验其实并不舒服:右边缘不平整，看起来不太舒服，更容易浏览。
(图片:CSS-Tricks)
提醒:如果您希望用户快速扫描表单，请将标签放在字段上的圆圈中。那种规划会让扫描更容易，因为眼睛会间接记忆和移动页面。但是，如果你希望用户仔细浏览，请将标签放在字段的左侧。那种规划会拖慢浏览器的速度，让它停止以z的形式扫描。
占位符文本
一旦字段得到核心，在输入字段中设置为占位符的标签就会消失；用户将不再能够检查它。虽然占位符文本可以用在双字段表单中(例如，具有有效用户名和稀疏代码字段的简单表单)，但当用户需要更多信息时，占位符的体验会更好。
(图片:snapwi)
一旦用户面对面点击字段，标签就会消失，用户无法仔细检查自己是否记下了所请求的内容。这降低了出错的可能性。另一个成就是用户可能会将占位符文本误认为是预先挖掘的数据而忽略它(就像MonkISenNorman一样。
群体眼动追踪研讨会证明)。
作为标签的占位符文本
对占位符文本的一个好的处理方案是浮动标签。占位符文本将默认显示，但一旦输入字段被打孔并输入文本，占位符文本将突出显示并更改为顶部对齐的标签。
(图片:MDS)
提醒:没有必要只依赖占位符文本，因为一旦一个字段被挖掘和写入，占位符文本将不再可见。通过使用浮动标签，方便用户确认自己挖到了准确的字段。
5.小跟班
点击后按钮会触碰到一些动作，比如提交表单。
次要按钮与主要按钮
次要按钮和主要按钮之间缺乏视觉区分只会导致失败。最主要的凹陷是视觉上的凸起，这样可以最大限度地减少出现缺陷的几率。
图片:卢克·乌鲁布莱夫斯基(视觉级)
按钮状态
巨大的表单通常需要一个后退按钮。如果这样的按钮位于输入字段正下方的圆圈中(如下面的第一个截图所示)，用户可能会不小心撞到它。因为后退按钮是为了帮助 *** 控，所以要视觉识别(上面第二种形式的按钮更合理)。
命名和定义规则
不要再用“提交”之类的常用词来暗示，因为它似乎适用于任何形式。该名称应该阐明按钮被点击时将执行的 *** 作，例如“创建帐户”。
多按钮
停止多个按钮，因为它们可以分开用户的目标。每个过程都应该有一个明确的目标，并确保用户知道这个目标。
重置按钮是
不要使用复位按钮。那个按钮几乎没用，而且经常破坏体验。
按钮的视觉表示
确保按钮看起来像按钮:让用户知道它可以被面对面地点击。
阳影暗示你可以当面打。(图片:瓦迪姆·格罗莫夫)
视觉反应
想象一下“提交”按钮，告诉用户它将在明天被处理掉。需要熟记用户的供货回复，同时避免单次重复提交。
(图片:米歇尔·维拉尔)
6.考证
考证是停不下来的，是数据录入不可或缺的一部分(因为用户会犯简单的错误)。虽然只应该减少堕落，但永远不应该缺少考证。因此，最重要的成就是，你如何帮助用户改正他们的问题？
及时考证
用户不喜欢在提交的时候发现自己犯了一个错误。特别沮丧的是，填完一个小表格“提交”后，得到了很多问题。当你不知道你哪里有问题的时候，你会变得更糟。
(图片:堆栈交换)
一旦用户输入数据，用户应该立即被告知文本的准确性。好形态研究的要点是:让用户说话！举报他们有什么错！及时的考证可以告知用户其数据的准确性。
这种方法允许他们更快地纠正问题，并且不需要通过按“提交”按钮来查看它们。
但是，请停止验证每个字段。如果是在大城市，只要在完成输入，就应该停止验证。因此，在数据输入过程中，一旦被研究的领域开始输入数据，就会出现问题。
谷歌的表格会在输入之前注明邮箱地址无效。(图片:中)
如果考证攻击是在用户完成输入之后，用户无法立即知道问题已经被纠正。
在苹果商店，研究攻击完成后正在进入。(图片:中)
MihaelKonjevi在他的著作《形式的内联检查:想象的经验》中检查了不同的考证策略，并提出了满足单一情况的混淆策略:早期奖励和早期惩罚。
如果用户在已经被验证为准确的字段中输入数据(即，先前输入的数据是有用的)，则在数据输入之后它被验证。
如果用户正在已验证的字段中输入数据(即先前输入的数据无效)，则在数据输入过程中将停止验证。
混淆策略:尽早奖励，尽早惩罚。(图片:中)
7.对话世界:想象形式的新方法
最近我们看到了很多在对话世界里通过说话来让人平静的方法。那个标志有几个趋势，其中一个趋势就是人们花在动态和静态沟通上的时间比花在沟通上的时间多。这使得在会话中支持交互的方法在大量的测试中发生，例如，在购物中模拟动态和静态通知的方法。即使在这种趋势下，互动情况也发生了变化。想象一下，老师正在进行一项测试，将传统的网页情况转换为交互式对话。
接受自然语言
每个世界都是一场对话。传统的情况曾经非常类似于对话。唯一的不足是我们提问的方式。然而，如果当我们想象形式时，我们通过揭示真实的人类(而不是机械的)对话来询问结果，会怎么样呢？是的，但是以人类的方式停止互动。上面的表单创建了一个对话，不需要依赖web表单的传统元素(比如标签和输入字段)。
Codrops的形式设想接受对话来帮助用户更好地完成他们的任务。
会话形式
ConversationForm是一个开源项目，它将网页上的表单转换成对话。它可以将所有的输入元素交换成对话和可重用的变量，也显示出对风格的完全掌握。该项目代表我们考虑用户体验和交互的有趣变化，并使用基于文本的对话来帮助用户实现他们的目的。
8.结论
用户可以不愿意挖空心思写表，尽量简单。小的改变(比如分散相关字段，指出字段的含义)可以改善用户体验。可用性测试在表单设计中是不可或缺的。大多数时候，只有少数人停止测试，可能只是让一个同事经历一个过程，让你很好地洞察一个表单的可用性。
制造商:尼克·巴比奇
翻译:
本文位置:https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/
每个人都是这篇文章的产物。翻译团队@雄诺由比利翻译出版，已获本站认可。禁止转载。
标题来自unsplash，基于CC0和谈。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）