Web交互界面设计与制作(微课版)
上QQ阅读APP看书,第一时间看更新

1.3.3 用户体验的5个层面要素

用户体验的开发流程,就是为了确保用户使用产品时的所有体验都不会令其产生“明确的、有意识的意图”。这就是说,要考虑用户采取每一个行动的每一种可能性,并且理解在用户使用产品的过程中每一个步骤的期望值。这包含巨大的工作量,但是我们可以把开发用户体验的工作分解成各个环环相扣的组成要素,这种方式可以帮我们解决工作量过大的问题。

用户体验的要素

1. 初识用户体验的5个层面要素

用户体验的5个层面要素如下。

表现层——感知设计:一系列网页,由图片和文字组成。

框架层——界面、导航和信息设计:按钮、控件、照片和文本区域的位置,主要用于优化设计布局。

结构层——交互设计和信息架构:与框架层相比更加抽象的是结构层,框架是结构的具体表达方式;它用来设计用户如何进入某个页面,并且在他们做完事情之后去什么地方。框架层可以用于定义导航条上的各个要素的排列方式及分类,结构层则用于确定哪些类别应该出现在哪里;哪些按钮点击之后进行什么操作;栏目内容里的信息如何统筹、规划。

范围层——功能规格和内容需求:结构层所确定的网站各种特性和功能就构成了网站的范围层。

战略层——产品目标和用户需求:网站的范围基本上是由战略层决定的(网站想经营什么和用户想得到什么都是战略层的范畴)。

每一个层面都用一个图标表示,如图1-3所示。

图1-3 5个层面图标示意

这5个层面提供了基本框架。在基本框架下,更容易解决用户体验的问题。每一个层面都会解决一些问题,有的抽象,有的具体。在战略层,我们不用考虑网站、产品或者服务最终呈现的样子,只关心网站如何实现战略目标,也就是满足用户的需求。在表现层,我们关心产品呈现的外观细节。基于基本框架,我们的决策一点点变得具体、清晰。

每个层面都是根据它下面的那个层面来界定的。所以表现层由框架层决定,框架层由结构层决定,结构层由范围层决定,范围层由战略层决定,环环相扣。当某一层面的决定没有和上一层面的决定保持一致时,项目常常会脱离正常轨道,完成时间也会延迟。而在开发团队试图把各个环节强行拼合在一起时,往往又会增加开发费用。因为5个层面存在依赖关系,从而可能产生某种自上而下的“连锁效应”。

但是,这也并不意味着必须在下一层面完成后,才能考虑上一层面的内容。所有决策产生的“连锁效应”都应该是双向的。所以,我们应该好好规划项目,以确保任何一个层面的工作都不能在下一层面完成之后进行,如图1-4所示。

图1-4 层面完成时间轴

用户体验五要素将产品分成了两类,一类是功能型产品,另一类是信息型产品。对于功能型产品,主要偏向于用户通过产品功能解决问题,因此框架层关注的核心是任务,所有的操作都被容纳进一个过程,在这个过程中我们思考用户行为,研究用户该怎样进行每一个操作,把产品看成是完成一个或者一组任务的工具;而对于信息型产品,我们关注的核心是信息,产品应该提供哪些信息,这些信息对于用户而言有什么意义。因此,做用户体验开发过程时,要做好产品的定位,明确产品是功能型产品还是信息型产品。

随着国内互联网企业的发展,用户体验模块也变得异常重要。在残酷的市场竞争中,产品体验差有时对于产品本身而言将会是致命的。尤其是在涉及使用的核心环节,如支付环节体验很差,将是产品使用终结的“罪魁祸首”。但是,互联网企业也应该对用户体验保持克制,不可一味地盲从。

2. 深入理解用户体验5个层面要素

(1)战略层

通常产品周期很长,只有定好战略,有规划,有指导思想,才能够做好产品。在战略层需考虑“产品目标”和“用户需求”这两个要素。

① 产品目标:比如,赚一个亿;再如,先干一年,积累100万个用户。这就是产品要达到的商业目标。

② 用户需求:比如,有的用户打车困难,有的用户的车总是自己一个人开,浪费空间,所以想到共享经济,可以做个共享平台,让没车的用户坐有车的用户的车。这就是用户需求。

用户需求需要好好挖掘,可以通过问卷调查、访谈等方式挖掘用户的核心需求。为了避免我们的做法与用户需求偏离,可以对用户进行分类,把典型的用户划分种类并制作用户画像,甚至可以把用户画像打印出来挂在墙上,在以后做决定的时候想着用户的需求,这样我们就不至于做出严重偏离用户需求的决定。

产品目标是公司内部需求,用户需求是公司外部需求,它们共同组成战略层的核心内容。

(2)范围层

我们的产品要有哪些功能?例如,使用打车软件打车,用户输入出发地,就能让司机轻松地找到乘客;要给他们提供便利的支付方式,就要让乘客和司机能够通过某种联系方式交流;要能够动态地、实时地把最合适的乘客推荐给最合适的司机,就要获取双方的定位信息。

