软件观念-从电子商务看交互设计与用户体验.ppt

1、电子商务与软件经济导论,软件观念-从电子商务看交互设计与用户体验,从Google谈如何提高电子商务网站的转化开始,统计数据,英国在线销售市场过去两年增长71% 用户对在线购物体验好感过去只增长了0.36% 购物车的使用有50.1%的流失 在线购物需要提升的地方有很多 还需要更多的在用户转化和体验方面的摸索,Google的建议,Bring me to the right page 这一点主要是针对广告的登陆页而言：广告链接到正确的页面。Screwfix将广告链接到与广告内容匹配的页面而不是搜索结果页面之后，减低了20%的跳出。,Make your homepage useful 让首页发挥更多的

2、作用：品牌影响、产品展示、用户引导等等,Help me navigatel 提供清晰有效的网站导航：让用户可以准确、快捷的点击浏览和继续操作。,Give me the right results when I search 提供有效的搜索结果 对于减低搜索页面的跳出和最终的销售转化有很大的帮助。Next在注意到网站搜索结果页面过高的退出之后，对搜索结果算法进行优化调整，降低了20%的退出的同时提升了7%的转化。,Display groups of products clearly 同类产品的展示要清晰，容易区分、比较。Schuh在产品分类页面调整了产品密度和图片大小，转化增长了6%。,Give

3、 me the product details I need 提供尽可能详实的切用户需要的产品信息。Ltur.de在他们的列表页面增加了产品描述，并且允许用户使用价格或者分析筛选产品，提升了5%的转化。,Make registration optional 不要强迫用户注册。23%的付款流失是因为强迫用户注册导致。 针对建议：允许不注册就可以购买、让注册过程简单些、让用户清楚知道注册能带来的好处。,Make it easy to buy or enquirel 减少用户负担，譬如减少需要用户填写的表单的选项、将联系按钮更为明显、简化购买流程等等。,Reassure me 增加用户对网站的安全感

4、和信任度。譬如方便的退货、消单操作、清晰透明的费用告知、安全的支付保障等等。,Google总结 提高网站流量的质量 了解网站的流量趋势 不要瞎猜或者过分依靠经验，要进行测试。,观念的变化,1，PM首先是用户 2，站在用户角度看待问题 3，用户体验是一个完整的过程 4，追求效果，不做没用的东西 5，发现需求，而不是创造需求 6，决定不做什么，往往比决定做什么更重要 7，用户是很难被教育的，要迎合用户，而不是改变用户 8，关注最大多数用户，关键点上超越竞争对手，快速上线，实践中不断改进 9，给用户稳定的体验预期 10，如果不确定该怎么做，就先学别人是怎么做的 11，把用户当作傻瓜，不要让用户思考和

5、选择，替用户预先想好 12，不要给用户不想要的东西，任何没用的东西对用户都是一种伤害,从一个例子说起,-用户体验与交互设计,这个事情，也许你也碰到过,vivi（薇薇，26岁，一位优雅迷人的OL）打开钱包，从卡夹层里拿出那张有着金黄葵花的银行卡，又到发工资的时候，不知道今天到帐了没有，还约好了明天和死党一起Shopping呢！刚才路过银行想查一下余额，但是排队的人太多了，不过还有电话银行嘛，vivi一边想，一边拿出手机，拨通了电话银行的号码：,一个温柔礼貌的MM语音提示：“您好，欢迎使用招商银行电话银行系统，1，自动语音服务，2人工服务；” vivi把手机从耳边拿下来，找到1号键，按了一下； “

6、1个人银行服务，2公司银行服务，3银证通功能，4个人外汇买卖服务，5基金服务，0退出；”,vivi又按了1； “1存折户，2一卡通户，3个人信用卡户，4新旧卡号查询 0 退出；” vivi按下了1旁边的2号键； “请输入一卡通卡号，以#号结束；” “1080 80699”，vivi连忙输入了卡号，按#号键； “请输入查询密码，以#号结束；” 因为开户不久，刚设的密码，vivi稍微想了一下，才把密码输进去，输完又看了一眼，按了#号键；,“1帐务查询，2转账，3修改密码，4电话挂失，5通讯业务，6自助贷款，7自助缴费及一卡通上网，8神州行充值服务，9凭证式国债，0退出” 汗这都是些什么呀？vivi

