Redesign the viewing experience of data plugins

在【微调】基于使用场景的走查，优化产品体验中，我提到当前云台助手对数据模块的信息组织不合理。

苏宁官方在云台助手手机端接入两方面数据：本店数据和行业数据。而行业信息为付费服务，目前云台助手将数据信息分在两个插件展示：数据管理和行业纵览。

The mobile version of sellers’ workstation provide data service through two plugins. One presents the selling data of the sellers' own store for free (the left one in Figure 1) , while the other presents the whole category which is for charge (right).  

Figure 1  数据相关插件

但此设计不合理原因有二：

1. 由于工作台和本店数据插件中无引导页面或功能，商家如果不自行去插件库查找，很难知道苏宁提供此功能，不利于转化。

2. 商家开通服务后，同类指标和相关联的信息割离在不同模块，浏览不方便，不利于对比洞察、理解数据。

However, there are two main drawbacks of the separation of the two perspectives of data. 

1.It damages the viewing experience. Viewers needs to go back and forth to compare the data of their stores and the whole category, which brings more loads to their information digestion.

2.It damages the conversion. A great percentage of users don't know that there is a category one, since the free plugin doesn't give a hint on the interface.   

Figure 2  当前模块逻辑结构

为提高行业功能的认知度并优化浏览体验，我建议将两个模块整合。

As a result, I integrate the plugins for higher awareness of the category function and for a better viewing experience.

结构层优化 Structure level

为了优化数据信息的浏览体验，在信息架构上的优化要点有两方面：

Figure 3  整合目标拆解

There are two main points in the refinement of the information architecture：

1. Prioritize real-time data （based on the finding of event tracking）

show the real-time data on the homescreen

2.Enhance vertical and horizontal comparison.

horizontal: the change of store' data over time

vertical: the comparison between the store and the whole category

需提高实时数据的显示优先级，是根据页面点击分析得出结论。为此，我将用户较为关注的实时数据整合在首页，并与待办数据做区分展示。

Figure 4  当前首页vs优化首页 real-time data on the homescreen

本篇主要讨论的优化数据模块内部的信息组织。当前数据管理模块按时间（实时）、经营环节（流量，销售）和经营角色（店铺整体，买家）整合一级导航，此逻辑较为合理，且用户在云台web端和云台助手app端也已习惯了此种结构，因此可暂时保持一级导航结构。基于此种结构，我将数据管理和行业纵览内部各个信息子模块做分类整合。

While integrating the two plugins, I remain the current way of main navigation: real-time, traffic, sale，customer. Since users are used to this navigation on mobile and web, it's better not to change in order to keep consistency and to reduce the cognitive loads of learning new pattern. 

整合后的架构如下

Figure 5  整合后架构

框架层优化 Skeleton level

由于要将信息合并，在每个页面的交互设计上出现大概两方面的设计要点：

整合点：解决如何将本店和行业信息组合展示的问题

优化点：优化已有控件和模块的交互和浏览体验。

下面逐个介绍。

Due to the merging of information, there are two main points in the interaction design of each page.

Integration: How to present store and category data integrally.

Optimization: Optimizing the interaction components to improve the ease of use.

整合点 Integration

1. 基于“先概览，再细节；先本店，再行业”的逻辑组织信息 

Basic Narrative: first overview then detail, first own store then category  

将本店和行业信息融合在四个一级模块下，导致每个模块的信息量增多，此时需要选择一种合理的叙事顺序，引导商家浏览数据和理解信息。我建议的方式是“先概览，再细节；先本店，再行业”。

 “先概览，再细节”   以流量分析为例，先提供整个店铺关键指标的数据概览（一屏），再详细展示流量来源、商品排行等细节信息。 

Figure 6   流量分析优化稿

“先本店，再行业”

以销售总览为例，在页面整体和局部卡片上，均遵循此逻辑。

Figure 7  销售总览优化稿

2. 同类信息融合展示 Integration of different dimensions

a) 同指标不同维度对比 

The redesign integrates the different dimensions of the same index. For example, the redesigned line chart pesents the real-time PV (the orange line in the second left interfaces) with the reference of the PV of one day before（the blue line）

Figure 8  在图表中增加行业维度，便于对比洞察

b) 同类信息列表合并

Figure 9  地域分布合并展示   

3. 对未开通功能的状态显示

When users are using the free version, they will see the notification “Please upgrade your plugin for category data” and button “upgrade now” for a quick access to the purchase page. 

Figure 10  开通行业（左）和未开通行业（右）

Figure 11  在列表内展示时，保存指标名称，不显示具体内容

优化点

1. 扩大浏览面积

行业纵览中筛选栏占页面比例较大，如何优化节约页面空间？

我有两方面建议，一是充分利用标题栏融合功能，将较为常用的时间切换控件放在标题栏，将不常切换的放在筛选栏原位，二是用沉浸式技巧，向上滚动（浏览页面下方内容）时收起筛选栏，向下滚动（回顶部）时展开。

In order to expand the viewing areas, I integrated the data picker into the title bar.

Figure 12 筛选栏优化

2. 时间控件优化

当前时间控件里，时间和时间段用列表的方式平铺展示，不仅不直观且需要翻页，浪费空间较多。

Current data picker shows dates in a long list which is inconvenient to choose from. 

Figure 13  当前时间控件

重新设计时间控件，将日期按日历样式展示，让日期的展示更直观。并在用户选择时加以控制，通过不显示和置灰约束其选择超出范围的时间。

In my redesign, the data picker is changed into calendar style which is more intuitive. For the dates that are disabled I present them in light grey or just them invisible. 

Figure 14  优化控件样式

3. 信息可视化集成

当前店铺排名用列表式展示，不够直观，可将名次用缩略曲线图展示，突出变化趋势。

To emphasize the change of store ranking, I use an thumbnail（the line charts）to improve data-ink ratio and make the trend more obvious. 

Figure 15  优化排名显示方式，突出变化趋势

小结

作为BI产品，体验上的要点之一是节约用户的认知成本，让用户关注在理解信息并利用信息，而非查找信息上。在信息呈现上，要合理利用可视化手段，将一组组的数据结合为结论导向的图表，帮助用户生成洞察。本次优化，主要在将以功能导向的设计语言，转换成以用户导向的设计，以用户理解为出发点组织信息。