认识五个要素

image.png

战略层:产品目标和用户需求

战略层:产品目标,用户需求

产品目标,
在太具体与太宽泛之间取得平衡。明确定义“成功的条件”而非“通向成功的路径”。
商业目标,过于狭义;品牌识别;成功标准,可追踪的指标。
用户需求,
用户细分 (user segmentation),可以使用人口统计特征,也可使用消费心态档案 (psychographic profile),也可关注用户对技术本身的熟悉、适应程度;
可用性和用户研究,收集用户的观点和感知(问卷调查,用户访谈,焦点小组),理解具体的用户行为和交互表现(用户测试,现场调查)。更轻量级的现场调查:任务分析
创建人物角色。
团队角色和流程
战略文档、愿景文档:清晰简洁,不仅是列出目标清单,也提供不同目标之间的关系分析,且说明这些目标要如何融入更大的企业环境中去

范围层:功能规格和内容需求

定义项目范围:有价值的过程,产生有价值的产品。
用文档来定义产品需求:这样才知道你正在建设什么;这样才知道你不需要建设什么
功能和内容:
“特性”(feature)
内容需求常常伴随着功能的需求,常常通过一个内容管理系统(Content Management System, CMS)来进行管理。
功能需求也常常伴随着内容的需求。某个页面中的说明,错误提示……
定义需求:
从企业内部的管理者、直接用用户处获得需求
三种需求:人们讲述的、他们想要的东西;说出来的、所期望的特性并不是真正想要的,或是治标不治本的‘人们不知道他们是否需要的特性
可以从不同部门的成员中获得灵感,打开思路

考虑硬件需求,
创建场景,
从竞争对手得到启示

功能规格说明:
让它真正起作用。让撰写的过程变得快速简便
不需要包含每一个细节,只需要包含在设计和开发过程中可能出现混淆的功能定义
言语需要乐观积极(描述系统将要做什么去防止不好的事情发生,而不是描述系统不应该做什么不好的事情)
具体
避免主观的语气

内容需求:
应该提供每一个特性规模的大致预估(文本字数,图像大小,下载的文件字节,独立元素的大小等)
尽早确定某个人来负责每一个元素内容(日常维护),以及更新频率

确定需求优先级:
评估需求是否能满足战略目标(产品目标/用户需求)
额外确定第三种范围:实现这些需求的可行性有多大
技术局限,资源,时间

结构层:交互设计与信息架构

涉及“为用户设计结构化体验”的方法被称为交互设计。
通过信息架构来构建用户体验。
确定各个将要呈现给用户的元素的模式(patterns)和顺序(sequences)。
交互设计关注于将影响用户执行和完成任务的元素;信息架构则关注如何将信息表达给用户的元素。

交互设计:
描述“可能地用户行为”,定义“系统如何配合和响应”这些用户行为。

概念模型:
用户对于“交互组件将怎样工作”的观点称为概念模型(conceptual model)
将内容元素一致地表现出来
错误处理:
将系统设计成不可能犯错的那种/使错误难以发生/发生错误后帮助用户纠正

信息架构:
人们如何认知信息

结构化内容
以内容为主的网站上,信息架构主要的工作使设计组织分类和导航的结构,设计出让用户容易找到信息的系统。同时必须教育、通知或说服用户。
分类体系:从上到下或从下到上。
top-down approach
从战略层所考虑的内容来进行结构设计
bottom-up approach
根据对“内容和功能需求的分析”而来

一个高效结构应能容纳成长和适应变动

结构方法
层级结构 hierachical structure /树状结构tree或中心辐射结构hub-and spoke
矩阵结构 matrix structure 允许用户在节点与节点之间沿着两个或更多的维度异动
通过颜色浏览or通过产品尺寸浏览(超过三个维度的矩阵可能会出现问题……)
自然结构 organic structures 适用于探索一系列关系不明确或一直在演变的主题
线性结构 sequential structures

组织原则 organizing principle
最高层级的组织原则与产品目标&用户需求相关;较低的层级,内容与功能需求对组织原则有更大的影响
“截面”facets

语言和元数据
用户可能无法了解你的命名原则 nomenclature(描述、标签,和产品使用的其他术语)
“使用用户的语言”,“保持一致性”
用来强调一致性的工具:受控词典(controlled vocabulary)

团队角色和流程
文档要描述清楚产品的结构——从命名原则和元数据的具体细节,到信息架构和交互设计的整体概况。
架构图 architecture diagram
视觉辞典 visual vocabulary

