Web交互设计优化的简易check List | 网易用户体验设计中心
http://www.woshipm.com/pd/1079.html
关于迭代优化的现状
“优化已有产品的体验”是用户体验相关岗位职责中的常见描述。
产品是在迭代过程中不断完善的,优化已有功能/产品,和设计新功能/产品同样重要,不可偏废。
相比实现新功能,已有功能的优化总是显得没有那么紧迫而且零散,导致了迭代优化总是被归入“重要不紧急”甚至是“不重要不紧急”的象限。
本文关心的问题:
如果要对非娱乐导向产品已有的交互设计进行优化,我们 需要从哪些方面考虑 遵从什么样的原则 如何开始检查现有的设计 如何确定优化的优先级
而不涉及:
新功能/产品的交互设计过程 娱乐导向产品的设计优化 产品概念、功能层次的优化 适合每一类型产品的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