用户体验要素
- 认识有哪些要素:
- 5个要素:(注意功能型与信息型的不同)
- 表现层:交付成果为视觉模板或设计合成品
- 视觉效果;
- 感知体验;
- 框架层:交付成果为线框图
- 排版布局;
- 界面设计:如何让用户产生互动;
- 导航设计:如何组合元素让用户在信息架构中穿行;
- 结构层:交付成果为示意图或流程图
- 功能型:交互设计;(用户如何通过一系列的动作完成任务)
- 信息型:信息架构;(如何组织内容,以便最便捷的呈现给用户)
- 范围层:
- 功能型:功能清单;
- 信息型:内容需求;
- 战略层:目的;
- 网站的目的:产品目标;
- 用户的目的:用户需求;
- 表现层:交付成果为视觉模板或设计合成品
- 网站的2种目的:
- 信息型:用户上来是为了浏览信息;
- 功能型:用户上来是为了完成任务;
- 网站的2种重要额外的因素:
- 内容:有价值的内容才是网站存在的目的,不然就是买椟还珠了;
- 技术:使以前的不可能变得可能;
- 5个要素:(注意功能型与信息型的不同)
- 战略层
- 2个好问题:
- 我们想通过这个产品得到什么?(答案即是我们的产品目标)
- 我们的用户想通过这个产品得到什么?(答案即是用户需求)
- 产品目标:
- 商业目标:要么赚钱,要么省钱;
- 品牌识别:我们想让用户感知到我们是怎么样的一种产品?我们身份标识?安全、高效、简单、快捷等?
- 成功标准:通过哪些可追踪的指标,来判断产品上线后有满足我们的目标以及用户的需求?
- 用户需求:
- 用户细分:先定义谁是我们的用户?
- 用户调研:用各种调研方法,了解用户是谁,他们需要什么;
- 人物角色:当找到目标用户后,为他们建立身份;以便未来时刻提醒自己,我们在为他们为设计,而不是为自己;
- 2个好问题:
- 范围层
- 想明白要做什么,不做什么,先做什么;
- 获得需求:多接触用户,多询问,5个WHY法(鱼骨图);
- 定义需求:做为什么角色,我希望什么效果,这样就可以获得什么利益;
- 确定优先级:
- 需求是否满足战略目标?
- 需求的实现可行性大小?时间、成本、依赖关系等;
- 结构层
- 假如我们现在知道人体需要哪些功能各异的器官了,接下来要做的是,如何把这些器官组织在一起;
- 对于内容,通过信息架构来构建用户体验;
- 对于任务,通过交互设计关注可能的用户行为,以及系统如何配合与响应这些用户行为
- 概念模型:用户对于交互组件将怎样工作的观点;
- 错误处理
- 最好的方法:设计成不可能犯错的方式;
- 其次的方法:让错误难以发生;
- 最后的方法:提供撤销功能;如果不可撤销,则只能依赖于大量的警告;
- 信息架构
- 关注:呈现给用户的信息是否合理并具有意义;
- 对于内容为主的网站,主要工作在于设计组织分类和导航的结构,以便用户可以高效率的浏览网站的内容;
- 从上到下和从下到上的方法,各有优缺点,应结合使用;
- 结构质量是最重要的标准,而不是“整个过程一共需要多少步骤”,而是“用户是否认为每一个步骤都是合理的”,以及“当前的步骤是否自然延续了上一个步骤中的任务”
- 一个高效结构的优点就是具备“容纳成长和适应变动”的能力;
- 信息架构的基本单位是“节点”,它是一种抽象概念,可大可小,取决于我们在考虑哪一个层级的内容架构,它可以小到一个字段,也可以大到整个图书馆;
- 常见结构
- 层级结构(树):
- 矩阵结构:按主题,按角色,按场景、按地区
- 线性结构:书籍,教案
- 自然结构:适合于鼓励探索,自由冒险的场景;
- 组织原则
- 一般来说,最高层级使用的组织原则应该紧密与网站目标和用户需求相关;而在结构中较低的层级,更多考虑内容与功能需求;
- 我们的困难不在于创建一个结构,而在于创建一个与“我们的目标”与“用户的需求”相对应的、正确的结构;
- 语言和元数据
- “使用用户的语言”和“保持一致性”非常重要,确保用户易于理解;实现这个目标的工具是“受控词典”;它是网站使用的一套标准语言;
- 控制词汇的另外一种较为精细的方法是类词词典;
- 元数据:关于信息的信息,以结构化的方式来描述内容;
- 将类词词典、元数据和搜索引擎结合起来使用,就能够得到更好的搜索结果;
- 团队角色和流程
- 信息架构或交互设计的主要文档是“示意图”,用视觉化的语言来呈现结构;
- 使用视觉词典以规范化的绘制架构图,链接:jjg.net/ia/visvocab
- 假如我们现在知道人体需要哪些功能各异的器官了,接下来要做的是,如何把这些器官组织在一起;
- 框架层:界面设计、导航设计和信息设计
- 定义:结构层更侧重于概念层面,框架层则侧重于实现这些概念,它主要关注组件以及组件之间的相互关系;
- 功能型:界面设计,提供给用户做某事的能力;
- 信息型:导航设计,提供给用户去某地的能力;
- 二者:信息设计,呈现有效的信息沟通,传达想法给用户;
- 习惯和比喻
- 注意保持用户使用习惯的一致性,不管是在系统内部,还是在环境之中
- 想想电话机按钮布局、或者计算器键盘的例子
- 人们通过条件反射会减少出错概率,降低学习成本,提高操作速度
- 如果有两个特性使用了相同的概念模型,则它们会有比较类似的界面设计,熟悉一个,可以很快的熟悉另外一个;
- 谨慎而克制的使用比喻,很多时候它并不能提示事物的本质
- 尽可能避免让用户猜测
- 注意保持用户使用习惯的一致性,不管是在系统内部,还是在环境之中
- 界面设计:选择正确的界面元素
- 成功的界面设计是那些让用户一眼看到“最重要的东西”的界面设计(弱化显示不重要的东西,甚至隐藏它们)
- 技巧
- 在这个界面第一次呈现给用户的时候,仔细考虑每一个选项的默认值
- 记住用户最后一次选择的状态;
- 导航设计
- 三个目标
- 必须提供给用户一种在网站间跳转的方法
- 必须传达出这些元素和它所包含的内容之间的关系
- 必须传达出它的内容和当前所浏览的页面之间的关系
- 清晰的告诉用户“现在在哪儿”,以及“他们能去哪儿”
- 大多数网站都会提供多重的导航系统
- 几种常见的导航
- 全局导航:提供了一种可以到达整个网站的通路(但并不意味着它是固定的,每个页面可见的)
- 局部导航:提供了用户在这个架构中到达附近地点的通路
- 辅助导航:提供了前两者不能快速到达的相关内容的快捷途径;
- 上下文导航:也在内联导航,当用户在阅读内容的过程中,如果想进一步了解信息,可以通过内联导航到达;
- 友好导航:提供给用户一些他们通常不会使用的链接,例如:联系信息、反馈表单、法律声明等;
- 远程导航:独立于网站的内容和功能,处理全局和局部导航无法处理的一些场景
- 网站地图:提供一个简明的、单页的网站整体架构
- 索引表:对于有大量主题和内容的网站特别有用
- 三个目标
- 信息设计
- 最关键的,是要以一种能够“反映用户的思路”和“支持他们的任务和目标”的方式来分类和排列信息元素
- 指示标识:
- 用来帮助用户理解“他们在哪儿”以及“他们能去哪儿”的系统;
- 注意使用颜色来强化标识;
- 线框图
- 文档本身并不是目的,它只是达到目的的一种手段;根据实际的需求来撰写正确级别的文档,同时也不要欺骗自己能够使用较少的文档糊弄过去,才能将文档从一件麻烦事变成一件有益的事;
- 线框图是整合三个要素的方法:
- 通过安排和选择界面元素来整合界面设计
- 通过识别和定义核心导航系统来整合导航设计
- 通过放置和排列信息组成部分的优先级来整合信息设计
- 定义:结构层更侧重于概念层面,框架层则侧重于实现这些概念,它主要关注组件以及组件之间的相互关系;
- 表现层
- 定义:决定各项元素在视觉上如何呈现;
- 人的五官:嗅觉和味觉侧重食物,触觉侧重于工业设计,听觉侧重通过声音来辅助用户,如汽车导航,视觉则是用户体验设计最着重的领域;
- 应该将注意力集中在它们“动作是否良好”之上,而不是它们是否具有美感;因为视觉设计需要支持前面四层设计的目标;
- 忠于眼睛,评估一个产品视觉设计的简单方法之一,是询问如下问题:
- 你的视线首先落在什么地方?
- 哪个设计要素在第一时间吸引了用户的注意力?
- 它们对于战略目标来讲是很重要的东西吗?
- 用户第一时间注意到的东西与他们(或你)的目标是背道而驰的吗?
- 对比和一致性
- 通过对比可以将用户的视觉注意力吸引到界面中的关键部分;
- 保持设计的一致性,可以有效的传达信息,而不会造成用户的困惑;
- 基于栅格线
- 内部和外部的一致性
- 将在不同环境中反复出现的元素,独立提取出来,一次性设计,试着在每个环境中应用它们,然后在需要的时候进行调整;
- 配色方案和排版
- 色彩是传递品牌识别的一个重要方法;
- 通常情况下,更亮更醒目的颜色适用于前景元素;较暗较淡的颜色适用于背景元素;
- 排版:简单就好,因为内容占据较大的面积并被用户长期注视,因此花哨的方案容易使人感觉到疲劳;
- 原则:不要使用非常相似,但又不完全一样的风格;
- 设计合成品和风格指南
- 设计合成品:基于线框图制作的,进一步呈现视觉效果的可视化产品;
- 风格指南
- 避免人员流动导致的知识流失和集体失忆;
- 目标:提供足够的细节来帮助人们将来做出明智的决策;
- 另外也有助于在一个分散的企业中保持设计的一致性;
- 要素的应用
- 创建良好用户体验最重要的工作内容是大量收集亟待解决的非常细微的问题
- 了解你正在试着去解决的问题
- 了解这些解决办法所造成的后果
- 提出正确的问题:将每一个决定都建立在对其背后议题的理解之上,询问自己:你为什么要这么做?
- 最大的挑战:比用户更准确地理解他们的需求,不能简单的依赖用户来阐明需求;
- 创建良好用户体验最重要的工作内容是大量收集亟待解决的非常细微的问题