用户体验设计ppt课件.pptx

用户体验要素,2011年10月,用户体验是什么？,用户体验：不是指产品如何工作的，而是指“产品如何与外界发生联系并发挥作用”，也就是人们如何“接触”并“使用”产品；重要的几点：用起来难不难？是不是很容易学会？使用起来感觉如何？用户体验总体现在细微之处，但却非常重要。,从产品设计到用户体验设计,传统的产品设计概念：外观设计，是否美观；对视觉感官的冲击；功能设计，是否具备产品应该具备的功能，能够完成某些产品所需的任务。真正的产品设计：不仅仅要考虑功能和外观，还要考虑良好的用户体验，甚至是“用户体验第一”；为用户体验而设计，使用第一！,网站和用户体验,网站和程序界面往往没有说明书、没有培训、没有交流会，全靠直观、一目了然的界面去吸引和培训客户；靠用户智慧和经验去学习！一次差的用户体验就会流失客户；好的用户体验就是商机！只要你能做出好的用户体验产品，你就能拥有商机！,何为以用户为中心的设计？,创建吸引人的、高效的用户体验方法称为“以用户为中心”的设计；核心思想：在产品开发的每个步骤中，都把用户列入考虑范围。,用户体验要素的5个层面,表现层,框架层,结构层, ,范围层,战略层,具体,抽象,你所看到的由一系列文字和图片构成的界面，某些图片和文字可点击执行相应的功能,界面布局区域安排，各类按钮、控件、图片和文字都归于不同的局部区域,用来设计用户如何达到某个功能界面，以及做完后下一步要去什么地方。,由系统的特性和功能构成所构成。比如你考虑是否需要某个界面的具体特性或功能。,系统构建者需要通过提供系统得到什么，希望用户通过系统获得什么？,战 略 层,范 围 层,结 构 层,框 架 层,视 觉 层,界面设计,信息,用户,不同类型系统设计步骤功能型和信息型,感知,交互设计,功能规格,产品,内容需求,信息架构,导航设计,需求,目标,设计,设计,功能型产品,信息型产品,战略层,产品目标和用户需求,整个团队须就下面两个问题取得明确和一致的认识,产品目标-我们要通过这个产品得到什么？用户需求-我们的用户要通过这个产品得到什么？,产品目标的确认,增加品牌识别：在网站上增加经过仔细设计（好的视觉效果，激发好的情绪反应）的品牌标识；记得要靠用户体验来创造用户潜意识的品牌形象。定义成功标准：怎样量化的结果才算达到了目标？量化方法和标准：网站或系统访问量、停留时间、交易量、广告印象数（每个广告每天被展示的数量）。要剔除非本网站本身产生的因素（如正面或负面的新闻）。,用户需求确认,谁是我们的用户？-明确我们产品的使用者对象。细分我们的用户：根据产品特点，将全部用户群体划分成较小的、有共同需求的小组，以此来更好的了解和描述用户需求；按照消费者类型特点来划分：性别、年龄、教育水平、婚姻状况、收入、相关产品使用水平等等；按照与我们产品相关的职务特征来划分。研究我们的用户对产品的反应：市场调研方法：调查用户的特征和行为；用户测试法：请用户来测试你的产品，可让用户对产品或模拟原型进行测试，看看他们对产品的反应和建议；创建人物角色：将每类用户创建一个实例对象并给定名称或编号，便于团队统一口头或文字标识。,团队与战略的制定及传达,战略制定可以寻找专业的战略制订专家来完成这个工作；要让参与产品的各个环节的人参与：不仅仅是决策层，还包括开发者、销售者、服务者等多个层面的人参与讨论，最终决策。战略传达形成清晰、适当大小的战略文档；不能仅仅从保密的角度限定战略文档的下传级别，尽可能让每个层面的人都清楚企业的战略。,范围层, ,定义范围层的重要性,这是一个有价值的过程：在过程中帮你检验你之前的假设中存在的产品瑕疵和潜在的冲突；以及让你思考解决各个需求的先后顺序。产生了产品的定义，让团队的每个人明确产品要完成的全部工作。将产品需求文档化，这样整个团队会明确两个问题：你正在建设的是什么东西；你不需要建设的是什么。在需求定义过程中剔除对本质上产品无益的需求非常重要！, ,产品功能和内容的确定,功能型产品：编制功能规格说明书，明确功能需求；说明书不在于多少，而在于是否明确、不模糊。内容型产品：内容需求；内容管理功能需求：内容范围、类型、审核、确认、发布。, ,需求获得的三种方式和一些方法,第一种方式：人们直接讲述的他们想要的东西，其中有一些很清晰的好的思想；第二种方式：有些直接出口的可能并不是真正的需求，这样会遇到某些困难，大家讨论出解决或缓解这些困难的方法可能才是真正的需求；头脑风暴会上碰撞出的新的想法。需求讨论方法：需求分析时必须考虑限制条件；可以采用角色分析法，在我们制订战略时假定的角色这个时候可以上场了，我们可以分析他的思维及行为方式来分析确定需求。, ,功能规格说明书编制要点,要让功能规格说明书撰写得快速简单，定义准确，不在多而在精和准确。否则会被技术人员排斥！说明书编制的几条重要规则：采用积极的语气：如“本产品禁止买无线风筝”改成“如果用户买无线风筝，应该将界面引导到风筝线购买页面上”；采用具体的说法：如“最受欢迎视频应被重点标注”改成“被投票最多的视频应放到网站最首端”；避免主观的语气：如“网站风格应该时尚闪耀”改成“网站界面应符合公司品牌指南文档”；能量化的尽量量化：如“系统能承载大用户量”改成“系统能支持100万用户容量，支持1000人同时登陆”。, ,需求优先级,根据你的限制条件：时间、资源、技术限制条件，确定你的需求优先级，划分解决问题的先后顺序；根据战略定义仔细检视需求，看看有无需要被裁剪的；草率的战略定义会发现需求与战略有冲突，这时候需要检视战略，并调整战略。, ,结构层,结构层定义,对功能型产品结构层是指“交互设计”，为用户设计结构化体验：关注可能的用户行为，定义系统如何配合与响应这些用户行为。对信息型产品通过“信息架构”来构建用户体验。将信息进行组织管理、分类和顺序排列，并将其呈现给用户。结构层核心关注用户的行为、工作方式和思考方式，并将获得的这些知识加入到我们的产品结构中去，从而提供好的用户体验。,交互设计要点,交互设计并不涉及具体的系统界面，而只是建立一个能够让大家容易根据现实世界的情形去理解的“概念模型”。构建概念模型的核心并不在于要去决定界面如何设计，而要建立一套一致的用户体验设计描述，包括对象、动作、结构名词等等。例子：用去购物超市来构建“网上商城”的概念、用“看杂志”来构建提供专业信息服务网站的概念。概念模型的设计也不能仅仅完全根据传统世界的状态来设计，还要适应产品本身的技术特征，否则可能反而可能在产品的易用性和表现上大打折扣。,交互设计中的错误处理,用户对产品的首次试用感觉是你黏住用户的关键环节；如果他用不好，他不会觉得自己笨，而是觉得你的产品设计得不好。首次使用让用户能不出错是很难的，重要的是你如何让用户在这种状态下对产品仍有好的感觉，这就是“错误处理设计”。错误处理设计原则：设计功能预防用户操作错误发生帮助用户改正错误当用户发现出错时能帮他恢复到之前的某个状态。错误处理设计方式的正确的错误信息提示、尽量让用户无法进入到错误的状态提示和功能、帮助用户发现并改正错误的方法。,信息架构设计,设计核心设计出让用户容易找到信息的系统。设计内容：设计组织分类和导航的结构，以便用户能高效率找到并有效他关注的内容；设计内容：分类体系、检索方法的创建。不仅要帮用户快速找到东西，还要说服、教育并通知用户。,结构化内容设计方法,自上而下：根据战略层内容来设计，即根据产品目标与用户需求，自上而下来定义逻辑分类并加入内容；自下而上：根据范围层内容来设计，即根据内容及功能需求进行总结归纳分类，形成多层节点-内容结构；更多情况下，两种方法要结合起来使用。,内 容,结构节点,自上而下,自下而上,关于节点,结构层级优化结构层次的多少，过多用户选择觉得太繁琐，过少分级不清楚，最重要的是让用户觉得到达内容的每一步都是合理的；结构层级的设计应该便于调整，即可以在合理的逻辑上增删子节点；节点可以对应任意的信息片段和组合，不仅仅是一个网页为一个节点；结构方法可以为树形结构、矩阵结构、自然结构或线性结构，要根据实际用户需求来选择结构类型。比如想提供多种让用户找到具体某项产品的电商网站就可选择矩阵型、一本书上网就可选择线性、繁杂无聊的娱乐八卦可选择自然结构。,树形结构,自然结构,线性结构,信息结构组织原则,最高层级的组织原则应该与产品目标及用户需求相关，而较低层级的节点组织通常与内容及功能需求相关。需要根据不同用户的不同实际需求，将对象和内容属性划分成多种“截面”，将每种截面构成一个组织原则，截面必须贴合用户实际需求，否则就会产生相反的效果。,界面语言,你必须使用用户的语言并保持一致性，这样用户才能最容易理解你的产品。需要创建一个这样的工具“受控词典”。常用办法就是创建一个词汇表，要求所有产品中都严格按照这套词汇来应用。受控词典是产品使用的一套标准语言，它必须是用户感到自然、容易接受的词汇和用语，词典还有助于防范产品开发者自己将一些专业技术术语无心入侵到产品中，使产品友好界面找到破坏。更精细的方法是创建“类词词典”，将常用的但未纳入本产品的各类词汇，各个词汇之间的类型关系编撰出来供产品建设时选择。可以用受控或类词词典，建立一个元数据库，这个库不断有助于用户或者你自己按照你知道的需求搜索到有用的信息，还可能是你发现用户潜在的需求。,共享结构层设计成果,结构层设计需要做成专门的文档供开发者共享，为了清晰表达，仅仅有表格或文字是不够的，更需要做成标准的示意图；“网站地图”、“架构图”都能一定程度上表达结构层的设计内容，但是合适的示意图方式是“视觉辞典”一组有专门的图例定义用来描述网站结构的表达工具；企业最好有专门负责结构层设计的负责人“信息架构师”或“交互设计师”，得力的人员会使你的产品达到你的用户期望。,框架层,框架层定义,定义：用于确定我们的产品用什么样的功能和形式来实现关注点：各个独立的组件及他们之间的相互关系。通过以下设计来完成 ：对于功能型产品通过界面设计来确定框架；对于信息型产品通过导航设计和信息设计来呈现有效的信息沟通。,界面设计|导航设计|信息设计,界面设计提供给产品用户做某些事情的能力；导航设计提供给用户想去某个地方的能力；信息设计想传达想法给用户；三者是紧密结合在一起的。,习惯和比喻,大多数情况下，界面设计应该遵从用户已经习惯的或者已经约定俗成的东西，而且在一个产品不同地方使用时要保持一致，不能随意创造。比喻有时候你觉得很形象，但是可能会让大多数用户想象成别的东西，导致你的产品界面在用户理解上出现了混乱！如界面图标、用词等等，因此一定要慎重，尽量减少让用户去猜测你的用图或用词含义的情况。,界面设计,界面设计的核心是选择正确的界面元素，帮助用户方便、快捷地完成他的任务；界面应容易被理解，直截了当。成功的界面设计就是让用户“一眼看到最重要的东西”、组织好用户最常采用的行为，让这些界面元素最容易被选择和使用，而不是采用极端的满足所有用户的界面元素堆积。界面空间往往是有限的，而不同类型的界面元素占位大小不同，这两者有时会发生矛盾，（如单选框比下拉菜单更清晰和简便，但占位空间更大）开发者需要根据这两者进行取舍，达到平衡状态。,导航设计他们在哪儿，能去哪儿,网站导航设计必须同时完成以下三个目标：提供给用户一种在网站间跳转的方法；传达出这些元素和他们所包含内容之间的关系；传达出它的内容和用户当前浏览页面之间的关系。复杂的网站采用以下多重导航：全局导航，提供一个能够访问到整个网站节点的通路；局部导航，如严格结构中反应当前上下层级的导航；辅助导航，在某个节点提供用户去他需要去的节点；上下文导航，在文本内部放一些有助于他理解本文内容的链接节点，便于用户快速获知相关信息；友好导航，提供一个用户不常用，但作为一种便利的途径来使用的链接。远程导航，在你的网站结构或导航过于复杂时，用户会求助于你专门制作的快速远程导航。如“网站地图”。索引表，采用字母顺序排列的链接列表，适用于极其复杂的网站结构，便于用户快速找到他需要的节点和内容。,信息设计,信息设计：就是如何把各种设计元素聚合到一起，使呈现出的信息让用户易于使用和理解，如：视觉信息设计：用文字、数字、表格、还是用图？如何将信息进行先后排列并进行适当的分组？需要用能“反映用户的思路”、“支持他们的任务和目标”方式来分类和排列这些信息元素。错误提示设计在信息设计中也非常关键。信息设计和导航设计可以结合到一起，形成“指示标识”。帮助用户时刻知道“他在哪儿和能去哪儿”，指示标识如不同网页的颜色标识、标签系统、当前网页路径等等。,线框图页面示意图,页面布局你需要将信息设计、界面设计和导航设计放到一起构成多个页面设计；每个页面需要用页面示意图或称为“线框图”来图示；线框图让你的产品成型，并让建设者和大家共同讨论的基础，还可以用来回答网站是如何运作的；线框图往往会使网站建设不同角色的人员产生争论，大家想从不同角度对它进行修改，多人参与设计线框图时，必须用协作设计的办法来完成设计，避免事后无休止的争执。,表现层,表现层定义,解决“产品框架层的逻辑排布”的感知呈现问题；对实物产品来讲，要考虑视、听、嗅、触、味五种感觉；对软件来讲，重点决定排布好位置的各种元素在视觉上如何呈现。如何让用户有更好的感知，还要考虑包括操作时的声音表现。,视觉设计必须忠于眼球,用户眼睛的移动轨迹的模式是有规律可循的，普遍一致（他们是本能的、无意识的），你必须遵循这种规律；成功的视觉设计有下面两个特点：用户眼睛的移动轨迹遵循的是一条流畅的路径；不会让用户的眼睛在各个元素之间跳来跳去；在不需要太多细节来吓倒用户的前提下，它为用户提供有效选择的、某种可能的“引导”。支持用户试图在此刻通过与产品交互去完成的某个目标和任务。尤其不能分散用户去完成某个任务和目标的注意力。,视觉设计要点之一-“对比突出”,采用“对比”，通过对比来突出需要吸引用户的元素；这种方法包括：不同的颜色；醒目的图形；差异一定要足够清晰。,中性设计,增加醒目颜色对比吸引用户眼球,过度的对比导致 了混乱的视觉,保持设计“一致性”,保持设计“一致性”，不让用户产生迷惑甚至焦虑，这种方法包括：同类尽量保持大小一致的尺寸；基于“栅格线”的布局，将各种元素置于栅格线之间，使其对齐分布。,保持内部和外部的“一致性”,内部一致性问题：即在同一产品的不同地方产生了不同的视觉设计；外部一致性问题：在同一企业的不同产品上没有采用被使用的、相同的设计；为保持内外部一致性，需要从企业角度对所有产品设计进行统一规划，并提前设计一套标准的配色、组件及规格方案，然后将该方案应用于所有的产品设计中去。方案也包括配色、字体等具体细节要求。采用“统一的品牌识别形象”来强化用户对你的认知，这种认知是“跨媒体的”，用户甚至会因此认为你是积极向上的，否则就会产生反作用。,