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

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

00 | 时间: 2011-02-11 | 28,842 Views 
交互设计用户研究

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

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

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

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

而不涉及:

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

交互设计快速检查清单V1

View more documents from j Lin.

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

Reference

  1. 《About Face3:交互设计精髓》
  2. 《人机交互:以用户为中心的设计和评估》
  3. Ten Usability Heuristics
  4. Purdue Usability Testing Questionnaire
时间: 2024-10-19 04:28:14

Web交互设计优化的简易check list的相关文章

文档型信息交互设计及相关技术实现

本文信息交互是指办公和经营管理活动中所产生的公众或定向业务信息,以及在信息共享过程中,以业务规则形式衍生出的评论.评价.回复.转发等业务信息延续. 信息交互设计目标 共享业务信息,并支持限定范围 共享的业务信息,可以通过评论.评价.回复.转发等方式进行业务信息延续和推广 把发布信息.延续信息功能设计为通用功能 以信息实例为基本文档单元,衍生信息为其子文档,存储在文档型数据库中(MongoDB) 信息展现形式灵活多样,以模板形式为用提供应用选择 发布信息支持带格式文档,统一采用MarkDown编辑

时间都去哪了-移动Web首屏优化实践

时间都去哪了-移动Web首屏优化实践 首屏时间 可用性的前提,后面用户是否使用你app很重要的因素之一: 我们PC上访问其实现在的带宽已经很好了,百兆光宽带,但是在移动端就不一样了,很多用户还是使用的流量,GPRS.所以,对于首屏时间的加载,压力还是蛮大的: 我们手机在出发一个操作之后,发生了什么? 下面是在返回数据前发生的动作,但是作为前端,我们好像动不了这些东西,不可能叫运营商去帮你定制一套系统: 这个才是我们真正要去做的东西-渲染(webkit) 给你两个优化的方面,优化网路与优化渲染(高

web页面的优化

众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即页面的表现形式:Javascript则负责页面的行为,即完成页面的各种交互. 页面的这三个部分是相辅相成的,在构建web页面的过程中,要尽量保持三者松耦合的关系,从而实现对一个部分的改动而不影响另外两个部分. 要实现三者的松耦合,首先必然是从文件级别上隔离三个部分,即在HTML页面中引入相关的CSS

Web服务器性能优化

Web 服务器性能与站点访问性能优化思路 要优化 Web 服务器的性能,我们先来看看 Web 服务器在 web 页面处理上的步骤:1.Web 浏览器向一个特定的服务器发出 Web 页面请求;2.Web 服务器接收到 web 页面请求后,寻找所请求的 web 页面,并将所请求的 Web 页面传送给 Web 浏览器;3.Web 浏览器接收到所请求的 web 页面内容,并将它显示出来. 上面三个步骤都关系 Web 服务器,但实际 Web 服务器性能相关最大的是在第 2 步,这里 Web 服务器需要寻找

《大巧不工 web前端设计修炼之道》学习笔记

前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球.布局是否合理.风格是否简介.配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度.随着用户体验,可用性,可交互性等越来越多的前端术语的出现,前端设计已经不是简单的HTML.CSS.AJAX等元素的整合了,它更关注交互的流畅性.操作的便利性.流程的合理性.结构的清晰度以及可维护性.页面兼容性以及同后端程序的良好桥接等,应该能够在真正理解WEB应用的需求的基础上放眼全局,把握整个前端的设计方案,因此新的时期

交互设计实用指南系列(1) – 操作入口明确

链接: http://ued.taobao.org/blog/2009/12/the-practice-guidelines-of-interaction-design-clear-operational-entrance-of-effectivity/ “操作入口明确”,就是指产品的任何一个功能都要有明确.合理的入口.“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件.输入框.文字链等都属于操作入口:“明确”指的是入口的视觉感是清晰的.可识别的:“合理”是指入口的

web架构设计经验分享(转)

本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领

web服务器并发优化(nginx+多实例tomcat负载均衡并发5000左右)

前言:   我之前在服务器方面不太懂,经过此次的配置让我的技术有了很大的进步,写此给大家共享一下,如有错误之处欢迎指正.   配置这个初衷是为了给java(s2sh框架)写的app接口提供大的并发量支持 ,并且是https的接口 (淘宝买的 http://item.taobao.com/item.htm?spm=a1z09.2.9.69.zvqUo9&id=39486787932&_u=21mb264ebe80   卖家人不错,我说配tomcat  给的jsk文件,几天后我配nginx给了

目标导向的交互设计:About face 3 -- The essentials of interaction design 读书分享

近段读完并分享了Allan copper的 About face3 : The essentials of interaction design,推荐没看过的程序员朋友可以抽时间看看.感觉上这本书对交互设计讲得比较透彻,首先拿出了方法--目标导向的交互设计,再介绍了交互设计的过程框架,最后介绍交互设计的细节.比较易读,不仅有大量的细节规则,还会让读者对交互设计的方法和框架有一些认识. 第一部分:目标导向的交互设计 1. 设计的定义:了解用户的需求和期望,了解商业,了解技术限制,设计出可行,满足用