原文來自UXPin Studio,原作者是Jessica Lowry,一位英國的用戶體驗設計顧問,筆者譯來與大家共勉

作為一個用戶體驗設計師,我越來越多地接觸到與數據可視化相關的工作。數據本身可以在視覺上引人注目,但它需要遵循某種語言和故事來使人感到印象深刻。

多年來,講故事的藝術已經成為我搭建設計基礎的架構。每一個好的故事都有一個主人公,他有某種形式的追求。故事里的每一種追求,總伴有一個必須殺死的怪物。描述好你的問題和用戶,然後打造一個故事,會幫助大家更好地理解工作過程。

我將通過我最近在跟的一個項目來解釋這一過程,這也可能會在你自己的用戶體驗設計項目中有所幫助。

在項目之外尋找靈感

視覺語言與以人為中心的設計基礎十分相近。

人類在創造我們今天使用的字母之前就創造了視覺語言。壁畫是人類最早的的交流方式。所有好的提示工具都是相似的,圖紙就是這樣,能很好解釋問題本身和解決問題的方法。那些早期的圖紙並不是為了作為一種原始形式的室內設計而出現的。洞穴里的壁畫講述的是時事性的新聞故事。繪畫的人在嘗試警告其他人潛在的危險以及他們共同的生存技巧。從本質上講,洞穴壁畫就是可視化數據。

就像在《為人眼進行的Web UI設計》中描述的那樣,簡潔有力的圖像的具有很強的交流能力。但是如何把這種這種力量融入到像素中呢?

最近我需要設計一個交互式的系統地圖,其中要轉達幾個關鍵因素,包括:

大小、距離、風險、活動、路徑、連接

從本質上講,這樣的網絡安全應用程序在檢測危險時,就如同海里撈針的同時显示出其特定位置。

從集群網絡數據的例子來看,這些圖片看起來是很優雅,但是從交互的角度卻非常不切實際。因為這樣確實是使網絡看起來漂亮了,但一旦需要加入交互式的功能時就很難使用。我看到傳統方式設計的互動地圖可用性都很差。我需要從另一個地方找到靈感,一些在現有可視化網絡數據以外的例子。

為了可視化數據容易閱讀,需要將不同的屬性獨立開來。這就形成了視覺語言的結構。

擁抱隱喻的故事能力

我的靈感通常來自大自然。自然本身就是完美的設計。森林是混亂的,但在其中也是有條理的。

森林的故事不是它巨大的整體視圖來理解的,而是親身在其中看到的視圖。相同的原則也會應用到我要設計成地圖的系統網絡中。

数字本身毫無意義。概述數據可以提抽出更有用的高級信息但這些信息很少可操作的。數據的上下文很重要,而且必須提供數據與之結合。理解其中的連接需要更近一步的觀察。

一旦你開始拉近去看,森林就會呈現全新的意義。當你近看一棵樹,感知會是全新的。你越仔細觀察,越能看到紋理和細節。在微觀層面上,森林元素之間的關係便說明了森林生長的過程。

我認為森林中的一切都彼此合作從而生長成一片森林。一個層級和自然法則構成的網絡決定了植物如何生長。比如顏色就在生物如何生存和植物為何接近陽光起重要作用。一切都在完美的和諧中生長和消亡。植物死後,它就變成了下一代的食物。

我決定採用平面式的體驗,因為從用戶的認知負荷看來,這樣會優於3d圖的形式。減少認知負荷就更容易講好故事。交互式的組件應該幫助用戶關注領域里的重點。我研究了不同的樹形地圖,尋找地圖式數據中的正確處理方法。

創建一個故事

把這些元素拼到一起很花費時間。我創建一個故事來幫助我:

“用戶乘坐飛機在一個茂密的森林上一邊飛行一邊尋找地面上的路徑,他正在尋找的是一顆紅色的種子。這顆紅色的種子是被外人引入森林的,目的是用紅色種子生長出來的植物來消滅其他植物。損失將會是無法接受的。但是紅色種子有好幾顆,用戶需要在種子長成植物之前定位和移除它們。”

這個故事幫助我總結出了如下的,用戶完成任務所必需的交互功能描述:

  • 用戶必須飛越整個森林。
  • 用戶必須能把紅色隔離出來。
  • 用戶必須區分種子和其他森林的組成。
  • 用戶必須在種子變成一種植物之前找到。
  • 用戶必須理解樹,植物,恭弘=叶 恭弘子和種子之間的關係。
  • 用戶必須了解生長模式以建立時間表。
  • 用戶必須找到可以在地面上跟隨的路徑。

顯然,所有這些都是真正用戶在產品中執行的任務的小說版本。但通過使用一個故事作為比喻,可以設計一個有着共同語言的主題體驗。這在與團隊和客戶溝通產品的關鍵特性時特別有效。用我們共同的故事來比喻,我們所有人都能共享相同的心智模型。

基於我們的隱喻,真正的用戶任務應該翻譯成:

  • 用戶需要一個整體的網絡視圖。
  • 用戶需要能隔離出網絡中的目標。
  • 用戶需要能隔離出網絡的關鍵屬性。
  • 用戶需要通過日期過濾網絡活動。
  • 用戶需要瀏覽網絡的指引。

把故事變成現實

我研究了很多可視化網絡的例子並在Buzzfeed上找到這個情節線索樹形圖。它成為了我正在研究的網絡安全應用的完美視覺模型。

作為一個結合地鐵圖形式的樹形圖,它使得用戶可以很容易地理解高層級的信息。而且它符合森林的隱喻,更加意義非凡。我們能看到根代表的是客戶關注的焦點,而恭弘=叶 恭弘和樹枝則代表整個森林(網絡)。顏色的不同編碼標識出了什麼是最重要的,以及其來源是什麼,不管是用戶組、用戶類型還是設備。我們能夠像看一幅易於消化的圖片那樣,看清所有高層次的關係。

這個模型會允許用戶直接查看整個森林(整個網絡),紅色的種子(安全隱患),以及他們如何走進森林,還有森林是否還在生長(入口和目的地的路徑)。

當用戶飛過這個平面森林的時候,關鍵領域很容易識別出來。正如你在下面這個低保真模型里看到的,我用顏色突出了紅色種子在找到長入土壤的路徑(安全漏洞),以及種子開始通過根和恭弘=叶 恭弘長成一株植物(傳播病毒)之間的時間。紅色種子代表一個風險,但種子長成植物的過程是一個更大的風險。種子的不同顏色直觀地告訴用戶應該先調查哪個種子。

我承認這個原型不是很漂亮,但它大致上闡明了功能——而這正是我們所需要的。

一旦用戶選擇一個種子展開調查,路徑就會變得明顯。森林的其他元素仍然可見,但不會使用戶分心。事實上,所有不必要的層級都被撥開了,只揭示到達紅色種子的路徑及其當前的發展現狀(這是用戶最關心的)。

邁出下一步

為了設計更多故事驅動的用戶界面,你需要到辦公室以外去尋求靈感。關注自然,還有那些將複雜結構歸結為簡單感性理解的優秀視覺藝術家。

想了解其他引人注目的視覺設計故事,也可以看看這本免費的电子書《為人眼進行的Web UI設計》(英文电子書,可從在此處找到下載),從中可以了解到33個設計案例詳細的拆解。

 

本文由 @lrioLee(微信公眾號[簡併]) 翻譯發佈於人人都是產品經理 ,未經許可,禁止轉載。