出版社: 清华大学出版社
副标题: 点石成金的艺术
原作名: Web Form Design: Filling in the Blanks
译者: 卢颐 / 高韵蓓
出版年: 2010-6
页数: 220
定价: 49.00元
装帧: 平装
丛书: 优秀设计师典藏·UCD经典译丛
ISBN: 9787302225157
内容简介 · · · · · ·
精心设计的表单,能让用户感到心情舒畅,愉快地注册、付款和进行内容创建和管理,这是促成网上商业成功的秘密武器。本书通过独到、深邃的见解,丰富、真实的实例,道出了表单设计的真谛。新手设计师通过阅读本书,可广泛接触到优秀表单设计的所有构成要素。经验丰富的资深设计师,可深入地了解以前没有注意到的问题及解决方案。
本书专为表单设计或开发人员准备,但同时也适合可用性工程师、网站开发人员、产品经理、视觉设计师、交互设计师、信息架构人员以及任何一个涉及表单与调查问卷设计的人员阅读和参考。
作者简介 · · · · · ·
Luke Wroblewski:一切都始于大学一年级。那时候,我下午上艺术课,深夜“猫”在机房写代码,完成计算机作业。
从那时起,我就萌发了平衡表单与功能的想法。抱着这种想法,我去了国家超级计算机应用中心(National Center for Supercomputing Application,NCSA)工作,那里诞生了第一代大众图形界面的网络浏览器NCSA Mosaic。互联网通过设计和技术产生用户体验。我那时满脑子想的都这些。
目录 · · · · · ·
第1章 表单的设计
表单设计很重要
表单设计的影响
设计时的考虑因素
第2章 表单的组织
选取问题
构建对话
内容的组织
归纳区别
最佳实践
第3章 完成之路
表单的命名
起始页
清晰的浏览线
注意力分散最少
进程指示
Tab键跳转
最佳实践
第Ⅱ部分 表单元素
第4章 标签
标签对齐
顶对齐标签
右对齐标签
左对齐标签
输入框内的标签
混合对齐
最佳实践
第5章 输入框
输入框的类型
输入框的长度
必填项
输入组
弹性输入框
最佳实践
第6章 动作
主动作和次动作
动作顺序
进程中的动作
同意与提交
最佳实践
第7章 帮助文字
提供帮助的时机
自动即时帮助
用户激活的即时帮助
用户激活的区域帮助
安全交易
最佳实践
第8章 错误与成功
错误消息
成功
消灭死胡同
最佳实践
第Ⅲ部分 表单的交互
第9章 即时验证
确认
建议
限制
最佳实践
第10章 多余输入
去除问题
智能默认
最佳实践
第11章 额外输入
即时增加
叠层
循序渐进
最佳实践
第12章 基于选择的输入
页面级选项
水平选项卡
垂直选项卡
下拉列表
单选按钮下方显示
单选按钮内显示
显示非活动选项
组的显示
最佳实践
第13章 循序渐进
注册
参与
最佳实践
第14章 表单的未来
消失中的表单
变化中的表单
构建表单
· · · · · · (收起)
原文摘录 · · · · · · ( 全部 )
-
Design Principles Design Principles are the guiding light for any solution. They articulate the fundamental goals that any solution should embody. In the case of Web form design, the principles I continually strive for are: ·Minimize the Pain: People want what lies on the other side of a form so the process of complement forms should be as simple and easy as plssible. ·Illuminate a Path to Completion: Since the point of just about every form is to get it filled in, make it abundantly clear how people can accomplish that goal. ·Consider the Context: Forms rarely exist in a vacuum. They are almost always part of a broader context (audience, application, business), which informs how they'll be used. ·Ensure Consistent Communication: Forms broker conversations between customers and compa... (查看原文) —— 引自第28页 -
Best Practices ·Take the time to evaluate every question you are adding to your forms. Be vigilant about removing everything that isn't necessary. ·Strive for succinctness in all the questions (labels) you ask in your forms. ·When succinct labels may be misinterpreted, look for opportunities to use natural language to clarify the questions your forms ask people to answer. ·Ensure that your forms speak with one voice, despite questions form several different people or departments. ·Organize the content on your forms into logical groups to aid scanning and completion. ·When possible, structure your forms as a conversation. Natural breaks between topics will emerge that can help you organize your form. ·If a form naturally breaks down into a few short topics, a single Web page is likel... (查看原文) —— 引自第56页
> 全部原文摘录
丛书信息
喜欢读"Web表单设计"的人也喜欢的电子书 · · · · · ·
喜欢读"Web表单设计"的人也喜欢 · · · · · ·
Web表单设计的话题 · · · · · · ( 全部 条 )



Web表单设计的书评 · · · · · · ( 全部 25 条 )



