Web表单设计
一、表单结构
1、表单的设计
－设计原则
尽量减少痛苦
说明填写完成途径
考虑情境
确保一致沟通
2、表单的组织
－应当采用“保留、删减、延迟、解释”策略评估表单问题
－表单标签应当尽量简洁，如果简洁容易造成误解，那么最好使用自然语言
－可以利用主题间的自然间断将表单内容分组或分页
－如果表单可自然分成若干主题，一个网页可能就足够组织表单
－如果表单包含大量问题，同时有若干主题，可能需要多个网页来组织表单
－如果表单包含大量问题，而只和一个主题相关，一般需要一个较长网页来组织表单
－可以考虑在表单填完之后提出可选问题
－应当采用最少的必要视觉信息来区分内容组
3、完成之路
－确保表单名称符合人们的期望
－如果表单需要时间或者需要查询信息才能填写，可以采用起始页来设定人们的期望
－由始至终采用清晰浏览线和有效视觉步伐来引导人们
－对于关键任务表单，比如结算或注册表单，应当去除一切可能分散人们注意力的内容
－如果表单分为多个已知的有序网页，可以采用进程指示来传达范围、状态和位置等信息
－如果表单没有清晰的有序网页，应当采用更笼统的进程指示来避免设置错误期望
－设计表单布局时，应当考虑使用Tab键的跳转体验
－可以采用“tabindex”HTML属性来控制表单的跳转顺序
二、表单元素
1、标签
－每个表单都至少有三个基本元素：标签、输入框和动作
－标签负责提出问题，输入框给予空间填写信息，动作允许人们提交答案
－标签要尽量对齐，采用何种对齐方式应考虑具体目标和制约因素
－顶对齐 优点：标签和相关输入框相邻／能够快速填写
缺点：占用垂直空间增加
－右对齐 优点：标签和相关输入框相邻／占用垂直空间较少
缺点：可读性降低
－左对齐 优点：容易浏览标签／占用垂直空间较少
缺点：标签和相关输入框间距增大
－如果要减少填写时间，或者出于本地化原因，标签长度灵活多变，可采用顶对齐标签
－如果要减少填写时间，但屏幕垂直空间有限，可采用右对齐标签
－如果需要人们仔细浏览标签，可采用左对齐标签
－如果表单非常短，标签问题比较简单，可采用输入框内标签
2、输入框
－应当为所提问题提供合适输入框：单选按钮／复选框／文本框／下拉菜单…
－如有可能，应当确保输入框长度能提供有意义的暗示
－如果不是上述情况，输入框长度应当保持一致
－尽量避免出现可选输入框
－如果表单大部分输入是必填项，标明必填项即可，如果是选填项，标明选填项即可
－标明必填或选填，文字是最清晰的办法
－“ * ”代表必填项比较容易理解，但最好采用图例解释其含义
－将选项标识器与标签相关联，便于人们知道需要回答哪些问题
－如果输入框存在自然结构，应当通过视觉方式将输入框进行分组
3、动作
－尽量避免表单中出现次动作，应当向人们提供完成表单的单一路径
－如果需要次动作，应当确保主动作和次动作视觉差异清晰
－区别主动作和次动作的方式包括不同按钮风格、按钮和文字组合以及不同文字风格
－主动作应当尽量与输入框对齐
－应当通过禁用主动作按钮来提醒人们重复点击主动作
－可以尝试把服务条款和主动作整合成单一动作
4、帮助文字
－尽量减少表单中的帮助文字
－帮助文字最适合解释人们不熟悉的数据：为何要问这问题、安全和隐私、建议回答问题的方式及说明可选项
－简洁的帮助文字毗邻问题是最清晰的方式
－输入框内的帮助文字只能用于建议回答问题的方式
－如果人们知道表单问题答案，但不确定如何回答或者为何回答，可以考虑自动即时帮助
－如果不熟悉的用户需要访问所有帮助而高级用户只需偶尔触发一些帮助来唤醒记忆或者快速回答问题，可以考虑用户激活的即时帮助
－如果帮助内容过多，可以使用一致的帮助区域
－图标、链接或按钮用于用户激活的帮助文字触发器，应该放在标签旁而不是输入框旁
5、错误与成功消息
－有错误发生时，应当用错误消息明确告知
－应当在情境中显示错误消息，以便快速解决
－应当提供可操作的补救措施，帮助人们能够轻松解决错误
－如果发生多个错误，可以考虑顶部错误消息，用来说明有错误发生以及相应解决方案
－如果输入框发生错误，应当采用双重视觉强调清晰标示
－从视觉上将表单出错元素与顶部错误消息联系起来，清晰传达错误
－红色文字和警告图标适用于错误消息
－短表单可不采用顶部错误或者标明发生错误的输入框
－表单填写成功时，应当用成功消息显示结果
－应当在情境中显示成功消息，不要阻止进程
－避免成功消息页面成为死胡同
三、表单交互
1、即时验证
－考虑使用即时验证以确认或者建议有效答案，帮助人们在限制范围内输入
－即时确认适用于错误率高或者有特定格式要求的问题
－即时建议适用于有大量可供选择有效答案的情况
－即时密码强度指示条能实时反映人们所设密码的强度
－如果需要即时验证答案，应当在人们输完答案之后而不是在输入过程中进行
－如果有输入限制，应当采用实时、动态更新的方法传递输入限制
2、多余输入
－检查表单问题，去除多余问题
－通过智能默认设置满足多数人需要的默认选择
－设置个性化默认选择，使人们能更快完成表单
3、额外输入
－额外输入可以提供更多选项或高级选项，满足有需要的用户，同时不妨碍不需要的用户
－根据人们需求的优先次序安排额外输入：主要用例总是可见，次要用例点击添加可见
－确保触发额外选项的操作措辞明确，如果自动触发，应当提供线索（图标和文字）来预设期望
－如果需要显示大量额外输入，可以考虑采用叠层方式代替即时显示方式，避免表单跳动
－确保叠层不会遮住帮助人们填写的输入框，确保人们仍然可以自行填写
－如果额外选项需要单独考虑，应当使用弹出式叠层
4、基于选择的输入
－如果每个初始选项的额外输入选项数量较多，那么网页级别的基于选择输入可能最好
－垂直选项卡和水平选项卡都能较好地进行初始选项的选择
－如果初始选项列表较长，最好能针对额外选项采用下拉列表和视觉分组
－如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者按钮内显示最好
－应当保持初始选项之间的联系清晰以及初始选项与相关额外选项之间的联系清晰
5、循序渐进
－可以考虑采用循序渐进的方式避免出现注册表单或者让人们不会意识到正在填写表单
网友评论