《Web表单设计》读书心得

本书一共14章,讲了三部分内容:表单结构、表单元素、表单交互。表单是横在用户和企业之间的一道障碍, 没有任何人喜欢填写表单,不合时宜的表单往往会让用户反感,从而终止我们给设定的任务,比如说购买。而设计表单就如同设计模式一般,有规律可循。尽量减少用户填写表单时候的反感是每个表单设计人员必须首要考虑的因素。

表单结构部分:

1. 表单的问题,能够不问问题,就不要问,精简问题。

2. 怀着面对面交流的心情来设计表单,就像日常谈话一样,把用户填写表单的过程设计成一次对话,你说出标签,能够让对方反应出需要做什么。

3. 将问题有逻辑的组织起来,比如个人身份信息,安全条款,邮寄地址等,在表单里面用不同区域分开, 每一块专注一个逻辑,就像谈话一样。

4. 可选问题,可以在表单填完后给出,这样减少侵略性,这些问题可能会得到更多照顾。

5. 进程提示,比较大的表单,分页的表单,要有识符,当前填到哪一步,是否完整,要标示出来。 二级进程提示,把表单里面的逻辑表单块也列出来。 如果进程提示没有固定的步骤,那么可以采用笼统的,没有明确期望的进程提示。

6. 表单命名,链接上的名字和表单实际页面上的名字要保持一致

7. 表单起始页,当有大量东西要填的时候,在起始页提示用户要做什么准备,比如ID,驾照,护照,银行卡等,不要等到花不少精力之后,发现缺失必要物品而无法继续。

8 建立视觉线,清晰完成路径,标签,输入框,主要动作按钮形成一个垂直轴

9. 填写表单的界面,应该减少噪音,减少其他任务路径,用以减少用户退出表单填写的几率。

表单元素部分:

标签对齐方式,书中讲了有5种对齐方式:

1、顶对齐表单:是几种类型的表单中用户完成速度和完成效率最高的,因为这种排列方式为用户提供了非常清晰地浏览线(垂直方向),用户的视觉焦点不需要跳跃就可以浏览到所有表单项;同时顶对齐表单灵活性也比较强,标签长短有较大的调整空间,适用于需要多语言显示的网站。其缺点是占用的垂直空间较大,不适用于表单项很多以及包含人们不熟悉的填写项的表单。


2、

左对齐表单:

因长标签会增加标签与输入框之间的距离,从而拖延完成时间,所以左对齐表单是三种表单中用户完成速度最慢的,但是因为这种方式便于用户浏览标签,因此适用于含有用户不熟悉的填写项的表单,让用户能够认真思考标签含义,从而提高填写的有效率。左对齐与顶对齐相比还有一个优点,即占用垂直空间小。

3、右对齐表单:用户完成速度介于顶对齐和左对齐之间,与顶对齐相比占用垂直空间小,与左对齐相比易读性降低(标签在垂直方向上参差不齐),是国内注册表单中较常用的一种(如新浪微博、开心、人人等)。

4、输入框内标签:光标放入输入框,标签迅速消失,以便用户能轻松填写,是一种可靠地交互方式。但是有时候标签会很快消失,有时候标签会留在输入框中成为答案的一部分。填写时,输入框内标签消失,因此答案情境也随之消失,如果突然忘了要回答什么,一时会找不到标签。因此如果表单较长,输入框内标签并不是好的解决方法。输入框内标签更适合用于只有一个问题或是几个输入框问题非常熟悉的表单。


5、混合对齐:不知道作者所说的混合对齐是什么样的表单,但是日常应该是用过的。可能有的时候混合对齐表单也能很好地辅助用户填完表单。


输入框有6种类型

1、文本框:允许人们选择输入任意数量字符,一行或者多行。

2、单选按钮:允许人们从两个或多个可见互斥选项中选择一个,由于单选是互斥选项,应当有默认选项。

3、复选框:允许人们选择列表中的任意选项,一个或者多讴歌,数量不限。使用复选框时应当确保选择输入框或者其标签都能激活选项。

4、下拉菜单:允许人们从两个或多个排他性选项中选择一个答案。不使用时,下拉菜单仅显示当前被选项。如果互斥选项较多时,下拉菜单比复选框要好,下拉菜单占据屏幕空间小。一般情况下尽量避免下拉菜单中有太多选项。

5、列表框:可作为单选按钮使用,也可当复选框使用。列表框可以像下拉菜单一样显示更多选项,而占用空间比单选按钮或者复选框要小,但是列表框的单选或多选的性质容易给人带来困扰。

6、按钮:产生动作


1. 采用合适的长度,不要所有长度都一致,不利于暗示用户输入内容。 如果长度不能起到暗示的作用,那么就尽量一致。  比如postcode 6位

2. 必填项和可选项需要明确标示。 required * 显示图例, 或者写上required,  或者optional.

3. 采用视觉分割对齐的方式,对输入框进行分组:  组合行生日的年月日, 相关型, 包含型(checkbox里面包含细节的输入)

帮助文字:

