「用户体验的要素」要点归纳

用户体验

1. WHAT 什么是用户体验

• 产品如何与外界发生联系并发挥作用，即人们如何「接触」和「使用」它

2. WHY 用户体验重要性

• 优质的用户体验是一个重要的、可持续的竞争优势
• 用户体验就是商机

3. HOW 以用户为中心的设计
   创建吸引人的、高效的用户体验的方法

五层模型

五层模型

一. 战略层

1. 产品目标

• 商业目标
  • 避免太宽泛或太具体；
  • 避免在充分了解问题之前得出结论；
  • 明确定义「成功的条件」而不是「通向成功的路径」
• 品牌识别
  • 将品牌形象具体的写进目标，更有机会呈现积极的品牌形象
• 成功标准
  • 一些可追踪的指标，在产品上线以后用来显示它是否满足了自己的目标和用户的需求。例如：单月访问量；回访量等
  • 一些间接的衡量标准：客服专线电话减少；销售人员通过便捷的工具和资源缩短了工作时间 等

    印象数: 网站上每一个广告每天被展示的数量

2. 用户需求

• 用户细分

  • 人口统计学
    • 按照「性别」「年龄」「教育水平」「婚姻状况」「收入」等不同粒度划分
  • 消费心理档案
  • 对技术的熟悉程度和适应程度
  • 对网站的相关内容的熟悉程度

• 可用性和用户研究
  一些用户研究的工具方法：

  • 获取用户基本信息的市场调研方法：
    • 调查问卷
    • 焦点小组
  • 现场调查 / 任务分析（轻量级）
  • 用户测试

• 创建人物角色

• 战略决策通常由决策层敲定；产出战略文档 / 愿景文档；该文档要尽可能贯穿于整个项目流程

二. 范围层

1. 定义需求

• 三个层面的需求

  1. 人们口中讲述的直接想要的东西
  2. 通过跟用户探讨得到背后真正可以解决人们需求的东西
  3. 人们不知道他们是否需要的特性

• 用文档来定义管理需求，合理规划项目周期

  • 这样知道自己正在做什么
  • 这样知道自己不需要做什么

2. 功能规格 - 功能型产品

• 只记录设计或开发过程中出现有可能混淆的功能定义；
• 只记录在穿件这个产品时已经确定下来的决议；
• 准则：
  1. be positive
  • 描述这个系统将要做什么去防止不好的事情发生；而不是描述这个系统不应该做什么不好的事情；
  2. be specific
  3. 避免主观语气，可验证的

3. 内容需求 - 信息型产品

• 内容包含文本、图片、视频等不同形式；
• 提前预估内容量级；
• 尽早地确定某个人来负责每一个内容；
• 确定合理的内容更新频率 - 介于用户期望值和有效资源之间的一个合理值；
• 为不同需求的用户呈现不同的内容；
• 为已有大量内容的项目整理内容清单；

4. 确定需求优先级

• 战略目标和需求之间存在多对多的关系
• 为满足战略目标，需要评估需求的优先级，考虑因素包括：
  • 技术
  • 时间
  • 金钱
  • 不同功能间的冲突和权衡

三. 结构层

1. 交互设计 - 功能型产品

• 概念模型
  • 用户对于「交互组件将怎样工作」的观点称为「概念模型」例如：购物车
  • 网站对于概念模型的展示要保持一致
  • 对于在用户心中已有的传统概念模型，选择沿用
  • 概念模型要避免过于明确具体
• 错误处理
  1. 设计不可能犯错的系统
  2. 设计错误难以发生的系统，当错误发生时，帮助用户找出错误，并改正

2. 信息架构 - 信息型产品

• 结构化内容
  1. 从上到下
     • 从战略层触发，根据产品目标与用户需求直接进行结构设计；
     • 缺点：容易忽略重要细节
  2. 从下到上
     • 根据「内容和功能需求的分析」从下到上构建反应产品目标和用户需求的结构
     • 缺点：不能灵活的容纳未来内容的变更

从上到下 & 从下到上 结构化内容 一个适应性强的信息架构系统

• 结构方法
  1. 层级结构
     （树状结构 / 中心辐射结构）
     最常见
  2. 矩阵结构
     适用于带着不同需求而来的用户
  3. 自然结构
     适用于鼓励用户自由探索，例如：娱乐 & 教育
  4. 线性结构
     强调顺序，例如教学资料
• 组织原则
  在产品最高层使用的组织原则应该紧密的与「产品目标」和「用户需求」相关；
  而在结构中较低的层级，应该根据内容与功能需求来采取不同的组织原则；
• 语言与元数据
  • 「使用用户语言」& 「保持语言风格一致性」
  • 受控词典
    网站使用的一套标准语言
  • 类词词典
    常用的、但未纳入该网站标准用语的词汇
  • 元数据
    关于信息的信息。即以一种结构化的方式来描述内容的信息

3. 架构图

• 图解网站结构「视觉词典」http://www.jjg.net/ia/visvocab/

架构图举例

四. 框架层

1. 习惯 & 比喻

• 使界面与用户早已养成的习惯保持一致
• 界面要与它自身保持一致
• 有效的使用「比喻」；减少用户在「理解和使用产品功能」时的猜测

2. 界面设计

• 成功的界面设计是能让用户一眼就看到「最重要的东西」的界面设计；
  而不重要的东西不被注意到；
• 一些标准的界面元素：
  • 复选框
  • 单选框
  • 文本框
  • 下拉菜单
  • 多选菜单
  • 按钮

3. 导航设计

• 设计目标（同时达到）

  1. 导航设计必须提供给用户一种在网站间跳转的方法；
  2. 导航设计必须传达出这些元素和他们所包含内容之间的关系
  3. 导航设计必须传达出他的内容和用户当前浏览页面之间的关系

• 常见导航系统

  1. 全局导航
     覆盖整个网站的通路

image.png

2. 局部导航
   提供这个架构中「附近地点」的通路

image.png

3. 辅助导航
   提供了全局导航或局部导航不能快速到达的相关内容的快捷途径

image.png

4. 上下文导航
   内联导航，嵌入页面内容自身的一种导航，例如，超级链接

   
   image.png

5. 友好导航
   提供给用户通常不需要的链接，但它们是一种便捷途径

   
   image.png

6. 网站地图
   远程当行工具，给用户一个简明的、单页的网站整体结构的快捷浏览方式

7. 索引表
   按照字母排序的、链接到相关页面的列表。

4. 信息设计

• 视觉上的信息设计：柱状图 / 饼状图；望远镜 / 放大镜
• 分组和整理散乱的信息：反应用户思路 & 支撑他们的任务和目标
• 给用户提供正确使用系统的信息
  • 指示标识 (信息设计和导航设计的结合)

5. 线框图

将「信息设计」「界面设计」「导航设计」放到一起形成一个统一的、有内在凝聚力的架构的地方。

五. 表现层

1. 合理设计感知
   嗅觉 & 味觉：很少设计
   触觉
   听觉
   视觉：重要领域
2. 终于眼睛：眼球追踪
   特点：
   遵循的是一条流畅的路径；
   提供有选择的某种可能的引导,不需要用太多细节；
3. 吸引用户注意力的工具

• 对比
• 一致性（产品内外部的一致性）
• 配色方案和排版
• 设计合成品和风格指南
  • 设计合成品与线框图一一对应