青竹联盟_联盟广告游戏推广平台

现在为止客户体验度最好的表单:浮动标签式的表单

2021-09-01 11:22栏目:网站运营

在当今这个网络年代,填写表单对用户来讲就是家常便饭,在网站进行注册登录时、在网购时,都免不了填写表单这一环。表单是网站设计中要紧的组成部分之一,在获得用户信息方面发挥着必不可少有哪些用途,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户实际转化的比例就越高。这也是为何很多站长们一直在研究怎么样设计表单才能让用户迅速高效地填写。现在,关于表单设计的办法也愈加丰富,这不,近期又兴起了浮动标签式的表单,不少设计师觉得这种设计手法在提高客户体验方面的成效非常是显著。所以今天小飞就来介绍一下浮动标签式表单的进步历程与它到底有什么优势。

在介绍浮动标签式表单之前,大家先来认识一下表单的组成部分:

标签:告诉用户表单问题是什么;

1. 更小的视觉重压

虽然固定式和浮动式的标签同样只有4个字段,但在顶部固定标签式的表单中,用户其实需要浏览更多的内容,这是由于固定式标签和输入框是分开的,是有肯定空白地区的,在用户看来,这完全是8个需要浏览的字段。用户在进行视觉处置时会下意识感觉信息量比较密集,需要填写的内容丰富。而在浮动式标签中,标签字段相对而言占据较小的地方,主体输入字段愈加显眼,不会给用户带来视觉上或心理上的重压。

阶段2、浮动标签

虽然浮动式图标动画没达效果果,但却给了设计师一些启发和想法。随之而来的就是浮动式的标签式设计了。在这种设计中,当用户点击输入框的时候,作为占位符的文本标签会向上浮动到输入框的上方,这种动画成效能让用户了解标签和输入内容之间的关系。另外,标签的颜色也会有相应的改变,能让用户知晓什么输入框正处于活动状况。浮动式标签的优势非常明显:简单、明确、可用性高。

看到这里,相信大伙对浮动式标签已经有了肯定的认知。下面小飞将通过传统的顶部固定标签和浮动式标签的对比,让大伙对浮动式标签的优点有愈加深刻的认识:

输入框:供用户填写答案信息;

动作:用户提交表单,即用户点击一个按钮或链接,实行一个操作;

帮文字:为怎么样填写表单提供帮;

输入反馈:针对用户输入给出反馈,输入正确还是错误;

2. 更容易检查

在表单填写好之后,用户一般都会迅速地检查一遍其中内容,再进行提交。而在顶部固定式标签中,彼此独立的标签和输入框会让用户在检查字段内容时浪费不少时间。这是由于标签和输入框之间有肯定的分界线,用户需要上下扫视匹配输入内容和对应标签,以确保填写的字段是正确的,这无形之中就让检查工作变得繁琐复杂。

除去顶部固定标签外,这还有一种可用的表单设计模式。那就是让标签作为占位符置于输入框中,当用户点击输入时候就自动消失。这种设计同样也存在问题,虽然它们看起来非常是简洁,但用户在输入内容时比较容易忘记需要输入的字段是什么。这种需要考察记忆力的设计方法加重了用户的认知负担。

而第三种解决方法就是大家目前所说的浮动式标签,它结合了前面两者的优点,又成功的避免了两者的缺点。一方面,浮动式标签占据地方较少,不会产生固定标签那样的视觉障碍,简洁的设计能够帮助数据的顺畅检查;另一方面,标签在用户输入的时候只能自动上移而不会消失,这不会让用户感到疑惑,减少了认知重压。

3. 更明显的视觉焦点

在移动界面中,怎么样控制视觉焦点是非常重要的。这是由于因为屏幕的限制,用户通常都是看着界面打字的。只有他们完成了内容输入后,他们才会回过头去看自己输入了什么,与输入的自动是不是正确。输入框的视觉焦点越明显,用户在填写信息时会感觉越便捷。下面是3种不一样的表单设计模式下的输入地区的可辨识度对比:

第一种是顶部固定标签。这种设计中输入框的字段突出,但标签的辨别度不够;

第二种是用户输入时标签消失的设计。这种模式下字段足够突出,但文本标签就完全看不到了,用户没办法判断输入内容是不是符合需要;

第三种是浮动式标签。这种模式下标签和输入字段在色彩和尺寸上都作了区别,且边框和标签都围绕着字段,主次分明,视觉成效较好。

4. 更明确的显示错误反馈

不管表单采取哪种设计模式,当用户输入信息错误时,表单都需要即时显示错误让用户调整内容。在这种需要下,顶部固定标签和浮动标签的设计模式都能更为明确地传递显示错误信息,而输入时隐藏标签的设计则只能通过输入框的色彩来辨别,相对而言可辨别度较差。

老实说,不管大家探究出了多少最好的网站实例,多少最新的时尚设计趋势,大家也没办法确保用户对网站的反应。由于影响用户与网站进行互动的原因实在是太多了:用户对设计趋势的熟知程度,用户的用习惯等等,甚至不同年龄段的用户针对同一种设计都会呈现出不一样的反应。所以说,测试必不可少,毕竟实践才是检验真理的唯一途径。在进行表单设计时,大家也要针对目的群体、不同设施等进行测试,如此才能知晓哪种设计模式更符合我们的品牌特点,更能发挥功用。

最后,小飞想说,用户填写表单时,比较容易产生迟疑而放弃。要想通过表单获得用户信息、提高客户体验、提升用户实际转化的比例。大家需要尽可能简化这个过程,关注每一点细微的变化,无论是标签的显示形式还是标签的颜色,尽可能增强它的可用性。快来起飞页智能建站平台(http://www.qifeiye.com/?t_wd=a5)搭建一个响应式网站吧!

浮动标签式表单的进步历程:

阶段1、文本占位符旁的图标动画

早在2013年,浮动标签式这个定义就已经出现了。当时设计师的想法非常简单,在占位符文本中,借用动画加入一个图标显示,以确保用户不会在填写信息的过程中迷失。不过,这种形式有一个缺点:并非所有些文本标签都有可以搭配的图标,没图标搭配的文本标签在传递信息时不够明确。