沪ICP备06058754号-1
文集 | 解读《用户体验要素》 ——MiFavor 5.0时钟的设计与研究

2018-09-29

用户体验 | 文集

2017年学术论文欣赏

 

本文段落精选

 

 

我们要通过这个产品得到什么?我们的用户要通过这个产品得到什么?即“产品目标”和“用户需求”,这两者组成了战略层。战略应该是设计用户体验的流程中的起点,做任何产品之前,都需要先明确我们为什么要做

 

从用户角度出发,以叙述故事的方式描述用户与公司相关产品之间的互动,并以可视化图形将其展示,这一过程的产出物即为用户体验地图

 

以用户为中心的设计思想非常简单:在开发产品的每一个步骤中,都要把用户列入考虑范围。用户研究不再是产品设计过程中的附属内容,而是前提,必须在做产品的过程中随时纳入计划

 

...

 

解读《用户体验要素》

——MiFavor 5.0时钟的设计与研究

王利娜

中兴通讯股份有限公司,西安

 

摘要:

 

本文以MiFavor 5.0时钟模块的设计和研究为例,详细解读了经典书籍《用户体验要素》。分别讲述了战略层、范围层、结构层、框架层、表现层的概念,以及各个层面所对应转换的UX方法及产物。

 

关键词:用户体验五要素,时钟,MiFavor 5.0

 

1. 用户体验要素

 

说到用户体验,大家都已经耳熟能详了。无论是终端、互联网还是软件产品,都越来越重视用户体验。对于用户体验的方法,每个人都有各自不同的见解。但是《用户体验要素》这本书中描述的用户体验的五个层面,则是一个非常经典的框架体系,可以应用于几乎所有的产品和服务。它包括战略层、范围层、结构层、框架层和表现层。在战略层,解决的是为什么要做的问题,在范围层,解决的是做什么的问题,而结构层、框架层、表现层,都是解决怎么做的问题的。整个过程是由底层到上层,由抽象到具体,由框架到界面的。[1]

 

本文将以用户体验的五个层面为线索,详细讲述每个层面对应转换的UX方法及产物。

 

图1:用户体验的五个层面

 

1.1战略层

 

导致产品失败最常见的原因不是技术,也不是用户体验,而是在开始做产品之前,没有人试图回答如下两个非常基本的问题:我们要通过这个产品得到什么?我们的用户要通过这个产品得到什么?即“产品目标”和“用户需求”,这两者组成了战略层。战略应该是设计用户体验的流程中的起点,做任何产品之前,都需要先明确我们为什么要做。

 

1.1.1 竞品分析

 

“知己知彼,百战不殆”,这句话用在古代打仗时适合,用在产品设计中仍然适合。在开始设计产品之前,我们需要先进行竞品分析,其目的并不是找一款优秀的产品,拿来照搬。每个产品都有自己的理念,抄袭只能学到皮毛而已,而产品目标才是其灵魂。我们分析了iPhone、Android原生、三星、华为、小米、Nubia等竞品的时钟应用,整体来看,Android原生功能点最多,iPhone最简洁。MiFavor 5.0可借鉴竞品的内容如下:

 

1) 整体设计可以更沉浸,更灵动

2) 法定节假日智能提醒方式,可以修改为设置闹钟时让用户选择。

3) 增加动画效果

4) 可适当的增加音效

5) 在线铃音,场景音乐如有适合的第三方资源,可考虑加入

 

图2:竞品分析

 

1.1.2 用户调研

 

为了更好地验证之前发现的问题,持续提升MiFavor的用户体验,MiFavor 4.2完成后,我们对此版本进行了可用性测试。同时通过微信、微博、论坛、内部用户反馈等多个途径,收集用户意见,主要反馈问题如下:

 

图3:MiFavor 4.2主要问题

 

通过对如上问题的分析,闹钟应用使用过程中,主要有如下3个痛点: 

 

1) 闹钟响铃界面的关闭和再响操作提示及区别度不够,导致用户不知道怎么操作。

2) 新建闹钟,设置节假日闹钟操作步骤太多。

3) 语音播报的体验及语音控制的指令需要进一步优化。

 

1.1.3 愿景制定

 

该版本时钟应用的提升,是伴随着MiFavor 5.0整个大版本提升的,MiFavor 5.0的产品目标是稳定、场景、细节,时钟应用也遵循此大方向。通过该版本升级,希望解决之前版本用户提出的可用性问题,同时注重细节的精雕细琢,使时钟更沉浸、更精致、更流畅,以此来提升用户体验,提高用户对该应用的满意度及评价。

 

1.2范围层

 

带着“我们想要什么”、“我们的用户想要什么”的明确认识,我们才能弄清楚如何去满足这些战略的目标。当你把用户需求和产品目标转变成产品应该提供给用户什么样的内容和功能时,战略就变成了范围。在范围层,我们从讨论战略层面的抽象问题--“我们为什么要开发这个产品?”--转而面对一个新的问题:“我们要开发的是什么?”。哪些功能要做,哪些功能不做,哪些先做,哪些后做,都是范围层需要考虑的。

 

1.2.1 场景分析

 

传统的软件开发流程中,产品经理/需求工程师首先会提供一份功能列表,这种功能列表所使用的描述方式往往是以程序为导向的,比如“商品列表支持按照价格从低到高排序”。这种描述方式的弊端是:1)产品经理得出该结论往往是因为竞争对手拥有了该功能,而非分析了用户的真实需求。2)合作伙伴(交互设计师/视觉设计师/开发工程师)不能直接体会到该功能是为了帮助用户实现什么目标的。需求场景是一种更接地气的分析和描述用户需求的方法,使用场景的三个关键因素:对象(用户)、动作(需求)、情景(场景)。也就是说,使用场景说的是一个关于“什么人在什么情况下要解决什么”的问题。以场景的方式描述需求,能够有效避免功能需求的弊端:1)产品经理知道这个新开发的功能是为了帮助用户解决什么问题;2)交互设计师可以从中获知这种需求场景的细节:“发生频率,需求强度,用户有什么样的能力和辅助工具”

 

用户使用闹钟的场景可以总结为2个大场景,n个微场景,具体如下:

 

场景一:起床闹钟。这一大场景存在很多个细节,如下列举了一些常见的微场景。例如:1)明明听到闹钟响了,想着关了过几分钟再起,可偏偏又睡着了,再睁开眼睛发现阳光洒满卧室,迟到好久了。他们的需求是响铃界面再响和关闭容易区分,且关闭闹钟的操作是很明确的,不会误操作;2)闹钟响铃时想着再睡几分钟,按了再响,可怎么也睡不着,索性就起床了。正在洗漱,房间里的闹钟一直响,是何等的烦躁。此时需要的是起床后,可以快速的关闭再响闹钟。3)设了周一至周五的闹钟,由于上周放假,本周六需要补班,忘记重新设置闹钟了,导致周六迟到。此时需要的是节假日智能闹钟。4)下雨天穿了短裤,大太阳天却穿了厚外套,经常出现不知道当天天气及温度,少穿多穿衣服的情况。此时用户需要的是一起床就知道今天的天气、温度、空气质量...

 

场景二:临时闹钟。由于手机的便携性,闹钟也扩展到一些其它的场景,例如重要会议的提醒,需要赶飞机,提前设好出发时间的提醒等等。临时闹钟也存在很多微场景,例如:1)早晨10点有个重要会议,怕忘记设了闹钟。9点50分,安静的办公室,闹钟突然响起并开始播报现在的时间、天气,好尴尬。此场景可以了解,语音播报虽然用户的接受度很高,但是不是所有场景都适合的,需要根据不同场景可设置开关。2)经常设置临时闹钟,长久积累下来,有很多个闹钟不会再用了,每次都要手动删除不需要的闹钟好麻烦。此时,用户需要的是临时闹钟响铃后可自动删除,再也不用定期手动删除不用的闹钟了...

 

1.2.2功能定义

 

 

通过对用户使用场景的详细分析,以及战略层所做的竞品分析、用户研究,MiFavor 5.0的主要提升点如下:

 

1)语音播报:闹钟到时改为柔和的真人播报;同时优化下真人语音播报的音量规则,避免系统音量设置过大造成播报吓人的问题;

2)语音控制:继续优化语音控制指令

3)全屏响铃界面优化

4)编辑闹钟,重复方式方案修改

5)5.0新视效、动效的设计实现优化

6)单次闹钟,增加响铃后自动删除闹钟的设置项;

7)再响闹钟,编辑界面新增再响开关;再响为关时,响铃界面不显示再响入口;

8)关闭重复闹钟,弹框询问用户跳过一次还是彻底关闭

9)时钟列表界面,修改为长按进入复选删除界面

10)新增体感闹钟设置入口

 

1.3结构层

 

在定义好用户需求并排列好优先级之后,我们对于最终产品将会包括什么特性已经有了清楚的图像。然而,这些需求并没有说明如何将这些分散的片段组成一个整体,这就是结构层需要解决的问题。结构层包含交互设计和信息架构,而两者都强调一个重点:确定各个将要呈现给用户的元素的“模式”和“顺序”。

 

此阶段对应的UX的产物是体验地图。从用户角度出发,以叙述故事的方式描述用户与公司相关产品之间的互动,并以可视化图形将其展示,这一过程的产出物即为用户体验地图。“体验地图”是一种工具、一种方法。在日常的项目工作中,常用于“设计实施前的梳理规划”和“寻找设计机会点”。非常适合产品经理和交互同学作为产品\功能\设计规划的指引,方便对项目中的其他成员做快速直观的介绍。

 

按照此方法,将战略层和范围层两个阶段分析的闹钟场景、用户行为、想法、情绪、痛点、机会点,形象直观的表达出来,具体如下:

 

图4:闹钟体验地图

 

1.4框架层

 

结构层界定了我们的产品将用什么方式来运作,框架层则用于确定用什么样的功能和形式来实现。在框架层,我们要确定很详细的界面外观、导航和信息设计,这能让晦涩的结构变得更实在。

框架层对应的UX产物是线框图,它是对一个界面中所有组成以及它们如何结合到一起的最直观的描述。线框图是整合在框架层的全部三种要素的方法:通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。把这三者放在一个文档中,线框图就可以确定一个建立在基本概念结构上的架构,同时指出了表现层的设计应该前进的方向。

线框图可以是静态的,也可以是动态的,一般是由交互设计师根据已确定的需求/功能点来完成。线框图制作过程中需要遵守的原则,有很多理论的图书及文章可供参考。MiFavor 5.0主要强调了如下设计原则:

 

1) 大局观:以手机为设计对象,切忌仅局限于模块

2) 2/8原则:抓住主要用户,突出简洁与扁平化,去除非必要功能和元素,整合重复功能

3) 场景设计:以使用场景为设计中心,突出重点功能的展现与流程的自然连接

4) 以内容为中心的设计:更关注界面内容,扁平化的趋势突出内容本身的变化及其操作

5) 自然认知:手势或其他的隐藏设计需要符合用户的自然习惯与认知,务必让用户学习一次即可学会

6) 反馈友好:采用最小打扰用户的反馈方式

7) 非必要不特殊:必须遵循一致性原则,如需采用特殊设计必须充分说明理由后通过总监决策[2]

 

为了统一各应用的设计效果,提高软件的实现效率,我们详细制定了一份公共控件文档。时钟的所有界面,用到控件的地方,都必须遵循公共控件的规则,例如Tab页、单行/双行列表、悬浮按钮、开关等等。闹钟典型界面线框图如下:

 

图5:线框图

 

1.5表现层

 

在这个五层模型的顶端,我们把注意力转移到用户会首先注意到的地方:感知设计。在这里,将内容、功能和美学汇集到一起来产生一个最终设计,完成其他四个层面的所有目标,并同时满足用户的感官感受。表现层是功能及内容的视觉呈现,是应用最终呈现在用户面前的样子。

 

表现层对应的UX产物是效果图以及Guideline。时钟做为MiFavor 5.0的一个应用,遵循其简洁、精致、沉浸的设计原则。与MiFavor 4.2相比,时钟应用视觉上有了大幅提升,具体表现为:表盘设计、大壁纸切换及流畅的动画效果。向上滑动列表,表盘切换为数字,同时壁纸会在清晰和高斯模糊之间切换;左右滑动或者点击Tab,在闹钟、世界时、计时器、秒表四个功能间跳转时,大壁纸流畅切换,同时表盘也有很自然的变化。流畅的体验源自于动画的呈现,节奏是其灵魂,对节奏的把握体现了设计的苛求。典型界面效果图如下:

 


图6:效果图

 

2. 用户研究

 

用户是需求之源,是我们的衣服父母,是产品可持续发展的根源。创建吸引人的,高效的用户体验的方法称为“以用户为中心的设计”。以用户为中心的设计思想非常简单:在开发产品的每一个步骤中,都要把用户列入考虑范围。用户研究不再是产品设计过程中的附属内容,而是前提,必须在做产品的过程中随时纳入计划。

 

用户研究的方法非常多,按照《赢在用户:Web人物角色创建和应用实践指南》一书中关于用户研究方法的二维图,横向可分为用户说的和做的:怎么说表现了目标和观点,怎么做反映了行为,用户怎么说和怎么做经常是不一致的;纵向可分为定性和定量,定性研究可以找到原因,偏向于了解;而定量研究可以发现现象,偏向于证实。

 

本章节结合MiFavor 5.0时钟设计实例,向大家介绍问卷调研、A/B测试、可用性测试这三种研究方法在设计前,设计过程中,设计完成后的应用。[3]

 

2.1 调查问卷

 

调查问卷是常见的定量研究方法,通常封闭式问题比较多,适合大量用户的信息收集,但不够深入,一般只能获得某些明确问题的答案。在设计的过程中,如果我们想了解用户的使用习惯,例如一些设置项的默认开关,默认值等,则可以使用此方法。

 

MiFavor 4.2版本,用户提出:希望闹钟响铃的语音指令能更符合日常习惯。为此在MiFavor 5.0设计之前,针对关闭闹钟,延迟再响,我们预设了多个指令,通过调查问卷的方法,找出指令TOP5。将这些指令做为MiFavor 5.0的预设指令,并重点优化这其识别率。

 

1)关闭闹钟指令TOP5:关闭闹钟,别响了,关闭,我起床了,关了

 

图7:关闭闹钟指令TOP5

 

2)延迟再响指令TOP5:我再睡会(儿),一会(儿)再响,延迟再响,延迟,等会

 


图8:延迟再响指令TOP5

 

2.2 A/B测试

 

A/B测试是一种最优化技术,可以让你更清楚地看出同一设计不同版本之间的差异,从而找到与业务目标更符合的对象。可以使用A/B测试,比较同一设计不同版本之间的差异,找到与既定对象相较在统计学方面更优秀的作品,但是A/B测试不会帮助给出“为什么”,需要不断补充其他定性方法,才能帮助你更深刻地了解客户的动机以及真正的需求。在设计过程中,有一些设计细节,存在分歧或者不确定哪个方案是更好的,此时可用使用A/B测试帮助我们判断。

 

在MiFavor 5.0时钟的设计过程中,多次使用此方式,例如:时钟应用顶部条Tab的形式,用图标还是文字更合理?文字的辨识性更好,但是效果相对单一,且可能会存在多语言超长的情况;图标可以做一些有趣的动画效果,可以解决多语言超长问题,但是辨识度没有文字高,设计团队难以抉择。通过A/B测试,了解到受访的30位用户中,70%选择“文字”方式,原因主要是文字简单、直观。

 

