如何从用户的角度进行产品设计(ppt 76页).ppt

1、从用户的角度进行产品设计,信息咨询部 翟天骄 2010.08.31,2,what,why,how,如果一个产品很难用，我就不会经常使用,如果一个产品我不需要，我就不会用,Focus on the user, and all else will follow.,以用户为中心，其他一切纷至沓来。,不同的人 不同的理解,不同的需求 不同的设计,不同的设计 不同的效果,心理模型,表现模型,实现模型,容易使用，体验良好,记忆负担，体验较差,最好的技术是消失在生活当中的技术,8,what,why,how,以用户为中心的Web设计的流程和用户体验的要素,“AJAX之父”的Jesse James Garret

2、t在2000年提出,产品设计,市场调研 需求分析 详细设计,研发发产品（软件、网站）,建房子,土木工程师,装修设计师,建筑设计师,程序设计,设计,交互设计,软件设计的艺术Terry Winograd (2004年度的ACM人机交互院士),名称解释,UI（user interface designer）:用户界面设计人员 UE（ User Experience ）：用户体验 并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否

3、友好等方面。 UCD （ User Centered Design ） ：“以用户为中心的设计,12,what,why,how,设计者怎么想,需求集合,功能集合,出水写字,保护笔芯的笔盖,颜色墨水,易擦墨水,写字,长久的写字,标识不同内容,写新的内容,能当发簪,变形金刚？,要了解人，从而了解用户，更要习惯站在用户的角度看问题。他们要“随时随地变成用户”,产品功能重排,口碑相传的产品设计之道,核心能力和速度 交互体贴细致，视觉简洁清爽 高端用户的关注 如何在良好口碑下持续增加功能,要了解人，从而了解用户，更要习惯站在用户的角度看问题。他们要“随时随地变成用户”,产品规划的流程定义,产品规划流程对

4、市场走势及客户需求进行分析，创建合理的市场细分规则，对要投资和取得领先地位的细分市场进行选择和优先级排序，从而制定可执行的业务计划，并驱动新产品包的开发。,用户需求分析法（例：QQ秀）,如何排定产品功能的优先级,各个功能本身并无“优先级”可言，对一支笔来说，“写字”和“当作发簪”这两个需求是平等的。但是产品在不同的阶段有不同的目标和不同的现实情况，这就成为判定产品功能优先级的唯一标准。,市场分析,用户分析,需求分析,小案例：用户需求优先级排序,QQ发布第一个版本时，有以下用户需求：,卡通头像 QQ表情 聊天记录管理器 看谁在线上 安全性 传文件,很小的.exe文件 视频 聊天室 语音 反应速度

5、快,请从中选出最重要的三项，发布QQ1.0。,？,别让我思考(Dont Make Me Think),网站可用性三大定律,人们使用WEB的几个事实,不是阅读，而是扫描 总是很忙 不必阅读所有的内容 善于扫描 不做最佳选择，而是满意即可 总是很忙碌 如同消防员 不追根究底，而是勉强应付 如果发现某个东西能用，我们会一直用它,用户浏览网站不是在阅读，而是扫描,注意力是有限的,过多的内容。,不追根究底，而是勉强应付,Krug可用性三大定律,别让我思考(Dont make me think ) 要点击多少次都没关系，只要每次点击都是无须思考，明确无误的选择。 去掉每个页面上一半的文字，然后把剩下的文字

6、再去掉一半。,Krug可用性第一定律,别让我思考(Dont make me think ) 网页应该设计得不言而喻 网页避免强迫用户思考的地方 如果做不到一切不言而喻，起码做到让页面自我解释,麦当劳两则,强迫我们思考的地方(1),强迫我们思考的地方(2),卓越网和当当网的搜索框,当当网2006年1月1日首页快照,什么是页面的自我解释？,页面的自我解释即用户对页面稍加学习就可以明白，用户能够更加专注于他要做的事情。 特别是在进行一些崭新的，开拓性或者非常复杂的页面设计时，也许只能做到自我解释(Self-explanatory)。 返回,Krug可用性第二定律,要点击多少次都没关系，只要每次点击都

7、是无须思考，明确无误的选择。 用户的挫折感限度不取决于到达相关网页所需要的点击数而是点击的困难程度。 经验准则：一次需要思考的点击等于三次无须思考的点击。 例子,Krug可用性第三定律,去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。 有力的文字都是简洁的。 必须消灭欢迎词，必须消灭指示性文字。,Microsoft TechNet 欢迎词,中国建设银行反馈表单指示性文字,可用性实践中需要注意的问题,导航条(页头，页尾，页内) 主页 团队中可用性的讨论,可用性实践中需要注意的问题,导航条 作用 帮助找到想要的，告诉我们如何使用网站 给人固定的感觉 告诉我们身在何处 注意事项,导航条(页头，

8、页尾，页内),Bear looking at map of park with sign You are here,导航条设计时需要注意,网站的每一页(表单可能例外)都需要导航 次级导航都应该有返回首页的链接 页面名称应该醒目(自我解释) 要提供简洁，没有无关选项的搜索框 优秀的导航条示例:Amazon,B,Amazon. COM导航条,B导航条,可用性实践中需要注意的问题,主页 主页的作用 主页需要额外考虑的问题,主页的作用,准确、快速的传达一个整体形象 网站的标识和起点 内容更新导读 服务以及搜索的入口 返回,准确、快速的传达一个整体形象,主页要做到这点必须清晰的回答四个问题 这是什么网站

