Better User Experience
Colourful Future
——用户体验、交互设计及案例介绍
王志军 2010 /10/23
几张看似不相关的图片
几个网站
主要内容
用户体验？交互设计？ＵＩ设计？
实现模型和心理模型
用户体验与交互设计基本原则介绍
交互细节案例介绍
小任务
交互设计所需要技能
概念区分
用户体验：UE
用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。
Web中的用户体验是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。用户体验的核心是UCD，即“以用户为中心的设计”。
“AJAX之父”的Jesse James Garrett早在2000年就提出了以用户为中心的Web设计的流程和用户体验的要素
交互设计
交互：用户通过某种方式发出指令，且系统对此作出相应的反应
交互设计是关于创建新的用户体验的问题，目的在于增强和扩充人们的工作、通信及交互方式，使他们能够更加有效地进行日常工作和学习。
UI设计
User Interface Design
用户界面设计，在很大程度上就是在探讨如何让产品的界面更加具有可用性，如何让用户有更良好的体验。这是一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉。
例如：一个按钮的设计，美工设计考虑如何好看，而用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题。
软件设计，ＵＩ设计，交互设计
《软件设计的艺术》Terry Winograd (2004年度的ACM人机交互院士)
开发软件
建房子
土木工程师
装修设计师
建筑设计师
软件设计
ＵＩ设计
交互设计
实现模型和心理模型
心理模型
表现模型
实现模型
容易使用，体验良好
记忆负担，体验较差
最好的技术是消失在生活当中的技术
几个通用的原则
就进设计原则
对功能进行恰当的分类和组织
帮助用户探索和尝试
允许用户犯错误
让用户可以撤销动作
在执行具体的破坏性操作中要求用户确认。
提供实用的帮助
设计帮助系统
入门和学习部分
使用指南
参考手册
疑难解答
术语解释
语言表达：采用具体的例子，帮助用户理解
表达方式：按照使用流程来。
设计一个优秀的向导式界面
帮助用户高效地完成操作
支持批处理操作（google的picasa图像处理软件）
提高常用操作的效率
4A中的作业模块
布置手工作业流程
使界面符合用户的使用习惯
被动调整策略：例如功能定制，界面定制
主动自适应调整策略：例如sogou拼音输入法
根据其他用户的使用行为来主动进行自适应调整
购物网中，购买这本书的用户还购买了以下书，
在《长尾理论》中安德森叫过滤器法则，它是长尾现象形成的一个因素
介于主动自适应和被动调整之间的混合策略
减少用户在使用软件时出现错误（一）
让用户能有效地看出或者知道如何进行正确操作
减少用户记忆的负担；
自然匹配和预设用途；
尽可能采取一致性的设计
采用限制级因素防止用户出错
减少用户在使用软件时出现错误（一）
利用某种方式提醒用户可能出错
如何设置出错信息
不要只告诉用户操作无法完成或者操作失败
不要仅仅给出出错代码，还应当给出该错误的含义
不要在出错信息中使用用户无法理解的术语
错误要尽可能明确
错误信息要有建设性，要让用户看出怎样才是正确的
不要给出误导性的出错信息
向用户提出解决问题的建议
减少用户的等待感
Robert B miller 1968 ——Response time in man-computer conversational transactions
秒钟、1秒钟、10秒钟
总结
就进设计原则
对功能进行组织和分类
帮助用户探索和尝试
允许用户犯错
提供实用的帮助
设计一个优秀的向导界面
使界面符合用户的使用习惯
减少用户出错
减少等待感
交互细节案例介绍
案例一 Tecent
交互设计—Don't make me think
“返回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中的“玉柱”，也定义了邮箱的交互风格。
帮用户自动选中：在输入独立密码或加密folder输入密码时错误后，应该把输入框内的内容select上，这样就可以直接打入而不用清除了
光标定位：之前的点"回复"时光标focus到正文的问题改好了,但却没有注意到点"转发"时光标,反而应是在"收件人"处而不是正文处, 因为一般总要填写转发人, 而回复(包括回复全部)则是直接输入内容.
交互设计—符合用户习惯与预期
先字母排序，再优先显示最近联系人，减少键盘操作。
交互设计—符合用户习惯与预期
兼容客户端邮件菜单习惯
在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右键则不能。
不随意去掉用户正在使用的功能
原来mail在做出了“HTML方式查看”后，去掉了“打开”功能
符合用户预期
点击其他地方，WEBQQ的浮动窗口隐藏到固定位置
交互设计—适时的提醒
没必要的提醒不需要出现
而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关怀
交互设计—操作便利
QQ魔法表情
交互设计—操作便利
问卷星的设计页面
视觉设计——制定规范，维持统一
文字使用要规范，语法，大小，颜色，大小写都需要注意
能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话
每个概念都只有唯一一种表达。如”VIP”的概念
能用一种字体颜色的，不多用一种颜色
能用一种字体大小的，不多用一种大小
视觉设计—防止不恰当的低龄化
在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化。
当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成熟”源自合理的设计，“低龄”源自不合常理的设计。
不恰当的低龄化
交互设计—寻求最佳方案
争执：
腾讯QQ可以称得上及时通讯的老大，以前往往看到的是腾讯的界面是多么的友好等等的赞美。但是一次偶尔的操作，发现腾讯的不完美，也可以说是很大的失败。
在QQ更改密码的时候出现了要求在同一IP段才能修改，但是我想问下，现在也不是所有互联网用户都会用电信或者网通。其实有很大一部分是用的其他网络提供商的宽带接入。这样也就导致了随机IP段产生。那么请问他们怎么修改密码？
他这么做也不在呼就是为了防止盗号的行为，但是即使这样样不应该牺牲用户的易操作性。为了防止盗号的行为还有很多其他方法。
个人觉得腾讯这样做不是很好。希望大家发表一下自己的看法
参考地址：
腾讯用户体验室
腾讯用户体验总结
Don't make me think
符合用户习惯与预期
做适时的提醒
不强迫用户
选择最佳方案
操作便利
观看并点评一下两个视频
QQ 概念版
Soso future
案例二 网易邮箱注册初体验
注册一个新的网易邮箱，请分析该邮箱在交互方面做的比较好的点，并指出可以供我们借鉴的地方。
并试着给自己发送几个带图片的附件的邮件，感受其友好性。
网易体验
Amazon—重点突出
明确强调产品搜索和在线购买
一旦建立了网站的产品搜索与网上购物等功能，用户最有可能想利用这些特性的优势马上开始搜索。
动态地定制用户体验
亚马逊使用Cookie来记录用户登录，而对用户的购物习惯进行跟踪并存储到服务器端。
它以事先进行搜索，网页浏览，愿望清单添加，评价填写为基础，并达到最终购买目的。
相关产品显示
基于先前行为的推荐产品
只要浏览器的cookies保持不变,这种定制相同类型的内容就会在随后的访问中一连串出现：
各种”为什么我们购物”的提示
亚马逊购物体验充斥着为何用户应该从亚马逊购买的提醒,而不是充斥着从其他来源（在线或其他方式）的提醒。
与市场零售价对比
用户早先被通知“免费送货”
逼真图书的预览和内部查找功能
可定制的历史推荐
浏览所有产品的查看历史记录都可以修改。 看一看下面的图片。
方便的导航元素
（1）
（2）
（5）
（3）
（4）
人性化的PayPhase
输入一句话 轻松在线支付
买家可以把姓名/地址/付款资料通用一个句子与密码存储起来。结账时，你只需要输入你自设的这个句子与密码即可
在线购物程序的简化将会使得用户更多地使用在线购物方式购买商品。据调查，在此之前有半数以上的网民已经将商品放进虚拟购物车，但到最后因为支付过程过于繁琐而放弃购物。
易于筛选和用户评价比较
方便地访问正面和负面评论
让用户感到舒适
亚马逊购物体验总结
把握住网站的焦点
只要有可能，应该为每个用户提供个性化内容。
给予用户为什么做出次选择的指导。
让用户尽可能多的接触到产品（内容）。
不要让用户感到有些产品/服务正在强迫他们购买
在适当的时候可轻松地访问重要部分。
在任何时候让顾客感到舒服和可控。
Jakob Nielson博士交互设计的十项原则
1.让用户随时了解系统的状态
例如导入导出的提示功能
2.系统应该与真实世界相符合（使用用户惯用的词汇和概念）
3.给用户控制权和自主权
当系统出错或者误操作后能够紧急退出。 4.提倡一致性和标准化
相似的任务提供相似的元素
5.帮助用户诊断、识别和恢复错误。告诉用户大概的原因和解决办法
6.预防错误
7.依赖于识别而不是记忆
8强调实用的灵活性和有效性：输入搜索内容后直接按回车键就能搜索而不一定要点击搜索图标。
9．最小化设计
10.提供帮助及文档
Ben Shneiderman交互设计原则性
力求一致性：高度一致性的界面能够给人清晰和整体的感觉。
提供明确的反馈
设计对话，告诉用户任务已经完成
提供错误预防和简单的纠错功能
应该方便用户取消某个操作
用户应掌握控制权（授课计划的跳过该动画）
减轻用户的记忆负担
小任务
请根据前面提到的原则，找出4A或者是学习超市设计上存在的一到两个问题，截图并加以文字说明，以作品发布的形式发表在序列化活动中。
交互设计需要哪些能力和技术？
交互设计师 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. 最重要的一条：学习的心态！
参考资料
Jesse James Garrett著,范晓燕译.用户体验的要素[M].北京:机械工业出版社.2007,(9)
Blackboard NG网站[OL] .
(美国) Alan Cooper. Robert Reimann. David Cronin . About Face3: The Essentials of Interaction Design[M].电子工业出版社.2008(11)
Robert Hoekman，Jr著，何潇译 一目了然，Web软件显性设计之路.机械工业出版社 。
张亮。细节决定交互设计的成败。电子工业出版社。
产品设计和用户体验 马化腾
亚马逊购物网体验分析<
向怡宁.就这么简单——web开发中的可用性和用户体验.清华大学出版社.2008(6)
RB Miller Response time in man-computer conversational transactions. Proceedings of the December 9-11, 1968
Tencent CDC Blog，
*
*
*
*
用户界面与视觉设计师
对于一个按钮：用户界面师考虑如何好看，而用户界面设计师考虑到底是要不要的问题
*
战略层——网站目标和用户需求
成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对网站的期许和目标，有助于确立用户体验各方面战略的制定。
范围层——功能规格和内容需求
带着“我们想要什么”、“我们的用户想要什么的”的明确认识，我们就能弄清楚如何去满足所有这些战略的目标。当把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时，战略就变成了范围。
结构层——交互设计与信息架构
在收集完用户需求并将其排列好优先级别之后，我们对于最终产品将会包括什么特性已经有了清楚的了解。然而，这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层：为网站创建一个概念结构。
框架层——界面设计、导航设计和信息设计
在充满概念的结构层中开始形成了大量的需求，这些需求都是来自我们的战略目标的需求。在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能结构变得更实在。
表现层——视觉设计
在这个五层模型的顶端，我们把注意力转移到网站用户会先注意到的那些方面：视觉设计，这里，内容、功能和美学汇集到一起来产生一个最终设计，这将满足其他四个层面的所有目标。
*
*
用户体验各要素的设计和交互设计、界面设计不同，它是一种比交互设计和界面设计更上位的设计，界面设计和交互设计侧重于从功能的实现出发，而用户体验设计则重点关注用户使用过程中的感受，是一种以用户为中心的，综合功能设计、交互设计、界面设计、导航设计和视觉设计等、，它要求设计者站在一个更宏观的高度，整体把握用户与这些设计要素之间的关系。从而给产品的最终用户带来良好的体验。
*
土木工程师关心工程的实现。
装修设计师则考虑的是在现有空间中如何美化。
建筑工程师则关心的是房屋居住者的感受。
*
心理模型：产生于用户头脑中的关于一个产品应该具有的概念和行为的知识。这种知识可能源自于对产品的概念和行为的一种期望。（看电影）
实现模型：是产品的内部结构和工作原理，他存在于设计人员的头脑中。（放电影）
表现模型：是指产品的最终外观以及产品呈现给用户后，用户通过观看或使用后儿形成的关于产品如何工作和使用的知识。
*
*
*
*
例如：windows桌面图标的调整，当有些图标超过六十天没有使用时，将会弹出一个提示气球，询问用户是否现在就开始清理
*
*
如果响应时间是秒，用户感觉不到任何延迟，即秒是让用户感觉到系统立即做出了反应的时间上限，1秒钟是让用户思维不被中断的上限，但大于1秒钟时用户将会感到延迟，10秒钟时让用户的注意力保持在对话过程中的上限。
*
*
创立于1995年亚马逊公司总部位于美国华盛顿州的西雅图，目前它己成为全球商品品种最多的网上零售商。亚马逊及其它销售商为客户提供数百力．种独特的全新、翻新及二手商品，如图书、影视、音乐、数码电子产品、家居园艺
用品、玩具、婴幼儿用品、食品、服饰、鞋类等产品，其规模和销售额都是全球领先的。亚马逊致力于成为全球以客户为中心的公司，以使人们能在网上找到与发掘任何他们想购买的商品，并力图提供最低的价格。除了销售产品外，
亚马逊也提供网络服务，亚马逊网络服务(Amazon Web Services)为亚马逊的开发客户提供基于其自有的后端技术平台、通过互联网提供的基础架构服务。利用该技术平台，开发人员可以实现几乎所有类型的业务。亚马逊网络服务所
提供服务的案例包括：亚马逊弹性计算网云(Amazon EC2)、亚马逊简单队列服务(Amazon Simple Queue Service)、亚马逊灵活支付服务(Amazon FPS)等。
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
任何一个页面都以此为导航
当您浏览亚马逊主页（在上面的截图），突出的是什么？永远是一片凌乱的布局，为数不多的简洁区块，有独特的元素立即捕捉用户的眼睛： 在导航搜索的左上角，和靠近顶端的搜索/购物车控制器 。
*
*
*
正如亚马逊那样，一个好的电子商务网站将跟踪客户端行为（在服务器端），以确保每个用户每次访问越来越适合他们的口味和习惯。
这增加用户将进行购买的可能性，在某些情况下，将加快采购进程。
更重要的是，它以更广泛的产品和配合他们感兴趣领域的服务公开给用户。
*
另一个“为什么我们购物”很好的例子，就是在上面提醒显示的图片。当用户增加了一些产品到他们的购物车时，独特的黄色的大横幅在屏幕上方出现，并告诉用户：他们现在有资格取得免费送货服务。
帮助横幅还包括所有的他们可能应用的限制规定的链接。
从逻辑上讲，“免费送货通知”，应是在“航运选项一步”，但这一过程发生在该用户已经显示出了他们对购物篮中商品的购买承诺之后了。
因此，一旦用户的购物车得到免费送货资格，就显示这种黄色横幅。同时他们将通过购买的可能性就会增加 。同样，实际上黄色横幅也说明了：“这是另一个从我们这里购物的很好理由”。
*
逼真的图书预览
其中购物者可能会放弃在网上购买机会的一个原因是，他们无法评估产品质量。
但是，一个近距离预览的产品，这也是实际地比较手中持有的产品。将有助于消除一些，虽然不是全部疑虑。
“查找内部”功能
书是在亚马逊最常被购买的产品之一，所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查找内部”内容的功能。
“查找内部”的功能可以让购物者观看到书籍的某些部分：通常的封面，目录，第一页，索引和封底。
这可能会非常有用，因为消费者能够一目了然，通过一个内容表或目录就知道一本书是否适合他们。
*
在“今天为您推荐”的下面,针对购物者亚马逊个人网页上列出的产品清单可以进行编辑。
点击“修改这一建议”链接，将显示一个窗口，正好说明为什么推荐这个产品，并提供购物者去选择改变它的机会。
通常一个被推荐的产品是以记录事先购买行为并跟踪购物习惯为基础的。这里购物者是可以告诉亚马逊不要推荐以那些因素为基础的产品。
另一个可定制的功能是购物者已经浏览的所有产品历史记录。这个选项总是不容易被找到，但它会出现在该用户的个人页面的顶部。下面是一个用户的浏览历史的例子。
*
*
对“商店所有分类”按钮悬停（＃1）触发一个下拉菜单，显示了所有主要产品类别，让消费者轻松访问其他产品。导航元素的位置，恰恰是用户期望它被放在屏幕左上角LOGO下面的位置。
在LOGO的旁边（＃2）有少数几个同样重要的链接，如登出的，个性化的推荐和用户的亚马逊个人页面。这一部分并不是非常突出，但出现的地方却是在顶部或上面与LOGO视觉平行的位置。
下一个元素（＃3）部分有“购物车”和“愿望清单”。购物车功能的位置几乎没有什么变化,总是位于电子商务网站布局的右上角。
每当用户浏览产品页面时，邀请他们加入自己的产品购物车或希望清单（＃4）。恰好这个位置是在亚马逊产品及产品细节的右边，用户可以很自然地找到此功能。
最后，亚马逊邀请用户在亚马逊市场查看同一产品的”二手和新品”版本（＃5）。在其集市上销售的产品显然在短期内不能增加亚马逊的收入，但它可能获得长期的回报，因为仅知道此选项，可让许多购物者选择亚马逊作为其主要目标，甚至二手商品也是如此。
亚马逊这样做是因为它很清楚的认识到：把用户的利益放在首位这对长远大有裨益。
您还会注意到的这样的一个元素是其他五个中最为突出的一个，它具有艳丽的色彩，梯度和微妙的三维效果。
这当然不是巧合：亚马逊希望在重要的地方引起用户的注意。
任何网站的成功关键点是导航元素的位置。就这一点而言，亚马逊竖立了很好的榜样，做到像用户期望的那样：确保在任何时间需要时，最重要的内容均可找到。
*
用词组+pin码的方式来对应信用卡与送货地址，实际上就是将用户的个人信息和支付信息用一组“虚拟”账户来替代，这样做的好处就在于避免了用户敏感信息在网上的泄露。
由于目前中国对个人信息的保护制度尚不完善，而国家相关监管部门在金融创新上的态度等特殊因素，PayPhrase这样新的支付模式短时间内还不能在国内市场实现。但是这样的模式是值得第三方支付企业借鉴的，是今后发展的趋势。
*
上面的截图比较两种对立的客户评级和评论（所示两边“VS”图形）。用户还可以按等级过滤客户评论。为什么这样做会使他们感到舒服？因为用户将要花费自己辛苦赚得的美元，并应该让用户感到更舒适，能够方便地访问正面和负面评论 。
通过获得有好有坏透彻的客户评论，使他们更加安心购买，并帮助他们做出明智的决定。
用户不是迫于压力才购买商品的，而是认为是否购买产品的决策权是否完全掌握在自己手中。
*
如上所述，在购物车页面包括一些选项，可以让用户感到舒适。首先，如果对于一次特定购买行为用户改变了主意，他们有权选择从购物车里删除它们。
但删除(Delete)宁愿是最后一个行为，所以他们选择用先保存下来以后处理(Saving it for later)替代了去执行删除(Delete)。你可以称之为“软删除”：它会从购物车的产品中移出，但会保存在用户购物车页面上的物品清单里。在任何时候用户都可以很容易的再添加回购物车中。
在运送(航运)页面更改或删除产品
在随后的购买步骤中，用户可以继续控制。看一看下一张图片。
当选择运送选项时候，用户将看到该页面，这可能意味着他们已经承诺或接近承诺，购买该产品了。
*
一个电子商务的网站的焦点， 应是产品搜索和在线购买。
只要有可能，应该为每个用户提供个性化内容。
给予“为什么我们购物”的提醒创建销售奖励。
让用户尽可能多的接触到产品。
不要让用户感到有些产品/服务正在强迫他们购买。
在适当的时候可轻松地访问重要部分。
在任何时候让顾客感到舒服和可控。
*
*
*
*
*
