阅读时长 — 15 分钟

OS站点的用户研究与交互设计

文章快速导航

阅读时长 — 15 分钟

OS站点的用户研究与交互设计

文章快速导航

一加OS站点是介绍OS功能的官网站点。开始的预期是作为独立站点存在的,配备独立的运营人员。大家都知道,在手机大战那些年,大家都努力基于Android打造具有自己设计和交互理念的OS系统。一加也是基于那时候打造了氢系统和氧系统,氧系统更接近原生Android,氢系统更接近IOS/MIUI/EMUI这一套。

一加作为手机厂商中的小公司,团队无法维系两套系统的发展,尤其在经历2016年一加2和X的滑铁卢之后,团队缩小,最终路线为氢OS、氧OS合并为一套系统。

OS站点只有国内有,且页面多年没有更新过,改掉老破旧是UX-team 2019年的重要目标。我们决定不再维护独立的OS站点,将介绍页面移动到手机专题页,将内容下载之类的页面移动到服务模块。2019年上半年,我们在7Pro专题页的时候,同时完成了这个设计改造。(这篇文章讲的是什么内容,围绕什么核心在讨论,不太清楚)

那么,这篇文章,讲述的就是一个后续的小版本迭代问题。

下图是页面开场效果的Demo展示。

当前页面情况分析

既然这是一个现存的网站,我们首先需要考虑当前的数据流量情况,以便得到更多有效信息。

首先看下,来自Google Analytics的数据情况分析。

 

从数据上看,有两个指标不太好:

一是跳出率太高,竟然高达69.45%。这意味着页面没有太多的互动和操作,按经验,这种高质量内容展示页面 ,跳出率应该控制在30~55%才算合理。

二是页面流量效率不尽人意。(增加更多细节)

接着,我们来看下滚动图和热力图:

从滚动图来看,50%的用户都浏览到最后三屏的位置。这说明,该页面访客质量极好。

一般热力图往往都会好于滚动图;热力图展现的是用户和页面点击的情况,也就是页面的互动性 。愿意发生点击的用户,质量都是高于纯滚动查看的用户的。

你可以回忆一下淘宝购物的时候,你感兴趣才会点击加入购物车或者点击领取券之类的,不感兴趣的,滚动看下就走了。如果滚动用户都看到了后面,就说明访问页面的内容质量很好。

相对的,从这个页面来看,页面点击率很。这就意味着,页面没有合理的引导点击。我们在交互设计中,合理的创造点击事件,是为了让用户看到更深层次的内容;同时,也给用户加强这部分内容的印象。毕竟用户有互动的内容,比纯粹浏览下页面,印象会更加深刻许多。

所以总结来说,该页面访客质量很高、但流量效率差、互动性低,且没有出口。

用户研究

接下来 ,我们需要从用户的角度出发去分析设计内容。要设计好一个页面,最重要的一个部分是我们要了解用户的目标是什么。作为设计师,我们得先摆脱从细节着手的习惯,不要一开始就沉浸在局部的页面设计上,去画某一个图标、一直在这个页面好不好看的问题上纠结。

清晰地了解用户目标,才能够发现真正的问题所在 ,能够知道设计的方向有没有错,不会浪费投入时间。

访客分类

在这个页面中,分类访客的指标在于用户对OS的了解程度。所以,我们进行了访客分类。在访问OS页面的用户中:

1、氢OS用户(什么意思,之前有说过氢系统和氧系统,这里为何就成氢系统了),占比26%;

2、Android的用户(非氢OS用户),占比50%;

3、iOS用户,且从不了解Android,占比24%;

最多的是非一加系统的 Android用户,占比50%,这部分人群是我们标准的转化人群。其次iOS用户中,了解Android的iOS用户也是转化目标之一(没有体现这部分的数据)。

我们通过访谈发现 ,了解Android的iOS用户更在意的是权限控制、隐私和安全之类的,他们认为Android存在不安全、消息乱、广告多、APP乱启动等情况。但Android用户在意的是独特功能、新功能。

在Android 10的更新中,最重要的一点是权限和隐私的改变,对每个APP的各类权限都可以单独授权,即使拒绝APP弹出获取定位等权限的请求,APP依旧可以使用。一加是最先更新到Android 10的厂商。

用户目标

接下来,我们必须要知道用户为什么来访问OS页面,他们的目标是什么?为了知道用户目的,我们回收了近500份问券,得到了以下答案:

· 想全面了解系统功能,占比48%;

无论上面哪种类型的用户,大部分都希望了解全面的功能,然而我们的运营诉求是只展示新功能,这一点和用户诉求是相违背的。他们计划在下个版本的站点介绍中实现这部分。

· 查看H2OS独特功能,12%;

这部分诉求大部分都是Android和H2OS用户,他们对折腾和猎奇的心态比IOS用户更强。

· 了解新功能,占比4%;

我们运营的主要诉求,但实际占比很低;

· 和其他手机系统做对比,占比19%;

这部分用户基本都是转化预备役的用户,他们可能考虑换机,但想知道H2OS的能否依旧满足自己的需求;

· 没有目的,随便看看,占比17%;

嗯...可能只是在了解新品介绍的时候顺带过来的访客。

通过问券,我们得到了用户目标是什么,这些会直接告诉我们页面应该展示哪些内容。很多公司的内容是直接由运营或相关岗位给出的,如果他们没有通过用户研究而直接给出,当然是极其不科学的。

我们在一开始,就会做出角色诉求图;通过公司内部的角色访谈,运营的给出的策略是:只展示新功能。很显然,这并不符合用户目标。

用户行为

用户目标很清晰了,理论上来说,我们页面的框架内容可以得出来了。比如这样的导航:

但是,我们既然是改进当前页面,就应该要去观察下当前用户是如何浏览的;为此,我们进行了大量的用户录屏。

下面的视频是个典型用户的录屏;我

从录屏中,我们得出,用户最感兴趣的界面是UI界面部分。用户目光和光标路线始终聚焦在OS界面部分。

我们的问券调查也同样反应出了一样的答案。

交互方案

用户研究部分我们已经讲完了。如果想了解更多的设计思路,请访问UX方法

可能很多人觉得这些会花费很长时间,得不偿失,不够实际。但实际上,调研访谈花费我们多少时间呢?这是我在用户研究部分的步骤和花费的时间。

用研所花费的时间

· 早上上班,开启Hotjar的热力图、转化漏斗;去GA截取相关数据 ;

· 上午花费一小时设计好问券,并在官网投放,25%的访客将收到问券邀请;

· 同时考虑访谈对象;

· 下午花费1-2小时,访谈4-5个目标用户;

第二天上班,我们将回收到约500分问券,得到热力图,其他相应的数据资料都有了。前后投入约1人/天的工时。

由此可见,用户研究其实有很多简单可行的方法。当然,我上面的方法肯定不够完美,但是却是性价比最高的可行性路径。如果需要更完整的调研,也要节省投入,参见临阵磨枪的用研究方法

流程

交互设计,众所周知的是流程,页面之间的跳转关系。大家牢记,一定要把所有流程都要画出来。页面的流程关系隐藏着很多潜在的导航陷阱和之前研究所体现的问题。原来的OS页面导航就存在巨大的陷阱。

下图是单一的导航,只考虑了用户的正向流程:从首页-手机页面-OS介绍页面。

如果用户是从服务页面过来的呢?难道也是这个导航?很显然,不行。下图是页面流程图,用户存在两种访问路线,实际上,还存在直接访问的路线。

所以我们的导航方案如下图,需要处理成动态的导航,总共有两种状态,依据访客来源而展示不同的导航内容。

结构内容

OS站点的流程相对简单。接下来,我们需要重点考虑的是结构内容层。依据之前的用户研究部分,我们可以得出以下结论:

· 首先,一个良好的开场动画,而且是体现用户最关系的界面部分;

· 尾部需要有出口内容;

· 首屏需要将各个用户关心的内容展示:下载、H2OS设计理念、数据迁移等;

· Android10需要体现安全隐私的内容;

· 增加弹窗解释,以增加互动率;

最终框架内容如下图:

高保真Demo

整个页面的改进部分在于内容的结构的调整;都是属于微改进部分。新增的内容部分,需要做高保真的只有开场和5G模块。

最开始画的开场动画稿如下图:

如果实现出来的话,效果如下:

 

最后,我们实现的效果如下,报5G部分。

以上,就是我们整个这次改进方案的设计过程。

最终Demo会导出为APP格式给前端用于开发查看,整个效果还是以文件流为核心的页面效果。

勾搭我们