7、皱了皱眉，再次按了一下1； “10人民币，21港币，32美元；35欧元，65日元，43英镑，29澳大利亚元，87瑞士法郎39加拿大元，69新加坡元，00退出；” “10，拜托，我可只有人民币” 电话里仍然是温柔礼貌而不折不扣的录音提示：“1活期，2 整存整取，3零存整取，4整存零取，5存本取息，6定活两便，7大额定期，8通知存款，9教育储蓄，0退出。”,“1”vivi一边按键一边看着手机屏幕上已经输入的一大堆数字。 “1余额，2当天交易，3历史交易，0退出” “1” “您当前的余额是陆仟九佰五拾陆元伍角玖分”。 谢天谢地，工资到帐了。vivi长舒一口气，查个余额，真不容易啊！,这个电话银行，你

8、会去用吗？,手机银行现在有了，你知道吗？ 移动互联网的时代,互联网也有同样的问题！,用户体验及交互设计,什么是用户体验,用户体验(User Experience)，缩写为UE, 或者UX。 用户访问一个网站或者使用一个产品时的全部体验。 用户体验设计-一套设计流程（UE Design） 目标用户设定 满意度的范围和指标设定 用户需求的功能 交互研究 系统反馈和最终的报告与成果 UED-让用户自然愉悦地使用产品。 以用户为中心（UCD），用户体验从产品开发的早期就要介入进来，并贯穿整个流程。,用户体验是竞争力 商业竞争通常有三大动力：商业模式、技术、用户体验 当前两者基本没有太大差距的时候,用户

9、体验是最激烈战场.,软件设计，设计，交互设计,软件设计的艺术Terry Winograd (2004年度的ACM人机交互院士),开发软件,建房子,土木工程师,装修设计师,建筑设计师,软件设计,设计,交互设计,有用的,用户体验要素,易用的,可发现的,可靠的,创造性的,渴望的,有价值的,互联网用户体验类型,感官体验：呈现给用户视听上的体验，强调舒适性。 交互体验：呈现给用户操作上的体验，强调易用/可用性。 情感体验：呈现给用户心理上的体验，强调友好性。 浏览体验：呈现给用户浏览上的体验，强调吸引性。 信任体验：呈现给用户的信任体验，强调可靠性。,怎样开展用户体验,划分用户群，确定目标用户 走近目标

10、用户，挖掘用户需求 在用户需求与商业需求中寻找平衡点 规划产品的发展策略，什么时候做什么事情 快速设计、研发、测试、上线。快速调整 始终提供给用户“有用”的东西,用户体验在网站设计中需要注意的,一致性 视觉一致性：字体、颜色、图片等元素的规格、尺寸、样式、间距等； 交互一致性：页面跳转、弹出对话框、鼠标动作（单击、滑过）等； 内容一致性：内容导向、语气、角度、基调、风格； 框架一致性：页面及模块的结构和样式等。 阶段性 网站发展是有阶段性的，不能一蹴而就，在每个阶段都有既定发展目标。产品设计应符合当前阶段的战略发展目标。 用户参与性 用户提供内容 用户参与审核与优化 用户口碑营销,网站建设步骤

11、,那么，互联网产品的交互设计应该怎么做？,互联网交互设计工作,信息架构 是一个整理信息，斡旋信息系统与使用者需求的过程，主要是要将信息变成一个经过组织、归类、以及具有浏览体系的组合结构。网站的组织系统、标签系统、搜索系统，以及导航系统的组合。目的是提供可用性及可寻性。 流程设计 根据用户需求分析，对用户在网站中需要完成的任务流程进行设计。目的是使流程清晰合理并使用户根据适当的引导顺利完成任务。 界面设计 网站原型设计、网站蓝图设计。将内容与功能的安排直观体现出来。 交互细节设计 根据基本的交互设计规则，对网站涉及到交互功能的细节进行文档化要求（详细设计文档）。,信息架构,我们可以抽象的理解为：

12、通过一堵“墙”架起了“人”和“信息”的桥梁，使之各自找到需要的信息。 这堵墙亦可以理解成一个广义的“界面”，它就是传说中的“信息架构”！,如何进行信息架构？,根据自己所在的组织范围内的具体情况，推动商业、内容、用户三要素均衡发展。,商业：所有的网站和企业网络都存在于特定的商业或组织环境中。无论明显或不明显，每一个组织都有任务、目标、策略、员工、流程和程序、实体基础架构和技术基础架构、预算和文化。将这几种功能、愿景及资源混合之后，每一个组织就成为独一无二的组织了。 内容：包括文件、应用程序、服务、模式，以及人们要找到你的网站时所需要的元数据。真要采用某个专业术语的话，可以说就是构成你的网站的“材

