干貨:導(dǎo)航的信息架構(gòu)

4 評(píng)論 23900 瀏覽 73 收藏 45 分鐘

本文由江南大學(xué)設(shè)計(jì)學(xué)院研究生盧孩翻譯,作者:Anastasios Karafillis,查看原文

雖然導(dǎo)航作為用戶體驗(yàn)至關(guān)重要要的一部分,但它只是達(dá)到目的(找到內(nèi)容)的一種方式。用戶對(duì)內(nèi)容和導(dǎo)航有不同期望,內(nèi)容應(yīng)該是獨(dú)特、驚人或令人興奮的,而導(dǎo)航應(yīng)該盡可能地簡(jiǎn)單并且可被預(yù)測(cè)。

該系列的文章要分成兩部分,有四個(gè)有效簡(jiǎn)化導(dǎo)航的步驟。通過分析內(nèi)容的類型和數(shù)量,選擇并且仔細(xì)設(shè)計(jì)導(dǎo)航菜單的正確類型。

創(chuàng)建理想導(dǎo)航系統(tǒng)的四步驟

為了建立一個(gè)可用的導(dǎo)航系統(tǒng),網(wǎng)頁設(shè)計(jì)師需要回答以下四個(gè)問題:

  1. 如何才能最好地組織內(nèi)容?
  2. 如何才能最好地解釋導(dǎo)航選擇?
  3. 哪一種導(dǎo)航菜單類型是最適合的選擇?
  4. 如何才能設(shè)計(jì)最佳的導(dǎo)航菜單?

前兩個(gè)問題涉及到內(nèi)容的結(jié)構(gòu)和標(biāo)簽,通常被稱為信息架構(gòu)。信息架構(gòu)師通常在站點(diǎn)地圖中將他們的工作成果可視化。

站點(diǎn)地圖描述網(wǎng)站的導(dǎo)航結(jié)構(gòu)。(圖像來源:Web Tuts)

然而,只為用戶提供站點(diǎn)地圖可能不是最好的用戶體驗(yàn),在本系列的課程中將會(huì)詳細(xì)解釋這些原因。設(shè)計(jì)一個(gè)自定義的導(dǎo)航菜單也是重要的,可以適應(yīng)用戶的選擇,并以此來安排選項(xiàng)。因此,用戶可以輕松得尋找內(nèi)容,瀏覽內(nèi)容并跳躍式選擇。

當(dāng)回答了前面提及的第三和第四個(gè)問題時(shí),這樣的導(dǎo)航菜單就能設(shè)計(jì)成功。這兩個(gè)問題涉及到導(dǎo)航體驗(yàn)中的交互設(shè)計(jì)。前兩個(gè)問題將在第一部分解答,后兩個(gè)問題將在第二部分解答。

結(jié)構(gòu)化的內(nèi)容

正確的結(jié)構(gòu)化一個(gè)網(wǎng)站的內(nèi)容,首先要考慮的是用戶搜索信息的方式,然后按照這些偏好來結(jié)構(gòu)化內(nèi)容。

用戶是如何尋找信息的呢?

當(dāng)一個(gè)用戶正在尋找——車輛、食譜、金融服務(wù)、服裝類目、新聞文章、健身鍛煉、娛樂食譜或是任何其他物品或信息時(shí)——他們可能知道或不知道他們正在尋找的物品的確切名字。如果我們假設(shè)用戶總是知道他所要搜查的事物的準(zhǔn)確名稱,那么我們需要提供大型的完整索引(從A到Z)或是簡(jiǎn)單地讓他們?cè)谒阉骺蛑休斎耄源藖碜屗麄冋业剿氖挛?。?dāng)然,事情往往不是這么簡(jiǎn)單的。更詳細(xì)的解釋在第二部分展示。

即使用戶知道他們要找的事物的名稱,從A到Z的完整索引和搜索框存在固有的交互問題,讓它們作為導(dǎo)航主要或唯一的方式是不足夠的。此外,用戶通常是不知道所搜事物的準(zhǔn)確名稱的,他們甚至不關(guān)心類目或物品的名稱;相反,他們?cè)谒阉鲿r(shí)會(huì)有一個(gè)和所尋事物相關(guān)的關(guān)鍵詞。

指導(dǎo)用戶到達(dá)正確內(nèi)容是第一步,接著,在網(wǎng)站上區(qū)分內(nèi)容的類別。

元數(shù)據(jù)是導(dǎo)航系統(tǒng)的基礎(chǔ)

關(guān)于內(nèi)容條目或內(nèi)容片段的信息通常被稱為元數(shù)據(jù)——這是關(guān)于信息內(nèi)容的信息。

不去看細(xì)節(jié),內(nèi)容條目可能屬于不同的元數(shù)據(jù)類別。不管是一篇新聞的政治焦點(diǎn),一個(gè)顯示器的顯示尺寸,一段視頻的導(dǎo)演,一件襯衫的領(lǐng)型,還是健身運(yùn)動(dòng)的難度,這些都是不同的元數(shù)據(jù)。當(dāng)然,多個(gè)條目也可以分享相同類別,如價(jià)格、知名度和出版日期。

用戶可以通過這些元數(shù)據(jù)類型來瀏覽內(nèi)容。然而,正如我們看到的,給用戶提供瀏覽內(nèi)容的全部方式是不必要或沒用的。這樣做得話將會(huì)讓界面變得雜亂,瀏覽速度減慢,將導(dǎo)航過程復(fù)雜化,更糟的是,這樣會(huì)讓用戶覺得混淆、疲勞和煩惱,然后他們就會(huì)放棄網(wǎng)站。

