如何設計有 “大量資料(data heavy)” 的介面?

我們應該常聽到老闆說:要把我們產品設計的越簡單越好!這句話看似沒錯,但時常雙方都會過度誤解 “簡單” 的意義,認為所有產品都應該第一眼就會用,而且畫面就該簡單到不行,但對某些產品,有時候過度的簡化或省略,反而造成不良的體驗,例如需要一目瞭然、方便比較、或有大量資料( data heavy )的產品。

那這類產品我們該如何進行設計呢?以下為 WebEngage 的行銷自動化產品設計案例:

簡單介紹一下,WebEngage 是一個營運於孟買與美國的行銷自動化平台,每個月服務超過 38,000 家用戶,接觸超過180萬位使用者,並逐漸在美國與歐洲市場擴展。

無法極簡(Anti-minimalism)

降低複雜性的設計是大家所嚮往的,對消費者端 app 或只進行單純任務的產品較易達到,但當你設計企業級產品時( data heavy ),你不能任意的閹割功能或簡化複雜卻必要的流程。想想看,如果我們為了增加飛行員的起降體驗,讓座艙中只有一個起降桿, 這樣是合理的嗎?我想應該不是吧!

如上述,我們不想要讓產品走如其他 app 減少功能的方式,而是改善資訊架構及功能優先級判斷的方式,來增加競爭力。

話雖如此,我們在色彩語言的使用上仍然保持輕量化與極簡,因為我們的目標是要讓使用者專注於資訊上,而非使用了什麼顏色。

 

規劃的流程

在 WebEngage 的另一個團隊給我們產品的 spec 與 wireframes 細節,讓我們更快的進入狀況,並在了解核心功能後,我們開始研究並創造視覺語言。一開始,我們僅針對一些頁面進行討論,最終將建立設計系統(design system)。每個我們規劃的元素,都會變為實際可應用的風格指南,並透過 Sketch 繪製出元件庫。

 

設計系統(Design System)

針對一個持續成長的產品,我們認為如何因應未來“產品的延展性”以及“客戶所需的擴展性”是非常重要的。我們建構設計系統的方法比較像是 Google  Material design 的 guidelines,也因為跟設計師與開發者有關,所以我們準備了有較多細節的文件。

data heavy

 

Grid, sans grid

呈現資料數據的儀表板(Dashboard)通常是具有許多資訊的架構,使用嚴謹但無彈性的網格系統(grid)來設計,也許不是一個最好的方法。也因此,我們設計了一套規則,定義每個元素(elements)間的距離(margin)以及各元素排列的方式。

Content Out

有別於一般常見的 box-in 設計方式,這部分我們建議使用 content-out 的設計原則,如同前面提到的,取代傳統網格(grid)的設計方式,我們以 “內容” 做為我們的判斷依據標準。在定義某些特定元素周邊的留白空間後,設計就只需順著圖表、table 與剩餘內容自然而然排列。

補充說明:content-out 指的是以內容為基礎進行排版(content-out 延伸閱讀

色彩學

當畫面上有大量內容時,就必須慎選顏色。因為 WebEngage 的產品中有大量的表格與圖示來表示不同的狀態,所以我們藉由研究許多相關資料來選出適合資料視覺化的顏色。

 

Typography

文字排版是設計中最基礎的項目之一。為了符合更廣的用戶,往往會去使用原生字體(Arial 😔, Helvetica 😏),但現在系統字體(system typeface)的調整項目更加完整,因此可以讓多數瀏覽器或系統跑出我們設計的樣子,如允許調整多種字體粗細等。

行為(Actions)與按鈕(Buttons)的優先級

流程初期,我們做了個決定,先將各種行為與按鈕做了優先級(重要度)的分配,1 是最低,5 是最高。

  • 假如優先級是 1,這些功能應該被合併於下拉式選單中
  • 假如優先級是 2 或 3, 這些在表格中的行為或按鈕可用icon來代表,hover 會出現提示說明(tooltip)
  • 較高優先級的行為可以是純文字的連結或按鈕,這樣可以避免讓使用者猜想這個 icon 代表的功能為何。

另外, 為了不讓資訊重複或多餘,故避免按鈕上同時出現 icon 與文字。

 

視覺階層(Visual Hierarchy)

我們讓每個元件的改變都有兩種效果,如圖:

滑鼠 hover 時,文字會呈現不同顏色,同時有個背景色。當有兩種效果上的改變,可以降低使用者的認知負擔(辨別狀態的差異或改變)。我們在整個產品中都遵守這個原則,所以相鄰的元件輕易可被區分,以達到視覺階層的效果。

資料視覺化

資料視覺化(Data-visualization)對超過某個程度的資料量時是非常困難的,因為識別性高的顏色很容易被挑光。我們為了解決這個問題,把多種資訊整合呈現於一塊獨立區域之中。

 

響應式如何考量

通常響應式的概念大多都是在討論如何適應更小的螢幕,但如果產品的特性或目標載體是大螢幕(1280px 以上),我們要思考的就是如何利用多的空間來擺放資訊。

來點梗?

在產品中加入些有趣的梗?我們曾在設計中加入了一些幽默的點子,但最後決定不採納,因為可能會讓資訊失焦。

 

總結

團隊經過兩個月的努力,我們不只交付了產品的設計,同時也提供了易擴充且可延續的設計系統。這讓我們感到驕傲,且還在不斷的優化改進它。

 

使用者怎麼說

在使用者(使用者為內部其他團隊)使用我們辛苦的工作與思考後所打造的產品後,對它的評價將是判斷產品是否成功的關鍵績效之一。以下擷取了部分評論:

作者與團隊協助我們設計出一流的 SAAS 產品,不斷的推動以 UI/UX 的觀點重新設計產品的 dashboard。還記得我們剛啟動專案時,首要任務即是建立元件庫幫助我們未來的設計,作者打造了一個全面性的元件庫,讓我們現在只要在短短的幾分鐘內即可設計出新的頁面。
— Arpit Rai, Product, WebEngage

 

作者與團隊在 UI/UX 的觀點下,對我們的 dashboard 進行改造。我們都對最後成果的品質與設計高標準印象深刻,並相當注重客戶關注事項的細節,最終協助打造出我們自己也相當自豪的產品,客戶也讚譽有加。
— Avlesh Singh, Co-Founder & CEO, WebEngage

 

延伸閱讀

 

原文轉載於 – Designing for a data-heavy platform,以獲得作者 Tejas Bhatt 授權翻譯

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

分享此文: