交互設計實用指南系列(8)—深廣度平衡

連接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/

 

相信你們對街邊林林總總的房產中介並不陌生，那麼咱們先看看下面這張圖片。

圖1

從右側這家店的櫥窗裏，咱們能迅速分清哪些是租房信息哪些是售房信息。由於店家很貼心的將房產信息進行歸類，而且在視覺上作了一些劃分，讓咱們對信息能一目瞭然。借這個小案例引出咱們今天要分享的話題：深廣度平衡。

1. 什麼是深廣度？

其實「深廣度」自己並非一個單一的概念。在網站的信息架構中，有一種組織結構叫作樹形結構：網站首頁視爲連接層級中第一級，與其有從屬關係的頁面視爲連接層級中的第二級，通常稱其爲二級頁面。經過二級頁面又能夠繼續獲得第三級頁面，依此類推能夠獲得一個完整的樹形連接結構。這樣一個完整的連接結構，咱們稱它爲樹形結構。

在整個樹形結構中，連接的層數被稱爲網頁連接的【深度】（depth）。而在樹形結構裏，最底層頁面包含的頁面總數被稱爲網頁連接的【廣度】（breadth）。

咱們能夠經過下面這張圖來理解深度和廣度的概念：

圖2

2. 爲何深廣度須要保持平衡？

咱們回到開篇的小案例。左側那店鋪採用的是「只有內容連接的模型」（它們之間沒有層級結構；連接沒有模式可循；且沒有某種導航方案將他們分離開）（注1）在這裏每一條房產信息均可以當作一個內容連接，整個櫥窗就像一張錯綜複雜的大網，讓人頭暈目眩。

而右側的店鋪採用的是「結構化瀏覽模型」（只有一組連接，做爲獲取網站信息的途徑；導航區域與佈局中其餘內容有視覺上的分隔；要到達另外一區域的某個頁面，必須沿着樹向上導航，再沿着另外一個分支向下）（注2）店家將信息進行了規整，在房產信息上增長了一個分類，而且對不一樣類型的信息使用了不一樣的顏色，高效的將租房信息和售房信息區分開來。

一個網站的連接深度和廣度最好有一個合適的均衡關係，深度過大的網站不利於用戶快速獲取信息，廣度過大的網站則容易讓用戶在無數並列的超連接面前不知所措。

圖3

圖3的上圖說明了又窄又深的層級系統，用戶必須點擊6次才能到達最底層的內容。對又寬又淺的層級系統而言（相對而言），用戶必須從6個類別中選擇，才能找到6個條目。就像圖3的下圖所示，用戶會面臨主菜單上太多選項，而當他們選了一個選項，卻沒看到什麼內容時，就會產生不良的觀感。（注3）

咱們再來看一張用戶對於不一樣層級結構所需反應時間的圖表（注4），圖4：

圖4

總共512項內容，組成了三種不一樣的分級方案，X軸是分級，Y軸是反應時間（秒）。能夠很清晰看出，在過深和過廣的分級方案上，用戶所須要的反應時間都比較長。所以咱們在組織網站信息的時候，須要仔細平衡深度和廣度之間的關係。

3. 如何保持深廣度平衡？

咱們在處理網站結構時，經常會使用按組分類的方法來組織信息。而信息的分類咱們能使用時間序、主題或科目、地理、字母序、受衆羣體以及任務等方案。如今咱們再來看看深廣度平衡在web上的應用。

圖5

這是某電腦公司的官方網站，他們的導航自己就是一個站點地圖。他們將14項內容分級組成了一個兩層的結構樹，每一個分支上都有3-4項內容。對於這樣一個信息量不是很龐雜的網站來講，使用主題或科目的方案，將信息組成一個兩層的結構樹，就是一種深廣度平衡的方式。

再來看個案例，圖6是某軟件官方網站的一個下載區塊，這個區塊裏密密麻麻羅列了N個下載連接。有不一樣的版本、有不一樣的下載工具、有不一樣的外站下載。這些連接在沒有進行任何組織的狀況下呈現給用戶，體驗是很是糟糕的。

圖6

對於那些信息量很大很雜的網站來講，單純的使用某一種按類分組的方案已經不太適用了。通常來講，廣度比深度的效果更好。在深結構的各級別間選擇，比起在廣導航的各選項間掃視，要付出更多精力。眼睛比起鼠標點擊（和頁面載入）要快得多。雖然用戶在深結構更容易迷失方向，甚至可能迷路，但也不要在廣度上走得太遠。任什麼時候候都把全部連接展現出來會嚇倒用戶，讓他難以選擇。用戶會點擊看起來適合他們須要的第一個選項，或者乾脆放棄，下圖清晰的闡述了用戶放棄率和深廣度之間的關係：

圖7

淘寶首頁類目地圖大概有300個類目，使用了三層結構將他們清晰得展現出來，每層類目都是4～12個之間，是一個深廣度保持平衡的典型案例，圖8：

圖8

 

小結

對於不一樣類型，不一樣信息量的網站，在深廣度平衡上應採用不一樣的策略和方式。本文僅以我的在工做中的經驗來對深廣度平衡的方法論進行一些實例化的分享。對這方面有興趣的同窗歡迎留言探討。