热门游戏

体验设计:不起眼却非常重要的表单交互!

时间:2010-12-5 17:23:32  作者:热门游戏   来源:玩家故事  查看:  评论:0
内容摘要:luyee.zcool.com.cn表单是体验什么?是用户和app之间的对话。作为人机交互的设计一种重要入口,一个好的不起表单数据输入方式是很有必要去考虑的。但现实中,非常我们大多设计师和产品经理前期

luyee.zcool.com.cn

表单是体验什么?是用户和app之间的对话。作为人机交互的设计一种重要入口,一个好的不起表单数据输入方式是很有必要去考虑的。但现实中,非常我们大多设计师和产品经理前期设计的交互时候就没有太多的考虑,到最后开发的体验时候就会发现问题,然后就草草了事了。设计那么我们今天就来好好探究下表单设计时要注意的不起表单事项。

一、非常标签的交互设置

标签的设置,我们有时候会很纠结。体验移动端的设计兴起在pc之后,所以很多pc的不起表单使用方法就应用在移动端设计上。首先,非常我们要知道标签的交互作用是什么,它是对输入数据的归类,对用户输入的一种提示。标签分为图标标签和文字标签,图标标签多用在登录等容易理解的场景,用户对这些图标的感知度非常高了,但是也要结合后面的提示文字使用,没有提示文字,用户也会一脸懵逼。

表单错误信息提示_表单错误是啥意思_表单出现错误提示

但是,在表单内容过多的时候,文字标签更常用。要知道,文字的识别度是远高于图标的识别的。常见的标签有顶对齐、右对齐、左对齐。

表单错误信息提示_表单错误是啥意思_表单出现错误提示

马泰奥·彭佐在2006年7月的眼动研究发现,标签如果采用顶对齐方式,用户的视线从标签移动到输入框只需要50毫秒,右对齐方式需要240毫秒,左对齐方式需要500毫秒。

如果从高效上讲,应该是优先考虑标签顶部对齐。但是,我们使用的时候要注意场景,不管是移动端还是pc端,如果全部采用顶对齐的方式,就会占用更多的垂直空间,一旦表单项过多,对表单页的操作也会造成不便。移动端的尺寸很小,尤其需要注意。

所以,单从马泰奥·彭佐来看,如果表单项不多,优先考虑标签顶部对齐;要兼顾高效和页面的垂直空间,则选择右对齐方式。那是不是左对齐标签无用呢?其实并不是,研究也有表明,在涉及到专业性过强,用户不熟悉的表单,需要更长时间理解的标签项时,则可以考虑左对齐方式。

我们试着想下50毫秒、240毫秒、500毫秒,对我们的输入影响真那么大么。一个表单页面的效率可不仅限于读取标签的速度,它还受到输入形式,表单多少,表单布局等各种因素的影响。

然而,移动端中的表单,我们经常看见的是标签左对齐,其原因也以想象:节约空间、统一布局。其实我们在考虑标签的对齐方式的时候,也需要考虑输入内容的对齐方式。常见的内容对齐方式有:左对齐、右对齐。

如果标签采用顶对齐,毫无疑问,输入文字做对齐。若标签采用右对齐,输入文字则采用左对齐。若标签采用左对齐,则输入文字可以采用左对齐或右对齐。

表单错误信息提示_表单错误是啥意思_表单出现错误提示

除了上面所说的标签样式外,浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中,标签文字开始作为提示文字,然后一旦用户开始填写,标签将升到上面,解决了上述提示文字消失的问题。

表单错误信息提示_表单错误是啥意思_表单出现错误提示

虽然这种方式还可以帮助减少页面长度,在移动端特别有帮助。但是它不能解决文本框看上去已经被填补的问题。(Nielsen Norman Group曾做过的一项眼球追踪研究就说明,空的输入框比有提示文字的输入框更能引起用户的关注,而且与空的输入框相比,用户更容易忽略有提示文字的输入框。换句话说,被认为是有用的表单提示文本其实弊大于利,尤其是对习惯大致浏览的用户。)因此,Nielsen Norman Group不建议这种做法,还是应该保持标签在上面,除非页面长度是最重要的设计关注点。

二、输入注意

移动端表单输入,是一个我们非常容易忽略的一个地方。输入方式的不同也是移动端和pc端非常大的一个区别,pc端我们是采用大键盘输入,而移动端是虚拟小键盘。实体键盘输入速度要比虚拟小键盘快很多。由于使用场景不同,很多公司都是电脑网页和移动app同时开发的,然后把pc端的所有功能都移植到移动app上,表单也全部挪到移动端,造成app体量非常庞大,功能也臃肿,用户使用起来非常不便。

我们在做设计的时候,要多问自己“为什么”,采用5W2H法(what、who、when、where、why、how、how much)来审视一个表单的设计,这样我们就能充分考虑设计的各种需求和场景了。

1.减少输入

移动端表单的设计,我们首先要考虑是否有必要输入这个数据,这个数据对我们的影响大么;如果没有什么作用,我们是否应该删除它;如果pc端也有该功能,我们是否可以让用户在pc端进行这些操作。所以常见的方式有下面这几种:

减少文字-考虑这个字段是否有必要,如果对我们没有任何作用,那我们删除它吧。移动不是pc,动不动就输入几百上千字那是不可能的,所以在输入文字的时候可以做个限制,让用户输入重要的信息即可。对于输入框,我们应该直接告诉最多输入多少个文字,让用户有心理预期。

变输入为选择-选择很多情况下比输入是更快的,而且这样也能规范我们录取的数据,这样也能快速筛选我们的数据,前端和后端也更容易识别读取。

新开页面输入-有时候我们一个表单的内容很多,输入和选择混杂在一起,输入的文字也非常多,那我们可以可以考虑在当前页面展示,输入则进到新开页面进行。

表单错误是啥意思_表单出现错误提示_表单错误信息提示

2.默认文字

我们在录入表单的时候,通常会有默认提示文字,帮助我们更好的理解需要录入的内容。一旦表单获取点击焦点,提示文字就消失了,用户不再能看见它。所以这样其实是有个缺陷的,这会让用户产生短期记忆的压力而增加错误的机率。在移动端这种缺陷是被大多数忽略的,因为多数情况下默认文字是非常简单易理解的,如果出现非常复杂的提示,则我们应该增加说明文字进行说明。

默认文字需要注意的几个地方

3.区分标签、默认文字、录入内容、不可更改内容

我们在做表单的时候,一定要注意表单的层级,不要让用户在这里迷失。常用的方式就是以字体大小和颜色来区分标签、默认文字、录入内容、不可更改内容。至少采用三个文字颜色来区分这个层级,常见的是深色(标签)、中灰色(输入内容)、浅色(默认提示)或者是中灰色(标签)、深色(输入内容)、浅色(默认提示)

表单错误是啥意思_表单出现错误提示_表单错误信息提示

4.键盘选取

键盘,是很容易忽视的一个地方,很多情况下不去定义键盘类型,最后导致我们用户体验较差。但是有的使用场景用户体验的等级是较低的,比如银行,他的安全等级是最高的,所以很多银行的键盘采用的是打乱的键盘。所以,即使是为了安全性,相对于用户输入体验差,我们也更应该考虑键盘的选取类型。所以在交互稿或者是产品文档中应该注明键盘的类型,以免开发工程师采用默认的类型,造成用户体验差。

iOS、Android提供多种键盘类型布局,常用的键盘类型布局有:(参考#)

表单错误是啥意思_表单出现错误提示_表单错误信息提示

5.数据兼容键盘

键盘选择好后,也应该考虑键盘弹出时,页面的展示方式。有的app在这里没有考虑太多,弹出的键盘直接把输入文本框挡住,造成用户体验非常差。所以,当你的输入框在键盘的下面的时候,应该将输入框推到键盘上面,保证用户输入的可见性。

表单出现错误提示_表单错误信息提示_表单错误是啥意思

6.文字高度自适应

在输入文字的时候,我们应该明确表单输入的文字的最小值与最大值,然后根据最大值和最小值来确定最后的展示方式。对于输入文字较少的,我们可以一行展示,比如姓名,通常一行可以展示完整,给个最大限制就行。当你的文字大于一行所承受的范围时,你就要考虑是否要自适应高度显示文本内容了。

如果在设计的时候不考虑这些,开发很容易忽略这些问题,然后你就可以看到一大堆文字盖在标签上了。最好的方式就是把输入的文字全部展示出来,如果你为了节约空间,也可以一行展示,多余的用”…"表示。我们还可以采用新页面来专门输入,这样就解决了这个问题,也不怕文字过多了。

对于备注或者反馈等大量文字输入时,我们需要给文字输入框更大的高度,保证在大多数情况下能正常展示。通常是有限制字数的(微博的140字),如微信个性签名会在输入框的右下角告诉你还可以输入多少字。采用这种方式,告知用户还可输入多少,以免造成不好的体验。

表单错误信息提示_表单出现错误提示_表单错误是啥意思

三、告知必选

为什么会出现选填和必填呢,很多情况下是为了让用户快速完成操作,就把不是必须的选项采用可选的方式进行操作。尤其是在b端设计中,需要录入用户或者商家的信息非常多,很多时候为了让商品信息更加全面,所以会把所有规格参数一股脑的展示出来,这个时候用户就懵了。在移动端,使用场景也不固定,用户很难会有大量时间来录入更多信息,所以区分出选填和必填是非常有必要的,然后用户可以在有空的时候完善信息。

那如何区分选填和必填呢,常见的有

这样就能最高效率区分出来必填字段和选填字段,但现在大部分互联网用户对于「*」就代表必填这都已领会,所以笔者还是推荐在表单中尽可能用「*」去区分必填和选填,毕竟这属于最通用的方案。但是,当一个表单都是必填时,就没必要全部标记出来了,比如登录表单,大家都知道登录表单中的标签项都为必填,同时也可以根据标签项是否输入的状态来激活「登录」按钮。

表单错误信息提示_表单错误是啥意思_表单出现错误提示

四、合理组织信息

组织是简化设计的一个重要策略,尤其是大批量录入表单的时候,我们更应该合理组织信息。移动端表单过多的时候,用户很难定位到需要更改或者注意的地方。通常采用下面的方式来合理组织表单信息:

表单错误是啥意思_表单错误信息提示_表单出现错误提示

copyright © 2024 powered by 窑炉游戏网   sitemap