13、料”。 用户：现实世界中顾客喜好和行为的差异，在网站和企业网络的情境中就会被转化成不同的信息需求和信息搜寻行为。,信息架构的类型,静态展示型 例如新浪、搜狐等门户型网站；华尔街日报等新闻类网站。 交互型 例如开心网等社区交互型网站；淘宝、当当等B2C电子商务网站。,信息架构的表现形式,网站的组织系统、标签系统、搜索系统，以及导航系统的组合。,流程设计,功能流程的设计。例如注册流程、电子商务网站中的购物流程封装设计等。 通过流程交互设计，可以简化不必要的逻辑步骤，减少用户操作次数。 流程最好采用线性，明晰流程的起点与终点。 控制流程内的任务范围，过于庞杂的任务会形成干扰，容易让用户心生恐惧。,范

14、例：某添加账户的流程设计,之前的设计（7个步骤、8次提交）： 1。进入“系统设置”；2。进入帐户管理；2.1。选择“添加帐户”；3。输入邮箱名称；4。输入邮箱地址和密码；5。填写手机号和签名（可跳过）；6。设置邮件服务器；7。提交完成。 之后的（考虑了用户体验、安全问题与商业价值，常规提交4次）：,界面设计,交互设计中的界面设计，又称蓝图设计或原型设计。使用一定的原型设计软件，对功能和内容进行组织和表达，其目的在于直观地呈现设计思想，并起到有效的信息传达的作用。 方法一：自然语言法。 方法二：结构图法。,界面设计页面表达原则,更少的信息量更好。 结构化更易于理解。 信息的表达应该清楚、明确、直

15、接。 操作可识别。 操作前，结果可预知。 操作时，操作有反馈。,操作后，操作可撤销。 让用户知道身处何地。 避免内容看上去象广告。 不提供多余的功能。 相同的功能，在不同的页面中应保持一致性。 措辞统一。,界面设计自然语言法,具体操作： 第一步. 概括待表达的信息 第二步. 将概括好的信息排序 第三步. 使用界面语言翻译 适用于较明确的线性流程设计。,界面设计结构图法,具体操作： 第一步. 总结归纳全部待表达的信息。 第二步. 画树状图。 第三步. 画页面草图，演示。(其中包含：页面标题、导航、重要的链接和按钮。),界面设计结构图法,交互细节设计,重点在于文档化。 网站设计中应当遵循的基本原则

16、。,交互设计的主要任务,通过清晰、准确、简洁的表达进而实现人机交互。,表达,互联网产品UCD,为什么UCD如此重要？,UCD（User-centered design ）：以用户为中心的设计 在开发产品的每一个步骤中，都要把用户列入考虑范围,UCD是一个口号吗？ UCD对于实际工作有什么指导和意义呢？ UCD即创建高效的UE方法，与其说UCD是一种方法还不如说是一种互联网产品的设计思想，那么成功的UE（User Experience）用户体验又具有什么样的意义？,理解人们所想和所需： 围绕用户需求和心智模型进行产品设计,用户体验价值图,积极的、良好的用户体验可以增加用户的回访、获得用户的信任，

17、增加购买的意向，实际上是增加了我们获得利润的能力。 即使我们的网站并不是直接靠在线销售获得利润的经营模式，但高效的用户体验可以提高转换率，实际上是帮我们更快、更稳健的达到我们的商业目标。,UE车轮构成用户体验的30种要素,从中间开始 价值是我们想要达到的目标。 从顾客到提供商，正向的用户体验是可以实现“双赢”的 我们通过正向的用户体验来实现价值。 用户体验由许多方面组成，我们必须重视可寻性、可接近性、合意性、可用性、可靠性和有用性这些方面。 用户体验的方面又由许多方面组成，这个模型具体呈现了30种要素。,用户体验的要素,战略层：用户的需求是什么？网站的目标/商业目的是什么？ 范围层：什么样的信

