字段输入交互规范(Web)
2018-11-30
来源:趣链科技
浏览量:199

Part1 前言

一、字段输入交互规范是什么

用户在登录、注册、填写表单的过程中需要输入字符,完成系统要求填写的内容,并提交给系统进行验证。在这一系列操作中,用户在输入前、输入中、输入后这三个环节需要与系统进行交互,涉及了输入内容的提示、输入内容的校验以及输入后系统的反馈等界面交互方面的设计。

二、文章简介

我们希望制定一个规范,一方面是让自己能够通过项目中的经验结合同行、业界已经总结出来的结论得出一套较为规范的表单输入交互规范,让自己的设计更有说服力。另一方面也可以将这个规范应用在公司以后的项目中、给其他产品设计人员提供一些参考或推广应用在公司范围内的项目中,让本公司的交互能够更加统一、规范,让前端、测试人员提升工作效率。

当然有些规范可以制定的很细致很精准,例如身份证输入的校验规则、电话号码的校验规则。但有些规范我们只能抽象出一个规则给大家做为参考,例如提示文案的一般写法、什么时候需要使用长驻的提示文字,这些就需要产品、设计人员根据不同的业务场景进行相应的调整。

本文也会对较为细节的交互进行思考,例如「输入框中是否需要提示文字」、「输入内容校验是在输入过程中还是在输入完成后」、「Web端输入需要做输入字符类型限制么?」等大家可能思考过的问题,我们会给出我们的一些思考与建议,因为这些问题也确实各执一词,包括我们内部的讨论中也无法很好的达成一致的建议。

三、项目背景

在经历的一些项目中,设计师经常会遇到以下情况:

A 考虑不全。在项目中,我们会对大部分的输入框的状态进行说明,例如「最大字符限制」、「空状态的反馈」等,但有些时候难免会考虑不全,如「注册时候手机号的判重」、「输入框中的提示文字」、「系统回显的字段」等,同时测试也经常会反馈给设计师一些没有考虑到的限制条件,但这些限制条件没有通过文本形式记录下来,所以很容易遗忘。

B 不一致。不一致性体现在文案和交互操作方面。文案中,可能有时候错误反馈显示「请输入正确手机号」,有时候又显示「手机号错误」,文案的措辞没有统一的规则。交互中,有些时候是在输入结束后才显示校验结果,有时候又是在输入中显示,由于没有统一的规则,而且交互稿中又不会每个输入框都标明校验的时刻,所以前端在开发过程中很容易自由发挥,最终导致交互的不一致。

C 重复劳作。由于没有一套统一的文档来规范字符的校验规则,所以不同的项目组又各自生成了自己的一套校验规则,产品经理也对每个输入框的限制重新做了思考,产生了重复的劳动量。

D 交互细节模棱两可。对于有些细节上的交互,设计师自己也不知道这样做是否正确,在受到开发质疑的时候无法坚定立场。例如「金额是否要做字符输入上的限制」、「字符长度超过限制后是允许继续输入还是吃掉」。

四、项目目的

我们希望通过以下几点来解决上述问题:

  1. 对于字段考虑不全的问题,我们会整理出尽可能全的输入过程中需要考虑的因素,形成一个清单,方便以后交互上的设计与走查。

  2. 将一个项目中的所有字段类型都罗列在一个表格中,开发和测试可以根据这份表格去寻找相应的字段输入细则,也减少设计师在交互稿中对同一类型字段的标注。

  3. 将一些通用的字段形成一份可以共享的《字段校验规则》文档,不同项目组依据这份文档去维护形成自己内部的一份文档,字段规范小组会定期根据各个项目组内部的字段规范文档来补充或更正这份文档。

  4. 对于输入字段规范的交互部分,我们会输出一份《字段输入交互规范》,保证同一项目或不同项目组之间都能保持较为统一的交互方式,减少错误的交互形式,让输入操作更加友好。

Part2 元规则

用户在输入表单时,系统承担的是一个协助者,指引、协助用户完成正确信息的填写。

在用户不知道如何填写的时候给予帮助,在用户无意输入错误的时候会及时提醒他,并指出错误原因,以帮助用户进行修正,输入正确的信息。当然,为了保证录入系统中的数据是符合要求的,系统需要对录入的字符进行严格的准入。

在制定较为细节规则的过程中,我们总结出了一些可以指导后续规则制定的元规则,以保证后续的规则是有理可依的,也减少规则之间的冲突。

一、用户在输入过程中不要宣布他做错了

在当用户处于任务进程中的时候,由于任务还未完成,系统不能断定用户就是错的,如果用户真的输入错误了,可以在用户完成输入操作后再显示错误信息。

