用户体验、页面表达及设计通用原则


Better User Experience Colourful Future ——用户体验、页面表达及设计通用原则 案例分析 过分追求花俏的效果,却忘了 你做这个产品: 是给谁用的? 它的核心需求? 产品设计是发现需求、满足需 求,而不是创造需求! 案例分析 1.厕所 2.移动、联通手机号 3.黄金回收、加工 4.刻章 5.照相 6.相机出租 7.房屋出租 8.煎饼果子 …… 史上业务最全的公厕(武汉) 决定不做什么,往往比决定 做什么更重要! 案例分析 产品设计的出发点、运营模式是非 常正确的,但是新的产品线的迭代 上线,导致以往体验性非常好的产 品,给忠实用户造成可怕的体验。 -Are you ready? -OK! 这两句话很简单,产品设计人员 在设计每一个功能点时都需要全 面考虑。 案例分析 导航早就过时了,但是没 有人来升级、替换。 逆水行舟,不进则退—— 同样适用于互联网产品设 计。 这也是为什么同样产品线, 不同公司的用户群数量截 然不同的原因之一。 案例分析 这是哪? 导航很“文雅”,但是用 户不明白。 不按套路(大众习惯)出 牌——只会让人感觉 别扭!相当别扭! 创新,并不是让你这 样来做。 案例分析 ·按照自己的思维“拍脑袋”策 划,那么用户恨不得拍你的 脑袋! ·不要给用户不想要的东西, 任何没用的东西对用户都是 一种伤害。 %&*¥#@*#@#¥ 以上案例在生活中Very common, very much! 以上案例—— • 好玩吗? • 好笑吗? • 是不是都是低级错误? • 是不是让人难以置信? • 其实这些都发生在你我的身上,而且就在现在。 小结 • 发现需求,而不是创造需求。 • 决定不做什么,往往比决定做什么更重要! • 产品迭代,你是否真的准备好了。 • 产品及时更新。 • 你是否真正了解什么是产品创新。 • 按照自己的思维“拍脑袋”策划,那么用户恨不得拍你的脑袋! • 不要给用户不想要的东西,任何没用的东西对用户都是一种伤害。 …… OK,切入正题,我们要做的就是 Better User Experience 主要内容 • 用户体验?交互设计?UI设计? • 实现模型和心理模型 • 用户体验与交互设计基本原则介绍 • 交互细节案例介绍 • 交互设计所需要技能 概念 用户体验:UE(User Experience) – 用户体验并不是指产品本身是如何工作的,而是指产品如何和外界联系并发挥作用,也 就是人们如何“接触“或者“使用”它。 – 系统中的用户体验是指用户在访问平台的过程中的全部体验,它包括平台是否有用,疑 惑或者bug程度,功能是否易用、简约,界面设计和交互设计是否友好等方面。用户体 验的核心是UCD,即“以用户为中心的设计”。 等到忙完这一阵子,我们部门逐步建立自己的用户体验设计中心(User Experience Design Center) *^__^* “AJAX之父”的Jesse James Garrett早在2000年就提出了 以用户为中心的Web设计的流 程和用户体验的要素。 战略层——网站目标和用户需求(老板居多) 成功的用户体验,其基础是一个被明确表达的“战略”。知道企业与用户双方对网站的期许和目标, 有助于确立用户体验各方面战略的制定。(很多都是老板提的需求、马云就是一个需求PM。) 范围层——功能规格和内容需求(产品经理) 带着“我们想要什么”、“我们的用户想要什么的”的明确认识,我们就能弄清楚如何去满足所有这些 战略的目标。当把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时,战略 就变成了范围。 结构层——交互设计与信息架构(产品经理) 在收集完用户需求并将其排列好优先级别之后,我们对于最终产品将会包括什么特性已经有了清 楚的了解。然而,这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上 面一层:为网站创建一个概念结构。 框架层——界面设计、导航设计和信息设计(美工、产品经理) 在充满概念的结构层中开始形成了大量的需求,这些需求都是来自我们的战略目标的需求。在框 架层,我们要更进一步地提炼这些结构,确定很详细的界面外观、导航和信息设计,这能结构变 得更实在。 表现层——视觉设计(美工、产品经理、技术) 在这个五层模型的顶端,我们把注意力转移到网站用户会先注意到的那些方面:视觉设计,这里, 内容、功能和美学汇集到一起来产生一个最终设计,这将满足其他四个层面的所有目标。 概念 交互设计 · 交互:用户通过某种方式发出指令,且系统对此作出相应的反应。 · 从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的交互设计技术,它致力于了解目 标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时 ,还包括了解各种有效的交互方式,并对它们进行增强和扩充。   · 通过对产品的界面和行为进行交互设计,让产品和它的使用者之间建立一种有机关系,从而可以有效达 到使用者的目标,这就是交互设计的目的 ·用户方向感、成就感、使用频率、黏性等很多都和交互设计有直接关系。 最常见、最容易忽略、最典型的交互设计的例子 概念貌似有点模糊? 概念 UI设计(User Interface Design) – 用户界面设计,在很大程度上就是在探讨如何让产品的界面更加具有可用性,如何让用 户有更良好的体验。这是一种优化后的界面,通过这种界面,用户能更方面地完成任务, 获得良好的感觉。 – 例如:一个按钮的设计,美工设计考虑如何好看,而产品经理、用户界面设计师则考虑 按钮如何摆放,上面显示什么文字,甚至到底要不要这个按钮的问题。 关于用户体验 用户体验各要素的设计和交互设计、界面设计不同:它是一种比交互设计和界面 设计更上位的设计,界面设计和交互设计侧重于从功能的实现出发,而用户体验 设计则重点关注用户使用过程中的感受,是一种以用户为中心的,综合功能设计 、交互设计、界面设计、导航设计和视觉设计等,它要求设计者(产品经理、美工) 站在一个更宏观的高度,整体把握用户与这些设计要素之间的关系。从而给产品 的最终用户带来良好的体验。 产品经理和美工真是太伟大了!!! 软件设计,UI设计,交互设计 《软件设计的艺术》 Terry Winograd (2004年度的ACM人机交互院士) 开发软件开发软件建房子建房子 土木工程师 装修设计师 建筑设计师 软件设计 UI设计 交互设计 土木工程师关心工程的实现。(技术) 装修设计师则考虑的是在现有空间中如何美化。(美工) 建筑工程师则关心的是房屋居住者的感受。(产品经理、美工) 实现模型和心理模型 心理 模型 表现 模型 表现 模型 实现 模型 实现 模型 容易使用,体验良好 记忆负担,体验较差 最好的技术是消失在生活当中的技术 心理模型:产生于用户头脑中的关于一个产品应该具有的概念和行为的知 识。这种知识可能源自于对产品的概念和行为的一种期望。(看电影) 实现模型:是产品的内部结构和工作原理,他存在于设计人员的头脑中。 (放电影) 表现模型:是指产品的最终外观以及产品呈现给用户后,用户通过观看或 使用后而形成的关于产品如何工作和使用的知识。 几个通用的原则 • 就近设计原则 对功能进行恰当的分类和组织 通用原则-帮助用户探索和尝试 通用原则-允许用户犯错误 • 让用户可以撤销动作。 • 在执行具体的破坏性操作中要求用户确认。 通用原则-提供实用的帮助 • 设计帮助系统 – 入门和学习部分 – 使用指南 – 参考手册 – 疑难解答 – 术语解释 • 语言表达:采用具体的例子,帮助用 户理解 • 表达方式:按照使用流程来。 通用原则-使界面符合用户的使用习惯 • 被动调整策略:例如功能定制,界面定制。 • 主动自适应调整策略:例如sogou拼音输入法。 – 根据其他用户的使用行为来主动进行自适应调整 • 购物网中,购买这本书的用户还购买了以下书。 • 在《长尾理论》中安德森叫过滤器法则,它是长尾现象形成的一个因素。 – 介于主动自适应和被动调整之间的混合策略。 通用原则-减少用户在使用过程中出现错误 • 让用户能有效地看出或者知道如何进行正确操作 – 减少用户记忆的负担; – 自然匹配和预设用途; – 尽可能采取一致性的设计 • 采用限制级因素防止用户出错 通用原则-减少用户在使用过程中时出现错误 • 利用某种方式提醒用户可能出错 • 如何设置出错信息 • 不要只告诉用户操作无法完成或者操作失 败 • 不要仅仅给出出错代码,还应当给出该错 误的含义 • 不要在出错信息中使用用户无法理解的术 语 • 错误要尽可能明确 • 错误信息要有建设性,要让用户看出怎样 才是正确的 • 不要给出误导性的出错信息 • 向用户提出解决问题的建议 通用原则-减少用户的等待感 0.1秒钟、1秒钟、10秒钟…… 如果响应时间是0.1秒, 用户感觉不到任何延迟, 即0.1秒是让用户感觉到 系统立即做出了反应的时 间上限。 1秒钟是让用户思维不被 中断的上限。 但大于1秒钟时用户将会 感到延迟。 10秒钟时让用户的注意力 保持在对话过程中的上限。 通用设计原则-小结 • 就近设计原则 • 对功能进行组织和分类 • 帮助用户探索和尝试 • 允许用户犯错 • 提供实用的帮助 • 使界面符合用户的使用习惯 • 减少用户出错 • 减少等待感 交互细节案例介绍 创立于1995年亚马逊公司总部位于美国华盛顿州的西雅图,目前它己成为全球 商品品种最多的网上零售商。亚马逊及其它销售商为客户提供数百计.品种独特 的全新、翻新及二手商品,如图书、影视、音乐、数码电子产品、家居园艺 用品、玩具、婴幼儿用品、食品、服饰、鞋类等产品,其规模和销售额都是全球 领先的。亚马逊致力于成为全球以客户为中心的公司,以使人们能在网上找到与 发掘任何他们想购买的商品,并力图提供最低的价格。除了销售产品外, 亚马逊也提供网络服务,亚马逊网络服务(Amazon Web Services)为亚马逊的开 发客户提供基于其自有的后端技术平台、通过互联网提供的基础架构服务。利用 该技术平台,开发人员可以实现几乎所有类型的业务。亚马逊网络服务所 提供服务的案例包括:亚马逊弹性计算网 (Amazon EC2)、亚马逊简单队列服务 (Amazon Simple Queue Service)、亚马逊灵活支付服务(Amazon FPS)等。 案例一 百度、人人网 交互设计—符合用户习惯与预期 – 先字母排序,再优先显示最近联系人,减少键盘操作。 交互设计—符合用户习惯与预期 说三句“我认为”、“我猜测”,不如一次真正意义的用户 调研。 交互设计—适时的提醒 • 没必要的提醒不需要出现 • 而适时出现的提示或功能,用得好,不但不会骚扰用户,还是对用户的细致 的关怀 一些用户真的 需要提醒,并 且不仅仅针对 初期用户。 交互设计—操作便利 •QQ魔法表情 视觉设计——制定规范,维持统一 • 文字使用要规范,语法,大小,颜色,大小写都需要注意 – 能用一个词表达的,不用一句话。能用一句话表达清楚的,不用 两句话 – 每个概念都只有唯一一种表达。如”服务通”、“付费排名”等 概念 – 能用一种字体颜色的,不多用一种颜色 – 能用一种字体大小的,不多用一种大小 交互设计—寻求最佳方案 没有最好,只有更好—— • 腾讯QQ可以称得上及时通讯的老大,以前往往看到的是腾讯的界面 是多么的友好等等的赞美。但是一次偶尔的操作,发现腾讯的不完美, 也可以说是很大的失败。 • 在QQ更改密码的时候出现了要求在同一IP段才能修改,但是我想问 下,现在也不是所有互联网用户都会用电信或者网通。其实有很大一 部分是用的其他网络提供商的宽带接入。这样也就导致了随机IP段产 生。那么请问他们怎么修改密码? • 他这么做也不外乎就是为了防止盗号的行为,但是即使这样也不应该 牺牲用户的易操作性。为了防止盗号的行为还有很多其他方法。 • 反正个人认为腾讯这样做不是很好。 百度、腾讯用户体验总结 – Don't make me think – 符合用户习惯与预期 – 做适时的提醒 – 不强迫用户 – 选择最佳方案 – 操作便利 案例二 网易邮箱注册初体验 • 课下尝试注册一个新的网易邮箱,分析该邮箱在交互方面做的比较好的点(尤 其第一次进入邮箱),并考虑哪些可以供我们借鉴。 • 试着给自己发送几个带图片的附件的邮件,感受其友好性。 网易体验 行业先驱的交互设计原则 Jakob Nielson博士简介 • Jakob Nielson是尼尔森—诺曼集团的主 要负责人之一,他被《美国新闻与世界报 道》杂志誉为”Web可用性方面的世界顶 尖专家”。他的Alertbox专栏从1995年 就开始在互联网上发布了(网站地址是: www.uselt.com)。Nielsen博士曾经 是Sun 公司杰出的工程师。他写过很多书 ,包括畅销全球的《Designing Web Usability》一书。 Jakob Nielson博士交互设计的十项原则 • 1.让用户随时了解系统的状态。 • 2.系统应该与真实世界相符合(使用用户惯用的词汇和概念)。 新浪微博手机客户端的开关键 • 3.给用户控制权和自主权。 当系统出错或者误操作后能够紧急退出 4.提倡一致性和标准化。 相似的任务提供相似的元素 • 5.帮助用户诊断、识别和恢复错误,告诉用户大概的原因和解决办法。 • 6.预防错误。 • 7.依赖于识别而不是记忆。 • 8.强调实用的灵活性和有效性。输入搜索内容后直接按回车键就能搜索而不一 定要点击搜索图标。 • 9.最小化设计。乔布斯估计很郁闷 • 10.提供帮助及文档。 Ben·Shneiderman(本·施奈德曼)交互设计原则性 • 力求一致性:高度一致性的界面能够给人清晰和整体的感觉。 • 提供明确的反馈 • 设计对话,告诉用户任务已经完成 • 提供错误预防和简单的纠错功能 • 应该方便用户取消某个操作 • 用户应掌握控制权 • 减轻用户的记忆负担 现任马里兰大学计算机科学系教授,兼任该校人机交互实验室主任。作为 用户界面设计的先驱,他的著作和研究闻名于世。 交互设计需要哪些能力和技术? 交互设计师 Interaction Designer 1.有相关工作经历和作品者优先; 2.对各种常用软件有强烈兴趣并有灵敏触觉,富有创造力和激情,并有动手实践良好习惯; 3.逻辑思维能力强,熟练掌握业务需求分析、产品需求分解的技巧; 4.有大局观,可以在复杂的约束条件下找到平衡或创新的方法; 5.主动性高,具优秀的理解、沟通与协调能力,很强的文字表达能力;个性乐观开朗,善于和各种背景的人合作; 6.对交互设计过程有深入了解,能熟练应用站点结构图、流程图等交互设计方法; 7.有相关岗位的技术和技能,如视觉设计、XHTML/CSS等; 8.熟悉动画制作、高仿真原型制作者优先; 9.主动性高,具优秀的理解、沟通与协调能力,文字表达能力强; 10.有良好的英文阅读能力,英文六级优先; 11.工业设计、计算机、软件工程、心理学等相关专业本科及以上学历。 工作职责 1.参与产品规划构思和创意过程; 2.分析业务需求,并加以分解和归纳出产品人机交互界面需求; 3.设计软件的人机交互界面结构、用户操作流程等; 4.参与公司前瞻性产品的创意设计; 5.制作相关仿真原型。 产品经理需要充电了~~~ 交互设计需要哪些能力和技术? 1. 交互设计的经验,或多或少,当然经验丰富者优先。 2. 给出高质量的产品原型,流程图,线框图,清晰的表达自己的设计方案。 3. 优秀的沟通和协调能力,能准确的挖掘用户需求,结合商业目标,快速调整设计方案,并获得最 终的认可。 4. 良好的视觉设计能力,Photoshop,Dreamweaver等设计工具熟练运用,能给出高保真度的原 型。熟悉XHTML,Javascript,ActionScript 者优先。 5. 基本的程序开发知识,确保你在前期设计时能综合开发成本,给出高效可行的设计方案。 6. 人机交互,软件工程,工业设计,视觉传达,或者相关设计学科的学历。我们并不注重学历,当 然高学历者优先。 7. 英文,能阅读专业资料,能应付日常工作中和外籍同事的交流。(日文也可以,我们也在招日文 站的设计师。) 8. 在各个有趣的网站都有自己的注册帐号。眼界是能力的基础。 9. 最重要的一条:学习的心态! 美工需要充电了~~~ Colourful Future! 参考资料 • Jesse James Garrett著,范晓燕译.用户体验的要素[M].北京:机械工业出版社.2007,(9) • Blackboard NG网站[OL] . http://as9.study.cerbibo.com/,2009-9-28 •(美国) Alan Cooper. Robert Reimann. David Cronin . About Face3: The Essentials of Interaction Design[M].电子工业出版社.2008(11) • Robert Hoekman,Jr著,何潇译 一目了然,Web软件显性设计之路.机械工业出版社 。2007.8 • 张亮。细节决定交互设计的成败。电子工业出版社。2009.3 • 产品设计和用户体验 马化腾 • 亚马逊购物网体验分析 • 向怡宁.就这么简单——web开发中的可用性和用户体验.清华大学出版社.2008(6) • RB Miller Response time in man-computer conversational transactions. Proceedings of the December 9-11, 1968 • Tencent CDC Blog 谢谢!
还剩48页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

devie

贡献于2015-07-27

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf