获奖作品|腾讯移动分析MTA交互分析报告

内容来源:本文为腾讯移动分析与人人都是产品经理联合举办产品测评大赛的参赛作品。

参赛者: 王涛,交互设计师

编辑:Fiona

一、整体框架

获奖作品|腾讯移动分析MTA交互分析报告_第1张图片

如上图系统整体的框架可以分为三级机构,最上方是系统名称logo、用户账号信息入口以及一些辅助的功能或者外链栏目;下方是主导航区域;再下方是内容区,内容区还包括左侧的次级栏目;整体系统的框架结构比较清晰。

问题一:顶部区域(系统名称+用户账号+其他功能)

1、页面顶部主要是一些系统标题logo作为宣传,以及一些辅助的功能,占用一部分空间,压缩了主要的内容显示区域。

2、页面滚动是当主导航滚动到顶部时有固定的于顶部的效果,此处顶部区域不常用如果滚动到消失顶部区域的内容和功能就无法展示必须要将页面再滚动下来再进行相应的操作;同时因为内容区域内容普遍较多,浏览时每次都要滚动页面,这种交互效果出现的过于频繁,导致用户观感上的不适。

建议:建议可以将顶部区域内容缩减整合到下方的主导航栏中,主导航区域固定于页面顶部,显得整个页面更加整体,交互方式更加简洁清晰;

参考:主导航置于页面顶端

获奖作品|腾讯移动分析MTA交互分析报告_第2张图片

问题二:默认展示数据看板栏目

1、主导航第一个栏目默认展示的数据看板,对于初次操作的用户来说,数据看板这个功能有什么作用,如何操作用户都不知道,而且初次进来默认是此页面为空白还是会有默认的配置?

2、数据看板功能很强大,可以选择很多不同的数据进行查看,但是对于用户来说这些数据再应用分析相应的栏目中都有,已经有了一定的分类,此处的数据展示和应用分析等模块相应的数据之间有什么差异?

3、太多强大、复杂的操作反而会让用户迷茫,用户如何选择不同的维度进行组合这些反而会增加用户的学习和使用负担。

建议:

新用户初次进入可以增加栏目介绍和操作引导功能;或者可以将此栏目作为一个附属栏目进行展示,不在第一个主导航进行显示;

建议可以将看板和应用分析栏目中的概览结合,初始会有推荐的概览看板,用户可以对这个概览进行配置,用户可以在应用分析中对应用分析相关的看板进行配置;

建议看板数量做一定的限制,建议不要给客户太多的看板配置权限,太多的功能反而会导致用户不知道如何操作,建议可以给予用户多个不同的配置看板进行推荐,用户可以在这几个看板的基础上进行配置。

问题三:在不同分辨率下的适配


获奖作品|腾讯移动分析MTA交互分析报告_第3张图片


获奖作品|腾讯移动分析MTA交互分析报告_第4张图片

1、看板配置选项较多是弹窗高度超过页面高度。


获奖作品|腾讯移动分析MTA交互分析报告_第5张图片
获奖作品|腾讯移动分析MTA交互分析报告_第6张图片

2、地图显示时再较低分辨率下,地图显示不全。

建议:针对不同的设备分辨率进行响应式设计。

问题四:次级栏目页面顶部栏目标题和筛选区域

获奖作品|腾讯移动分析MTA交互分析报告_第7张图片

次级栏目右侧显示区域的顶部标题和筛选操作区域是固定的,占据了下方内容的空间,特别是在设备分辨率较小的情况下整个视觉关注的可动区域就非常小。

建议:

左侧其实已经有被选中的当前栏目的名称了,同时用户整体的操作流程是从上往下,如果已经设置好查看条件后,再去选择切换的情况发生的会比较少。

同时在高分辨率的情况下,页面展示内容更多,滚动页面的成本更低,所以建议将次级栏目页面顶部栏目标题和筛选区域固定改为随着页面滚动,也减少了开发的成本。

二、数据看板

获奖作品|腾讯移动分析MTA交互分析报告_第8张图片

问题一:时间段选择

获奖作品|腾讯移动分析MTA交互分析报告_第9张图片

数据看板中时间段只有数据选择,数据分析中常会关注次日、七日、月统计数据。

建议:增加次日、七日、月份等固定统计维度。

获奖作品|腾讯移动分析MTA交互分析报告_第10张图片

问题二:看板新增/编辑

获奖作品|腾讯移动分析MTA交互分析报告_第11张图片

添加看板的添加区域是长条形的和矩形的看板初始形状不统一,这种设计方式用户习惯默认添加区域和添加后的区域形状是一致的。

获奖作品|腾讯移动分析MTA交互分析报告_第12张图片

添加数据表的方式是在右侧弹窗侧边报表列表,这种交互方式在高分辨率下点击区域和操作区域不在统一的视觉路线上,和用户预期不一致;同时和系统其它添加操作逻辑不一致。

获奖作品|腾讯移动分析MTA交互分析报告_第13张图片

在列表中勾选添加的报表,因为报表列表树内容很多,添加后在此树中再进行修改会非常不便,列表收起后用户不知道自己添加的报表在哪个分类下。

添加按钮位于页面底部,如果页面添加的看板较多,用户再想添加就需要滚动到底部再进行添加操作。

添加的报表的效果无法预览:

获奖作品|腾讯移动分析MTA交互分析报告_第14张图片

部分添加的看板是没有数据展示的,用户不知道添加的报表后的效果是什么样的需要保存后再进行查看实际的显示效果。


获奖作品|腾讯移动分析MTA交互分析报告_第15张图片

看板标题可编辑效果不明显,不符和用户习惯的输入框编辑习惯。

获奖作品|腾讯移动分析MTA交互分析报告_第16张图片

看板卡片显示效果一般,关闭按钮、尺寸设定操作按钮都不是很明显;,卡片白底和背景色也没有区分,无法突出卡片展示的效果。

获奖作品|腾讯移动分析MTA交互分析报告_第17张图片

空状态只是提示了无指标配置。

建议:

1、建议可以改成矩形的添加按钮,或者干脆改成一个添加按钮;

2、建议以常规的弹出窗口的形式进行展示,和其他页面的添加逻辑保持一致;

3、建议可以增加已选中报表区域的设计,将已选择的报表列表列出,也可以在列表中对已选的报表进行删除等相应的操作;

4、建议可以将添加按钮一直放置倒页面顶部,或者作为按钮放置在看板标题一栏固定不动;

5、建议可以个性化将报表选择树和看板区域实际的效果结合起来,例如组成为报表选择,选中后,右侧及时添加被选中的报表的效果;

6、建议看板预览效果可以用一些模拟数据进行展示让用户看到编辑预览的看板效果;

7、建议鼠标移入标题区域后增加弹窗提示“编辑标题”;

8、建议视觉优化,凸显操作按钮,和背景做区分;

9、建议可以增加一些操作引导说明,提示用户应该如何操作,介绍数据看板的作用。

问题三:数据看板详情

获奖作品|腾讯移动分析MTA交互分析报告_第18张图片

1、切换数据看板是弹窗高度没有做限制,造成弹窗超过页面显示区域。

2、切换数据看板弹窗中有新增看板按钮位于最底部,当看板数据过多是需要滚动到最底部,不方便操作。

获奖作品|腾讯移动分析MTA交互分析报告_第19张图片

3、看板点击查看详情数据的操作按钮不明显。

获奖作品|腾讯移动分析MTA交互分析报告_第20张图片

4、数据显示时数据弹窗底部为半透明,底部的数据图表会干扰数据的阅读。

建议:

建议对选框的高度做显示,超过高度则滚动显示,同时增加对不同分辨页面高度的适应;

将新增看板按钮固定在弹窗底部;

建议将点击区域扩展到整个看板标题区域;

获奖作品|腾讯移动分析MTA交互分析报告_第21张图片

建议优化数据弹窗的展示效果;

三、应用分析

获奖作品|腾讯移动分析MTA交互分析报告_第22张图片

问题一:提示

实时数据页面提示图标鼠标移入提示点击查看详情,和其他的提示按钮鼠标移入直接展示提示信息不一致。

建议:增加和其他提示提示效果保持一致鼠标移入后直接弹窗提示,如果信息较多可以增加点击查看更多的操作。

问题二:添加到看板

获奖作品|腾讯移动分析MTA交互分析报告_第23张图片

添加到看板按钮图标不是用户习惯的操作,用户不知道点击此按钮会有什么操作。

建议:增加鼠标移入后功能操作的提示,甚至在用户初次使用此系统的时候也可以增加悬浮对话框提示操作按钮图标对应的功能。

问题三:顶部筛选操作区域

时间筛选功能操作日历选择、常规时间的选择和时间对比的按钮间隔较大,显示效果不一致,导致用户对操作的理解困难。

获奖作品|腾讯移动分析MTA交互分析报告_第24张图片

时间选择两个月份之间的日期是显示出来的,例如:图中5月的28日只能在坐边的日历中选择,但是右侧的日历仍然显示了5月的时间,导致操作后显得中间的时间是断开的。

不同分辨率下操作区域显示的效果不佳,对不同的条件直接换行显示,没有自适应不同的分辨率,较低的分辨率这样会占用下方数据图表区域的空间。

获奖作品|腾讯移动分析MTA交互分析报告_第25张图片

用户群选择创建和管理用户群应该跳转到对应的用“用户分群”页面,但是实际上用户分群页面和此处的用户群并不一致。

用户分群页面是在当前页单独操作,和其他页面的新增功能操作不一致,会引起用户的操作疑惑。

获奖作品|腾讯移动分析MTA交互分析报告_第26张图片
获奖作品|腾讯移动分析MTA交互分析报告_第27张图片

用户分群创建群的整体页面操作结构比较复杂,标题、条件添加和已选条件的区分和操作流程并不明确,tab切换不同的分类下面页面还各自不同,操作结构异常混乱。


无法保存用户群。

建议:

获奖作品|腾讯移动分析MTA交互分析报告_第28张图片

1、建议将日历设置都整合起来在一个弹窗里面进行操作;

2、建议将日历中上个月份的时间不显示;

3、建议对筛选区域的选项进行响应式设计,例如可以在分辨率变小的时候直接展示出来的选项可以依次收到其它选项中,尽量保证分类不会向下换行;

4、建议建立单独的用户群管理栏目可以对用户群进行编辑、分类等操作;

5、建议统一系统中同类型的新增、创建等操作的交互方式,建议要么都是弹窗要么都是在当前页面刷新;

6、建议简化操作逻辑,可以将添加条件以弹窗的形式进行展示或者重新进行布局优化设计,增加操作步骤等辅助说明;

7、开发优化,确认问题增加提示信息;

问题四:事件分析_事件列表

获奖作品|腾讯移动分析MTA交互分析报告_第29张图片

标题编辑功能异常简单,只是编辑标题鼠标移入后点击编辑图标的效果不明显,弹窗进行编辑效率不高。

建议:建议优化操作逻辑可以直接点击在表格中编辑。

问题五:可视化埋点

获奖作品|腾讯移动分析MTA交互分析报告_第30张图片

可视化埋点在移动端的操作无法实现,PC端的操作提示也不清晰;

帮助手册打开是刷新当前页面,用户看完还得返回。

建议:

1、建议优化操作提示,提示用户在移动端上可以如何进行操作,需要满足什么条件可以操作,如果有问题怎么解决;

2、帮助手册建议点击在新标签页打开;

相关阅读

腾讯移动分析产品测评大赛火热进行中,丰厚大奖等你来!

腾讯移动分析测评大赛结果公布|这一次,且听我娓娓道来


本文为「人人都是产品经理」社区和腾讯移动分析MTA共同举办的#腾讯移动分析产品测评大赛#的参赛作品,转载请联系人人都是产品经理

有关产品测评大赛合作事宜,请联系邮箱:[email protected]

你可能感兴趣的:(获奖作品|腾讯移动分析MTA交互分析报告)