【转来的好东东】表单设计的最佳体验

表单设计的最佳体验

简介：为什么表单设计非常重要？- 表单是用户与网站之间进行“对话”的方式- 从商业上 - 使用户能够实现购买行为 - 使商家实现销售利润最大化- 从交互的角度 - 使用户能够参与 - 使商家能够增加 ...
快报：中国联通手机用户可以赚钱啦！（移动用户免进）

为什么表单设计非常重要？

- 表单是用户与网站之间进行“对话”的方式
- 从商业上
    - 使用户能够实现购买行为
    - 使商家实现销售利润最大化
- 从交互的角度
    - 使用户能够参与
    - 使商家能够增加用户并形成社区
- 从参与角度
    - 使用户能够操作和贡献内容
    - 使商家可以积累内容和数据

设计原则
    - 使痛苦减少到最小
        - 没有人喜欢填写表单
        - 聪明的默认值，在线校验，输入的容错性
    - 清晰的完成路径
    - 考虑用户的背景和使用情景
        - 用户的熟练程度
        - 用户使用的频繁度
    - 确保交流的连续性
        - 错误，帮助和成功
        - 单一声音，减少噪音

对效果的分析
    - 易用性测试
        - 错误，提示，帮助，完成率，每次任务花费时间，满意度分值
    - 眼球跟踪
        - 完成时间，关注点,扫视路径
    - 用户帮助
        - 最重要的问题，事故次数
    - 最好的体验
        - 常用解决方案，独特的方法
    - 在线跟踪
        - 完成率，进入点，退出点，页面元素的使用,输入的数据

设计模式
    信息+互动+反馈
   
信息
    - 布局
        - 标签位置
        - 内容分组
    - 输入
        - 格式，必填项目
    - 动作
        - 首要动作和次要动作
    - 帮助和提示
    - 视觉层级

标签顶端对齐方式
    - 当被收集的数据是熟悉的
    - 最少的完成时间
    - 需要更大的垂直空间
    - 间距和对比对于有效的视觉扫描很关键
    - 对于本地化和复杂的输入有更高的灵活性

标签右对齐方式
    - 标签和输入框有清晰的联系
    - 需要较少的垂直空间
    - 由于左侧的不对齐，快速扫描所有标签变得比较困难
    - 很快的完成时间

标签左对齐方式
    - 当需要的数据不熟悉时
    - 标签的扫描比较容易
    - 标签与输入框的联系不紧密
    - 改变标签长度可能对布局产生破坏和削弱

眼球跟踪
    - 2006年7月matteo panzo的研究
    - 左对齐
        - 容易将标签与输入框联系起来
        - 标签和输入框之间的距离让用户花费更多时间
    - 右对齐
        - 减少了将近一半的注视次数
        - 表单完成时间减少了一半
    - 顶端对齐
        - 让用户一眼捕捉到标签和输入框
        - 最少的完成时间

最好的体验
    - 减少完成时间以及熟悉的数据输入：上对齐
    - 如果希望节省垂直空间：右对齐
    - 对于用户不熟悉或者高级的数据项：左对齐
   
必填项目
    - 必填项的指示在以下情况下最有用：
        - 输入项很多
        - 很少是必填项目
        - 使用户能够通过扫描表单知道什么需要填写
    - 选填项指示在以下情况下最有用：
        - 很少的项目是选填项
    - 当所有项目都是必填项时指示就没有用处

最好的体验
    - 尽量避免选填项
    - 必填项多，则标明选填项目
    - 选填项多，则标明必填项
    - 文字最好，但*经常被用于必填项目
    - 将标识和标签连在一起
   
输入域长度
    - 输入域长度可以提供有价值的affordances
    - 适当的域长度为输入提供足够的空间
    - 混乱的域长度可能给表单增加视觉噪音

最好的体验
    - 如果可能，use field length as an affordance
    - 否则，考虑一个一致的长度提供足够的输入空间
   
内容分组
    - 内容关系提供了结构化组织表单的方式
    - 分组提供了
        - 一种在高层次上扫描必需信息的方式
        - 表单内信息关系的联系

太多的内容分组会导致额外的视觉噪音，降低可读性
最小化分组的好处：减少视觉噪音，更直接的完成路径

最好的体验
    - 将表单内关联的内容进行分组
    - 使用最少数量的视觉元素来表达关系
   
动作
    - 不是所有的表单动作是平等的
        - 重置、取消、返回一般来说是次要的操作，很多时候不是必须的
        - 保存、下一步、提交是首要的操作：对于表单的完成起直接作用
    - 动作的视觉呈现需要与他们的重要性相匹配

最好的体验
    - 如果可能，避免次要动作
    - 否则，用清晰的视觉识别来区分主要和次要动作
   