仔細(xì)考慮是否或是在哪個(gè)階段向用戶展示類別。

元數(shù)據(jù)的三種類別

根據(jù)是否呈現(xiàn)或何時(shí)呈現(xiàn)元數(shù)據(jù)類別,將元數(shù)據(jù)分成三組:重要的,可選的,無關(guān)緊要的。

信息架構(gòu)的挑戰(zhàn)是:根據(jù)目標(biāo)群眾,網(wǎng)站目標(biāo)和內(nèi)容數(shù)量將類別分為重要的,可選的和無關(guān)緊要的。然而,一旦你選定了一個(gè)合適的分類,一些簡(jiǎn)單的規(guī)則將幫助你去決定什么時(shí)候顯示什么類別。

重要類別

對(duì)目標(biāo)用戶來說,最重要的是重要類別。這些類別是少見的,但在每一個(gè)項(xiàng)目中至少會(huì)有一個(gè)重要類別,它簡(jiǎn)化了設(shè)計(jì)師的工作和用戶的導(dǎo)航體驗(yàn)。

確定重要類別

食譜的元數(shù)據(jù)類別也許包含“菜式”,“主要成分”,“特殊飲食”,“場(chǎng)合”,“烹飪”,“料理時(shí)間”。在這些類別中,“菜式”是最重要的。不是每個(gè)人都是一個(gè)特殊的飲食者,不是每次吃飯都是在特殊場(chǎng)合中,但是幾乎所有人在每一天都是分開吃開胃菜、早餐、主菜、配菜、沙拉和甜點(diǎn)等。

對(duì)目標(biāo)用戶來說,菜式是最重要的,這應(yīng)該作為第一個(gè)類別呈現(xiàn)給他們。

courses

菜式是食譜中重要的元數(shù)據(jù)類別。(圖像來源:Our Best Bites

然而,如前所述,目標(biāo)受眾或是網(wǎng)站目標(biāo)可能影響類別的分類,特別是在理想的網(wǎng)站中。

例如,在主流的食譜網(wǎng)站中,用戶可能看不到烹飪法的相關(guān)內(nèi)容。但是如果一個(gè)網(wǎng)站搜集來自世界各地受歡迎的美食的烹飪方法,“烹飪法”對(duì)目標(biāo)受眾來說可能是非常重要的類別,那么就要考慮在“菜式”之外是否再增加“烹飪法”或是用“烹飪法”取代“菜式”成為唯一重要的類別。不管怎樣,因?yàn)椤芭腼兎ā笔蔷W(wǎng)站的主題,首先顯示它(而不是“菜式”)會(huì)更適合。

cuisine1

網(wǎng)站有不同重要類別的元數(shù)據(jù)。(圖像來源:Recipes by Nation)

安排重要的類別

以上的例子解釋了只有單一重要類別的情況。然而,一組條目中可能包含多個(gè)重要的類別。

對(duì)于衣服來說。一個(gè)重要的類別可能是衣服的類型,像“襯衫”,“褲子”,“鞋子”,“毛衣”。另一個(gè)重要但相互排斥的類別是性別,“男”和“女”。第三個(gè)類別可能是和場(chǎng)合有關(guān),如“休閑服”,“工作服”,“禮服”。我們可能還會(huì)有更多的重要類別,但是我們先將它們放在一邊。

然后,問題是如何最好地調(diào)解或解決潛在多個(gè)重要類別之間的沖突。

首先,將全部重要類別放在相同的最高層級(jí)上似乎是符合邏輯的。畢竟,它們都是重要的。但是,要做得卻是相反的。重要類別最好是在逐增的層級(jí)上一個(gè)接一個(gè)得顯示。為了更好地理解這點(diǎn),我們來看看下圖中網(wǎng)站的信息架構(gòu)。

information

水平導(dǎo)航通常會(huì)列出網(wǎng)站提供的產(chǎn)品類型。(圖像來源:LL BEAN)

水平導(dǎo)航條列出了LL Bean可用產(chǎn)品的類型,像“家居裝飾”,“獵具和漁具”,“戶外用品”,“鞋類”和“衣服”。然而,設(shè)計(jì)師為“衣服”做了一些改變。衣服應(yīng)該按“男”、“女”分,而不是在水平菜單中列出一打的衣服類別,設(shè)計(jì)師們用更精簡(jiǎn)的分類來當(dāng)做重要類別。用戶先從“男”、“女”簡(jiǎn)單得開始,再在下拉菜單中看到所有的衣服類別。這使水平導(dǎo)航有更多的選項(xiàng)。

clothes

為主要的導(dǎo)航欄騰出更多空間,在精簡(jiǎn)的分類下使用重要類別。(圖像來源:LL Bean)

這提出了一個(gè)稍微不一致的信息架構(gòu),但是設(shè)計(jì)師們接受了它并在水平導(dǎo)航條上騰出了更多的空間。在這種情況下,只要這種不一致不會(huì)混淆用戶,這種解決方案就很好。然而,將類別“鞋子”(將鞋子分為男鞋和女鞋是可以理解的)也放在同樣的水平導(dǎo)航上并不是一個(gè)明智的決定。

cloth

