1)战略层——网站目标和用户需求
成功的用户体验,其基础是一个被明确表达的“战略”。
这些战略不仅仅包括网站经营者想从网站得到什么,还包括用户想从网站得到什么。
就我们在网上购书的例子而言,一些战略目标是显而易见的:用户想要什么书,我们想要卖出它们。另一些目标可能并不是那么容易说清楚的。
2)范围层——功能规格和内容说明
带着“我们想要什么”、“我们的用户想要什么的”的明确认识,我们就能弄清楚如何去满足所有这些战略的目标。
当你把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时,战略就变成了范围。
比如:在线卖书的网站提供了一个功能,是用户可以保存之前的邮寄地址,这样它们可以再次使用它。这个功能就属于“范围层”要解决的问题。
3)结构层——交互设计与信息架构
在收集完用户需求并将其排列好优先级别之后,我们对于最终展品将会包括什么特性已经有了清楚的图像。
然而,这些需求并没有说明如何将这些分散的片段组成一个整体。
这就是范围层的上面一层:为网站创建一个概念结构。
4)框架层——界面设计、导航设计和信息设计
在充满概念的结构层中开始形成了大量的需求,这些需求都是来自我们的战略目标的需求。
在框架层,我们要更进一步地提炼这些结构,确定很详细的界面外观、导航和信息设计,这能让美色的结构变得更实在。
5)表现层——视觉设计
在这个五层模型的顶端,我们把注意力转移到网站用户会先注意到的那些方面:视觉设计,这里,内容、功能和美学汇集到一起来产生一个最终设计,这将满足其他四个层面的所有目标。
苹果(Apple)公司的用户体验
1.几近完美的产品设计
产品是用户体验的首要载体。苹果(Apple)是全球在营销、服务和公关领域做得最出色的公司之一,但在苹果内部,产品永远是第一位的。
为了实现更好的用户体验,苹果(Apple)对产品细节的关注,近乎苛刻。
1)几乎所有的科技产品,在塑料或金属的接口处都有缝隙,但苹果(Apple)公司创造了新的工艺,保证产品没有缝隙。所有的产品上只有线条而没有缝隙,甚至没有任何可见的螺丝。
2)甚至普通用户根本看不见的电子版,苹果(Apple)也设计的非常优雅和唯美。
2.简洁、高效、充分关注用户需求的界面设计
苹果(Apple)认为:好的人机界面规范遵从于用户思考和行动的方式,而不屈从于设备的性能。一个缺乏吸引力,复杂的,或违悖逻辑的用户界面,却会让原本优秀的应用变得索然无味。反过来,一个漂亮的,直觉感知的,引人入胜的界面能强化应用程序的功能。
1)苹果订立必须严格遵守的人机界面交互指南,以保证用户在苹果上,能获得一致的,较好的用户体验。
2)苹果的自有应用,均充分考虑用户需求、用户操作习惯,保持一贯的简洁和高效。
3.充满美好体验的门店设计
苹果(Apple)的用户体验,不仅在于卓越的产品设计,还体现在企业与用户接触沟通的每一个触点、触面上。许多用户第一次走进苹果的体验店,最大的感受就是苹果(Apple)体验店的环境设计,与其它IT电子产品的店面迥异。在看上去朴实无华的桌架上,各种产品的展示、使用恰到好处,营造出独一无二的购物体验。
苹果(Apple)的用户体验是:
更简洁的设计
更友好的用户界面
更方便的使用场景
更为高雅的外观
更为舒适尊贵的持有感
可用性(Availability)
中国用户根据既有经验,对这种界面元素形状及排布的解读为:需要上下滑动解锁。但是,这种预期与实际情况,并不一致。当用户预期与产品实际操作发生冲突时,可用性指标就会下降。
每个细节都经过思考,就会提升整个产品的可用性。而假如很多细节都处理随意,那么即使初看设计精美,在用户的长期使用中,依然会造成可用性体验下降。
易用性(Usability)
用户需求(users' requirements)
迎合用户需求,可以在较短时间内,将用户聚拢来。
引导用户需求,可以将用户向设计者希望的方向引导,产生预计的价值。
信息架构(Information Architecture)
页面布局(Layout)
优秀的布局,需要对页面信息进行完整的考虑。即要考虑用户需求、用户行为,也要考虑信息发布者的目的、目标。
【页面布局原则】
1.公司/组织的图标(Logo)在所有页面都处于同一位置。
2.用户所需的所有数据内容均按先后次序合理显示。
3.所有的重要选项都要在主页显示。
4.重要条目要始终显示。
5.重要条目要显示在页面的顶端中间位置。
6.必要的信息要一直显示。
7.消息、提示、通知等信息均出现在屏幕上目光容易找到的地方。
8.确保主页看起来像主页(使主页有别于其它二三级页面)。
9.主页的长度不宜过长。
11.页面长度要适当。
12.在长网页上使用可点击的“内容列表”。
13.专门的导航页面要短小(避免滚屏,以便用户一眼能浏览到所有的导航信息,有全局观)。
14.优先使用分页(而非滚屏)。
15.滚屏不宜太多(最长4个整屏)。
16.需要仔细阅读理解文字时,应使用滚屏(而非分页)。
17.为框架提供标题。
18.注意主页中面板块的宽度。
19.将一级导航放置在左侧面板。
20.避免水平滚屏。
21.文本区域的周围是否有足够的间隔。
22.各条目是否合理分类于各逻辑区,并运用标题将各区域进行清晰划分。
【 案例】 页面布局和眼动轨迹研究
眼动研究是随着用户体验的兴起与技术设备的进步,而兴起的一种用户研究方法。
它是眼动技术与研究方法的二合一,通过眼动研究观察被试者对移动应用页面的注视轨迹,辅助完成用户体验设计。
通过眼动研究,不但可以完整地还原被试者在各个页面的注视轨迹,还可以通过划分兴趣区分析被试者在各区域内容的关注度。
眼动研究提供的信息不只是人们是怎样“看”东西的这么简单,眼动反映了人脑的信息处理过程,眼动模式的特点与脑的信息处理都有密切的关系。
交互设计(Interaction Design)
人机交互(Human-Computer Interaction)
【案例】人机交互的变革-手势操作
手机上的手势操作可以说是苹果给我们带来的最大惊喜,自从手机诞生以来,键盘就成了人机交互的主宰,随后间或出现的全键盘或者语音也并未打破这一局面,直到iPhone、iPad的诞生,这一以触摸为基础的操作形式带来了不同于呆板的键盘和点击的有趣体验。
【未来人机交互趋势】
1.多指操作。
2.手势操作+NFC的近场高速传输。
NFC也就是近场通讯,借助短距离的高频无线通信,完成两台手机之间在距离非常近的时候非接触式的点对点数据传输,NFC目前已经在手机支付领域付诸应用。
3.手势操作+3D全息投影
4.手势+语音+?
用户界面(User Interface)
图形界面(Graphical User Interface)
流程(Flow)
流程描述的是用户完成任务的一系列操作及顺序,是在界面上,对任务的翻译。
它决定整个界面的信息架构和操作逻辑。
导航(Navigation)
控件(Widget)
数据和方法的封装。
用户界面控件(User Interface Widget)
信息(Information)
在文字基本原则的基础上,好的信息还应该强调:
1.使用有结束标点符号的完整句子。
2.统一使用中文标点。恰当的使用间隔标点符号和结束标点符号。
3.避免使用粗体。
4.避免缩写。特别是在技术性的消息中
提示信息(Prompt Message)
反馈信息(Feedback Information)
警示信息(Warning Information)
以用户为中心的设计(User Centered Design)
在开发产品的每一个步骤中,都要把用户列入考虑范围。
① 需求分析
目的:根据产品需求和设计要求提供用户使用分析。
方式:访谈、焦点小组、提炼目标用户建立角色模型、场景分析、竞争对手分析、提炼定性和定量的相关数据。
结论报告:根据分析目标用户的使用特征、情感、习惯、心理、需求等,提出用户研究报告和可用性设计建议。
② 原型设计
目的:概念方案设计。制定产品的业务功能和界面规范。
方式:与开发队伍合作设计各种交互原型。作角色模型设计和情景设计,通过情景的再现演示来总结和逐步细化用户使用中的各种交互需求,提出设计解决方案,并完成设计方案的演示,讨论,完善,和最终定稿。
结论报告:制作交互设计原型。为用户界面和交互设计实施提供设计标准规格。
③ 专家评审
④ 交互DEMO
⑤ 可用性测试
目的: 通过观察,来发现过程中出现了什么问题、用户喜欢或不喜欢哪些功能和操作方式,原因是什么。
方式:一对一用户测试
结论报告:用户背景资料文档、用户协议、测试脚本、测试前问卷、测试后问卷、任务卡片、过程记录文档、测试报告
⑥ 视觉管理
目的:使界面设计更符合产品定位,用户使用习惯及规范布局,对实现功能进行正确有效地引导。
方式:主持用户研究进行界面视觉引导。设计窗口规范,图形化的布局。
结论报告 :界面测试报告、视觉设计规范。
⑦ 切割编码
⑧ 发布跟踪
目的:产品使用结果的反馈。
方式 :用户访谈,用户反馈
结论报告:根据反馈意见及实际调查并根据预期目的撰写产品反馈结果报告。包括值得肯定的设计及对修改的建议。
尼尔森十原则(Ten principles of Nelson)
1.可视性原则:系统状态有反馈,等待时间要合适。
2.不要脱离现实:使用用户语言而不是开发者语言,贴近生活实际而不是学术概念。
3.用户有自由控制权:操作失误可回退。
4.一致性原则:同一事物和同类操作的表示用语要各处保持一致。
5.有预防用户出错的措施:关键操作有确认提示,及早消除误操作。
6.要在第一时间让用户看到:识别胜于回忆,提供必要的信息提示(可视&易取),减少记忆负担。
7.使用起来灵活且高效:为新手和专家设计定制化的操作方式,快捷操作可调整。
8.易读性:减少无关信息,体现简洁美感。
9.给用户明确的错误信息,并协助用户方便的从错误中恢复工作
10.必要的帮助提示与说明文档:无需文档就能流畅应用当然更好,一般地文档很必要,而且也提供便利的检索功能,面向用户任务描述,列出具体实现步骤,并且不要太冗长。
线框图(Wireframe)
创建线框图需要完成以下三个层次的工作:
1.明确线框图的基本要素。线框图的基本要素包括内容区域、内容描述、内容优先权层级、辨识信息、管理信息。
2.填写故事。内容包括场景、链接和窗体元素、注释、目标和基本原理、版本历史。
3.增加可选细节。包括排布和视觉设计、整个设计中的背景信息和内容举例。
通用设计
通用设计是指对于产品的设计和环境的考虑是尽最大可能面向所有的使用者的一种创造设计活动。
① The design is useful and marketable to people with diverse abilities.
② The design accommodates a wide range of individual preferences and abilities.
③ Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
④ The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
⑤ The design minimizes hazards and the adverse consequences of accidental or unintended actions
⑥ The design can be used efficiently and comfortably and with a minimum of fatigue.
⑦ Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.