帮助和提示
    - 在下面的情况下，帮助提示是有用的：
        - 要求用户输入不熟悉的数据时
        - 用户对于为什么数据被要求填写可能有疑问
        - 推荐用户使用某种提供数据的方式
        - 某些数据是选填的
    - 然而，过度使用帮助和提示会很快overwhelm表单
    - 在下面的情况下，你也许需要考虑动态提示
        - 自动的内文提醒
        - 用户触发的内文提醒
        - 用户触发的段落提醒
       
最好的体验
    - 除非必要，尽量少的使用帮助、提示
    - 明显和与数据输入区最相邻的帮助是最有效的
    - 当收集很多用户不熟悉的数据时，考虑使用动态提示系统

交互
    - 用户完成的路径
    - 使用键盘的tab键进行控制
    - 逐步出现
    - 依赖性出现

完成路径
    - 每个表单的首要目标都是希望用户填完
    - 每一个输入项目需要考虑和操作
        - 去掉所有不必要的数据输入要求
        - 提供灵活的数据输入
    - 提供清晰的路径
    - 提供聪明的默认值
   
最好的体验
    - 去掉所有不必要的数据请求
    - 使用聪明的默认值
    - 给用户提供灵活的数据输入选择
    - 清晰的完成路径
    - 对于长表单，提供进度和保存功能

tabbing
    - 许多用户通过tab在表单项目之间跳转
    - 合理的html将保证跳转正确工作
    - 多列式的表单结构可能与tabbing顺序相冲突
   
最好的体验
    - 记得考虑tabbing
    - 使用tabindex属性来控制tabbing顺序
    - 当设计表单布局时考虑tabbing预期

阶段性提醒
    - 不是所有用户一次需要所有可选项
    - 合理使用的阶段性提醒提供了额外的选项
        - 高级选项
        - 进阶操作

最好的体验
    - 根据用户需求的优先级来安排阶段性提醒
    - 最有效的方法是让用户来触发
    - 使用一致的提醒方式
   
依赖性选择输入
    - 有时候一个数据需要与其他的数据输入相关联
        - 某项输入触发更多的选项
        - 某项输入触发更清楚的需求

依赖型显现输入
    - 页面级别
        - 需要额外的步骤
    - 区块标签
        - 通常容易被忽略
        - 默认值很重要
    - 手指区块标签
        - 需要遵循完成路径
    - 区块选择项
        - 有效将信息分组
        - 隐藏了额外的选项
    - 下方暴露和行间暴露
        - 有让用户迷惑的潜在危险
    - 当选择/选中时激活
        - 次要选择的关联性被削弱

最好的体验
    - 在首选项之间保持清晰的关系
    - 将额外输入项与他们的触发器之间保持清晰的关联
    - 避免“跳跃”造成首选项之间关联的减弱
   
反馈
    - 文中校验
        - 一致性
    - 错误
        - 提示形式和解决方案
    - 进度
        - 提示形式
    - 成功
        - 校验
       
文中校验
    - 当数据输入时提供直接的反馈
        - 输入校验
        - 建议正确的输入
        - 帮助用户不超出限制
    - 如：
        - 密码提示
        - 用户名选取
        - 正确输入下拉提示
        - 最大允许字符计算

最佳体验
    - 当输入项的出错率很高时考虑文中校验
    - 使用建议输入来减少歧义
    - 沟通界限
   
报错
    - 错误被用来保证所有数据项被正确提供
        - 清晰的标签，affordances，帮助提示和校验可以帮助减少错误
    - 但一些错误仍然会出现
    - 用尽量少的步骤提供清晰的解决方案

最佳体验
    - 当错误发生时提供清楚地交流：优先的位置和视觉反差
    - 提供修正错误的方法
    - 将错误信息与相关输入项关联起来
    - 当错误发生时用视觉语言来double

进度
    - 一些时候动作需要有执行的时间
        - 表单提交
        - 数据计算
        - 上传
    - 当动作进行中时提供反馈
        - 例如：将提交按钮disable
       
最佳体验
    - 提供任务的进度提示
    - 当用户点击提交后，将其disable以避免重复的提交

成功
    - 当成功完成表单时，在上下文中确认数据输入
        - 在一个新页面中
        - 在一个更新的表单中
    - 通过以下形式提供反馈
        - 消息（可移除）
        - 动画的形式
       
最佳体验
    - 当数据提交成功后给与清晰的交流
    - 在数据提交的情境中提供反馈。
       
额外补充
    - 避免改变用户提供的输入
        - 用后来的输入
        - 当错误发生时
    - 如果获取信息是困难的，那么让用户知道比直接给用户一个表单更优先

可用性和标签形式
    - 使用label标签将数据与标签关联
        - 能够被screen reader正确识别
        - 多数浏览器将带<label>标签的文字处理为可点击：更大的动作
    - 使用tabindex属性提供tabbing路径
        - 提供tabbing顺序的控制
        - 使表单可以通过键盘来导航
    - 考虑为支持键盘输入提供accesskey属性
        - 直接到达相关的输入项
    - 考虑fieldset属性将内容分组

Tags：表单 设计 用户体验