有些设计在用户输入过程中也会对用户的输入行为进行反馈,例如,在密码设置的时候会及时显示当前输入是否符合密码设置的要求,但这种设计也大多使用对勾的形式,而没有显示错误。毕竟在用户还在进行自己操作过程中就说他做错了是一件很不爽的事情,就像开车的时候老爸一直说你开的有问题。

二、预先提示,减少出错

如果一个输入内容需要提示信息的话,需要尽早告知用户输入的内容和格式,一方面用户可能根本不理解这个输入框要求填写的内容,另一方面当用户输入完成后,再弹出一个错误提示,让用户承受本不该承受的责备。如果在软件设计过程中事先将输入要求告诉用户,会减少用户犯错的机会。不要追求UI的简洁、美观,而用错误提示来替代输入前的提示文字。

三、实时校验,及时反馈

每个输入框输入完成后及时给用户提供反馈信息,避免用户自认为输入正确,而最后提交表单后发现很多内容需要修改造成的多余劳作。

四、如果你的提示信息能够更有效的帮助用户进行输入,那就考虑添加上你的规则

这个文档是较为基础的交互规范说明,可以减少产品中输入行为交互设计上的错误,如果你有更好的设计方法,能够提升用户输入的效率或提升用户的输入体验,还是非常欢迎应用在你的产品设计中。

Part3 提示信息

提示信息是在用户输入之前,事先告知用户填写内容与填写规则的信息,它们可以帮助用户理解输入框的含义以及输入的格式。我们将提示信息概括为4种类型,分别为输入框内提示、长驻提示、动态输入提示icon提示。

一、输入框内提示

输入框内提示是指在用户没有输入前,在输入框内容展示的输入内容提示信息。由于用户输入过程中提示信息会消失,所以提示信息应该是容易理解和记忆的,用户不会在输入过程中忘记需要输入的内容和格式。输入框中提示的类型一般有:格式提示内容提示。

1.格式提示

格式提示是建议用户按照输入框中的范例进行填写,它起到一个软约束的作用,因为用户完全可以不按照提示的格式进行输入。如果系统对输入框中的字符扔要做严格的校验的话,完全可以将输入框格式化,这样更能约束用户的输入行为。对于格式化的输入框,一般每一个输入框都会有对应的提示信息。有时也直接将输入内容的前缀后缀预先填好,让用户更加清晰需要填写的内容。


2.内容提示

内容提示是指在输入框中提示用户需要填写的内容。

第一,有时输入框标题可能让人对填写的内容不够清晰,比如“用户名”可能是邮箱,可能是姓名昵称、也可能是手机号等。这种情况下,在输入框中添加提示信息可以让用户清楚的知道该填写什么内容。

第二,“请输入”或其他类似的提示语可以给用户亲和感。避免标题给用户带来机器的冰冷感。第三,有时为了保持系统的统一性,我们将所有的输入框中都加入输入内容的提示,可以增强平台的统一性。


3.无提示

在我们的调研中发现,不是所有的输入框都包含提示信息。也有人持有观点认为,空的输入框更能清晰的让用户感知到哪里还没有填写。且很多输入框的标题已经能够清楚的表述需要用户输入的内容要求。此时,如果表单中没有特别需要提示的内容时,也可以不添加任何提示信息,以「空输入框」的形式展现。

Don’t put Hints Inside Text Boxes in Web Forms, by www.uxmatters.com

二、长驻提示

长驻提示是一直显示在输入框周围的提示信息,它由于不受输入框长度的限制,所以可以展示更多的内容。长驻提示一直展示在界面中,用于强调用户一定需要去阅读的信息。常用长驻提示信息的场景有三种。

  1. 展示输入限制

  2. 告知用户填写该字段的意义和必要性

  3. 告知用户填写完成后会带来的影响


三、动态输入提示

有些表单会在用户将输入焦点放在文本框上时才显示输入提示。隐藏的提示不会把界面搞乱或增加视觉噪声。但在用户激活文本框前,他们看不到任何提示。这种情况适用于不需要用户提前思考或很困惑的字段的提示信息,可以作为一些长驻提示的替代。比如在设置密码是也可用这种提示方式,在用户输入时对应的提示信息实际上也是常驻的。


特别:在设置密码时,常用一种实时校验是否符合每一条要求的方式。一般是在用户键入输入框时,在字段下方出现分条的提示信息,也属于动态输入提示的一种。这种方式一般适用于设置密码的情况。


标  签: 系统开发,交互设计,产品设计

联系我们

010-84150507
售前服务
技术支持 Service@qeebu.cn
留言