楠木軒

基礎餅圖在產品設計中的應用價值

由 慕容亦凝 釋出於 科技

編輯導讀:餅圖可以直觀的顯示出各資料所佔的比例關係,經常用於展示產品市場份額、客戶組成、滿意度比例等資料。但是在產品設計中,餅圖也具有很高的應用價值,本文作者結合案例對此展開了說明,一起來看看。

已知淘寶店A在7-23日的店鋪銷售額241723元,其中客服銷售額71077元,靜默銷售額170646元。店鋪負責人想要了解店鋪銷售的構成情況,分析消費者成交是否都需要透過客服接待,來考察客服團隊對於店鋪的貢獻程度

針對這一場景,分析客服團隊在消費者成交過程的參與程度,實際上是分析了銷售額中有多少是客服銷售額,即消費者透過客服接待後下單成交的部分;

透過計算得到客服銷售額佔比29.4%,靜默銷售額佔比70.6%,用基礎餅圖圖形化表達後,觀察客服銷售額的扇面部分,能非常直觀讀出客服銷售額佔比低,絕大部分的下單成交都是消費者靜默下單完成的。

這就是基礎餅圖在產品設計中最常見的應用方式之一,用餅圖來表達佔比,得出的結論可以幫助分析場景,輔助決策。但是餅圖不單單隻有這一種應用方式,可應用的場景很多,本文就想和大家一起討論基礎餅圖在產品設計中的應用價值。

一、什麼是餅圖?

基礎餅圖的定義,透過不同的扇面大小,圖形化表達了不同類別的比例,即一個數據組中不同資料項的資料大小佔所有資料和的比例;並透過帶顏色的圖例將扇面和資料項一一對應起來

從上面的定義中,我們可以發現構成餅圖的基礎是資料組,資料組內的資料項個數控制了扇面的個數;單個數據項佔資料組的比例決定了扇面的大小。只有當資料組滿足特定的條件時,圖形化表達出來的餅圖才有意義,我們也可以利用資料組的一些特點來發揮餅圖在產品中的應用價值,下面就想透過不同的場景來說明

二、什麼樣的資料組能用餅圖表達?

我們在實際場景中需要表達佔比時,常常會想到用餅圖來表達,但並不是所有情況下都可以用基礎餅圖來表達的,這裡可以透過“資料組”被餅圖表達所需要滿足的條件,來區分資料組能不能被餅圖表達

資料組是什麼?有2個或2個以上的資料項組成的一組資料,被我們定義為“資料組”,資料項和資料組存在包含關係,資料項是子集,資料組是母集。 假設資料項1是A,資料項2是B,資料組的彙總資料是C,三者存在的關係:

  • A包含於C,A:C就是資料項1在整個資料組中的佔比
  • B包含於C,B:C就是資料項2在整個資料組中的佔比
  • 像店鋪A中,店鋪銷售額就是資料組的彙總資料,客服銷售額和靜默銷售額就是子資料,而店鋪銷售額是母資料,子資料被包含於母資料。因此客服銷售額和靜默銷售額就是一組資料組

餅圖是把資料組中的關係透過圖形表達出來,資料組就是餅圖的基礎,瞭解了資料組的定義後,可以推論出資料組要能被餅圖圖形化表達有1個前提條件,資料組中的各個子集是相互獨立,沒有交集的,且歸屬於同一個母集(資料組)

如果不滿足這一前提,餅圖就無法用來反映真實的場景了,也不具有業務價值了,所以我們在產品設計中可以透過分析資料組中的包含關係來判斷能否被餅圖表達

案例:

淘寶店鋪A中的客服銷售額由客服A組、客服B組和客服C組構成,現在已知客服A組整組資料、客服B組整組的資料、客服C組其中2個客服的資料。業務方想了解不同資料項的佔比,我們一起來看下這些資料項的關係。

假設客服團隊資料項為D,客服A組,客服B組、客服C組這3個數據項為A、B、C,客服C組兩個客服分別為C1,C2,他們的資料關係就是:

  • A、B、C是母集D的子集,A包含於D,B包含於D,C包含於D
  • C1和C2是母集C的子集,C1包含於C,C2包含於C

透過對資料項的觀察,很容易就做出判斷了,如果將客服A組、客服B組、客服C1、客服C2這4個數據作為一個數據組,是混淆子資料和母資料的關係,同一個資料組不是互相獨立且歸屬於同一個母集的資料,表達出來的餅圖無法反映出來真實的佔比情況不具有業務價值。