上面描述了产品功能,这就是范围层要考虑的,哪些功能要实现,哪些功能不实现,哪些先实现,哪些后实现,这些内容写下来之后就变成需求文档了,以后在开发的排期、优先级、实现不实现某个功能产生分歧的时候,都可以参考需求文档。

在战略层,解决的是为什么做的问题,在范围层,解决的是做什么的问题。那么,接下来的结构层、框架层、表现层,解决的都是怎么做的问题。它们由抽象到具体,由框架到细节,步步推进。

(3)结构层

在结构层,要考虑两个要素:“交互设计”和“信息架构”。

① 交互设计指的是针对用户的操作,产品要怎么反应。

在这里有一个“概念模型”的概念,比如,在电商网站中,购物车的概念模型是现实中的购物推车,那么它就有往里面放东西、从里面移除东西等功能,在电商网站中设计购物车功能时,就可以对应考虑它与用户的交互方式。

尤其需要注意一点,设计的交互方式不要与用户默认的思维习惯相背离。比如,按用户的思维习惯,浏览器右侧的ScrollBar是用来上下滑动页面的,如果你的产品把它设计为拖动ScrollBar可放大、缩小字体,就会让用户很难接受,因为这与他们的习惯不相符。

② 信息架构是指信息的组织方式。

产品肯定会有很多内容,那么这些内容应该怎么组织起来,让用户觉得好用、易用呢?比如操作文件夹的时候,会有一个文件夹,嵌套另一个文件夹,再嵌套另一个文件夹……一共嵌套十几层文件夹的组织方式,打开这类文件夹时令人心生倦意。在进行信息架构时,可以把每个产品的内容分别当作一个节点,然后把这些节点有序地组织起来。具体的结构有层级结构、矩阵结构、自然结构、线形结构等,可以根据自己产品的特点来进行针对性的设计。

(4)框架层

结构层只是对产品的交互方式和内容组织方式进行了大概的设计。那么在框架层,就需要进一步进行设计了。框架层中包含界面设计、导航设计和信息设计。

① 界面设计:界面设计要做的是选择合适的界面交互控件,这些控件既能够让用户易于理解其含义,又能够让用户借此来圆满完成任务。

② 导航设计:导航设计要做的是让用户在使用产品的时候知道自己在什么位置,知道下一步可以到哪里,知道怎么返回上一步,避免让用户有云里雾里的感觉。具体而言,索引表、网站地图、导航链接、当前位置导航信息等,都可以是导航设计的一部分。

③ 信息设计:信息设计要做的是把各种设计元素融合在一起并呈现出来,让用户更好地理解和使用它们。

在产品设计中有一个很重要的概念:线框图。线框图是上述的界面设计、导航设计和信息设计三者的综合体现,是产品的雏形和大致形态。需要注意的是,线框图与产品原型略有差别,产品原型是对线框图更细致描述的产品体现,产品原型要求必须有交互,而线框图则可以是静态的,没有交互也可以,如图1-5所示。

图1-5 网站线框图

(5)表现层

表现层可以让用户真真切切地感受到产品的外在表现,这是离用户最近的一层。在这一层,可以通过设计产品的配色方案、排版、对比、风格等,充分研究和使用用户的感知方式(如嗅觉、味觉、触觉、视觉、听觉等),将产品的风格完整呈献给用户,如图1-6所示。

图1-6 网页界面

产品开发过程中,要做好用户体验5个层面要素的设计,必须做好产品调研。按照调研者在组织调查样本过程中的行为特点来划分,调研过程可划分为4个阶段。

① 主动调研阶段:调研者主动组织调研样本,完成统计调查分析。

② 被动调研阶段:调研者被动地等待调查样本造访或提供信息完成统计调查分析。

按收集信息所采用的技术手段划分,调研方法可分为:站点法、电子邮件法、随机IP法、视频会议法。按收集信息的方法划分,调研方法可分为:网上问卷调研法、网上讨论法、网上观察法。

网络市场调研的关键是规划好6W2H。

WHO:谁从事某项工作,责任人是谁,对人员的学历、专业知识与技能、经验以及职业化素养等资格要求。

WHAT:做什么,即本职工作或工作内容是什么,负什么责任。

WHOM:为谁做,即顾客是谁。这里的顾客不仅指企业外部的客户,还指企业内部的员工,包括与从事相应工作的人有直接关系的人:直接上级、下级、同事、客户等。

WHY:为什么做,即工作对其从事者的意义所在。

WHEN:工作的时间。

WHERE:工作的地点、环境等。

HOW:如何从事或者要求如何从事某项工作,即工作程序、规范,以及从事某工作所需的权限。

HOW MUCH:为某项工作所需支付的费用、报酬等。

③ 实施阶段:主要工作是查询调研对象、编写调研问卷。

注意:与传统方式相结合,如搜集资料、设计调查表格、设计抽样、实地调查。

④ 结果处理和分析阶段:把调查信息存入数据库,通过数据库和分析策略提取所需资料;编写调查报告,为网络营销提出建议和意见;事后追踪调查。