重要類別應(yīng)該逐個(gè)呈現(xiàn),而不是一個(gè)挨著一個(gè)顯示。(圖像來源:LL Bean

這種解決方案的問題是兩個(gè)重要類別被放在相同的水平上?!靶印行焙汀澳行浴印倍际侵苯勇窂?。因?yàn)閮蓚€(gè)類別都是重要的,用戶都必須看過。但是,由于它們被放在同一層上,用戶要在兩者之間做出選擇,這破壞了兩種類別都是重要的假設(shè)。因此,這兩種路徑要?jiǎng)h掉一種——或許應(yīng)該是“鞋子→男鞋”需要?jiǎng)h除。

可選的類型

如果存在多個(gè)重要類別,類別中也許不需要其它條目。一個(gè)網(wǎng)站沒有超過一打的服裝條目,設(shè)計(jì)師可以讓用戶簡(jiǎn)單得選擇是否看男性或是女性的全部服裝。然而,在許多情況卻下是相反的。即便所有重要類別都已經(jīng)選定,仍然還有大量的條目存在著。因此,額外的類別應(yīng)該允許用戶去進(jìn)一步過濾。這就是可選的類別。

可選類別對(duì)某些而不是全部用戶來說是重要的。例如,“汽車”的兩個(gè)元數(shù)據(jù)類別可能是“車門的數(shù)量”和“燃油類型”。有些人對(duì)燃油類型很關(guān)注但是不關(guān)心有多少個(gè)車門。其他人卻相反。

在可選類別中進(jìn)行優(yōu)先級(jí)排序

一般來說,在用戶已經(jīng)選擇了重要類別后需要顯示可選類別。

但是,在許多零售的網(wǎng)站中,像時(shí)尚和電子零售店,一種產(chǎn)品類型(一種重要類別)的品牌列表(一種可選類別)在同一層次上。

brands

重要類別和可選類別應(yīng)該在不同水平上顯示。(圖像來源:Flipkart

這種方法的問題是,如果用戶在一個(gè)服裝網(wǎng)站上選擇了一個(gè)品牌,他們可能要面對(duì)成百上千的物品,然后他們必須選擇一種衣服的類型來縮小范圍。因此,將可選類別和重要類別放在相同的層次上就像給重要類別創(chuàng)建了沉余的路徑,增加了選擇的復(fù)雜性,并且使導(dǎo)航變得雜亂。

提供許多過濾選擇是一個(gè)好方法,不是從一開始就給用戶提供很多導(dǎo)航選項(xiàng),先給他們提供一些重要選擇,一旦他們選完重要類別,再提供可選項(xiàng)。

因此,在以上例子中,從這些層級(jí)中移除品牌,讓用戶先只能選擇一種類型的衣服可能會(huì)好些。在接下來的一個(gè)層級(jí)上,再給用戶提供品牌的可選項(xiàng)。

optional_categories

在用戶已經(jīng)選擇了重要類型后,才能看見品牌可選項(xiàng)。(圖像:Flipkart

動(dòng)態(tài)過濾選擇

如前所述,重要類別應(yīng)該逐級(jí)顯示,但可選類別最好在同一層級(jí)上全部顯示。

唯一的例外是,如果可選類別是相互排斥的,它們應(yīng)該在重要類別的同一個(gè)菜單中的下一個(gè)層級(jí)中顯示。但是,如果可選類別可以合并,它們應(yīng)該實(shí)現(xiàn)動(dòng)態(tài)過濾選擇。

在截屏圖片中,注意面包屑導(dǎo)航中的重要類別,可選類別呈現(xiàn)為動(dòng)態(tài)過濾選擇。

crucial

可選類別很可能可以合并,它們應(yīng)該實(shí)現(xiàn)動(dòng)態(tài)過濾選擇。(圖像來源:Sears)

重要類別和可選類別的區(qū)別在下文進(jìn)行解釋。每個(gè)類別都是對(duì)可用內(nèi)容的過濾選擇,動(dòng)態(tài)過濾選擇之所以說是動(dòng)態(tài)的,是因?yàn)樗鼈冊(cè)试S用戶選擇或是改變動(dòng)態(tài)變化的選項(xiàng)。相反的,在傳統(tǒng)的層級(jí)導(dǎo)航系統(tǒng)中,用戶不得不從一個(gè)層級(jí)到另一個(gè)層級(jí)上去選擇選項(xiàng)。正如上文所述,如果這是個(gè)重要類別,這就不是問題,但是如果是可選類別,情況就有點(diǎn)不同了。

當(dāng)用戶在尋找一件襯衫時(shí),許多可選元數(shù)據(jù)類別發(fā)揮作用:“品牌”,“領(lǐng)型”,“袖長(zhǎng)”,“織物”,“花樣”,“口袋”,“折扣”,“價(jià)格”,“評(píng)級(jí)”,“流行”等等。準(zhǔn)確地知道這些類別中哪個(gè)是用戶感興趣的(類別)是困難的。可能有人對(duì)這些類別全都不感興趣,或是只喜歡一兩個(gè),或是全部都喜歡。

設(shè)計(jì)師們應(yīng)該給用戶在相同層級(jí)上提供一系列動(dòng)態(tài)的,可選的選項(xiàng),而不是給用戶呈現(xiàn)全部的可選分類,也不管用戶對(duì)他們是不是感興趣。因此,用戶應(yīng)該可以選擇他們喜歡的類別。

相反的,如下所示的網(wǎng)站,重要類別和可選類別并沒有清晰地區(qū)分開。它顯示了所有類別(還包括重要的類別)。

filters

重要類別不應(yīng)該作為動(dòng)態(tài)選擇項(xiàng)。(圖像來源:Nike)

這種差別帶來幾個(gè)問題。

首先,它占據(jù)了垂直空間,將其他的可選項(xiàng)下推,要求用戶頻繁地滾動(dòng)頁面來選擇選項(xiàng)。

第二,動(dòng)態(tài)選擇面板作為一個(gè)重要的小組件:它很強(qiáng)大,但是資源太多而且雜亂。每當(dāng)用戶選擇了一個(gè)選項(xiàng),對(duì)應(yīng)的列表就會(huì)刷新。這種反饋是有道理的,但這并沒有讓交互過程更快。讓用戶在傳統(tǒng)菜單中選擇重要選項(xiàng)能更簡(jiǎn)單快捷得達(dá)到同樣的效果。事實(shí)上,Nike的設(shè)計(jì)師們提供了這樣的菜單,允許我們?cè)谙嗤慕缑嬷衼頊y(cè)試這種假設(shè),比較兩種交互模型的速度和效率。

menu_bar1

重要類別在傳統(tǒng)導(dǎo)航菜單中最好實(shí)現(xiàn)。(圖像來源:Nike

相互排斥的類別

在可選類別可能結(jié)合的情況下,動(dòng)態(tài)過濾選擇就是必須的。如果可選類別是相互排斥的,應(yīng)該在主導(dǎo)航菜單中的下一層級(jí)上顯示。

在下面的截屏中,每日快報(bào)在第一層級(jí)上向用戶詢問重要的問題——選擇新聞的話題:像“金融”,“娛樂”,“生活方式”。在主頁上的可選區(qū)域,用戶可以看到這個(gè)話題的最新新聞。每個(gè)用戶都希望查看三四個(gè)最新新聞。對(duì)于那些想要深入研究特定的主題的人,下一級(jí)欄目在下一層級(jí)中顯示。

news

相互排斥的可選類別最好在額外的主要導(dǎo)航菜單中顯示。(圖像來源:Daily Express)

上圖的下一級(jí)菜單可以認(rèn)為是相互排斥的類別,因?yàn)閵蕵讽?xiàng)目通常在書本,電影,電視等等媒體上顯示。當(dāng)然,合并也是可能的,一本書可以拍成電影或是話劇。但是用戶想要看到這樣的合并嗎?如果是用戶希望的,動(dòng)態(tài)過濾選擇是有意義的。

請(qǐng)注意這個(gè)問題的答案主要取決于類目的數(shù)量和多樣性,很少考慮項(xiàng)目的類型和特定目標(biāo)受眾的利益。

比如,用戶可能不會(huì)找一份中式低脂并且還是圣誕主題的早餐食譜。相反的,他們將會(huì)尋找可能是中式的,可能是低脂的,或可能是圣誕主題的早餐食譜。所以,可選的食譜類別一般不太可能合并。然而,如果一個(gè)網(wǎng)站有成千上萬的食譜,而目標(biāo)用戶有非常特別的喜好,給他們更強(qiáng)大的動(dòng)態(tài)過濾選擇將會(huì)更有幫助。

mutually_exclusive
在一個(gè)有龐大而多樣內(nèi)容的網(wǎng)站中給用戶的特定興趣提供有保證的動(dòng)態(tài)過濾選擇。(圖像來源:Food52)

最后,考慮第三組元數(shù)據(jù)類別。

無關(guān)緊要的類別

目標(biāo)受眾不關(guān)心無關(guān)緊要類別中的內(nèi)容。但是,這些類別對(duì)整體的用戶體驗(yàn)而言并不是沒關(guān)系的。

文章的兩類元數(shù)據(jù)可能是“字?jǐn)?shù)統(tǒng)計(jì)”和“圖像統(tǒng)計(jì)”。如果這些類別在數(shù)據(jù)庫中以列顯示,內(nèi)容策略專家將在類別中檢測(cè)這些文章,然后推斷出哪些文章太長(zhǎng)或是缺少圖像,從而解釋為什么用戶在沒有閱讀完這些文章就離開了網(wǎng)站。內(nèi)容策略專家將會(huì)和設(shè)計(jì)師或委托人討論這些問題,然后提升內(nèi)容質(zhì)量。雖然,這些類別可以給設(shè)計(jì)師帶來有價(jià)值的信息,但是用戶不會(huì)使用“字?jǐn)?shù)統(tǒng)計(jì)”或是“圖像統(tǒng)計(jì)”來瀏覽網(wǎng)站。

簡(jiǎn)而言之,無關(guān)緊要的類別不應(yīng)該出現(xiàn)在網(wǎng)站上。它們需要被忽略,不然會(huì)擾亂界面,也許會(huì)使用戶困擾。不過,大量的無關(guān)緊要的內(nèi)容整合在一起可以當(dāng)成一個(gè)可選類別。比如,在瀏覽文章時(shí),“文字計(jì)數(shù)”就是一個(gè)無關(guān)緊要的類別。但是下面顯示的這個(gè)網(wǎng)站積累了這么多的文章,設(shè)計(jì)師認(rèn)為為用戶更好得過濾內(nèi)容而增加“文章長(zhǎng)度”的可選項(xiàng)是必須的。

figures

大量不相關(guān)的元數(shù)據(jù)類型合并能變成一個(gè)可選的類別。(圖像來源:Time)

