商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:

对于网站Web端表单的交互式设计思考

发表日期:2022-03-10 11:10聚圣源浏览次数: 本文关键词:必填,标签,表单,用户,文本框,填写,出现在,位置

每当页面中出现洋洋洒洒的表单,用户就会开始感到头疼,有些用户就会直接选择放弃,而我想讨论的是,如何面对表单时让用户直接注意他们需要填写的必填项,减少不需要的信息的干扰。

必选项是以什么形式出现在现如今的表单中的呢?

1、 表单信息的表现类别 下面是一个关于web表单设计的调查报告,这个结果来源于100个令人瞩目的网站。

41%的网站使用标签右对齐 (YouTube, Facebook, Metacafe)

30%的注册表单使用顶端对齐(Behance.net, Wufoo, Tickspot, Mixx, DZone)

29%使用的是标签左对齐((Digg, Ning, Wykop.pl, 43things, StudiVZ)

2、 表单的应用范围 1) 注册

2) 登陆

3) 填写信息(支付,订单填写,个人信息填写等)

4) 发布

3、 必选项显示形式 1)以*展现形式

a)*在信息标签的左侧

b)*在信息标签和填写信息的右侧

c)*在信息标签和填写信息的当中位置

d)*在信息标签右侧

2)非*必选标志

a)非*icon表现形式

b)无必选项标志(都是必选项)

c)标注非必选项

d)暗提示

4、 必选项的深入思考 1)*和非*思考

a)*作为一个用户习惯已经存在了很多年,现在用户只需要看到文本框前面的*就基本知晓其为必选项,有些网站已经将“*为必填项”之类说明文字也直接隐藏了。那么对于这个用户基本不需要太多思考就知晓的图标,对于需要简化用户思考的表单来说确实要优于一些其他的非“*”icon的出现了。

b)有人会疑问一个表单,如果都是必填项,还有必要用*去标志出每个必填项吗?在没有必填项标志的时候,大部分人会有两种不同的理解,一类人会认为,这些均为必填项,而另一类人则会理解为此处均为非必填项,那么在这种情况下,如果标记了必填项可以满足不同人群的思考。

还有人,会疑问在一个表单中大部分项为必填项只有少部分为非必填项时,我们是否可以直接在非必填项旁标志出非必填的标志呢?当一个页面大部分为必填项时,而只有少量非必填项时,非必填项如果做的太弱化会导致整页无法区分必填还是非必填;而如果非必填项做的太过突出的话又反过来突出了页面中需要弱化的信息项,用户反而会去焦点关注在他们可填可不填的项中,有点适得其反。

因此,我还是认为当页面中的表单,无论是全部都是必填项还是大部分必填项,我们还是以“*”标出,这样也能使各类用户都不产生理解性的错误。

当然了,不同情况下的运用当然也有所不同,例如:用户在登陆时的认知,通常用户在登陆时输入项如用户名,密码等信息,而且此些项也基本是必填项,在这种认知的基础上,即使不出现*也不会造成任何理解性问题,那么作为精简原则来说,通常可以去掉*。

c)文本框内必填项暗提示,也是一个比较清晰标志必填项的方式,并且还很节省空间。

但是现在很多网站都在文本框中对文本框填写方式做其他暗提示,这个时候必填项暗提示就相对会被限制使用的范围了。作为必填项暗提示标志,还有两个致命的缺陷就是,当我填写完成时,我并不了解哪些是必填项哪些为非必填项,还有就是对于radiobox、checkbox、下拉框的必填来说也没有很好的解决方案。因此,在使用必填项暗提示时,在表单形式为文本框,并且文本框内无其他暗提示语句的时候也可以使用。

2) *思考

a)用户对于表单的视觉走向

从这张热点图中可以看出,对于表单类别的视觉走向是以左边标签为主向右延展。大部分用户集中在标签位置,通常用户填写顺序也是从上至下的,从左至右,较少用户会选择跳跃式的填写模式。

b)*位置

从上述用户视线流可以看出,*的位置应该在标签附近,并且能够整齐排列(这个可能还需研究)会更一目了然的展示出必填项。

这个时候作为:

标签左对齐的时候,*直接出现在标签前面,明显比较优,但是由于标签左对齐对于表单来说,标签项和填写项位置离开太远,可能会让用户搞不清楚到底哪个标签对应哪个文本框,因此此类标签方式不太赞成出现。

那么标签右对齐的时候,*出现在标签与文本框当中,个人认为相对前一种来说要舒服很多了。不仅使得标签项和*标志和文本框等都离得很近,而且*的位置还可以成一直线对齐。如果*出现在文本框或者其他项的后方,会使得用户不得不跳跃视线,并且他们在填写完成时才意识到哪些是必填哪些非必填。

