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

简介: Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究   “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描述。

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

View more  documents from  j Lin.

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

Reference

  1. 《About Face3:交互设计精髓》
  2. 《人机交互:以用户为中心的设计和评估》
  3. Ten Usability Heuristics
  4. Purdue Usability Testing Questionnaire
目录
相关文章
|
28天前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
94 5
|
16天前
|
机器学习/深度学习 缓存 监控
利用机器学习优化Web性能和用户体验
【10月更文挑战第16天】本文探讨了如何利用机器学习技术优化Web性能和用户体验。通过分析用户行为和性能数据,机器学习可以实现动态资源优化、预测性缓存、性能瓶颈检测和自适应用户体验。文章还介绍了实施步骤和实战技巧,帮助开发者更有效地提升Web应用的速度和用户满意度。
|
30天前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
58 6
|
29天前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
|
1月前
|
缓存 前端开发 JavaScript
构建高性能Web应用:优化前端性能的策略
构建高性能Web应用:优化前端性能的策略
|
2月前
|
数据库 开发者 Python
实战指南:用Python协程与异步函数优化高性能Web应用
在快速发展的Web开发领域,高性能与高效响应是衡量应用质量的重要标准。随着Python在Web开发中的广泛应用,如何利用Python的协程(Coroutine)与异步函数(Async Functions)特性来优化Web应用的性能,成为了许多开发者关注的焦点。本文将从实战角度出发,通过具体案例展示如何运用这些技术来提升Web应用的响应速度和吞吐量。
28 1
|
2月前
|
缓存 负载均衡 前端开发
优化Web应用性能的十种策略
在当今的数字化时代,Web应用的性能直接影响用户体验和业务成效。本文深入探讨了优化Web应用性能的十种策略,从前端的资源优化到后端的架构改进,涵盖了缓存机制、异步加载、数据库优化等关键技术手段。这些策略不仅能提升响应速度,还能显著减少服务器负担和带宽消耗,为开发者提供了一系列切实可行的解决方案。
|
2月前
|
网络协议 Windows
[收藏]优化基于Win 2000系统的Web服务器性能
[收藏]优化基于Win 2000系统的Web服务器性能
|
3月前
|
缓存 安全 前端开发
【性能大逆袭】Web2py应用如何从龟速变飞快?六大优化秘籍让你的应用焕然一新!
【8月更文挑战第31天】Web2py是一款备受欢迎的全栈Python Web框架,以其内置的数据库抽象层和安全特性著称。然而,随着应用规模的扩大,性能瓶颈逐渐显现。本文通过对比分析,从代码层面(如减少数据库查询、避免全局变量)到部署策略(如静态文件压缩、CDN加速、选择合适数据库、优化查询、异步处理),全面介绍Web2py应用的性能优化方法及其应用场景。通过具体示例,展示了如何创建并优化一个简单的Web2py应用,旨在帮助开发者构建高效稳定的Web应用。
52 2
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
49 1