没有一劳永逸的好方法
> 更多书评 25篇
-
酸奶-ing (ued书虫群106333963)
这是我对这本书的最后一部分小记了,这部分主要是关于Web表单交互方面的。总体来说,这部分内容很基础,我们在使用表单过程中可能都会有这些总结。毕竟Web表单也只是网站设计中的一个功能控件而已,作者用一本书的容量来承载它,着实有点过于详细,也有其啰嗦细致之处。下面只是一些重要又容易忘记的设计点,对具体的表单设计应该会有很多的帮助: (一)即时验证 确认:对输入的账户或密码,即时显示错误,以免表单填完才发现... (1回应)2011-03-29 14:36:58 4人喜欢
这是我对这本书的最后一部分小记了,这部分主要是关于Web表单交互方面的。总体来说,这部分内容很基础,我们在使用表单过程中可能都会有这些总结。毕竟Web表单也只是网站设计中的一个功能控件而已,作者用一本书的容量来承载它,着实有点过于详细,也有其啰嗦细致之处。下面只是一些重要又容易忘记的设计点,对具体的表单设计应该会有很多的帮助: (一)即时验证 确认:对输入的账户或密码,即时显示错误,以免表单填完才发现有错误,增加不必要的操作。如:有效账户名、密码格式和密码安全条显示等。 建议:当用户输入错误或没有明确的意图时,给用户以适当的建议。如:有效的相似用户名和相近的地址。 限制:如有输入限制,应实时、动态更新的方式传递输入限制。 (二)减少用户操作 去除多余的问题,这在第一部分已经讨论过 智能默认,掌握用户的操作习惯和选择意向,对一些有把握的选项(了解大多数用户会选择的选项)设置成默认选项,避免用户多余的操作。如:买家下订单的寄货地址可以采用默认上次地址。但是,如果没有把握,就不要随便设置默认,这样会给用户带来不必要的困惑。 (三)基于选择的输入 根据对初始问题的回答要求人们继续回答,我的理解是,就像是调查问卷中的选择型问题,如果你早期回答是你使用过人人网,那么你后来的问卷就是针对人人网设置的一系列问题。几种展示方式: 3.1 水平选项卡:点击每个水平选项卡,选择性输入会显示后续问题。 问题1:很多人自上而下填写表单,会忽略水平选项卡 问题2:水平选项卡之间不能表现明显的互斥关系 问题3:眼部热点图显示,人们眼睛阅读选项卡时需要经常从屏幕左侧移动到右侧。违背了“清晰的浏览线”原则。 3.2 垂直选项卡:选择性输入后,后续问题会显示在初始选择的右侧。 优点1:单选项表明了选项之间的互斥关系 优点2:隐藏了无关的非选择后续问题,提高了用户完成速度 优点3:清晰的浏览线 3.3 下拉列表:允许人们在潜在初始选项的长列表中选择后续问题,不占用大量屏幕区域 3.4 下方显示后续问题:将后续问题显示在初始问题下方的一致位置
1回应 2011-03-29 14:36:58 -
酸奶-ing (ued书虫群106333963)
原文地址:[http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html] (因无法传图,可参考原文) PS:对于一个电子商务网站,一个社区网站,或者一个生产力网站来说,Web表单设计是如此重要,关系着网站的生死存亡。我看完这本书,发现介绍的设计原则和研究理论其实很简单也很容易理解,但却不容易被我们发现和总结,这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上,Luke Wrob...2011-03-17 21:42:27 1人喜欢
原文地址:http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html (因无法传图,可参考原文) PS:对于一个电子商务网站,一个社区网站,或者一个生产力网站来说,Web表单设计是如此重要,关系着网站的生死存亡。我看完这本书,发现介绍的设计原则和研究理论其实很简单也很容易理解,但却不容易被我们发现和总结,这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上,Luke Wroblewski归纳出了这些易用和好用的web表单设计理论。我试图怀着一颗感恩的心去读完这本书。 对于一个网站来说,用户体验的五个要素是:战略层(网站目标和用户需求)、范围层(功能规格和内容需求)、结构层(交互设计和信息架构)、框架层(界面设计、导航设计和信息设计)和表现层(视觉设计)。对于一个Web表单来说,用户体验的三个主要因素是:表单结构(框架层)、表单元素(范围层)和表单交互(结构层)。这本书正是从这三个方面来分析Web表单存在的一些可用性问题,并阐述如何更好地设计Web表单。 表单设计的重新设计 用户体验和设计团队通常通过搜集可用性数据、客户支持记录、网站日志和网络惯例,来提出重新设计表单的建议。这些数据的分析如下(个人很期待使用方法2和3,挖掘定量的数据,分析定性的结论,说服力很强): 1. 可用性测试——得到定性和定量信息 •错误或问题的数量和位置 •错误或问题的严重程度 •完成率 •完成整个表单或部分表单的时间 •满意度评分 •任务主观评论 2. 网站跟踪——量化用户的操作数量 •完成率 •人们访问表单的方式,从哪进入表单的 •如未完成表单,在哪个位置放弃 •已使用表单哪些元素 •已输入哪些数据 •人们浏览器和操作系统的信息 3. 眼动跟踪——记录人们如何理解表单的表现形式 •人们在表单上看到了什么 •眼球固定次数越多,说明解析表单越困难 •眼球固定在一个元素的时间越长,说明人们看这个元素花费时间越长 4. 客户支持——了解用户问题 •最多的问题 •解决这些问题的常见办法 •报告人的统计信息 •报告人使用的浏览器设置及操作系统 5. Web惯例调查——比较相似网站的设计方案,找出网上通用的模式或独特的设计解决方案 6. 实地测试——从人种学角度出发 •表单填写环境:吵闹的办公室或... •任何说明表单完成或错误率的额外情境 第一部分的小记先从表单结构方面开始吧... (一)表单组织对于表单设计至关重要,一个好的表单组织要做到以下三个方面: 1.尽可能选取少且合适的问题。设置问题前要问自己两个问题,这个问题一定要问用户吗?这个问题是否符合情境,是否与用户填完表单能获得的东西符合。“保留”必需的问题,“删除”不必立即得到答案或不符情境的问题,“延迟”那些营销性的问题,比如你对我们网站印象如何等,“解释”那些有点过分的问题,比如填写用户的身份证号码。 2.合理设计标签和输入框,构建自然的对话。其一,输入框作为提问的一部分,限定了回答的范围,使用户更容易填写,如*月*日等;其二,标签可使用询问的语气或模仿自然对话的方式;其三,标签应避免非用户用语。 3.清晰合理的内容组织。将问题分成有意义的组,分到单个或多个页面。同时,可选性营销问题放在表单填完之后,回答率会增加,因为人们觉得这样侵略性较弱。分割内容组的方式尽可能简单:细线条、粗体字或浅背景+粗体字等。(少点视觉信息有助于保持焦点在表单内容,而不是表现形式,避免不必要的视觉噪音。同时,无助于布局的视觉元素都会损害布局的。) (二)表单结构方面的细节设计也同样重要: 1.表单的命名,应使用户明确填完表单能获得什么。(因为获得毕竟是用户最关注的) 2.起始页对表单的说明。如果填写时间较长或填写信息比较特殊而可能会影响到用户完成表单,那么设计者就应该在起始页对这些进行说明:填写完成时间、哪些信息、账号类型等。 3.浏览线要清晰。从尼尔森的一篇研究报告中,我曾了解到人们浏览信息和仔细阅读信息的方式是不一样的。尼尔森研究结果显示,人们在浏览信息或菜单时,倾向于垂直式浏览,然而,人们在仔细阅读大篇幅的信息时,则更倾向于从左到右浏览。根据这个研究结果,我们可以推断出人们浏览表单应该和菜单一样,习惯于垂直式浏览,因此为人们提供垂直式的浏览线将能提高用户的填表效率。本书的结论也刚好与这个推断相吻合,我想Luke Wroblewski也应该是建立在这种视觉思维规律的基础上进行总结的吧。 4.剔除无关的界面元素,减少注意力分散,消除因此放弃路径的可能。以前,我曾看到过一个“网站二级链接导致用户流失”的案例,这个案例充分显示了此设计原则的强大魅力。这个网站的原版图如图1,改版后如图2,经过改版,该网站的用户流失比例大大降低。很显然,图1中标示的一系列链接分散了用户的注意力,当用户尝试点击它时,却不小心退出了原来的提交流程,造成用户的流失。 5.如有多个有序的网页时,表单应有进程指示。如支付流程的下订单——支付——确认收货等进程指示。
回应 2011-03-17 21:42:27 -
每个表单至少有三个基本要素:标签、输入框和动作 标签 标签应当顶对齐,右对齐,左对齐还是输入框内? 顶对齐 优点:减少表单填写时间;表单完成率较高;标签名可以很长(考虑不同语言时);可多种方式组合输入框 缺点:占用额外的垂直空间 右对齐 优点:标签和输入框相邻,能快速填完;垂直空间小 缺点:可读性较低;多行文字时 左对齐 优点:可读性较好;垂直空间小 缺点:填写速度最慢(如果希望人们阅读速度放慢去仔细考虑...
2016-01-14 13:35:25 1人喜欢
每个表单至少有三个基本要素:标签、输入框和动作 标签 标签应当顶对齐,右对齐,左对齐还是输入框内? 顶对齐 优点:减少表单填写时间;表单完成率较高;标签名可以很长(考虑不同语言时);可多种方式组合输入框 缺点:占用额外的垂直空间 右对齐 优点:标签和输入框相邻,能快速填完;垂直空间小 缺点:可读性较低;多行文字时 左对齐 优点:可读性较好;垂直空间小 缺点:填写速度最慢(如果希望人们阅读速度放慢去仔细考虑答案);标签和输入框间距大;针对长标签不容易发现输入框和标签之间的联系 输入框内 - 更适合只有一个问题(比如搜索框)或者几个输入框的表单或者问题非常熟悉的表单(比如登录) 优点:节约屏幕空间 缺点:填完之后标签会消失 输入框 1. 类型:文本框,单选按钮,下拉列表,列表框,复选框,(书中没有的模式)复合模式 - 加减号加输入框 2. 输入框的长度:与所要填写的大致内容长度保持一致;若无法受益于暗示,就应当采用一致的长度 3. 标明必填项:一小部分是必填的时候 标明可选项:一小部分是可选的时候 注意保持一致 不应按照这个维度对表单分组 动作 1. 视觉上区分主要动作按钮与次要动作按钮(后退,保存,预览,导出等) 2. 按钮位置:左对齐排列,与上方输入框和标签对齐 3. 点击按钮之后的反馈:正在处理中 4. 表单未填写完毕时对主要动作按钮置灰 5. 把确认服务条款和完成表单整合成单一动做 帮助文字 1. 哪些情况需要在输入框附近放置简洁的帮助信息? 人们不熟悉表单要求填入的数据:什么是PAC代码? 人们质疑为何要填入特定数据:为什么要知道我的出生日期? 人们可能会关心数据安全或者隐私:填写信用卡号码安全么? 系统推荐数据填写方式:请用逗号分开 某些数据输入框可填或者必填项,而表单的大部分内容都相反 2. 输入框中显示概括回答方式的帮助文字
3. 一直显示帮助信息 / 激活输入框出现帮助信息 / 点击或移动到“问号”按钮出现帮助信息(悬浮) 错误与成功 1. 显示错误消息的原因: 顾客输入了系统无法接受的内容,因此顾客无法继续下去(如用户名和密码不匹配)。这种错误应当明确、简洁地告诉顾客发生了什么,如何修复,然后继续前进; 系统发生了非常糟糕的事情,导致顾客无法继续下去(如基础服务器刚刚遭到电击)。这种错误消息应当致歉,并向顾客提供替代的联系方式 2. 解决错误:让人们知道发生了错误,如何解决错误(包括指示出错误的输入框位置,并突出显示),不要使用弹出对话框 3. 长表单中的出错,如何让用户能知道第一屏及第二瓶中均有错误?在页面最上方用文字提示框标明? 4. 成功消息:确保人们知道成功填完表单,并快速给予人们应得的表扬 5. 成功消息不能阻碍人们的进程——而是鼓励人们采取更多行动
回应 2016-01-14 13:35:25 -
闷骚的刘大哥 (有些人就能改变世界)
1、标签 * 填写速度:顶对齐>右对齐>左对齐(与便签和输入框的距离有关) * 可读性:左对齐>右对齐 * 若故意让用户慢下来仔细填写陌生重要的数据,可使用左对齐; * 另,如果屏幕空间有限,可以采用表格内放置灰色标签加省略号的方法,但要确保交互和答案情景(区分标签和默认数据); 2、输入框 * 根据需求类型,判断设计目标侧重点,是易学、不易错or高效、高频操作? * 下拉框是最复杂的操作,隐藏选项、容易被忽视、容易...2012-03-24 23:56:21 1人喜欢
1、标签 * 填写速度:顶对齐>右对齐>左对齐(与便签和输入框的距离有关) * 可读性:左对齐>右对齐 * 若故意让用户慢下来仔细填写陌生重要的数据,可使用左对齐; * 另,如果屏幕空间有限,可以采用表格内放置灰色标签加省略号的方法,但要确保交互和答案情景(区分标签和默认数据); 2、输入框 * 根据需求类型,判断设计目标侧重点,是易学、不易错or高效、高频操作? * 下拉框是最复杂的操作,隐藏选项、容易被忽视、容易选错,唯一的好处是节省空间; * 单选,能看到所有答案,方便操作,但数量较多时,布局很乱,效率和准确性下降; * 必要时需注明或暗示输入内容的类型为数值还是文本; * 关键词——有效暗示:输入框长度、默认值暗示; * 输入框长度一致,美观但不实用,无法暗示输入长度,若没必要暗示,则最好保持长度一致; * 必填和非必填(尽量避免选填项)的标识,只标识少数项,可在顶对齐标签后面(灰字说明); * 保持输入框有足够弹性,接受多种输入形式,用脚本检测答案形式符合要求之一即可; 3、动作 1)区分主动作和次动作(尽量避免): * 主动作——提交、保存、继续等有意义的操作;(强化按钮) * 此动作——取消、返回、重置等有风险的操作;(弱化为链接) 2)主动作-规避误操作: * 防止连续点击,点击后,立刻给出动画展示说明操作已生效正在处理中且按钮变为不可点状态; * 防止未完成即提交,可让系统检测每个字段是否已填入数据或已填入特定的数据,确认OK后,主动作按钮由不可点状态变为可点; 4、帮助提示 1)自动即时提示,交互后在合适的时机和位置提示;——缺点:填写前用户有疑惑,并不知道这里会有帮助;——解决方案:输入框内置提示或给出例子(e.g 13523212343); 2)鼠标指针触发悬浮提示,不影响页面布局;
回应 2012-03-24 23:56:21
-
我们每天都会上网,无论是电子商务网站,还是各种 SNS 网站,都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙,前者需要高额的订单金额和转化率,后者则是真的不愿多填写一个表单,我只想得到我真正需要的。而产品经理或者设计师处理表单时,这要精心雕琢这门墙的情境。 《Web 表单设计》就是这样处理这样情境的一本书,在总结以往表单设计失败案例基础上,将表单设计的指向”谁需要填写表单“、...
2011-02-27 15:44:50 1人喜欢
我们每天都会上网,无论是电子商务网站,还是各种 SNS 网站,都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙,前者需要高额的订单金额和转化率,后者则是真的不愿多填写一个表单,我只想得到我真正需要的。而产品经理或者设计师处理表单时,这要精心雕琢这门墙的情境。 《Web 表单设计》就是这样处理这样情境的一本书,在总结以往表单设计失败案例基础上,将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来?是由前Yahoo设计师 Luke Wroblewski ,他的官网是:http://www.lukew.com/ 这本书有以下三个部分: 表单结构 表单元素 表单交互 1 表单结构 表单设计原则 尽量减少痛苦——“不要让我思考”,“不要让我烦”,清晰流畅的浏览线,将注意力分散降到最低 说明填写完成路径——让用户清楚如何实现目标,任务完成的进度提示 考虑情境——表单填写的目标用户群,新注册用户,老用户?玩家?客户?还是智障用户? 确保一致沟通——名词定义一致,如Tab键跳转等交互动作一致 表单的内容及组织方式(标签、输入框、内容组)是表单的核心要素,而不是视觉和交互设计。表单设计的开始工作是“先考虑人”,考虑用户的真正关切,然后“再考虑像素”,考虑如何设计。设计表单可以遵循以下四个策略: 保留——表单问题与用户期望给出大答案要一致。 删减——不需要立即获取的用户答案信息可以去掉这个表单问题 延迟——有些表单问题不需要马上就问,可以放到后续再问 解释——比较棘手的表单问题可以向用户解释为神马,要让用户知道问的结果是给其带来好处 2 表单元素 表单不只是表格,它是由标签、输入框、交互动作等元素构成。 1 )标签 一般讨论最多是标签该如何对齐,由顶对齐标签、左对齐标签和右对齐标签三种对齐方式,她们都有其存在的必要,具体则依赖于设计的目标。 顶对齐标签,标签和输入框自上而下的布局,是填写表单的最快捷实现方式,充分利用横向空间的各种组合,但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度 左对齐标签,标签一致左对齐,和输入框拉开间距,便于用户自上而下看标签,而不用急于填充输入框,比较适合高级设置的陌生或较难理解的数据。 右对齐标签,标签一致右对齐,标签和输入框横向间距最近,可以尽量减少垂直空间,用户填充速度居三者之中。 2 )输入框 输入框出现的目地是让用户可操作的组件,如文本框、单选按钮、下拉菜单等,如何使用各种不同的输入框,要看标签内容的问题,是什么(What)问题,是是否有无(Whether)问题,还是多选单选(How)问题。 3 )动作 动作有主动作和次动作,如提交、保存、继续等为主动做,还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的,如“提交和取消”这对组合,在设计上如果这两个按钮大小一致,颜色突出主动作是最佳的动作组合设计,用户完成时间最少。交互动作还有进行中的动作,一般出现于动作需要一定时间处理(如Gmail登录)或者动作的导向情况(如fanli.qq.com导向到其他电子商务网站)。 3 表单交互 1)尽量让用户少录入 复杂的表单填写任务总是让用户烦恼不已,这一点尤其是新用户碰上了新产品上,而输入框中默认值(如邮箱后缀、日期时间等)是往往是最好的导师,尽量让用户较少录入,只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移,可以隐藏,也可以以后再加。 2)即时验证 表单往往是多个元素混合组成的,用户在填写表单需要即时告知用户录入信息是否正确、完整,省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整,可以即时告知用户错在哪里并重新录入。 4 读书小结 Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”,不知是否翻译有误,感觉此书应该是奉献给“每一位不得不设计表的人”,是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分,表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛,让产品有品质上档次,让用户又能轻松跨域,则是我们日常工作要不断尝试、不断反思、不断优化的。 原文来自:http://www.ashnotes.com/read-web-form-design/
回应 2011-02-27 15:44:50 -
设计原则 尽量减少痛苦 人们要得是填完表之后的东西,所以填写过程应尽量简洁。 说明填写完成路径 几乎每个表的目标就算填完,表单应清晰告诉人们如何完成这一目标 考虑情景 表单并非凭空存在。他们几乎都是更广泛情景(受众群体,应用,业务)的组成部分,这些情景决定了如何使用表单。 确保一致沟通 表单是顾客和公司之间对话的中间人。多个团队参与对话(市场营销,隐私部门,工程部,设计部,商业部等),但表单只能用一种...
2014-06-11 10:49:19
-
So classic! 几乎没有人喜欢填写表单。 任何人碰到表单的主要目标都是填完表单,然后得到填完之后的东西:购物,使用服务,管理信息等。 由内而外的设计是以数据库的角度设计表单,由外二内设计是以用户的角度设计表单。大多数表单都是由内而外设计的。 测试表单中的每一个问题。这个问题一定要问吗?能自动获得资料吗?有没有更合适时间或者场所能得到答案? 保留,删减,延迟,解释。保留核心问题,砍掉现时非核心问题,延迟问...
2020-03-03 21:59:29
So classic! 几乎没有人喜欢填写表单。 任何人碰到表单的主要目标都是填完表单,然后得到填完之后的东西:购物,使用服务,管理信息等。 由内而外的设计是以数据库的角度设计表单,由外二内设计是以用户的角度设计表单。大多数表单都是由内而外设计的。 测试表单中的每一个问题。这个问题一定要问吗?能自动获得资料吗?有没有更合适时间或者场所能得到答案? 保留,删减,延迟,解释。保留核心问题,砍掉现时非核心问题,延迟问题到合适情境,解释隐私敏感问题。 先考虑人,再考虑像素。 标签使用清楚明确的语言,模拟人类之间自然的交流,提出得体的问题。让表单更像对话,而不是盘问。 表单如果较长或复杂,可以将内容分组到多个部分。就像对话,主题之间会自然出现间断。分组后每组问题,需要有有意义可理解的主题。 内容组之间的差别不需要过量视觉差异,否则会造成视觉污染,阻碍人们浏览表单。使用最少的视觉信息有助于保持焦点在表单内容,而不是表现形式。 有时候为了回答每个问题,人们要看到所有问题,这时一个较长的网页可能是最佳方案。 某些情况下有的问题出现在表单填完之后效果最好。类似“您如何知道我们”或者“您想进一步了解服务吗”的可选性营销问题。实际回答率可能会更高。 有人使用类似斑马线的效果显示左对齐表单中标签和对应的输入框,但标签定位演动跟踪研究表明,在标签组对其布局中,人们一般都能顺利将输入框和标签联系在一起,只是稍微多占用点时间。因此这种办法并不能解决问题。看起来具有诱惑力,但实际上带来了很大的视觉噪音。  提供清晰的表单填写路径:告诉人们在填什么表单,填完之后能干什么。 让表达的命名与用户进来的位置(比如所点击的按钮)保持一致。 在对需要花费大量时间填写的表单设置其事业,告诉用户你需要先准备什么东西,比如多少时间? 提供单一简单的眼动路径让用户能够更快的处理表单。比如让标签、输入框、按钮对齐于一条简单的竖线。  采用输入框高度的50%~75%作为两行之间的间隔。 剔除与表单填写没有直接关系的界面元素,并适当消除放弃路径,有助于帮助人们完成任务。 表单较长时提供保存功能或者系统自动保存。 不要把色彩作为传递信息的唯一方式。比如表示出错,不能只用红色标识,还应该提供一栏来显示“错误”提示文字。 避免使用每秒审闪烁超过三次的对象,如果用户有癫痫症可能会因此发作。 尽量让用户只用键盘就能操作所有的对象。 两栏表单设计,我们应该思考使用Tab键进行输入框跳转时的大量用户体验问题。比如跳转顺序,不能纵向跳转,这样会从左栏的最底部跳到右栏的最顶部,体验很糟糕。  对于关键任务,比如结算表单或者注册表单,应去除分散注意力的部分,和任何导致人们放弃填写的链接或内容。 如果表单没有清晰固定的有序网页,就不要采用精确的进度指示,而采用更笼统的进度指示,避免给用户设置错误期望。 采用“tabindex”html属性来控制表单的跳转顺序。 顶对齐表单  右对齐表单造成左侧不齐,会降低快速浏览表单问题的效率,在标签长度差距大、每个问题的输入部分高度差异大时尤甚。(下面这张图在大屏阅读时很难让用户对表单问题做一个快速浏览)  人们需要快速浏览一遍表单中的所有问题时,左对齐表单能较好地做到这一点。 必填、帮助等icon和标签联系在一起,有助于人们更容易的浏览到所需信息。 左对齐表单填写速度最慢,可能因为左对齐表单解析问题时眼球定位次数较多,人们一般都能将左对齐布局中的标签与相应的输入框联系起来,只是花费的时间更长。但完成时间长并不总是坏事,如果希望人们速度放慢,并仔细考虑表单中的每个输入框(特别是含有大量可选输入框时),左对齐表单是个好办法。 输入框内标签表单能极大节省屏幕空间,但填写完后标签都不见了,非常不便于检查。因此输入框内标签,更适用于只有极一个或极少几个问题,或者问题非常熟悉的表单(比如通讯录)。当表单较长时,最好不要使用输入框内标签。 对于人们回答时需要参考标签的表单,不应该采用输入框内标签。 Material design当中的输入框内标签,具有很大的参考价值。 应当确保标签和数据有明显区别,比如添加左右破折号。  作者经验表明,情境常常比一致性更重要。因此在同一应用程序中,可根据具体情境考虑不同的表单对齐方式。但一定要克制!因为人们即使并不真的记得应用程序内不同表单之间的对齐差异,也会下意识的认为多种表单会很难使用。除非有合适的理由,否则就采用单一布局来减轻一致性问题。 避免同一表单中不同的标签对其方式。 必填标识与输入框而不是标签对齐时,可能会由于某些表单中输入框长度不一致,导致无法轻松弄清楚哪些问题是必填的。或者由于标识位置靠后,容易被忽略。 “强大的设计源于重复运用一些简单的模式。” 如果可能,应当确保输入框长度能提供有意义的暗示,帮助人们有效回答问题。否则,输入框的长度应当保持一致,为答案提供足够空间。 按钮与输入框对齐,让眼动路径尽量简单。 如果表达中的答案明确,用户非常容易正确地完成表单,那么可以在正确回答完所有问题之前禁用主动作。相反,如果表单中含有非必填问题,应避免使用这种方法,因为用户在填写完必填选项后立刻激激活主动作会诱导用户立即提交,而停止填下剩下的非必填项目。另外,问题复杂、用户容易犯错且自己不易发现的表单,应保持主动作激活,这时用户可通过点击主动作获得错误反馈。 表单中主动作即使不可用,也应该总是可见。这为用户填写表单提供了明确与完整的路径。 界面设计中需要暗示元素或功能完整性,或者提示关键操作路径的元素,禁用后也要保持可见。比如网页上的右键菜单,如果禁用但显示,用户会知道这个功能存在但此时不可用,;如果直接隐藏,用户可能会认为没有这个功能,感到疑惑。“禁用”和“没有”是存在差别的。 建议采取主动作控制服务条款的交互来取代用复选框单独勾选同意服务条款,比如,主动作为“点击下方注册,表示同意”。这样户会少回答一个模棱两可的关于条款的问题,并且避免了复杂化的交互操作。 尽量避免表单中出现次动作,应当为人们提供完成表单的单一路径,用简便的撤销来替代次动作。 次动作不可避免时,应确保主动作和次动作视觉差异清晰。 明确表达表单的“提交中”状态(比如主动作暗示loading并临时禁用),避免重复提交。 如果需要过多帮助文字来解释如何完成表单,则这说明所提问题要么措辞不当,要么过于复杂,应该被重新审视。 自动即时帮助系统在人们激活输入框时,帮助文字自动出现。自动帮助系统有一个潜在缺点,只有在人们开始填表时,才知道是否有帮助文字,需要帮助的人会觉得失望,甚至不愿尝试。 输入框内置帮助文字系统在人们激活输入框并开始填写时,帮助文字消失并不再出现,除非输入框再次为空。概括回答方式的帮助(比如简单的输入格式)可以出现在输入框中。而提示问题是什么、为什么问这些问题、是否必填的帮助文字不应该出现在输入框中,因为输入后这些提示将消失,不便于检查。 用户激活的及时帮助系统适用于表单所含问题复杂,且会被相同的人重复使用的情况,这类系统允许第一次使用的用户访问所有需要的帮助,而高级用户只触发一些帮助来唤醒记忆或者快速回答问题。 用户激活的区域帮助系统,适用于内容很多、问题复杂的表单。比如右侧帮助面板,软件激活的帮助手册窗口等。面板中可以显示图形、图表和广泛的帮助文字。 表示帮助最好的符号是问号图标。 尽量减少表单中的帮助文字已促成更好的设计方案。 错误提示让人们知道,无法继续填写表单,并且告诉人们任何补救。成功提示告诉人们从填写开始就想听到的话——填完了。 错误提示会阻碍人们完成表单这一首要目标,因此错误提示的视觉表现形式应和其重要性相匹配,不要过大或过小。 错误与成功的消息图标应该以多种互不相同的方式呈体现区别,比如符号,颜色,形状。这样能加快人们的认知过程,并且满足色盲人士的需求。 如果有输入框发生错误,应当采用双重视觉强调清晰标识,确保人们能看到。 当表单较长,发生错误的输入框可能出现在显示器首屏之外时,解决方法可以是跳到当前需要解决的错误中的第一个,人们会依次看到需要改正的输入框。或者使用顶部错误信息,将所有错误信息在顶部列出来。  错误提示不能被忽视或置之不理,必须要解决错误。而成功信息不能阻止人们的进程,应该鼓励人们采取更多行动。 成功消息还可以包括与刚才完成任务有关联的后续操作,进一步提示用户下一步该做的事情,而不是成为一个死胡同。 即时验证能提供许多反馈:确认回答合适,建议有效回答,通过实时更新状态将用户控制在有效范围内范围内。 如果对表单所有问题都使用即时验证,虽然能确保一次性正确填完所有问题,但也会分散注意力,还可能引起部分人的反感。 提供及时验证的时机是关键。即时的错误提示最好是在明确填写结束后(比如用户填好并移动到下一个输入框时),再提供反馈。 即使质量只是条,能引导人们更好的完成复杂问题,比如设置一个安全的密码。 即时建议通过提供一些有效答案让用户选择,帮助用户快速完成。比如根据已输入内容在下拉菜单中提供推荐选项。 对用户输入格式有要求时(比如在电话号码中按格式加入破折号),可以在用户输入完成后,提供正确格式的即时建议,让用户直接选择。 提出的问题越少,人们就可能越快越容易地完成表单。 如果提供默认选项,请保证默认选项符合用户的利益,否则用户会对产品产生疑惑,并提前终止。 默认选项可基于单个用户信息个性化提供,也可以基于占绝对大多数用户共同偏好提供。 默认选项极容易让用户忽视,所以必须确保其符合绝大多数人的利益。 并不需要人们集中注意力的额外输入可以采用叠层的形式,还需要人们特别关注的输入,可以采用模态窗口的形式。 关于额外输入,用户手动点击激活会自动浮现更受欢迎。 如果基于初始选项的额外输入选项很多,那么网页级可能是最佳方案。 网页级的基于选择的输入中,垂直选项卡综合表现最好,并且可以在垂直选项卡上增加Radio,来表示互斥。  如果初始选项列表较长,可以采用下拉列表。 整体而言,隐藏无关的表单控件,能减轻用户的压力。 将初始选下,及其基于选项的出入靠近能达到最高的满意度。 任何情况下,避免页面过多跳动。 用户使用网站服务时,不到万不得已不要过早出现注册表单。 可以考虑采用循序渐进的方式,让用户在使用服务的过程中,自然的、渐渐的、每次少量的填写一些信息,完成注册。
回应 2020-03-03 21:59:29 -
第 7 章帮助文字 提供帮助的时机 自动即时帮助 用户激活的即时帮助 用户激活的区域帮助 安全交易 最佳实践 第 8 章错误与成功 错误消息 成功 消灭死胡同 最佳实践 第Ⅲ部分 表单的交互 第 9 章即时验证 确认 建议 限制 最佳实践 第 10 章多余输入 去除问题 智能默认 个性化默认 最佳实践 第 11 章 额外输入 即时增加 叠层 循序渐进 最佳实践 第 12 章基于选择的输入 页面级选项 水平选项卡 垂直选项卡 下拉列表 单选按钮下方显...
2019-06-08 11:38:41
- 第 7 章帮助文字
- 提供帮助的时机
- 自动即时帮助
- 用户激活的即时帮助
- 用户激活的区域帮助
- 安全交易
- 最佳实践
- 第 8 章错误与成功
- 错误消息
- 成功
- 消灭死胡同
- 最佳实践
- 第Ⅲ部分 表单的交互
- 第 9 章即时验证
- 确认
- 建议
- 限制
- 最佳实践
- 第 10 章多余输入
- 去除问题
- 智能默认
- 个性化默认
- 最佳实践
- 第 11 章 额外输入
- 即时增加
- 叠层
- 循序渐进
- 最佳实践
- 第 12 章基于选择的输入
- 页面级选项
- 水平选项卡
- 垂直选项卡
- 下拉列表
- 单选按钮下方显示
- 单选按钮内显示
- 显示非活动选项
- 组的显示
- 最佳实践
- 第 13 章循序渐进
- 注册
- 参与
- 最佳实践
- 第 14 章表单的未来
- 消失中的表单
- 变化中的表单
- 构建表单
第 7 章帮助文字
提供帮助的时机
自动即时帮助
在 Wufoo,人们填写输入框时,帮助文字会自动出现
Linkedin 采用了内置帮助文字的输入框
用户激活的即时帮助
用户激活的区域帮助
安全交易
最佳实践
- 不要依赖帮助文字来弥补表单缺点。尽量减少表单中的帮助文字,以促成更好的设计方案。
- 帮助文字最合适解释人们不熟悉的数据,例如,为什么要问这些问题、安全和隐私、建议回答问题的方式及说明可填项。
- 简洁的帮助文字毗邻问题是最清晰的方式。
- 输入框内的帮助文字只能用于提供回答问题的方式。
- 如果人们知道表单问题答案,但不确定如何回答或者为什么回答,可以考虑使用自动即时帮助系统。
- 如果表单问题人们不熟悉或者复杂,而且可能同样的人会多次使用,可以考虑采用用户激活的帮助系统。
- 除非每个问题都需要很多帮助文字或者内容(图形、图表),使用即时系统可以避免网页跳动拉伸。
- 如果帮助内容很多,可以使用一致的帮助区域,不要使用即时帮助。
- 帮助文字应当尽可能具体。如果帮助文字适用于一组相关输入框,而不是一个输入框,考虑采用网页一部分显示帮助内容,清晰表明输入框组和帮助文字之间的关系。
- 图标、链接或按钮用于用户激活的帮助文字触发器,应放在标签旁,不要放在输入框旁
- 如果要求用户填入敏感资料,考虑使用有操作含义的帮助文字,允许人们确认资料安全。【确认】
第 8 章错误与成功
错误消息
成功
消灭死胡同
最佳实践
- 如果有错误阻碍人们完成填写表单,应该明确告诉人们。错误消息可以说是表单中最重要元素。确保以最重要的形式表现错误!
- 应当在情境中显示错误消息,以便快速解决。
- 应当提供可操作的补救措施,帮助人们能够轻松解决错误。
- 顶部错误消息应当用来说明有错误发生以及相应的解决方案。如果发生多个错误,应当都罗列在顶部消息中。
- 如果有输入框发生错误,应当采用双重视觉强调清晰标示,确保人们能看到。
- 从视觉上将表单出错元素与顶部错误消息联系起来,清晰传达需要解决错误才能继续
- 红色文字和警告图标应当用于错误消息。
- 短表单可不采用顶部错误消息或者指示标明发生错误的输入框。如果要采用这种方式,一定要谨慎。
- 如果表单填写成功,应当用成功消息清晰传达并通过成功消息显示结果。
- 根据情境提供成功消息,不要阻止进程。
- 考虑采用动态成功消息突出表单提交成功的结果。
- 避免成功消息页面成为死胡同。
第Ⅲ部分 表单的交互
第 9 章即时验证
确认
Ebay Express 表单采用进度条实时说明密码的安全程度
Lastfm. Com 的注册表单上几乎每个输入框都采用即时验证
Mint 网站的注册表单,填写时立即出现错误消息,打断了人们回答问题
建议
Kayak. Com 使用即时建议来帮助人们提供旅行目的地的有效答案
限制
即时验证可用来传达限制信息,比如 Yahoo! Local 表单的消息中包含最多可填写的字符数
最佳实践
- 考虑使用即时验证,以确认或者建议有效答案,并帮助人们在限制范围内输入
- 即时确认最适合用于错误率高、或者有特定格式要求的问题。
- 即时建议最适合用于有大量可供选择有效答案的情况
- 即时质量指示条能引导人们更好地回答复杂问题。如果需要即时验证答案,应当在人们输完答案之后进行,不要在输入过程中进行。
- 如果需要将答复转成特定格式,应当确保在人们提供答案后转换,不要在填写过程中转换。
- 如果有输入限制,应当采用实时、动态更新的方法传递输入限制。
第 10 章多余输入
去除问题
重新设计后,Paypal 表单突出了所使用的信用卡类型,去除了个不必要的问题
智能默认
在《选择的悖论》(Paradox of Choice)一书中,作者巴里・施瓦茨(Barry Schwartz)讨论了生活中选择过多的影响,并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量一即在满足多数人需要的地方放置选择一一来帮助人们作出明智选择
EBay 出售物品表单采用的智能默认包括了发货方式、保险和销售税答案
个性化默认
智能默认还与个人相关。例如,如果我在 eBay 出售物品总是用联邦快递作为发货方式,对我而言,之前谈到的发货方式选项就可以默认我的个性选择。为回访客户激活选项常常指保持选项有“粘性”,也就是说保持客户之前的选择。
最佳实践
- 仔细检査表单所有问题,千万百计去除多余的问题。
- 寻找人们回答问题的模式,准确推断答案。
- 注意,不要为了去除问题而使问题复杂化。
- 通过恰当设置满足多数人需要的默认选择,智能默认可以帮助人们回答问题。
- 人们会忽视默认选项,所以要确保默认选项符合多数人目标。
- 只要有可能,单选按钮都应当设置默认选项。如果没有明确的默认选项,人们仍可能会明白需要做出选择但如果他们不明白,就会发生错误。
- 设置个性化默认选择,客户能更快完成表单,因为答案具有“粘性”。
- 考虑个性化默认选项发挥作用的地方。并不是表单每项输入都能设为个性化默认选项。
第 11 章 额外输入
并非所有时候所有人都需要填写表单的所有输入框很多情况下,几个简单选项就能满足多数人需要。
即时增加
表单中增加多位经理不会影响只有一位经理的人。
叠层
叠层是显示额外选项的另一种方式:额外输入框出现在表单上方,就像电脑桌面上出现的对话框。日历控件可能是最常见的例子,人们能够选择特定日期回答表单问题。
循序渐进
例如,如果需要客户从十二个或者更多潜在选项选择一个类别,常见解决办法是用下拉菜单或者几栏单选按钮方式显示选项。事实上,人们选择视频类別时,视频网站 Youtube 采用的正是这两种方式(图 11.9)。
最佳实践
- 额外输入可以提供更多选项或者高级选项,满足有需要的用户,同时不防碍不需要的用户
- 应当根据客户需求的优先顺序,安排额外输入。主要用例应当总是直接而且可见;次要用例应当点击一次鼠标即可见。
- 如果允许人们激活额外输入,额外输入会比自动浮现更受欢迎。
- 确保触发额外选项的操作措辞明确。如果额外选项自动触发,应当提供线索(图标和文字)来预设期望。
- 对于单一表单,应当保持一致的额外输入方式。
- 如果需要显示大量额外输入,可以考虑采用叠层方式代替即时显示方式,避免网页跳动以及用户迷失方向。
- 确保叠层不会遮住帮助人们填写的输入框,确保人们仍然可以自行填写。
- 如果额外选项需要单独考虑,应当使用模式叠层。确保提供用户明确办法关闭或者取消模式叠层并返回表单【弹窗】
- 返回表单时,应当显示在叠层中所选选项。
- 如果吸引客户是主要目标,额外输入可以采用通过选择来引导人们的迷人方式。
第 12 章基于选择的输入
Found Bin 采用了简单的基于选择的输入,根据人们的初始选择来显示后续问题
页面级选项
水平选项卡
垂直选项卡
下拉列表
单选按钮下方显示
单选按钮内显示
显示非活动选项
组的显示
最佳实践
1.如果每个初始选项的额外输入选项数量很多,那么网页级别的基于选择的输入选项可能是最佳方案。虽然需要两个网页来拆分表单,但动态隐藏和显示额外输入选项不会让人们产生困惑,人们也无需怀疑选项之间是否互斥。
2.在综合可用性、满意度和眼动跟踪指标方面,垂直选项卡和水平选项卡的表现都不错,但存在选择互斥问题。
3.如果初始选项列表较长(4 或者 5 个以上),而且每个选项都自带一套基于选择的输入,最好能针对额外选项采用下拉列表和视觉分组。
4.如果每个初始选项只有几个额外的输入选项,单选按钮下方显示或者单选按钮内显示是最佳方案....如果可能,应当确定使用清晰的视觉联系和过渡。
5.所有非活动选项显示或者全部选项都显示基本不能接受,因为选项太多,人们马上会被打昏,而且其中太多选项与人们的目标无关。
6.整体而言,隐藏无关的表单控件能减轻表单对眼睛的压力,人们能迅速完成表单,除非人们需要。
7.整体而言,将初始选项及其基于选项的输入靠近显示,能达到最高的满意度。
8.任何情况下,应当保持初始选项之间的联系清晰。不要让人们看不到顶级初始选项。
9.任何情况下,清晰显示基于选择的输入项和触发控件之间的关系。本章中所有例子使用黄色或者灰色背景来显示这种关系。
10.任何情况下,应避免页面过多跳动,页面跳动会中断基于选择的输入项和初始选项之间的关联。
【?】
第 13 章循序渐进
注册
参与
Jumpcut 首页号召人们采取行动:Make a Movie 和 Try a Demo,如图 13.2 所示。Jumpcut 跳出了固定模式,它关心的是告诉你它所提供的服务如何工作,优点在哪里。我们继续往下看。
选择 Make a Movie,出现影片名称输入框和上传媒体文件的若干选项。选择 Upload,可以从桌面计算机添加图片、音频及视频。上传后,进入 Jumpcut 网络视频编辑器,可编辑影片,增加风格,整合音频、视频及图片,等等。
【参考帮助建站的网站。】
目前为止都没有出现注册表单。只有想要发布或者共享影片时,Jumpcuts 才要求你填写姓名和电子邮件,便于你和其他人能访问刚刚制作的影片。在此过程中,你明白了 Jumpcut 网站是做什么的,并不需要填写注册表单。这就是循序渐进。
最佳实践
规划客户对 Web 服务的最初体验时,可以考虑采用循序渐进的方式以避免出现注册表单。
如果要采用循序渐进方案,应当确保潜在客户能明白如何使用以及为什么要使用你提供的服务。
如果要为潜在客户自动生成账户,应当确保客户有清晰访问账户的方式。人们可能会忽视或者不看账户生成的提醒邮件,还可能不确定他们是否已经拥有账户。
如果只是将注册表单的输入框分布到多个页面,则不要使用循序渐进方案。因为这可能会降低效率,也使人们感到不快
第 14 章表单的未来
消失中的表单
动态交互或者类似游戏的交互是隐化表单的另一种方式。举个例子,Uzanto 的 Mind Canvas 软件(图 14.1) 利用游戏启发方法(game- -like elicitation method, GEM),让数据收集过程变得妙趣横生。使用 Mind Canvas 参加市场研究的人非常亭受“填写调查”的过程。
除了这些交互方法外,技术解决方案也能推动表单从台前走向幕后。Microsoft 的 Live ID"(以前称为 Microsoft Passport)系统和 Openid开源项目均采用“单点登录”,人们只用个账号就能登录多个网站。虽然这些方法能消除很多重复注册和网上支付表单,但两者尚未成为明确标准。
变化中的表单
短期无法消失,但也在变化当中。
个性化表单。
例如输入文字长短有变化,文本框大小不一样。
构建表单
Web 联盟(World Wide Web Consortun, W3C)的表单工作组是一个有助于了解下一代 Web 表单技术的理想场所。特别是其 Xforms 标准明确区分了表单的作用和不同标记(markup)下的表单样式。
http: //www.w3.org/markup/forms/
回应 2019-06-08 11:38:41 - 第 7 章帮助文字
-
第1部分 表单结构 第 1 章表单的设计 1.1 表单设计很重要 电子商务 社交互动 生产力网站 1.2 表单设计的影响 1.3 设计时的考虑因素 设计原则 设计模式 第 2 章表单的组织 2.1 选取问题 2.2 构建对话 2.3 内容的组织 2.4 归纳区别 2.5 最佳实践 第 3 章完成之路 3.1 表单的命名 3.2 起始页 3.3 清晰的测览线 3.4 注意力分散最少 3.5 进程指示, 3.6 Tab 键跳转 3.7 最佳实践 第II部分 表单元素 第 4 章标签 标签对齐 顶对齐标签 ...
2019-06-07 23:00:24
- 第1部分 表单结构
- 第 1 章表单的设计
- 1.1 表单设计很重要
- 电子商务
- 社交互动
- 生产力网站
- 1.2 表单设计的影响
- 1.3 设计时的考虑因素
- 设计原则
- 设计模式
- 1.1 表单设计很重要
- 第 2 章表单的组织
- 2.1 选取问题
- 2.2 构建对话
- 2.3 内容的组织
- 2.4 归纳区别
- 2.5 最佳实践
- 第 3 章完成之路
- 3.1 表单的命名
- 3.2 起始页
- 3.3 清晰的测览线
- 3.4 注意力分散最少
- 3.5 进程指示,
- 3.6 Tab 键跳转
- 3.7 最佳实践
- 第II部分 表单元素
- 第 4 章标签
- 标签对齐
- 顶对齐标签
- 右对齐标签
- 左对齐标签
- 输入框内的标签
- 混合对齐
- 最佳实践
- 第 5 章输入框
- 输入框的类型
- 输入框的长度
- 必填项
- 输入组
- 弹性输入框
- 最佳实践
- 第 6 章动作
- 主动作和次动作
- 动作顺序
- 进程中的动作
- 同意与提交
- 最佳实践
第1部分 表单结构
第 1 章表单的设计
1.1 表单设计很重要
电子商务
购物过程,结算表单阻碍快速购物
社交互动
注册和联系表单阻碍交流分享
生产力网站
创作或者协同工作收到阻碍。【?】
选民投票...
1.2 表单设计的影响
衡量表单设计带来的影响的工具: 数据来源:
可用性测试。 在可用性实验室中观察人们与表单如何交互,可得到宝贵的定性和定量信息。
- 错误或问题的数量和位置
- 错误或问题的严重程度
- 完成率
- 完成整个表单或部分表单的时间
- 满意度评分
- 任务主观评论。
实地测试 从人种学角度观察人们在家中或办公室中与表单的互动情况。【context inquiry 】
- 访问表单要求填写信息的来源:文档、软件和人等
- 表单填写环境:吵闹的办公室和小监视器等
- 任何说明表单完成或错误率的额外情境。
客户支持. 了解用户填写表单时碰到的问题,有利于分离和解决问题。【客户反馈】
- 报告最多的问题
- 解决报告问题的常见办法
- 问题报告人的统计信息
- 问题报告人所使用的操作系统及其浏览器设置。
网站追踪 表单可用于追踪任意数量的有用量化指标。
- 完成率;
- 如果表单未完成,人们是在哪个位置放弃填写表单的
- 人们访问表单的方式
- 已使用哪些表单元素
- 已输入哪些数据
- 浏览器和操作系统信息
眼动跟踪 记录人们如何理解表单的表现形式,可用于解释复杂的地方(图 1.9)。
- 人们在表单上看到了什么
- 眼球固定次数:解析表单所花的努力
- 眼球固定时间长度:看每个元素所花费的时间。
web 惯例 调査表单设计问题的共同解决方案可提供宝贵见解(图 1.10)。
- 设计问题的独特解决方案
- 网上通用的模式。
1.3 设计时的考虑因素
设计原则
尽量减少痛苦 人们要的是填完表之后的东西,所以填写过程应尽量简洁、容易【简洁】
说明填写完成路径 几乎每个表的目标就是填完,表单应清晰告诉人们如何完成这一目标。【顺序】
考虑情境 表单并非凭空存在。它们儿乎都是更广泛情境(受众群体、应用、业务)的组成部分,这些情境决定了如何使用表单。【情境】
确保一致沟通 表单是顾客和公司之间对话的中间【沟通一致性】
设计模式
第 2 章表单的组织
2.1 选取问题
用户
“保留,删减,延迟,解释”形成更好问题的四大策略
2.2 构建对话
对话而不是盘问。
术语变得简明容易理解。简洁准确,让问题容易理解。
2.3 内容的组织
将问题分成有意义的组或者页面,主题。
2.4 归纳区别
2.5 最佳实践
- 应当花时间评估表单中的问题。应当提高警觉,去除切不必要的问题。
- 表单所提问题(标签)应当尽量简洁
- 如果人们会误解简洁标签,应当寻找使用自然语言的机会,澄清表单要求人们回答的问题
- 表单所提问题来自多个不同人或部门,应当确保表单统一口径。
- 可以将表单内容组织成逻辑组,有助于浏览和完成填写
- 如果可能,应当以对话形式构建表单。主题间的自然间断有助于组织表单。
- 如果表单可自然分成若干主题,一个网页可能就足够组织表单。
- 如果表单包含大量问题,同时有若干主题,可能需要多个网页来组织表单。
- 如果表单包含大量问题,而只和一个主题相关,一般需要一个较长网页来组织表单。
- 可以考虑在表单填完之后提出可选问题。可能会比在初始表单中就提出这些问题能获得更多答案。可以考虑采用 Web 惯例调查发现特定类型网站如何组织表单。
- 应当采用最少的必要视觉信息来区分内容组。
- 首字母应当大写,使内容组更容易浏览。
第 3 章完成之路
3.1 表单的命名
3.2 起始页
3.3 清晰的测览线
3.4 注意力分散最少
3.5 进程指示,
3.6 Tab 键跳转
3.7 最佳实践
- 确保表单名称符合人们的期望,并简洁解释每个表单的用途。
- 如果表单需要时间或者査询信息才能填写,可以采用起始页来设定人们的期望。
- 由始至终采用清晰浏览线和有效视觉步伐来引导人们,确保说明清晰的填写完成路径。
- 对于关键任务表单,比如结算表单或者注册表单,应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容
- 如果表单分为多个已知的有序网页,可以采用进程指示来传达范围、状态和位置等信息
- 如果表单没有清晰的有序网页,不要采用进程指示,应当采用更笼统的进程指示,而不要设置错误期望。
- 设计表单布局时,应考虑使用 Tab 键的“跳转”体验。
- 采用“tabindex”HTML 属性来控制表单的跳转顺序。
第II部分 表单元素
第 4 章标签
标签对齐
顶对齐标签
右对齐标签
左对齐标签
输入框内的标签
混合对齐
最佳实践
- 表单标签应当使用简洁的自然语言,大小写一致,所提问题应当尽量直观,容易理解。
- 如果要减少填写时间,或者出于本地化原因,标签长度需要灵活多变,可采用顶对齐标签。如果与上述目标类似,但垂直屏幕空间有限,可采用右对齐标签。
- 如要求人们浏览表单标签,知道必填问题或者回答多个问题中的若干特定问题,可采用左对齐标签。
- 如果表单非常短,屏幕空间极度有限,可采用输入框内标签,同时应当确保合适的交互和情境。
- 确保清晰区分标签和数据,特别是对于输入框内标签。
- 如果考虑在同一应用工具的不同表单采用不同标签对齐方式,应当平衡情境和一致性。
- 单一表格中采用不同标签对齐方式会破坏明确完成路径,人们会觉得迷惑。
第 5 章输入框
输入框的类型
输入框的长度
必填项
输入组
弹性输入框
最佳实践
- 应当为所提问题提供合适的输入框:属于是否问题?还是需要从多个互斥选项中选择一项?等等。【问题的种类】
- 如有可能,应当确保输入框长度能提供有意义的暗示,以帮助人们有效回答问题。
- 如果不是上述情况,输入框长度应当保持一致,为答案提供足够空间。
- 尽量避免出现可选输入框。
- 如果表单大部分输入是必填项,标明可选项即可。
- 如果表单中大部分是可选项,标明必填项即可。
- 标明表单必填或可选项,文字是最清晰的办法。*但“”代表必填项相对容易理解**。
- 如果使用“*”标明必填项,但务必采用图例解释其含义。
- 将必填项或者可选项标识器与输入标签相关联,便于人们知道需要回答哪些问题。
- 如果输入框存在自然结构,能为人们回答问题提供有价值线索,应当通过视觉方式将输入框进行分组,并清晰传达自然结构。
- 如果答案明显有多种格式,应当考虑使用弹性输入框。确保弹性输入框不会导致填写简单问题变得复杂。
第 6 章动作
主动作和次动作
....次动作(Secondary Action)较少使用,并且大多数情况下允许人们撤销输入的数据。诸如取消、重置或者返回等选项代表次动作,这些动作与多数人填完表单的主要目标相悖。
区别主动作和次动作的多种方式包括不同按钮风格、按钮和链接的组合以及不同链接风格
动作顺序
进程中的动作
避免出现过多提示告诉人们不要多次点击提交按钮
Basecamp 通过动画提供表单提交和文件上传的进程指示
Basecamp 的注册表单中,直到所有输入框都已填入有效答案,提交按钮才能使用
同意与提交
服务条款
最佳实践
- 尽量避免表单中出现次动作。应当向人们提供完成表单的单一路径。
- 如果需要使用次动作,应当确保主动作和次动作视觉差异清晰。
- 如果表单所提问题分布在多个网页,主动作应当让人们更接近完成表单,而次动作应当允许人们返回
- 主动作与输入框对齐,能提供明确路径完成表单。
- 如果的确需要采用具有潜在破坏性的次动作,比如重置或者清除,应当提供简便的撤销方法。
- 处理表单时,应当明确表达,避免重复提交。
- 不要依赖帮助文字来提醒人们不要两次点击主动作,而应当通过禁用主动作按钮来阻止人们这样做。
- 思考组合服务条款和主动作的机会,以确保法律要求合理化。
回应 2019-06-07 23:00:24 -
克里特 (最後の最後まで、あきらめない)
最佳实践 * 规划客户对Web服务的最初体验时,可以考虑采用循序渐进的方式以避免出现注册表单。 * 如果要采用循序渐进方案,应当确保潜在客户能明白如何使用以及为什么要使用你提供的服务。 * 如果要为潜在客户自动生成账户,应当确保客户有清晰访问账户的方式。人们可能会忽视或者不看账户生成的提醒邮件,还可能不确定他们是否已经拥有账户。 * 如果只是将注册表单的输入框分布到多个页面,则不要使用循序渐进方案。因为这可能...2016-01-29 17:33:03
论坛 · · · · · ·
网上断货啦 求哪位出一本来看一下 | 来自陈老师zzz | 2018-10-14 16:17:16 | |
怎么买到非复印版的 | 来自三里 | 2017-12-20 22:51:07 | |
说主动作和次动作的那节是不是有个地方翻错了? | 来自天天天蓝 | 2012-12-25 14:01:59 | |
重新认识表单 | 来自仁无痕 | 2010-10-12 17:15:44 | |
印刷不好 | 来自Angels wing | 2010-10-11 10:30:23 |
> 浏览更多话题
这本书的其他版本 · · · · · · ( 全部2 )
-
Rosenfeld Media (2008)8.8分 94人读过
在哪儿借这本书 · · · · · ·
以下书单推荐 · · · · · · ( 全部 )
- 交互设计,并不仅仅是设计⋯⋯ (柏林遇见北海道)
- 产品经理书单 (火龙)
- 团队分享 (Fenng)
- 交互设计/用户体验 (浮点)
- 设计创意 (重剑无锋)
谁读这本书?
二手市场
订阅关于Web表单设计的评论:
feed: rss 2.0
1 有用 庄梦蝶 2017-08-01 01:43:18
满分推荐。想想看,这是什么时候出版的书,到现在依旧是这么有力和实用!建议反复看。另外表单作为一个在设计看来这么boring的东西,其实ROI是很高的,值得研究,也值得深入。
0 有用 竹子笑哈哈 2011-09-09 12:54:12
非常不错~
2 有用 二两梦 2016-06-28 16:45:42
表单还是无处不在,干货很多,要好好记下来,对to B 产品的设计更加适用。
1 有用 醋昆布女王 2020-05-25 17:50:48
简直不敢相信这是本10年前的书
0 有用 startskw 2014-04-21 11:46:23
赞逻辑。
0 有用 小蒋不素小蒋 2022-05-13 14:18:44
其实书不错 只是年代太久了 很多东西是常识了
0 有用 叁拾 2022-04-23 09:53:53
表单设计过一遍
0 有用 雪人 2022-03-24 07:12:47
学习了,学习了。
0 有用 绘事后素 2021-11-23 15:46:06
几百的价格不太值当;电子版更赞;
0 有用 记昀 2021-10-11 01:22:24
内容很棒,例子很多。扣一星给中文的翻译,读第一章时差点弃读了