18、息和内容满足用户的需求？ 结构层：如何组织、导航，并响应用户满足其需求？ 框架层：如何将 概念模型细化到具体的界面外观、布局、导航信息设计 视觉层：用户看到的最终表现形式,是用户体验的要素组成结构，也总结了我们的产品设计过程,5.9,产品设计团队的组建和产品设计流程,产品设计团队,产品设计团队： PM（项目经理/产品经理） BI（商业情报） UR（用户体验分析师） user researcher IA（信息架构师）(information architect) ID（交互设计师） interaction designer CD（内容设计师）Content Designer VD（视觉设计师）

19、visual designer UID（界面设计师） user interface designer,把专业的事交给专业的人去做，然后专心做自己专业的事,我们拍一部有10个角色的电影，但我们只有5位演员，我们不会去掉5个角色，而是1个人饰演2个角色,产品经理,产品经理负责整个产品的定位、规划、定制发展方向及策略， 并负责团队的激励和管理： 他应该把精力用于产品的“战略层”、“范围层”，他不一 定对每一个领域都精通，但一定具有全局观和把控能力。 产品经理的产品管理能力，体现在具体工作： 负责产品概念设计的把关 撰写市场需求文档（MRD）和产品需求文档（PRD） 进行竞争状况分析 规划产品路线图

20、制作产品演示PPT 分析产品数据等 组织沟通、注重细节、商业嗅觉、整体规划,信息架构师,IA（信息架构师）(information architect) 网站的信息组织系统、标识系统、导航系统和搜索系统,组织方式,分类体系,顺序排列,结构设计,确定网站的结构类型，层级？矩阵？线性？,让用户在信息空间中很清楚自己的位置和达到目的地的途径,设计信息环境、组织结构,对信息的系统分类，以符合用户的思维模型,对信息进行顺序设计、让用户在合适的时间、合适的位置获取应该得到的信息,一个有效的信息架构可以让人们按照逻辑直观的，毫无阻碍的一步步地接近他们需要的信息,交互设计师,以目标为导向，界面设计的范畴“任务

21、分解”过程 “我们把产品功能按照用户的具体需求组合成典型任务场景，然后对每个任务进行详细的使用流程设计”。决定交互设计有多少工作的并非多少界面，而是有多少任务。 我们的交互设计师通常只做： 行为设计： 用户点击之后反馈什么样的结果？ 可以拖拽操作吗？ 用什么样的语言和用户交互？ 界面设计： 使用按钮还是图标？ TAB如何表现？ 错误处理 交付物：产品线框图（Wireframes）、产品特性清单（Feature List） ,交互设计师需要具备凭空想象复杂行为的能力,观点： 1、交互设计师不要把全部的精力用于交互设计的表现层面，而要更多的去考虑交互思想、交互理念的设计。 2、用户3步完成一项任务

22、一定比5步完成这项任务更加具有可用性吗？,交互设计任务分解举例,界面交互信息构架？,产品瀑布流程,MRD PRD评审 设计评审 UC评审 测试用例 检查,产品设计流程参考,通过数据分析研究，定位产品和用户,确定用户群体特征，研究用户目标和行为的关键因素,产品的理念、定位、整体性结构、用户需求核心,通过用户调研，结合定量、定性分析，为不同目标用户制定不同的产品策略,1、市场研究,2、用户定位分析,3、产品概念设计,4、用户细分,产品设计流程,设计人物角色，建立档案,针对目标用户，分析功能模块，确定做什么和不做什么,信息空间的结构、组织、导航、标识。通过任务分解（场景设计），设计互动流程,通过用户

23、现场操作、低保真原型操作等方式做产品的可用性测试,5、人物角色创建,6、功能需求分析,7、信息构架、交互设计,8、可用性测试,产品设计过程中的交付物,概念阶段（concept）阶段的交付物：概念文档（concept document）或者是概念原型（concept prototype） 探索阶段（discover） 阶段的交付物：提案文档（Proposal Document） 定义阶段（definition） 的交付物：需求文档（Product Requirement Document），产品概念设计（Concept Design Meterials） 细化阶段（refinement） 的交付

