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

“优化已有产品的体验”,这是用户体验相关岗位职责中常见的描述。我们的产品常常是在快速的迭代过程中不断完善的,就像孩子生下来需要养育才能长大一样,优化已有功能/产品,和设计新功能/产品同样重要,不可偏废。
但是,相比实现新功能,已有功能的优化总是显得没有那么紧迫而且很零散,导致了迭代优化的计划总是被归入“重要不紧急”甚至是“不重要不紧急”的象限,变成了东一棒子西一榔锤的买卖。我们可以通过可用性测试来发现问题,但是测试往往受到时间、用户邀约、场地和设备等条件的限制,可能无法进行。更多时候,设计师需要根据一定的原则(例如可用性准则)进行走查,以快速地发现并解决问题。
这篇小文章关心的问题是:如果想对非娱乐导向产品已有的交互设计进行优化,我们
- 需要从哪些方面考虑
- 遵从什么样的原则
- 如何开始检查现有的设计
- 如何确定优化的优先级
而不涉及:
- 新功能/产品的交互设计过程
- 娱乐导向产品的设计优化
- 产品概念、功能层次的优化
- 适合每一类型产品的tips
- 具体的优化方法
一、需要优化什么 (Considerations)
“设计原则的主要目的之一就是优化用户的产品体验。对于生产工具和其他非娱乐导向的产品而言,这意味着将工作负荷降至最低。”——《交互设计精髓》
行为和界面层面的设计原则告诉我们,应该为降低用户的工作负荷而设计。但是我们常常不够贴心,不知不觉就对用户设下了种种考验,让他们抓狂:
1.视觉负担 visual work
- 需要分解布局
- 需要区分内容层次
- 需要区分视觉元素
- 需要努力定位目标信息
- 需要识别阅读起点
- 需要经常变换视线
- 视觉流被干扰、打断

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

3.记忆负担 memory work
- 需要记住对象的各种属性(名字、位置、大小、颜色)
- 需要记住对象的关联
- 需要记住操作的命令、步骤、结果
- 需要记住以往的操作

4.物理负担 physical work
- 需要长距离移动鼠标
- 需要进行(多次)点击
- 需要执行不同的鼠标手势
- 需要多种操作组合
- 需要切换输入模式
- 需要进出不同的页面/区域
- 需要长时间等待

二、优化目标 (Goal)
仔细检查已有的设计,或多或少总是能发现问题。在解决问题之前,我们应该清楚要往什么方向进行优化:
1.基于可用性的目标
- 易于识别/定位/阅读
- 易于理解/学习/记忆
- 易于操作
优化的最重要的目的,是让产品更好用,使设计符合Jakob Nielsen的十条可用性准则:
- 通过有效的反馈信息提供显著的系统状态
- 符合用户的真实世界
- 用户自由控制权
- 一致性和标准性
- 预防出错
- 识别而不是回忆
- 灵活、便捷的使用
- 美观,精简的设计
- 协助用户认识,分析和改正错误
- 帮助和说明
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
Priority:根据问题的严重性和成本综合考虑,优先解决严重且成本低的问题。
Reference
- 《About Face3:交互设计精髓》
- 《人机交互:以用户为中心的设计和评估》
- Ten Usability Heuristics
- Purdue Usability Testing Questionnaire
Web交互设计优化的简易check list的更多相关文章
- 数据分析在web交互设计中的作用 页面跳出率 100% 原因分析
通过分析访问的路径,发现,访问者访问其他页面,直接跳出 页面跳出率 100% 说明: 连作者都发现的导航路径不清晰 对导航进行改版:清晰.明了
- web设计经验<三>值得你深入了解的交互设计5大支柱
随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了.为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解. 正如同我们在<交互设计最佳实践(卷1)>中所述,要做好交互设计 ...
- 第三阶段:3.Web端产品设计:4.产品设计-交互设计
交互设计主要做框架层以及结构层.包括交互关系,信息结构,界面布局,导航设计,信息内容. 导航关系非常重要. 这是框架层. 这是结构层. 要素就是信息内容.
- [好文翻译]WEB前端性能优化的14条规则
作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...
- web页面的优化
众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...
- 《About Face 3:交互设计精髓》【PDF】下载
<About Face 3:交互设计精髓>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230384328 内容简介 全书分成3篇:第1 ...
- 《大巧不工 web前端设计修炼之道》学习笔记
前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球.布局是否合理.风格是否简介.配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度.随着用户体验,可用性,可 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Hover States - 有趣的用户界面及交互设计
Hover States 一组新潮的和有趣的用户界面和交互设计的集合.Hover States 的目标是要成为设计师和开发人员灵感来源,向人们展示目前人们正在做的各种网站中令人惊奇的效果.他们认为交互 ...
随机推荐
- 微信api退款操作
状况:证书加载进去,本地调试退款成功,然而发不到iis上却是不成功. 分析:定然是iis配置问题. 问题一:证书加载不进去,出现“内部错误” 解决:在iis中找到对应的应用连接池,右键高级设置,找到“ ...
- Java Hour 20 Spring
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为20 Hour,请各位不吝赐教. 今天心情不佳,只 ...
- HDU 2819 — Swap 二分匹配
Swap Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Codeforces Gym 100637A A. Nano alarm-clocks 前缀和处理
A. Nano alarm-clocks Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100637/p ...
- 电赛总结(二)——AD芯片总结之AD7705
1.特性参数 (1)16位无丢失代码性AD转化器 (2)只需要3.3V供电(即只需要单片机即可供电) (3)双通道差分输入 (4)基准电压为2.5V时,在单极性信号下,输入范围是0到2.5V,在双极性 ...
- 枚举 POJ 1753 Flip Game
题目地址:http://poj.org/problem?id=1753 /* 这题几乎和POJ 2965一样,DFS函数都不用修改 只要修改一下change规则... 注意:是否初始已经ok了要先判断 ...
- UVa11732 "strcmp()" Anyone?(Trie树+孩子兄弟表示法)
我的做法是先建字典树,统计每个结点出现次数和相同字符串个数,每个结点对答案的贡献就是2*C(次数,2),然后再分别讨论相同字符串和不同字符串对答案的贡献. 另外这题主要就是Trie树的孩子兄弟表示法: ...
- BZOJ3165 : [Heoi2013]Segment
建立线段树,每个节点维护该区间内的最优线段. 插入线段时,在线段树上分裂成$O(\log n)$棵子树,若与当前点的最优线段不相交,那么取较优的,否则暴力递归子树. 查询时在叶子到根路径上所有点的最优 ...
- PHP中常见的页面跳转方法
转载自冠威博客 [ http://www.guanwei.org/ ]本文链接地址:http://www.guanwei.org/post/PHPnotes/04/php-redirect-metho ...
- Codeforces Round #208 (Div. 2) B Dima and Text Messages
#include <iostream> #include <algorithm> #include <string> using namespace std; in ...