图9:主界面顶部条Tab形式

 

2.3可用性测试

 

可用性测试是一种允许研究小组在用户执行某个(或某些)任务的时候,利用应用程序观察用户体验过程的评估方法。该方法旨在帮助设计小组发现界面的哪些方面最使用户感到沮丧或困惑,并在按照问题的严重性排序、逐个修正后,在产品正式推出之前重新测试。

 

可用性测试要重点关注典型最终用户目标的任何和情景,通常遵循有声思维报告的模式。除了保证实验的有效性、经验论证和避免偏见以外,为了确保可用性测试达到满意的结果,还需要设计和利益相关者作为观察人员,一同参与测试过程,他们在这个过程中可以直接发现可用性问题,并提出建议。[4]

 

MiFavor 5.0完成后,为了了解此版本提升的用户评价,以及是否存在一些可用性问题需要继续优化,我们组织了可用性测试,包含时钟应用。

 

从测试结果来看,MiFavor 5.0时钟应用满意度分值为4.42分(满分5分),高于某竞品,用户评价满意度较高。

 

图10:满意度分值

 

同时,在测试的过程中,我们也发现了一些可用性问题,具体见下边表格,这些问题均已即时修正。

 

图11:可用性问题

 

3. 亮点展示

3.1语音播报及语音控制

 

清晨,闹钟响铃的同时,语音播报当前时间,当天天气情况及空气质量:“现在是6点35分,今天小雨转多云,9到20度,空气质量良”。为了让播报声音更加自然,我们采用了声优录制的方式,细节体现品质。今天下雨了,赶紧起床吧,雨天会堵车的,出门的时候,记得带上雨伞。再也不需要在寒冷的冬天,艰难的睁开双眼,很不情愿的从被子里钻出来拿手机看几点了。

 

闹钟响铃时,您可以通过“关闭”,“等会”等语音指令来控制闹钟。 关闭闹钟的语音指令支持“关闭闹钟”,“停止闹钟”,“关掉闹钟”,“别响了”,“关闭”,“取消闹钟”,“取消”,“我起床了”,“停止”,“关了”,“起床了”,“起来了”...延迟再响的语音指令支持“延迟再响”,“一会儿再响”,“我再睡会儿”,“等会儿再响”,“一会儿响”,“我睡会儿”,“等会儿响”,“睡一会儿”,“延迟”,“等等”,“等会”,“等会儿”,“等一会”,“再睡一会”,“再睡会儿”...够强大吗?快来试试吧。每天的生活从起床开始,美好的起床体验是一天美好生活的开始。

 

图12:语音播报及语音控制

 

3.2节假日智能闹钟

 

上午10点钟,大家正在开会,小张头发乱糟糟,急急忙忙的跑进来了。被老板叫住,一顿臭骂:“这都几点了才来上班呀?干脆别来了算了”。小张很委屈,我真的不是故意迟到的,闹钟没响呀!同事小李心里一阵暗爽,幸好我买了中兴手机,支持节假日智能闹钟,要不我也得迟到被骂了。

 

编辑闹钟界面,将重复设置为节假日闹钟,系统会智能跳过节假日,补班时自动开启闹钟。

 

图13:节假日智能闹钟

 

3.3闹钟响铃界面优化

 

Mifavor4.2版本,收到用户反馈:闹钟响铃界面,关闭和再响的操作比较类似,早上还没完全睡醒时,每次都要认真的看着屏幕操作。针对此问题,MiFavor5.0关闭和再响的操作方式做了比较大的区别,向上滑动关闭闹钟,点击再响按钮延迟再响。增大了向上滑动关闭闹钟提示文字的字号,增加上滑提示箭头及动画提示;将圆形再响按钮修改为跑道形,点击的提示性更强。

 

