Web交互设计优化的简易check list

“优化已有产品的体验”，这是用户体验相关岗位职责中常见的描述。我们的产品常常是在快速的迭代过程中不断完善的，就像孩子生下来需要养育才能长大一样，优化已有功能/产品，和设计新功能/产品同样重要，不可偏废。

但是，相比实现新功能，已有功能的优化总是显得没有那么紧迫而且很零散，导致了迭代优化的计划总是被归入“重要不紧急”甚至是“不重要不紧急”的象限，变成了东一棒子西一榔锤的买卖。我们可以通过可用性测试来发现问题，但是测试往往受到时间、用户邀约、场地和设备等条件的限制，可能无法进行。更多时候，设计师需要根据一定的原则（例如可用性准则）进行走查，以快速地发现并解决问题。

这篇小文章关心的问题是：如果想对非娱乐导向产品已有的交互设计进行优化，我们

• 需要从哪些方面考虑
• 遵从什么样的原则
• 如何开始检查现有的设计
• 如何确定优化的优先级

而不涉及：

• 新功能/产品的交互设计过程
• 娱乐导向产品的设计优化
• 产品概念、功能层次的优化
• 适合每一类型产品的tips
• 具体的优化方法

一、需要优化什么 (Considerations)

“设计原则的主要目的之一就是优化用户的产品体验。对于生产工具和其他非娱乐导向的产品而言，这意味着将工作负荷降至最低。”——《交互设计精髓》

行为和界面层面的设计原则告诉我们，应该为降低用户的工作负荷而设计。但是我们常常不够贴心，不知不觉就对用户设下了种种考验，让他们抓狂：

1.视觉负担 visual work

• 需要分解布局
• 需要区分内容层次
• 需要区分视觉元素
• 需要努力定位目标信息
• 需要识别阅读起点
• 需要经常变换视线
• 视觉流被干扰、打断

2.认知负担 cognitive work

• 需要理解不熟悉的概念和模式
• 需要理解冗长、生涩的文本内容
• 需要理解混乱的结构和布局
• 需要理解模棱两可的操作
• 需要猜测系统状态、行为、结果

3.记忆负担 memory work

• 需要记住对象的各种属性（名字、位置、大小、颜色）
• 需要记住对象的关联
• 需要记住操作的命令、步骤、结果
• 需要记住以往的操作

4.物理负担 physical work

• 需要长距离移动鼠标
• 需要进行（多次）点击
• 需要执行不同的鼠标手势
• 需要多种操作组合
• 需要切换输入模式
• 需要进出不同的页面/区域
• 需要长时间等待

二、优化目标 (Goal)

仔细检查已有的设计，或多或少总是能发现问题。在解决问题之前，我们应该清楚要往什么方向进行优化：

1.基于可用性的目标

• 易于识别/定位/阅读
• 易于理解/学习/记忆
• 易于操作

优化的最重要的目的，是让产品更好用，使设计符合Jakob Nielsen的十条可用性准则：

1. 通过有效的反馈信息提供显著的系统状态
2. 符合用户的真实世界
3. 用户自由控制权
4. 一致性和标准性
5. 预防出错
6. 识别而不是回忆
7. 灵活、便捷的使用
8. 美观，精简的设计
9. 协助用户认识，分析和改正错误
10. 帮助和说明

2.基于产品的目标

需要根据不同产品进行定义。例如，对于快速注册流程的优化，目的是让用户用最方便完成注册进入目标页面，优化目标可能是最小化输入、最短等待时间等。

三、快速检查清单 (Check list)

为了达到优化的目标，整理了一个简易的checklist（pdf版本下载链接请见文末），方便在走查时对架构、布局、内容、行为四个方面对照检查：

1.架构和导航Architecture and navigation

¨  是否采用了用户熟悉或容易理解的结构？

¨  是否能识别当前在网站中的位置？

¨  是否能清晰表达页面之间的结构？

¨  是否能快速回到首页/主要页面？

¨  链接名称与页面名称是否相对应？

¨  当前页面的结构和布局是否清晰？

2.布局和设计Layout and design

¨  是否采用了用户熟悉的界面元素和控件？

¨  界面元素和控件的文字、位置、布局、分组、大小、颜色、形状等是否合理、容易识别、一致？

¨  界面元素/控件之间的关系是否表达正确？

¨  主要操作/阅读区域的视线是否流畅？

¨  其他文本（称谓、提示语、提供反馈）是否一致？

3.内容和可读性Content and readability

¨  文字内容的交流对象是用户吗？

¨  语言是否简洁、易懂、礼貌？

¨  内容表达的含义是否一致？

¨  重要内容是否处于显著位置？

¨  是否在需要时提供必要的信息？

¨  是否有干扰视线和注意力的元素？

4.行为和互动Behavior and interaction

¨  是否告知、引导用户可以做什么？

¨  是否告知需要进行哪些步骤？

¨  是否告知需要多少时间完成？

¨  是否告知第一步做什么？

¨  是否告知输入/操作限制？

¨  是否有必要的系统/用户行为反馈？

¨  是否允许必要的撤销操作？

¨  是否页面上所有操作都必须由用户完成？

¨  是否已将操作步骤、点击次数减至最少？

¨  是否所有跳转都是必须的（无法在当前页面呈现）？

以上只是一个不完全的清单，同学们可以根据自己的实践经验修改，也可以参考更全面、权威的可用性测试检查表，如普渡大学可用性测试检查列表。

四、确定优先级 (Priority)

当我们通过checklist将需要优化的问题筛选出来以后，可以根据问题的严重性和解决的问题的成本（时间、人力等）来综合考虑问题的优先级，例如，问题严重性得分高而且优化成本低的问题，应该优先解决。

五、小结

Considerations：为降低用户的视觉负担、认知负担、记忆负担以及物理负担而优化设计

Goal：使设计易于识别/定位/阅读，易于理解/学习/记忆，易于操作，符合可用性原则和产品目标

Check list：交互设计快速检查清单v1  PDF版本  Download

© 推荐 for 互联网的那点事, 2011. | 点击查看你正在浏览的文章链接 |



文章标签: 交互设计


点击关注“互联网的那点事”新浪微博

点击收听”互联网的那点事”腾讯微博

你可能也喜欢：
再议手机交互设计原则	交互设计应该看人下菜碟	Web 交互设计“灰色”的8类应用	基础控件和交互设计元素的层级	数据与理论结合，让交互设计更专业
来自无觅网络的相关文章：
(@toodaylab) SAAB汽车广告，交互设计与摄影的完美结合	(@toodaylab) 诺曼门究竟要怎么开	(@guokr) 盘点2010年20大最给力概念设计（上）	(@toodaylab) CreativeDNAaustria概念设计：情人笔记本电脑	(@toodaylab) Zikmu Parrot：设计感直立式iPod音箱
无觅