這裡我們發現了,資料組可以用來判斷資料組能否被餅圖圖形化,避免了產品設計中出現不能反映實際場景的餅圖

三、資料組內資料個數影響餅圖可讀性

當資料組可以被餅圖表達後,資料組內的資料個數就等於了餅圖中扇面的個數。資料組內的資料個數就會影響到我們對於餅圖資訊的獲取

人的視覺決定了,我們在多個個體中尋找具體某一個個體時會比較費力,試著觀察下面兩個餅圖,能發現同樣尋找“事例二”,右圖會比左圖輕鬆許多

當資料組內的個數多時,扇面個數就變多了,就會導致餅圖顯得非常擁擠,透出的資訊擠在一張圖中,降低了從餅圖獲取資訊的速度;當資料組內的個數少時,餅圖顯示的資訊就變的很直觀很清晰

在實際業務中,我們常常會碰到這樣的場景,資料組內個數非常多,但是我們只關心極個別的資料,這時候就可以透過合併多餘資料項的方式減少資料組中的資料個數,減少了扇面個數,從而突出了使用者最關心的資料,強化了對特定幾個資料的表達

案例:

店鋪A統計了客服團隊10個客服的銷售額佔比,作為客服主管想針對性的觀察客服1的Q1每個月份的業績變化,如果我們將10個客服佔比數值都圖形化表達到餅圖上,因為客服團隊這組資料組中存在10個數據,對應在餅圖上就是10個扇面,導致了很難尋找到客服1

這個時候我們可以透過合併其他9個客服資料的方式,合併為“其他客服”,該資料組的資料個數變成了2個,而且滿足了資料組中各個資料相互獨立,沒有交集的前提。

在減少了資料組中資料個數的同時,強化表達了客服1這個資料。這就是應用了資料組內資料個數多少對餅圖的影響,這一特點還經常運用於強化表達異常資料,例如觀察突出表達流失人數等。

四、單資料佔比影響餅圖可讀性

當資料組被餅圖表達後,單個數據與資料組彙總資料的佔比大小,就是扇面的大小,我們透過扇面大小可以直觀感受到不同資料的比例,而扇面的大小會影響到我們對餅圖的可讀性,當其中個別扇面特別大或者特別小的時候,都會導致扇面之間的扇面大小差距懸殊,從而導致部分扇面不容易被識別,影響了對餅圖資料的可讀性。

出現這種情況的時候,我們可以很容易判斷出扇面大的部分對應資料佔資料組彙總的比例大,但是比較難讀出扇面非常小的那一部分圖形,這個時候我們可以“區域性放大”的手段來放大這些比較難被讀出來的扇面

“區域性放大”是放大了餅圖中佔比小的那一部分扇面,所以首先要判斷當前餅圖中佔比小的部分是否被影響了可讀性,一般當出現3個及3個以上的扇面比例小於1%的情況,可以認為餅圖的可讀性收到了影響。透過利用人視覺對面積大的圖形感知力更強這一特點,等比例放大餅圖中佔比小的部分,方便了這部分資料的讀取

案例:

店鋪A對本店銷售額做了商品維度的分析,希望透過餅圖來表達不同商品銷售額的佔比大小,得到商品銷售額資料組時,發現商品A是爆款,店鋪銷售額大部分都是透過商品A成交產生的,所以商品A銷售額資料佔整個資料組的比例非常大,代表商品A的扇面也非常大

商品A的扇面非常大,導致了不容易讀出其餘商品的佔比大小,也就沒有辦法對這些商品佔比進行直觀的比較,這個時候就運用區域性放大的方式,區域性放大那些佔比小的扇面,就可以直觀觀察出餅圖種佔比小的部分類別的佔比差異,同時透過餅圖又能非常直觀讀出商品A的佔比遠大於其他,結合2者就可以對不同商品佔比大小有個瞭解。

這裡我們發現,資料組中單個數據佔比的大小會影響我們對餅圖資訊的讀取,當遇到部分扇面特別大的情況,可以透過區域性放大的手段解決,從而比較佔比小的那一部分扇面的差異。

總結

在產品設計中,餅圖被運用最多的應用價值是表達佔比,實際上餅圖除了表達佔比之外,還有強化表達的作用。我們可以透過對資料組中資料個數來強化表達我們想展示給使用者看的內容,也需要注意當單個數據比例過大時,透過區域性放大來解決餅圖的顯示問題。

作者:晌午,微信公眾號:晌午自習室

本文由 @晌午 原創釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議