9、？ 网站上面有什么？ 我能在这里干什么？ 为什么我应该在这而不是在别的地方？ 返回,主页需要额外考虑的问题,每个人都想占一席之地 想要参与的人太多 设计要满足所有人 返回,站点的标识和口号,没有什么比得上一个好口号 每天五分钟，给思想加油。() 理性，建设性。(),可用性实践中需要注意的问题,团队中可用性的讨论 现状：无休止的信仰大战 本质：浪费时间 关键：没有什么所谓的普通用户 唯一改变的方法：用户体验测试,团队中可用性的讨论,可用性最佳实践,提供增大网页字体的选项(国内网站) 为每张图片增加ALT文本 用户不可能在一个界面中接受过多信息，而且信息量和页面长度不是正比关系,为每张图片增加AL

10、T文本, 返回,交互设计Dont make me think,“返回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中的“玉柱”，也定义了邮箱的交互风格。 帮用户自动选中：在输入独立密码或加密folder输入密码时错误后，应该把输入框内的内容select上，这样就可以直接打入而不用清除了 光标定位：之前的点回复时光标focus到正文的问题改好了,但却没有注意到点转发时光标,反而应是在收件人处而不是正文处, 因为一般总要填写转发人, 而回复(包括回复全部)则是直接输入内容.,交互设计符合用户习惯与预期,类Outlook客户端操作，但比它做得更优秀 先字母排序，再优先显示最近联

11、系人，减少键盘操作。这么细的体验，但一旦用上，就觉得别的同类产品很粗糙了！,VS,交互设计符合用户习惯与预期,兼容客户端邮件菜单习惯 在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右键则不能。 不要随意去掉用户正在使用的功能 原来mail在做出了“HTML方式查看”后，去掉了“打开”功能 符合用户预期，点击其他地方，WEBQQ的浮动窗口隐藏到固定位置,交互设计适时的提醒,没必要的提醒不需要出现 而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关怀（当未读邮件过多时，提示删除历史邮件） 数字和字母帐号不同方式；图片验证旁提示“不区分大

12、小写”，细节中体现体贴; 修改前 修改后,交互设计操作便利,鼠标响应区域的大小，灵敏度和精确度，直接影响操作体验 示例：QQMail，业务导航区，QQ音乐 QQ影音的快捷播放按钮：最初的设计改为方形扩大点击区域，考虑性能去掉按钮显示 最初的设计 优化后 最后 鼠标动作需要精确的判断，捕捉用户意图（如：QQ影音的鼠标左键点击的精确判断） 左键单击画面可以移动窗口 没有移动窗口时左键弹起才暂停画面，移动范围少于一定数值算暂停 右键菜单出现后的左击画面不执行暂停，视为取消右键菜单,视觉设计制定规范，维持统一,文字使用要规范，语法，大小，颜色，大小写都需要注意 能用一个词表达的，不用一句话。能用一句话

13、表达清楚的，不用两句话 每个概念都只有唯一一种表达。如”VIP”的概念 能用一种字体颜色的，不多用一种颜色 能用一种字体大小的，不多用一种大小 用标准组件 能用标准控件的，不自己画控件 （一个button，就有focused,selected, up/down,enabled/disabled,tab顺序等多种状态要画和处理，不容易的，而且要考虑浏览器兼容） 能用文字的，不用图片（加图片是要申请的） 保持尽可能少的格式式样 维持统一 就算字体和行间距等小细节都应该关注到 英文字体 Tahoma,视觉设计重点突出,每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。 原来的设计排版不

14、对，有一横条的压着的情况黄色块就不能加框，视觉会很繁杂看着不舒服，句号也是多余的 原来方案 目前方案,Pony：在设置了独立密码的情况下, 当登陆到需要输入独立密码时, 总是先出来输入框, 此时已可输入, 我经常是立刻输入, 但打了几个字母后上面, 才瞬间出现上面的黄色提醒请输入独立保护密码, 而会导致输入框位置立刻下压, 比较影响输入. 最好能改一改html里的结构, 能够快速让人立刻输入(越快越好)的基础上,其他显示的可以慢些load到但不应影响其他部件的改变.,总结：需要关注的用户体验,交互设计 Dont make me think 符合用户习惯与预期 做适时的提醒 不强迫用户 选择最佳方案 操作便利 视觉设计 传播产品理念 大气成熟，干净整洁，工具化 规范与统一 重点突出 防止不恰当的低龄化,产品设计 口碑传播 少即是多 兼容性 无所不用其极 关注性能和速度 抓住高端用户 大气的设计 满足用户个性化需求 寻求差异 运营 不稳定会“功亏一篑” 跟踪用户定位问题 抗灾容灾能力,如何关注,把自己想象成一个迟钝、挑剔、易怒的傻瓜来使用产品 抓主要矛盾，重点关注最常使用的交互点 产品经理有前台和后台技术背景，有助于设计的判断和平衡 擅长