Redesign the viewing experience of data plugins

在【微調(diào)】基于使用場(chǎng)景的走查，優(yōu)化產(chǎn)品體驗(yàn)中，我提到當(dāng)前云臺(tái)助手對(duì)數(shù)據(jù)模塊的信息組織不合理。

蘇寧官方在云臺(tái)助手手機(jī)端接入兩方面數(shù)據(jù)：本店數(shù)據(jù)和行業(yè)數(shù)據(jù)。而行業(yè)信息為付費(fèi)服務(wù)，目前云臺(tái)助手將數(shù)據(jù)信息分在兩個(gè)插件展示：數(shù)據(jù)管理和行業(yè)縱覽。

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? 數(shù)據(jù)相關(guān)插件

但此設(shè)計(jì)不合理原因有二：

1. 由于工作臺(tái)和本店數(shù)據(jù)插件中無引導(dǎo)頁(yè)面或功能，商家如果不自行去插件庫(kù)查找，很難知道蘇寧提供此功能，不利于轉(zhuǎn)化。

2. 商家開通服務(wù)后，同類指標(biāo)和相關(guān)聯(lián)的信息割離在不同模塊，瀏覽不方便，不利于對(duì)比洞察、理解數(shù)據(jù)。

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??當(dāng)前模塊邏輯結(jié)構(gòu)

為提高行業(yè)功能的認(rèn)知度并優(yōu)化瀏覽體驗(yàn)，我建議將兩個(gè)模塊整合。

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

結(jié)構(gòu)層優(yōu)化 Structure level

為了優(yōu)化數(shù)據(jù)信息的瀏覽體驗(yàn)，在信息架構(gòu)上的優(yōu)化要點(diǎn)有兩方面：

Figure 3??整合目標(biāo)拆解

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

需提高實(shí)時(shí)數(shù)據(jù)的顯示優(yōu)先級(jí)，是根據(jù)頁(yè)面點(diǎn)擊分析得出結(jié)論。為此，我將用戶較為關(guān)注的實(shí)時(shí)數(shù)據(jù)整合在首頁(yè)，并與待辦數(shù)據(jù)做區(qū)分展示。

Figure 4??當(dāng)前首頁(yè)vs優(yōu)化首頁(yè)?real-time data on the homescreen

本篇主要討論的優(yōu)化數(shù)據(jù)模塊內(nèi)部的信息組織。當(dāng)前數(shù)據(jù)管理模塊按時(shí)間（實(shí)時(shí)）、經(jīng)營(yíng)環(huán)節(jié)（流量，銷售）和經(jīng)營(yíng)角色（店鋪整體，買家）整合一級(jí)導(dǎo)航，此邏輯較為合理，且用戶在云臺(tái)web端和云臺(tái)助手app端也已習(xí)慣了此種結(jié)構(gòu)，因此可暫時(shí)保持一級(jí)導(dǎo)航結(jié)構(gòu)。基于此種結(jié)構(gòu)，我將數(shù)據(jù)管理和行業(yè)縱覽內(nèi)部各個(gè)信息子模塊做分類整合。

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.?

整合后的架構(gòu)如下

Figure 5??整合后架構(gòu)

框架層優(yōu)化 Skeleton level

由于要將信息合并，在每個(gè)頁(yè)面的交互設(shè)計(jì)上出現(xiàn)大概兩方面的設(shè)計(jì)要點(diǎn)：

整合點(diǎn)：解決如何將本店和行業(yè)信息組合展示的問題

優(yōu)化點(diǎn)：優(yōu)化已有控件和模塊的交互和瀏覽體驗(yàn)。

下面逐個(gè)介紹。

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.

整合點(diǎn) Integration

1. 基于“先概覽，再細(xì)節(jié)；先本店，再行業(yè)”的邏輯組織信息?

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

將本店和行業(yè)信息融合在四個(gè)一級(jí)模塊下，導(dǎo)致每個(gè)模塊的信息量增多，此時(shí)需要選擇一種合理的敘事順序，引導(dǎo)商家瀏覽數(shù)據(jù)和理解信息。我建議的方式是“先概覽，再細(xì)節(jié)；先本店，再行業(yè)”。

?“先概覽，再細(xì)節(jié)”? ?以流量分析為例，先提供整個(gè)店鋪關(guān)鍵指標(biāo)的數(shù)據(jù)概覽（一屏），再詳細(xì)展示流量來源、商品排行等細(xì)節(jié)信息。?

Figure 6???流量分析優(yōu)化稿

“先本店，再行業(yè)”

以銷售總覽為例，在頁(yè)面整體和局部卡片上，均遵循此邏輯。

Figure 7??銷售總覽優(yōu)化稿

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

a) 同指標(biāo)不同維度對(duì)比?

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? 在圖表中增加行業(yè)維度，便于對(duì)比洞察

b) 同類信息列表合并

Figure 9? 地域分布合并展示? ?

3. 對(duì)未開通功能的狀態(tài)顯示

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? 開通行業(yè)（左）和未開通行業(yè)（右）

Figure 11? 在列表內(nèi)展示時(shí)，保存指標(biāo)名稱，不顯示具體內(nèi)容

優(yōu)化點(diǎn)

1. 擴(kuò)大瀏覽面積

行業(yè)縱覽中篩選欄占頁(yè)面比例較大，如何優(yōu)化節(jié)約頁(yè)面空間？

我有兩方面建議，一是充分利用標(biāo)題欄融合功能，將較為常用的時(shí)間切換控件放在標(biāo)題欄，將不常切換的放在篩選欄原位，二是用沉浸式技巧，向上滾動(dòng)（瀏覽頁(yè)面下方內(nèi)容）時(shí)收起篩選欄，向下滾動(dòng)（回頂部）時(shí)展開。

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

Figure 12 篩選欄優(yōu)化

2. 時(shí)間控件優(yōu)化

當(dāng)前時(shí)間控件里，時(shí)間和時(shí)間段用列表的方式平鋪展示，不僅不直觀且需要翻頁(yè)，浪費(fèi)空間較多。

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

Figure 13? 當(dāng)前時(shí)間控件

重新設(shè)計(jì)時(shí)間控件，將日期按日歷樣式展示，讓日期的展示更直觀。并在用戶選擇時(shí)加以控制，通過不顯示和置灰約束其選擇超出范圍的時(shí)間。

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? 優(yōu)化控件樣式

3. 信息可視化集成

當(dāng)前店鋪排名用列表式展示，不夠直觀，可將名次用縮略曲線圖展示，突出變化趨勢(shì)。

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? 優(yōu)化排名顯示方式，突出變化趨勢(shì)

小結(jié)

作為BI產(chǎn)品，體驗(yàn)上的要點(diǎn)之一是節(jié)約用戶的認(rèn)知成本，讓用戶關(guān)注在理解信息并利用信息，而非查找信息上。在信息呈現(xiàn)上，要合理利用可視化手段，將一組組的數(shù)據(jù)結(jié)合為結(jié)論導(dǎo)向的圖表，幫助用戶生成洞察。本次優(yōu)化，主要在將以功能導(dǎo)向的設(shè)計(jì)語(yǔ)言，轉(zhuǎn)換成以用戶導(dǎo)向的設(shè)計(jì)，以用戶理解為出發(fā)點(diǎn)組織信息。