标签顶对齐,此类方式,经常出现在宽度有限制的时候,也是目前经常看到的表现方式。按照之前的理论来说此类方式为了视线流更好的展示,个人认为标签前面带*会比较好,这样使得*、标签、文本框位置最近,也使得*能成直线展示。

当然还有一类特例,就是表单一行有多个填写项,这种方式*如果位置不当,很容易让人误解*的位置,如下图:

此图中,姓名前的*很容易让人误解为是下拉框出的*。因此这时候*位置如果在标签和文本框当中可以很好的规避此类误解。

虽然目前,我们认为标签右对齐,*出现在标签与文本框当中方式较优,但是也会出现特例,比如当出现radiobox的时候如果*出现在标签和radio当中,那么就会如下图:

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/1211.html

网站设计案例推荐

热门文章

企业网站备案需要什么材料?需...

网站备案就像身份证一样,当企业进行网站改版或者次做网站需要进行域名备案工作,工作由当地的工信部门管理需要准备那些材料那?一起来看一下吧! 企业网站备 1、办单位有效证件扫描件上...

日期:2021-03-04 浏览次数:8000

手机建站教程:手机网站建设的...

手机网站建设的定义 在中国,有4亿网民正在使用手机浏览产品和服务信息,可以让您随时随地处理客户咨询、客户预约、企业管理,赋予您一个8小时之外的移动秘书。我们对每一个手机网站都会...

日期:2019-11-04 浏览次数:8000

网站超链接怎么做 其实很简单...

如何创建站点超链接?SiteTime是一个站点中很常见的元素类型,在 HTML入门教程中,也会解释什么是 a标签, A标签就是做站点 Time的标签。 站点超链接生成方式 修改后缀为 html的新 txt文件 打开记事...

日期:2021-06-02 浏览次数:7999

挑选适合自己的网站建站程序技...

在互联网发展突飞猛进的今天,网站建站已不是什么稀奇事儿,也没有大家想的那么复杂,但要做好就有点难了。经常建站的人都知道,想建好一个网站,选择一款适合自己的建站程序很重要,目...

日期:2019-12-16 浏览次数:7998

都说自助建站更便宜 和手工建站...

费用对比 1、经济、标准型企业网站费用比较 网站建设费用:总费用1800元至3600元,含域名、100M-200M的优质空间(可自由增加)、110M企业邮局(即你的域名后缀邮箱帐号)、网站制作设计、有后台...

日期:2019-11-08 浏览次数:7998

相关文章

营销型的企业网站要具备那些特...

网站需要具备什么样的功能才能更好的去辅助seoer 去优化网站,快速提升关键词排名。 1、搜索引擎排名,让目标 关键词 排名到搜索引擎首页 2、让目标客标客户产生询盘或者直接购买 那么它一定...

日期:2019-07-25 浏览次数:5975

网站建设教程:PageAdmin网站系统...

公司之前老网站采用的织梦网站系统,由于最近被黑客攻击导致挂马,并且官方停止了更新,领导要求新的网站采用pageadmin网站系统重新改版,小编在学习和使用中学到了有很多实用的技巧,其中...

日期:2019-08-19 浏览次数:7068

如果用户不喜欢隐藏菜单栏 那么...

网站的空间都十分珍贵,对于屏幕空间十分有限的移动端网站来说,更是如此。所以,为了能在一屏之内尽可能的多加入内容,很多设计师会在移动端的网站中选择隐藏式菜单,这其中最为常见的...

日期:2019-12-17 浏览次数:5821

网站建站a标签点击不跳转几种教...

钟振森在写程序以及改程序的时候,一般都喜欢做笔记,记录一些常见代码,自己下次也比较好找到,以及把自己的笔记分享出来,希望能对你有所帮助。 1、onclick事件中返回false 1a href="https://z...

日期:2020-09-18 浏览次数:6773

织梦建站技巧:如何提交自定义...

用织梦制作网站时,很多客户需要有在线留言功能,这时就会用到自定义表单。 但是很多用户觉得经常登陆后台查看留言信息太麻烦了,于是想能否在提交留言是直接把内容发送到指定邮箱。 织...

日期:2020-09-28 浏览次数:5165

随机推荐

模板建站的缺点 你了解多少?...

网站建设选自助建站,还是定制...

浅谈网站服务器的负载能力问题...

推广域名在微信中被拦截、封杀...

为网站申请和配置StartSSL的SSL证...

外贸建站程序用什么比较好?该...