框架层:界面设计、导航设计和信息设计

关注点在于独立的组件及它们之间的相互关系
功能型产品:通过界面设计interface design来确定框架。 (去做某些事)
信息型产品:导航设计navigation design (去某个地方)
信息设计information design 用于呈现有效的信息沟通。(传达想法)

习惯和比喻:
尊重用户的习惯,保持概念模型一致(例如 “开始”“返回”“保存”一类的概念)
不应过于强调交互设计背后的概念模型,也应该抑制在产品四周建立起比喻(metaphor)的冲动。
减少用户在理解和使用产品功能时对猜测的要求

界面设计:
选择正确的界面元素
让用户一眼能看到“最重要的东西”
不重要的东西则不应该被注意到(减少被发现的机会)
初次呈现时仔细考虑每一个选项的默认值
自动记住用户最后一次选择状态

桌面操作系统的常见界面元素:
复选框;单选框;文本框;下拉菜单;多选菜单;按钮

导航设计:
告诉用户“他们在哪儿”“他们能去哪儿”
三个目标:

  1. 提供给用户一种在网站间跳转的方法;
  2. 导航设计必须传达出这些元素和它们所包含内容之间的关系(链接之间的关系、差异,帮助用户理解“哪些选择是有效的”
  3. 导航设计必须传达出它的内容和用户当前浏览页面之间的关系

几种常见的导航系统:
全局导航(global navigation)
局部导航(local navigation) 附近地点
辅助导航(supplementary navigation) 快速达到相关内容的快捷途径
上下文导航(contextual navigation)/内联导航 链接置于其正在读的地方
友好导航(courtesy navigation)用户通常不需要的链接,但作为一种便利的途径来使用 (联系信息,反馈表单,法律声明等)

远程导航(remote navigation) 不包含在页面结构中,独立于网站内容或功能
网站地图(site map) 是一种常见的远程导航工具(通常不显示超过两个层级的导航)
索引表(index)按照字母顺序排列

信息设计:
最佳的视觉呈现方式
分组、整理散乱的信息

能“反映用户的思路”,“支持他们的任务和目标”

错误提示,阅读使用手册……无论何时,系统都应该给用户提供能正确使用系统的信息

指示标识
信息设计+导航设计:指示标识 wayfinding
其设计涉及页面元素……如停车场的颜色编码……图标、标签系统和排版……

线框图:
将信息设计、界面涉及和导航涉及放置到一起,形成一个统一的、有内在凝聚力的架构
线框图捕获所有在框架层做出的决定,并用一个文档来展现它们。(展现不同程度的细节)

放入文档进行解释……可以确定一个建立在基本概念结构上的架构,同时指出了表现层的设计应该前进的方向。

表现层:感知设计

合理设计感知:
五感……
视觉设计如何支持用户体验。

忠于眼睛:
你的视线首先落在什么地方?
简单地询问人们

成功的设计,用户眼睛的移动轨迹:

  • 遵循一条流畅的路径
  • 在不需要用太多细节来吓倒用户的前提下,它为用户提供有效选择的、某种可能的“引导”。

对比和一致性:
对比 contrast
保持一致性 uniformity 使你的设计有效地传达信息
基于栅格线 grid-based layout
(不要教条遵守,始终注意需求)

内部和外部的一致性:

  • 内部一致性的问题:在产品的两个不同的地方反映了不同的设计方法
  • 外部一致性的问题:这个产品没有在同一个企业的其他产品中,反映出被使用的、相同的设计方法

配色方案和排版(略)

设计合成品和风格指南:
visual mock-up, design comp

风格指南,承载了种种设计决策。总体目标:提供足够的细节来帮助人们将来做出明智的决策。

要素的应用

创造良好的用户体验最重要的工作内容是大量收集亟待解决的非常细微的问题。

  • 了解你正在试着去解决的问题
  • 了解这些解决办法所造成的后果

关于用户体验的决策总会体现在以下这些场景之中:

  • 由现状决定的设计 design by default
  • 由模仿决定的设计 design by mimicry
  • 由领导决定的设计 design by fiat

提出正确的问题:(略)
马拉松和短跑:
监控自己的表现,密切注意哪些可行哪些不可行,并且适时地调整自己的方式。
有些任务需要重点承担速度;另一些则要求一个更加深思熟虑的方法。