1. 帮助文字应该非常简单,如果需要大段的说明来进行帮助,那么也许这个问题的问法存在一些不妥的地方

2. 帮助旨在消除用户疑问,比如隐私保密方面,安全方面

3. 帮助文字适时弹出,自动显示帮助文字。需要能够让用户控制打开,或者关闭。 另外弹出的帮助文字的位置也要考究。体现相关性,另外不能遮盖其余的表单元素。

4. 自动即时帮助,在帮助信息最合适的时间和位置显示帮助信息。用户激活的帮助,采用可点击的图标,点击之后才显示帮助。用户激活的帮助区域,显示在表单中的一致位置,利用更大显示面积,提供广泛的帮助文字和内容,人们可以在固定位置显示找到帮助内容。

表单交互部分:

1. 及时验证输入内容,用户名(重复),密码(是否符合安全级别), 电子邮件。注意验证的时机,需要等到输入完成以后再验证。

2. 多页表单,多模块表单输入的时候,需要采用正确以及错误的图标,标示已经完成的模块的正确性。

3. 及时反馈还可以提供一系列的正确答案给用户选择,这种体验会更加舒适。

4. 格式转换, 当用户输入的数据与预期的格式不一致的时候, 等用户输入完,立刻进行格式的转换,然后再验证输入是否正确,给出提示。

5. 限制的交互,比如某些输入框有长度限制,超出长度的输入,则给出红色的提示,并警告会截断多下的字符。 而不是简单设置一个文本长度,让之后的输入都无法进行。

基于选择的输入:

1、页面级选项:把过程明确分为两步,是解决表单中选择输入问题最简单的方法,但是一旦做出选择,两步模式就会失去情境关系,无法查看并访问未选选项。


2、

水平选项卡:

选项卡显示一组初识选项,发挥当前选择强大指示作用。但是这种方法很肯会降低人们的效率。因为很多人都是习惯自上而下填表,所以可能会忽略水平选项卡,而且这种选项之间是否互斥也不够清晰。该种方式会让用户视线从屏幕左侧移到右侧,偏离了填表过程中清晰的线性扫描。


3、垂直选项卡:垂直选项卡选择性输入将后续问题显示在初始选择的右侧,隐藏了无关表单控件,只在人们需要时才出现。确保了选择一个单选按钮后眼镜不需要太多移动。垂直选项卡基于选择的输入方式中,眼球不必在初始选项和额外输入之间来回移动。


4、下拉列表:下拉列表利用菜单和分组框将所有季宇轩额的输入放在表单中的特定区域,虽然这样会隐藏大部分初始选项,但使用单一控件可能会更好地传达初始选项的范围和影响。允许人们从潜在初始选项的长列表中选择后续问题,而不占用大量屏幕区域。


5、单选按钮下方显示:保持你所有初始选项适中可见。选择性输入下方的显示方式将后续问题显示在初始问题下方一致位置,通过强烈视觉指示来表明初始选项和额外输入之间的依赖关系,有助于更清晰地表明两者关系。但是,当额外输入很长时,如果人们改变选项,屏幕刷新来更改额外输入的内容,页面跳转的效果会导致人们迷失方向。


6、单选按钮内显示:选择性输入内显示方式将后续问题直接显示在每个初始选项下方,如果额外输入很少,该方法可以保持初始选项的情境,同时又能在最相关的地方显示所需输入的选择性输入。对眼睛压力小,能迅速完成。但是如果选择性输入数量很多,页面跳动加上初始选项移动,人们会频繁困惑到底选择了哪个选项。


7、显示非活动选项:此方法保持所有额外输入可见,但一次只有一组选项可以操作,多数情况显示灰色。但是大量所有可见输入项会让人们看起来崩溃。如果每个初始选项都有很多额外输入,个人选项和其他初始选项之间就会丧失联系。

8.组的显示:此方法几乎没见过,额外输入太多,书上说降低初始选项可见度,其实很多时候,用户看到这个,就会感觉要做的事情太多,很难做选择。

减少输入框:

1. 注册界面只保留操作关键路径上的必须信息收集框,其他部分全部去除,即使有些部门需要。

2. 当然也不能因为去除了一些问题,从而导致另外一些问题变的很复杂。

注册表单:

1. 为你的网站或者系统考虑,是否真的需要一个注册表单。 因为这个表单很可能让用户放弃你提供的服务。

2. 采取循序渐进的方式,让用户在操作期间完成账号的填写。发送邮件,生成密码等。

3. 自动给用户生成账号的时候,确保用户知道清晰访问账户的方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容

  • 一、表单结构 1、表单的设计 -设计原则 尽量减少痛苦 说明填写完成途径 考虑情境 确保一致沟通 2、表单...
    ba帝儿阅读 621评论 0 0
  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 12,034评论 1 30
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1 41
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 904评论 0 1
  • 然后我俩各自一端望着大河弯弯终于敢放胆嘻皮笑脸面对人生的难 同陌生人面对面坐在一起,真是件令人尴尬的事。 并且他是...
    昔梦同学阅读 639评论 9 10