上面展示食譜和服裝的網(wǎng)站很合適解釋優(yōu)先級(jí)的微妙之處和重要性,因?yàn)樗鼈兺ǔP枰S多元數(shù)據(jù)類別。但是它們不說明很多設(shè)計(jì)師在某一時(shí)刻都會(huì)面臨的問題,特別是在為一個(gè)公司進(jìn)行設(shè)計(jì)時(shí),設(shè)計(jì)師面臨的問題會(huì)更加復(fù)雜。

公司產(chǎn)品類別

大多數(shù)食譜網(wǎng)站不加選擇地任意收集食譜,并將它們留給設(shè)計(jì)師去分類。但是公司通常有自己內(nèi)部的產(chǎn)品分類方法,這可能會(huì)導(dǎo)致需求沖突。

首先考慮的重要元數(shù)據(jù)類別是汽車,你可能會(huì)有一個(gè)根據(jù)大小或是生活方式的類別,名稱可能是“小汽車”,“貨車”,“跑車”,“轎車”,“豪華轎車”等等。這些類別是至關(guān)重要的,因?yàn)槊糠N類型的汽車服務(wù)于一種特定的生活方式,這對(duì)每一個(gè)駕駛這種車的人都至關(guān)重要。例如,小汽車在城市里簡(jiǎn)潔小巧且便宜、易于駕駛和???。貨車有很大的空間,非常適合家庭。而跑車迎合了另外一種截然不同的生活方式。

然而,許多汽車公司用他們內(nèi)部的方式為自己的汽車分類。下圖所示的BMW,使用以數(shù)字為基礎(chǔ)的分類方法(1,3,5,7等)。

car

某些時(shí)候,一個(gè)公司的分類有很好的效果。(圖像來源:BMW

但是一個(gè)公司內(nèi)部的分類方案會(huì)導(dǎo)致可用性問題。BMW的方法的確讓信息架構(gòu)更加有用。這種方法為大眾所熟悉,根據(jù)汽車的大小,數(shù)字有邏輯地變化著,或多或少符合小汽車,轎車,豪華轎車等的分類。在這種情況下,除了公司的分類方法,其他方法會(huì)使事物分離從而難以理解,而不是在幫助用戶。

下一個(gè)例子的內(nèi)部分類方案并不好。Opel同樣根據(jù)其內(nèi)部的命名規(guī)則列出了它的汽車樣模。

corporation

對(duì)用戶來說,內(nèi)部分類并不總是顯而易見的。(圖像來源:Opel)

問題是這個(gè)產(chǎn)品線的結(jié)構(gòu)并不清晰,用戶不得不滑動(dòng)產(chǎn)品線去看全部的樣模,但是這方式并不容易(這個(gè)問題涉及更多的交互)。用戶沒有簡(jiǎn)單的方式來了解產(chǎn)品之間的相互關(guān)系,因此,他們沒有簡(jiǎn)單的方法根據(jù)自己的喜好進(jìn)行篩選。

如果內(nèi)部分類方法不好用,可以優(yōu)先考慮一種為人熟知的外部分類方法。

注意Volkswagen(如下)公司有自己的命名方式和車模分類方法:“捷達(dá)”,“大眾”,“途銳”等等。但是這個(gè)公司更加重視一種常見的外部分類方案。這樣的結(jié)果是:菜單非常容易理解,并且能讓用戶關(guān)注他們感興趣的一部分。

cars

優(yōu)先考慮常見的分類方案能讓導(dǎo)航菜單易于理解。(圖像來源:Volkswagen)

當(dāng)然,公司高層可能不喜歡自己公司的內(nèi)部分類方法被棄之不用。然而,作為一個(gè)信息架構(gòu)師,職責(zé)就是讓網(wǎng)站中的內(nèi)容易于理解,所以你有責(zé)任去和高層溝通這個(gè)方案。

解釋導(dǎo)航選項(xiàng)

根據(jù)用戶喜好來構(gòu)建導(dǎo)航選項(xiàng)是簡(jiǎn)化網(wǎng)站信息架構(gòu)的重要一步,但是如果用戶在第一時(shí)間不能理解選項(xiàng),再精致復(fù)雜的結(jié)構(gòu)都是無用的。所以,花些時(shí)間考慮如何最好地解釋導(dǎo)航選項(xiàng)。

只給用戶他們需要的信息,任何更多的信息都有使用戶疲勞、混亂界面和延遲導(dǎo)航的風(fēng)險(xiǎn),甚至?xí)屗麄兎艞壃F(xiàn)在的選擇。

不要給他們太多的信息,如果用戶會(huì)猜測(cè)鏈接指向,然后對(duì)鏈接到的頁面很失望,他們會(huì)對(duì)界面失去信心,接著就會(huì)離開網(wǎng)站。

設(shè)計(jì)師可以選擇三種方法來解釋導(dǎo)航選項(xiàng):

  1. 標(biāo)簽;
  2. 標(biāo)簽和圖片;
  3. 標(biāo)簽,圖片和描述。

選擇正確的方法,評(píng)估目標(biāo)受眾最熟悉的標(biāo)簽。

標(biāo)簽

如果使用的標(biāo)簽是為人熟知的,那它們就已經(jīng)足夠了。大張的圖片或是長(zhǎng)篇的描述沒有必要去解釋什么是“牛仔褲”,“短褲”,“襯衫”,“夾克”。

labels_only2

為人熟知的項(xiàng)目用標(biāo)簽足以。(圖像來源:Rock Revival

同時(shí),推薦使用短標(biāo)簽。標(biāo)簽可以簡(jiǎn)短,但是不能是以表意不清為代價(jià)。像UX和BMI的縮寫和術(shù)語,只要是目標(biāo)用戶熟悉就能較好得起作用。有時(shí)候單個(gè)術(shù)語是容易理解的,但是放在上下文中,可能就會(huì)模糊不清。許多大型組織的網(wǎng)站都有固定的指向主要工作的水平導(dǎo)航,和指向次要工作的與上下文相關(guān)的垂直導(dǎo)航。這可能會(huì)導(dǎo)致重復(fù)標(biāo)簽。巴斯大學(xué)(如下圖),在頂部的全局水平菜單和左側(cè)狹窄的垂直菜單上都有標(biāo)簽“Research”。

duplicate_labels

有許多子部門的大型組織更傾向于重復(fù)標(biāo)簽。(圖像來源:巴斯大學(xué))

雖然這可能會(huì)迷惑用戶,但仔細(xì)的設(shè)計(jì)可以避免歧義。在上面的截圖中,菜單標(biāo)題“探索部門”是一個(gè)很好的指示,但在這之下的“Research”標(biāo)簽指向的是部門,而不是整個(gè)大學(xué)。絕對(duì)肯定的是,可以加長(zhǎng)“About Us”的標(biāo)簽,改為“About This Department”。

statistic

在一些菜單中,一個(gè)類別的條目數(shù)量用標(biāo)簽顯示。(圖像來源:BJ’s)

這些數(shù)字通常在動(dòng)態(tài)過濾選擇面板中顯示。

filters_statistics

在許多有動(dòng)態(tài)過濾選擇的界面上,類別中的項(xiàng)目數(shù)量通常用一個(gè)值來顯示。

雖然許多用戶喜歡看這些數(shù)字,但設(shè)計(jì)師還是要仔細(xì)考慮何時(shí)去顯示它們。比如,通過查看主頁來猜測(cè)一個(gè)網(wǎng)站有多少內(nèi)容是困難的。所以,明確顯示有多少內(nèi)容可以贏得用戶,他們可能會(huì)想“對(duì)的,這個(gè)網(wǎng)站有我要的東西?!?/p>

statistics1

主頁上量化的內(nèi)容讓用戶更容易操作。(圖像來源:O’Reilly)

當(dāng)然,如果你的網(wǎng)站還沒有內(nèi)容,你可能并不想透露這樣一個(gè)數(shù)字。

同樣的,當(dāng)用戶瀏覽某一類別并對(duì)其一特定主題感興趣,他們會(huì)想要探索相關(guān)的類別,即使不相關(guān)的類別包含更多條目而這個(gè)類別只有很少的東西。當(dāng)然,顯示的數(shù)字會(huì)拖慢瀏覽器加載速度,擾亂界面。

statistic1

在某種情況下,數(shù)據(jù)會(huì)阻礙用戶。(圖像來源:Digistore,教育部,新西蘭)

這種情況同樣適用于動(dòng)態(tài)過濾選擇面板。用戶會(huì)根據(jù)所包含的條目數(shù)量來選擇類別嗎?如果是這樣,這些顯示的條目數(shù)量就是有意義的。如果不是這樣,你應(yīng)該提供的唯一的一種反饋類型是顯示灰色或刪除零值的項(xiàng)。

另外,在動(dòng)態(tài)過濾選擇的情況下,顯示條目數(shù)量是有用的信息。一旦用戶選擇了一個(gè)類別,顯示這個(gè)類別的數(shù)量。

圖標(biāo)是另一種有時(shí)會(huì)附加到標(biāo)簽上的元素。當(dāng)圖標(biāo)制作精良和易于識(shí)別時(shí),它們將是非常有用的補(bǔ)充。當(dāng)沒有必要去解釋用戶的選項(xiàng)時(shí),圖標(biāo)能更容易區(qū)分不同的選項(xiàng)。在下面的截屏中,我將圖標(biāo)從菜單條目中刪除。注意到標(biāo)簽還是足以解釋每個(gè)選項(xiàng),每個(gè)人都知道什么是“汽車”,“房車”,“摩托車”和“卡車”。

labels_without_icons1

有時(shí)候標(biāo)簽就足夠了,但是需要更多的時(shí)間來識(shí)別。(圖像來源Mobile.de

將圖標(biāo)放在標(biāo)簽旁邊能讓用戶更容易得理解和區(qū)別不同的選項(xiàng)。

labels_with_icons

圖標(biāo)讓用戶更容易理解和區(qū)別不同的選項(xiàng)。(圖像來源Mobile.de

但是,單獨(dú)的圖標(biāo)就會(huì)引起混亂。即使這個(gè)圖標(biāo)是為人熟知的,用戶可能會(huì)不確定它在一個(gè)特定上下文中代表的意思。

標(biāo)簽和圖片

標(biāo)簽和圖標(biāo)在為人熟知的事物上起到很大作用。但是對(duì)于不常見的事物,圖像就是必須的。想想品牌名稱。在以下截屏中,汽車模型的名稱在標(biāo)簽中是純文本格式的文字。

labels_and_pictures1

理解品牌名稱需要更多信息(不僅是標(biāo)簽)。(圖像來源:Subaru

但是,我不知道什么是“Tribeca”或“Legacy”。標(biāo)簽還不足以幫助我來決定去探索哪些產(chǎn)品。像下圖所示,標(biāo)簽和圖片是一個(gè)更好得解決方式。

pictures1

標(biāo)簽和圖片是解釋不熟悉術(shù)語的一種好方式。(圖像來源:Mazda

什么時(shí)候在導(dǎo)航里使用圖像或是圖標(biāo)是一個(gè)有意思的問題。顯而易見的,解釋一個(gè)非常具體的項(xiàng)目,像“13-inch Macbook Pro”或是“Samsung Galaxy Note 3”,沒有什么比實(shí)際產(chǎn)品圖片更好的了。解釋一個(gè)產(chǎn)品類別并不簡(jiǎn)單。在一些菜單中,這些分類在進(jìn)行解釋時(shí)會(huì)使用圖標(biāo)。

icons1

在一些菜單中,用圖標(biāo)來解釋分類。(圖像來源:Flipkart

在其他菜單里,這些相同的分類使用實(shí)際產(chǎn)品的照片來解釋這個(gè)類別。

pictures

在一些菜單中,使用實(shí)際產(chǎn)品的圖像來解釋這個(gè)類別。(圖像來源:Target

對(duì)于產(chǎn)品類別來說,圖標(biāo)比圖片更加適合。使用制作精良的圖標(biāo)使菜單看上去顯得更加專業(yè)。并且,使用一個(gè)產(chǎn)品來代表這個(gè)產(chǎn)品類別可能會(huì)下意識(shí)地提升用戶的疑問。“為什么這個(gè)特殊的產(chǎn)品代表了這個(gè)類別呢?”“這個(gè)產(chǎn)品是他們最好的嗎?”“產(chǎn)品的范圍是以這個(gè)特定的項(xiàng)目為中心的嘛?”“如果我不是找這種物品,這對(duì)我來說就不是一個(gè)好網(wǎng)站?!比绻脩舻谝谎劭吹降纳唐奉悇e和他們?cè)诓藛沃锌吹降囊粯訒r(shí),這種憂慮可能會(huì)加強(qiáng)。相反,圖標(biāo)能不多不少地簡(jiǎn)單表述一個(gè)類別中包含某類產(chǎn)品。

不過,圖標(biāo)的技巧必須達(dá)到某種標(biāo)準(zhǔn)。如果圖標(biāo)沒有畫好,看起來就會(huì)很不專業(yè)。并且,如果它不容易辨認(rèn),它甚至?xí)煜脩?。所以,圖標(biāo)更適合產(chǎn)品類別,但是如果你沒有信心將圖標(biāo)做得專業(yè)和容易辨認(rèn),你最好使用圖片。

標(biāo)簽,圖片和描述

有時(shí)候,標(biāo)簽和圖標(biāo)還不足以解釋產(chǎn)品。許多服務(wù)提供商都有復(fù)雜的解決方式,像銀行、保險(xiǎn)服務(wù)公司和因特網(wǎng)服務(wù)提供商,經(jīng)常給他們的產(chǎn)品命名為“50+”和“活躍網(wǎng)站”。已婚夫婦和代理的對(duì)話,或是一個(gè)女孩在講電話的照片也許還不足以解釋提供商的服務(wù)。對(duì)于此類產(chǎn)品,幾行的描述和標(biāo)簽,再加上圖片會(huì)對(duì)用戶很有幫助。

labels_pictures_and_descriptions1

復(fù)雜產(chǎn)品也許需要標(biāo)簽、圖片和描述才能理解。(圖像來源:Naspa

標(biāo)題和文章題目是不同的標(biāo)簽,標(biāo)題可能需要附帶圖片和描述,而文章題目可能不需要。

許多作者建議前置標(biāo)題要有重要信息,并且保持標(biāo)題盡可能的短。

headlines

一種常見的建議是保持短標(biāo)題,并且將重要信息前置。(圖像來源:BBC)

雖然上面的標(biāo)題簡(jiǎn)短而有重點(diǎn),但是這種風(fēng)格并不適合每一個(gè)網(wǎng)站。

第一個(gè)問題是,是否要有描述語句和如何去寫描述。BBC的頭條標(biāo)題本來也有描述語句,在上圖中,我將它們刪除,就留下孤單的頭條標(biāo)題。在下圖中,我將描述語句恢復(fù),你可以注意到這些語句基本上都是冗長(zhǎng)乏味的,沒有一些新信息。

headlines-opt

描述語句應(yīng)該傳達(dá)的是頭條標(biāo)題還沒有表述的信息。(圖像來源:BBC)

如果頭條標(biāo)題里面就都是關(guān)鍵信息了,那么描述語句就不再需要。因?yàn)橛脩粼陂喿x完標(biāo)題后就可以點(diǎn)擊鏈接到文章了,再閱讀多余沒有新意的描述語句只為放緩閱讀速度。

但是,單獨(dú)顯示頭條標(biāo)題或是用這種方式寫標(biāo)題通常不太好或甚至是不明智的。如果一篇文章只是簡(jiǎn)單地報(bào)道一個(gè)事件,那么像BBC這樣的標(biāo)題是一個(gè)好選擇。但是如果文章有更多的細(xì)節(jié),那么標(biāo)題、圖片和描述將會(huì)更有效、更迷人。

下面截圖中的標(biāo)題比內(nèi)容更吸引人,關(guān)鍵信息被分在下面兩行。同時(shí),旁邊的圖片為文章定下了基調(diào)。

headline

標(biāo)題、圖片和描述通常是深入解釋新聞的最好方法。(圖片來源:World

從小片段中了解這篇文章是講什么的并不困難。使用標(biāo)題作為焦點(diǎn),使用描述來解釋文章,并用圖片來為文章定調(diào),整個(gè)片段給了不僅能吸引用戶,也傳達(dá)了文章的觀點(diǎn)。

最后,通常需要仔細(xì)思考頭條標(biāo)題,這樣它們出現(xiàn)在網(wǎng)站外也能被理解。畢竟,標(biāo)題能出現(xiàn)在其他媒體或是文章的搜索結(jié)果中。一些作者甚至為了這個(gè)目的而去設(shè)計(jì)公式。

context

許多作者嘗試寫出在其他網(wǎng)站上顯示時(shí)也能被易于理解的標(biāo)題。(圖像來源:Baymard Institute)

在標(biāo)題中添加信息時(shí),小心不要?jiǎng)?chuàng)建沉余信息。

上圖中的標(biāo)題沒有提供足夠的上下文信息,因?yàn)檫@個(gè)網(wǎng)站是關(guān)于網(wǎng)頁設(shè)計(jì)的,并且多欄布局在主頁、文章等中起作用,而不局限在表單上。所以,“表單字段的可用性”主要是在來源網(wǎng)站上增加上下文。適應(yīng)外部環(huán)境的標(biāo)題并不總是必須的,因?yàn)樗褜み@些標(biāo)題的人更渴望去提供自己的上下文。

搜索引擎開發(fā)者明白,如果搜索結(jié)果不能滿足用戶需求,那么用戶最終會(huì)放棄它們。所以,他們?yōu)榱颂岣咚阉鹘Y(jié)果的相關(guān)性和成功率不斷工作著,不管是通過添加豐富的片段、圖片、預(yù)覽還是簡(jiǎn)單得改進(jìn)算法——也就是說,添加上下文。同樣的,如果在其他文章的推薦讀物中出現(xiàn)這篇文章,這篇文章需要提供必要的上下文。最后,在社會(huì)媒體中,個(gè)人分享的標(biāo)題或是有眾多粉絲的品牌不太可能引起歧義。

總結(jié)

信息架構(gòu)——內(nèi)容結(jié)構(gòu)化并配有標(biāo)簽——是可用導(dǎo)航的基礎(chǔ)。設(shè)計(jì)師通過結(jié)構(gòu)化內(nèi)容來有效簡(jiǎn)化網(wǎng)站的信息架構(gòu),為了讓目標(biāo)受眾能進(jìn)行更好地選擇,減少或增添選項(xiàng),并解釋這些選項(xiàng)來最大限度地減少用戶的認(rèn)知負(fù)荷。

本文中給出的建議在以下兩個(gè)列表中進(jìn)行總結(jié),分別是“結(jié)構(gòu)化內(nèi)容”和“標(biāo)簽項(xiàng)”。

結(jié)構(gòu)化內(nèi)容

  1. 搜集并且分類導(dǎo)航所需的元數(shù)據(jù)類型。
  2. 將元數(shù)據(jù)分為重要的,可選的和無關(guān)緊要的類別。重要類別對(duì)所有目標(biāo)受眾都很重要,可選類別對(duì)一些人來說是重要的,無關(guān)緊要類別對(duì)目標(biāo)受眾來說是不重要的。
  3. 只將一個(gè)重要類別放在第一層級(jí)上。
  4. 如果在第二層級(jí)上的類別沒有超過一定數(shù)量,增加額外的類別也是沒有必要的。另外,將下一個(gè)重要類別逐個(gè)放在隨后的層級(jí)上。
  5. 當(dāng)所有重要選項(xiàng)都安排好后,給用戶提供一個(gè)頁面,列出用戶選擇的所有匹配項(xiàng)。
  6. 如果剩余的可選類別仍然超過一定數(shù)量,將這些類別都放在同一層級(jí)上。
  7. 如果可選類別是相互排斥的,那么在另一個(gè)的層級(jí)上呈現(xiàn)它們。如果可選類別是組合化的,那么實(shí)現(xiàn)過濾動(dòng)態(tài)選擇。

標(biāo)簽項(xiàng)

  1. 如果標(biāo)簽是為人熟知的,那么它就已經(jīng)足夠了。保持標(biāo)簽盡可能地簡(jiǎn)短明晰。在主頁上和分類頁面上顯示項(xiàng)目的總數(shù)。為了使選擇過程和選項(xiàng)更容易理解和區(qū)分,可以考慮使用圖標(biāo)。
  2. 如果標(biāo)簽并不為人所熟悉,可以考慮增加圖片。當(dāng)使用圖標(biāo)解釋分類時(shí),圖標(biāo)要制作精良并容易識(shí)別,否則還是使用圖片比較好。
  3. 對(duì)于復(fù)雜的服務(wù)和產(chǎn)品,除了標(biāo)簽外,考慮增加圖片和描述。描述應(yīng)該提供全新的信息,不能只是對(duì)標(biāo)題的重述。同時(shí),要注意給內(nèi)容增加標(biāo)題的同時(shí)不要產(chǎn)生沉余信息。

一旦簡(jiǎn)化了信息架構(gòu),用戶應(yīng)該能夠滿意得進(jìn)行選擇。因此,你需要設(shè)計(jì)一個(gè)導(dǎo)航菜單,能讓用戶舒適地進(jìn)行選項(xiàng)選擇。設(shè)計(jì)導(dǎo)航菜單的過程將在本系列的第二部分中討論。

轉(zhuǎn)自:http://daichuanqing.com/index.php/archives/5711

 

延伸閱讀

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 太長(zhǎng)了

    來自北京 回復(fù)
  2. mark 好東西 慢慢吸收

    來自湖南 回復(fù)