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

标签: 产品设计 交互设计 | 发表时间:2011-02-12 01:19 | 作者:P迪 没剑
出处:http://www.alibuybuy.com

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

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

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

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

而不涉及:

  • 新功能/产品的交互设计过程
  • 娱乐导向产品的设计优化
  • 产品概念、功能层次的优化
  • 适合每一类型产品的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

View more documents from j Lin.

Priority:根据问题的严重性和成本综合考虑,优先解决严重且成本低的问题。

Reference

  1. 《About Face3:交互设计精髓》
  2. 《人机交互:以用户为中心的设计和评估》
  3. Ten Usability Heuristics
  4. Purdue Usability Testing Questionnaire

来源:http://uedc.163.com/4308.html


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



文章标签:


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

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

你可能也喜欢:

再议手机交互设计原则

交互设计应该看人下菜碟

Web 交互设计“灰色”的8类应用

基础控件和交互设计元素的层级

数据与理论结合,让交互设计更专业

来自无觅网络的相关文章:

(@toodaylab) SAAB汽车广告,交互设计与摄影的完美结合

(@toodaylab) 诺曼门究竟要怎么开

(@guokr) 盘点2010年20大最给力概念设计(上)

(@toodaylab) CreativeDNAaustria概念设计:情人笔记本电脑

(@toodaylab) Zikmu Parrot:设计感直立式iPod音箱
无觅

相关 [web 交互设计 优化] 推荐:

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

- 没剑 - 互联网的那点事
“优化已有产品的体验”,这是用户体验相关岗位职责中常见的描述. 我们的产品常常是在快速的迭代过程中不断完善的,就像孩子生下来需要养育才能长大一样,优化已有功能/产品,和设计新功能/产品同样重要,不可偏废. 但是,相比实现新功能,已有功能的优化总是显得没有那么紧迫而且很零散,导致了迭代优化的计划总是被归入“重要不紧急”甚至是“不重要不紧急”的象限,变成了东一棒子西一榔锤的买卖.

web交互设计原则和模式

- shallwelin - 译言-
原文作者:Bill Scott. 原文链接:Designing Web Interfaces Principles and Patterns for Rich Interaction. web界面设计(丰富交互设计的原则和模式). (本书英文版大家可以到我blog下载:http://blog.youmila.com/?p=325).

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点:直接使用浏览器内存的缓存数据,减少网站后台压力,用户体验(速度)好. 缺点:对于时时变化的动态页面,这种情况就不能容忍了,因为每次访问的都是第一次访问的内容,这样即使所请求的页面已经变化了,用户也不可能知道,所以此场景必须要消除这种缓存的影响. 延迟加载,将资源延迟到需要的时候的加载,例如detail页面,相关产品推荐,当用户浏览更多的信息往下拉动滚动时,才进行加载,异步加载可以大幅减少对后端资源的使用,在需要的时候加载,是资源合理使用常用的方式,但是也带来一个问题,当往下拉才去加载,如果性能不够好,用户的体验其实是不好的,“菊花”转动的时间会比较长,同时异步加载对前端性能的作用也是非常明显的,渲染的节点数量大幅减少.

Web性能优化

- - SegmentFault 最新的文章
Web网站的性能细线在几个方面:. 通过分析浏览器的渲染原理、资源对渲染的影响,得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程,分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景,模拟真实的网络加载情况:. 2.2 Timeline工具的各个组成.

WEB优化Favicon请求

- - ITeye博客
总是被命名为favicon.ico. 我们常常看到这样的一个请求/favicon.ico. 它总是显示在浏览器地址栏,网址的左边. 当访问一个页面的时候,不管怎么样,浏览器都会请求这个文件,即/favicon.ico. 可以通过在页面的部分加入元素来重新指定它的位置. ico格式可以是不同分辨率的图像,比如16×16, 32×32等.

Web性能优化:prefetch, prerender

- - Harttle Land
本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程: 首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染. 图片来源: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106.

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

Web前端优化最佳实践

- Jimmy - 中文热文榜|最新
还有 Jason, Bixuan, 曦, 推荐,查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践 Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).

web前端性能优化进阶路

- - 阿里巴巴(中国站)用户体验设计部博客
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践. 可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 黄金法则,以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.

Java Web 服务性能优化实践

- - 博客 - 伯乐在线
来源: IBM developerworks. 简介: 本文介绍如何提升 Java Web 服务性能,主要介绍了三种方法:一是采用 Web 服务的异步调用,二是引入 Web 服务批处理模式,三是压缩 SOAP 消息. 重点介绍在编程过程中如何使用异步 Web 服务以及异步调用和同步调用的差异点. 本文还示范了如何在项目中使用以上三种方法,以及各种方法所适合的应用场景.