24、物：产品线框图（Wireframes）、产品特性清单（Feature List）、最终的原型设计（可以是任何版本的，例如 HTML、Flash或者是专用的原型制作工具）,某工作小组的产品策划流程,各个阶段的交付物形式,举例：YAHOO产品设计流程,团队组建 产品经理（product manager） 用户体验研究员(user researcher) 信息架构师(information architect) 视觉设计师(visual designer)、界面设计师（user interface designer） 互动设计师(interaction designer) 工程师(web devel

25、oper)/ engineer,工作流程 1、产品经理制定产品整体构架，产品发展方向等，做全局把控 2、以上人员共同参与产品讨论，制定时间表以及任务分工 3、用户体验研究员作产品和用户等调查研究 4、信息架构师设计产品信息架构、内容架构 5、互动设计师设计互动流程 6、视觉设计师(visual designer)和user interface designer做视觉设计 7、web developer把设计模型通过编写程序(html, dhtml, JavaScript)等再 现，最后交给工程师 8、用户体验研究员需要做用户测试 9、QA(Quality assurance) 需要测验产品的操

26、作步骤，确认产品的使用质量,产品设计中的棘手问题,没有UED、IA、ID、VD，更别说什么UR了，我们如何开展产品设计工作？ 网站的行文、界面文字谁来把关、是PM还是ID，还是谁？ PM和UE的关系如何界定？ 谁，何时，需要加入产品设计的概念性阶段？ 产品设计规范如何确定和执行？ 为什么我们产品设计时间总是不够用？,缺乏高效的沟通、团队成员对于目标的不明确，会导致整体效率的下降，我们要让团队的成员都清楚： 产品目标、工作流程、设计规范、日程安排,产品设计方法和原型、工具,以用户为中心的设计方法举例,卡片分类(Card Sorting)观察用户是如何理解内容和组织信息，用来帮助你的网站(产品)更

27、合理的组织信息。 情境访谈(Contextual Interviews)走进用户的现实环境，让你了解你的用户的工作方式，生活环境等等情况。 焦点小组(Focus Groups)组织一组的用户进行讨论，让你更了解用户的理解、想法、态度和想要什么。 启发式评估(Heuristic Evaluation)可用性的检查方法，让一些行内专家对网站产品进行指导。,以用户为中心的设计方法举例,单独访谈(Individual Interviews)一对一的用户讨论,让你了解某个用户是如何工作,使你知道用户的感受,想要什么和他的经历。 平行设计(Parallel Design)对同一个网站(产品)进行分开的设计

28、，从而比较选择一个最佳方案。 角色模型(Personas)构建一个虚构的人来代表大部分用户，设计团队围绕这个虚拟人物设计开发产品。 原型(Prototyping)利用简单网站(产品)原型进行相关的测试，从而节约后期大量的成本。,以用户为中心的设计方法举例,问卷调查(Surveys)利用网上或纸张的问题list对用户进行发放填写，从而收集用户对网站(产品)的反馈意见。 任务分析(Task Analysis)通过任务分析了解用户使用你网站(产品)时的目标和操作方式，习惯。 可用性测试(Usability Testing)请用户来试用你的网站(产品)，有任务性的完成测试。从而得到你所想要的东西。 用

29、例(Use Cases)描述某个用户使用你网站(产品)时的情况，包括目标和行动。,用户研究人物角色创建,人物角色（Personas）作为UCD方法中最重要的一个工具 ，是通过创建典型用户来代表具有不同目标的用户从而满足具有类似目标和需求的用户群”，介绍了通过角色，产品设计者可以站在用户的角度考虑问题，从而把设计者的注意力集中在用户需求和目标上,用户研究人物角色创建,用户定性研究,细分用户群,为细分群体 创建角色,用户访谈 现场调查 用例测试 ,用目标细分 用使用周期细分 用行为和观点,一种最简单的人物角色创建方法定性人物角色,还有：经定量验证的定性人物角色，完全的定量人物角色,建立档案 展示人

30、物角色 融入角色 ,用户研究人物角色创建,不经过分类、逻辑分析的原始用户数据、访谈调查表本身并没有什么意义，往往会让我们陷入细节并得到错误的结论 创建角色：人物角色可以时刻提醒我们，要把时间用在满足我们的目标用户群体上 人物角色可以避免我们基于自己的想法做决策,太夸张,太漂亮,太隐藏,太多干扰,人物角色形象要具有普通代表性，并和人物特性相符合,原型设计：故事板,* 纸板用于屏幕； * 邮票式张贴用于菜单、对话框和其他的屏幕元素； * 透明的幻灯片用于临时项目或用户输入； * 隐藏的带子或者其它用于用户输入的带子； * 笔和标记（可擦写标记用户输入或临时信息）； * 用来擦除输入的水； * ,原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等 ，它更多的向产品设计团队的每一位成员传递着产品的设计理念、核心功能、网站结构、基本