除了早晨起床,也有很多重要事件设置临时闹钟的场景。闹钟响铃时,有可能您正在拨打电话,给客户发送重要资料,观看视频,玩游戏等等,全屏响铃界面会打断您的当前操作,体验不佳。MiFavor5.0非锁屏状态下,闹钟响铃时以浮窗形式显示,不会打断您的当前任务。

 

图14:闹钟响铃

 

总结


智能手机通过近10年的快速发展,给我们的生活带来了非常多的便利,如今,手机已成为我们生活中的必须品。而各个手机厂家及设计公司,也都逐步建立起了自己独特的设计方法及流程。本文以用户体验的五要素为线索,详细介绍了每个层次对应的UX产物及设计方法,同时,强调了用户研究在设计各个阶段的重要性。期待通过越来越多终端人的努力,给人类的生活带来更多便利。

 

参考文献

 

1. Jesse James Garrett著,范晓燕译,《用户体验要素》

2. William Lidwell,Kritina Holden,Jill Butler著,朱占星,薛江译,《通用设计法则》

3.苏杰著,《人人都是产品经理》

4.Bella Martin,Bruce Hanington著,初晓华译,《通用设计方法》

 

最佳点击量文章查看

 

基于老年用户行为特征的家用电子血压计设计

 

黑白灰背景下不同目标色对用户视觉注意力的影响

 

Project Fist Bump——用设计思维驱动产品转型

 

基于提升购物体验的购物车再设计

 

基于使用场景的医用血压计设计研究

 

互联网+公益下的用户信任感构建

 

以“专业微任务”为导向——文化教育类App的设计策略

 

电子商务运营模式转变及其对用户体验要素的影响

 

基于传播学理论的垂直社交网络用户体验研究

 

专注产品服务体验,实现多方共赢——旅游行业应用产品优化实战剖析

 

基于二次元爱好者现实活动体验下的资源整合系统研究

 

宿舍种植服务设计——创造“共创共享”的宿舍新生活方式

 

为高龄者设计之线上问卷调查研究——以乐乐活大家讲为例

 

升级版的竞品研究

 

基于用户模糊评价的中华焚香文化产品体验设计

 

重新挖掘潜藏在呼叫中心的顾客之声

 

新零售背景下面向未来的消费者标签系统的研究与设计

 

康复养老院信息服务系统设计研究

 

共享单车应用程式界面易用性之研究

 

租房青年生活形态下的智能家居产品设计方向研究

 

色彩数据库在iWatch配色设计中的应用

 

服务体验设计案例研究——珊珊水族

 

虚拟商业化方法在设计教育中的研究与实践

 

90后消费需求研究与趋势分析

 

基于网页404错误的可用性设计研究

 

人机交互测量在用户体验评价中的应用研究

 

多媒体上汉字字体的心理感受研究

 

血压测量App的用户体验研究分析与设计

 

微信小程序的用户体验研究

 

基于因子分析的漫画IP评估模型建立

 

基于文献综述探讨未来用户体验设计发展方向

 

从男士审美演变看当代日常箱包的新设计营销模式

 

复杂性社会问题的服务设计—针对罕见病儿童的巴拉度宝宝服务设计案例

 

推荐系统准确度衡量方案-- 引入权重概念

 

社交网络服务的用户持续使用意愿的影响因素模型探究

 

裸眼3D手机用户需求洞察

 

身心障碍共乘系统之服务调查与设计

 

民族志研究如何更好的在企业运用

 

数字界面汉子笔划粗细度对识别销量的影响研究

 

儿童设计思维启蒙创造力和创新力培养

 

探索时搜索中结果空间架构可视化研究

 

手游新手阶段中的引导及乐趣设计研究

 

Design with the Early Adapters——关于90后人群的住宅需求研究

 

数读信息爆炸时代的电影评分信任危机——以豆瓣电影平台为例的改良性设计

 

起步型工具产品数驱全流程设计研究  ——以营销推广工具阿里妈妈APP为例

 

基于家庭情感增进式服务设计研究  ——以阿尔兹海默症中国患者家庭为例

 

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×