有效地簡化導航-Part 1:信息架構(gòu)

3 評論 20832 瀏覽 30 收藏 37 分鐘

小編導讀:導航作為用戶體驗重要組成,僅僅是達到目的的一個手段——目的就是消費內(nèi)容。這就是為什么用戶對內(nèi)容和導航會有不一樣的期望。內(nèi)容應(yīng)該是獨一無二的、令人驚訝的、令人激動的,導航應(yīng)該是簡單的、盡可能符合預期。

這個系列文章,分為兩個部分,是一個「四步走」的指南,用于簡化導航的體驗。通過分析內(nèi)容的類型和數(shù)量,選擇并精心設(shè)計正確的導航菜單。

「四步走」——理想的導航系統(tǒng)

要做一個可用的導航系統(tǒng),網(wǎng)頁設(shè)計師必須按順序回答以下4個問題:

1. 如何組織內(nèi)容?

2. 如何解釋導航的選項?

3. 哪種導航菜單最適合容納這些選項?

4. 如何設(shè)計導航菜單?

前兩個問題關(guān)注構(gòu)建和便簽內(nèi)容,通常稱為信息架構(gòu)。信息架構(gòu)師通常用網(wǎng)站地圖(site map diagram)來可視化他們的工作成果。

網(wǎng)站地圖給出一個網(wǎng)站的導航結(jié)構(gòu)

然而,由于某些原因(后面會詳細解釋),用網(wǎng)站地圖來并不能提供最好的體驗。設(shè)計一個定制導航菜單,容納、整理、逐步揭開它們的選項也是很重要的,所以要讓用戶舒適地瀏覽、尋找、忽視選項。

成功設(shè)計這樣一個導航菜單,還需要回答后兩個問題,這關(guān)乎到導航體驗的交互設(shè)計。前兩個問題會在Part 1里談到,后兩個問題在Part 2。(Part 2還沒寫?。?

構(gòu)建內(nèi)容

要恰當?shù)貥?gòu)建網(wǎng)站的內(nèi)容,首先要考慮用戶是如何尋找信息,然后用與之適應(yīng)的方法來構(gòu)建內(nèi)容。

用戶是如何尋找信息

當用戶找些什么東西的時候,如,車、食譜、財務(wù)服務(wù)、衣服…… 他們不一定知道這些東西的確切名字。如果我們假設(shè)用戶知道它們的確切名字,那么我們就認為最近的方法就是提供一個A-Z的索引表,又或是提供一個搜索框。

事實上,事情并不是這么簡單。即使用戶知道確切的名字,A-Z的索引表和搜索都會有先天的交互問題,它們不能成為主導航,這個放到Part 2中再討論。然而,用戶通常不知道確切的名字,他們也不關(guān)心這些名字;他們有關(guān)鍵字或是關(guān)于物品的特征描述。

指引用戶找到正確內(nèi)容的第一步,匯集并分類網(wǎng)站的內(nèi)容。

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

元數(shù)據(jù)就是收集內(nèi)容的信息——信息的信息。

不需要理會具體內(nèi)容,每個條目都歸屬于不同的元數(shù)據(jù)類別,如:政治類文章、屏幕尺寸、視頻的導演、衣服的領(lǐng)口……當然,還有一些類別是大家共有的,如:價錢、受歡迎程度……

通過這些元數(shù)據(jù)類別,用戶可以瀏覽內(nèi)容。然而,給用戶提供所有的可能方式去瀏覽內(nèi)容時不現(xiàn)實,也沒好處。這樣會讓界面混亂,讓導航的過程變復雜,甚至會混淆用戶,以至于他們會拋棄這個網(wǎng)站。

小心地考量是否要,或是在哪個階段展示這些類別。

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

決定什么時候展示元數(shù)據(jù)類別,首先把類別劃分成3個組別:重要的,可選的,無關(guān)的。

信息架構(gòu)的一大挑戰(zhàn)就是按照重要的,可選的,無關(guān)的來分類,這很大程度上取決于目標用戶的偏好,網(wǎng)站的目的,內(nèi)容的量。一旦你選定了適合的分類標準,這里有一些簡單的規(guī)則來幫你決定什么時候展示什么類別。

重要的類別

重要的類別是指對所有目標用戶的很重要。這樣的類別一般較少,但至少每個條目都會有一個重要的類別,這可以簡化設(shè)計師的工作,同時提供更好的導航體驗。

決定重要類別

對食譜來說,元數(shù)據(jù)的類別可能是“過程”、“原料”、“特殊飲食”、“場合”、“烹飪方式”、“烹飪時間”。在這些類別中,最重要的可能是“過程”。不是每個人都有特殊飲食喜好,也不是每頓飯都會有特別的場合,但是幾乎每個人都會把他們的餐飲分為開胃菜、主菜、配菜、沙拉、甜點等。

由于“過程”對每個人來說都是如此重要,首先提供的類別就應(yīng)該是“過程”。

courses1

食譜中,“過程”是最重要的元數(shù)據(jù)類別

就像前面提到的,目標用戶或是網(wǎng)站目的會影響分類,特別是小眾網(wǎng)站(niche websites)。

例如,“烹飪方式”與一般人去食譜的網(wǎng)站的目的沒有聯(lián)系。但是如果有一個網(wǎng)站收集了地球上最好的烹飪食譜,“烹飪方式”可以成為重要類別,你可以增添這樣一個重要類別,也可以取代“過程”成為唯一的重要類別。無論如何,“烹飪方式”才是這個網(wǎng)站的主題,先展示它才是最適合的做法。

cusine

小眾網(wǎng)站會有不一樣的重要類別

整理重要類別

上面的例子是有一個重要類別。然后,當你有一大堆條目,就會有各種不同的重要類別。

拿衣服做例子。衣服的類型是一個重要類別,如:“襯衫”、“褲子”、“鞋”、“毛衣”……還會有其他類別,性別、場合,如:“休閑”、“工作”、“舞會”。我們還能找到更多的重要類別。

一開始,把所有的重要類別放在同一個層級似乎很有邏輯。事實上這樣做完全不符合邏輯。重要類別應(yīng)該一個接一個,有順序地出現(xiàn)??聪孪旅孢@個網(wǎng)站信息架構(gòu),你大概就明白。

information1

水平的導航欄通常會列出所有種類的商品

這個導航欄列舉了商品的種類,“居家配件”、“打獵&釣魚”、“戶外工作”、“鞋”、“衣服”。但是,對于“衣服”這個類別,設(shè)計師做了一點不一樣的處理。衣服被劃分成“男士”、“女士”,而不是把各種類型的衣服都列舉在這個水平的導航欄上,設(shè)計師決定用更少的分類。用戶從“男士”、“女士”開始,然后才在下拉菜單中看到衣服的所有種類,從而提供更多的選項。

clothes1

用更少的分類來騰出空間

這樣的處理方式產(chǎn)生的問題就是,兩個分類放在同一個層級里面?!靶惺俊焙汀澳惺俊眱煞N路徑,它們處于相同的層級,使得用戶要在其中做出選擇,這破壞了兩種分類都很重要的假設(shè)。因此,其中一條路徑應(yīng)該會去除——大概是“鞋→男士”吧。

可選的類別

如果有多個重要類別存在,那么其中一些條目就無需納入其中。如果一個網(wǎng)站只有十多個衣服條目,那么只需要簡單地提供“男士”、“女士”的選擇就好。

在很多案例中,事情走向了另一個方向。即使使用了所有的重要類別進行篩選,還是出現(xiàn)很多條目。所以,需要額外的類別,讓用戶進行進一步篩選內(nèi)容??蛇x類別就是出現(xiàn)在這種情形。

可選分類對部分用戶有用。例如,“汽車”的兩個元數(shù)據(jù)類別,“門的數(shù)量”、“燃料類型”。一些人可能對燃料特別感興趣,不太介意是幾門的汽車,而另一些用戶可能會有相反想法。

重要類別優(yōu)先于可選類別

可選類別應(yīng)該出現(xiàn)在用戶使用主要類別進行篩選之后。

然而,很多零售網(wǎng)站,譬如賣電子產(chǎn)品或是時裝,會把品牌(可選類別)放到和產(chǎn)品類型(重要類別)一樣的層級。

brands1

重要類別和可選類別應(yīng)該放在不同的層級

這個方法會出現(xiàn)的問題:如果用戶選擇了一個品牌,然后就會出現(xiàn)上百個條目,他就必須選擇衣服類型進行進一步篩選。所以把可選和重要放在同一個層級會增加多余的路徑,添加選擇的復雜性、導航的混亂度。

提供各種過濾器不是壞事,但是不要在一開始就把各種導航選項提供給用戶,先提供重要的選項,重要的選修都用完了,再引入可選的。

所以,上述的案例,在這個層級里去掉品牌,先讓用戶選擇衣服類型。再下一個層級中,才提供品牌的選擇。

optional_categories1

只有在用戶已經(jīng)選擇重要類別后,可選類別才能出現(xiàn)

動態(tài)過濾器

前面提到,重要類別應(yīng)該一個接一個,有順序地出現(xiàn)。所有可選類別最好是同時提供。

除了一種例外情況,如果可選類別互斥,那么它們就應(yīng)該像重要類別那樣處理(前面提到“男士”、“女士”就是一組互斥的類別),出現(xiàn)在下一個層級的同一菜單中。如果可選類別可能會被合并,它們就應(yīng)該做成動態(tài)過濾器。

在下面的截圖中,可以看到Sears在面包屑路徑中列出了重要類別,可選類別就成為冬天過濾器。

crucial

可選類別被合并成為動態(tài)過濾器

重要類別和可選類別之間的差異可以這樣解釋。每一個類別都是一個內(nèi)容的過濾器,動態(tài)過濾器之所以動態(tài)是因為它允許用戶選擇和改變多個多個值。相反,在傳統(tǒng)的層級化導航系統(tǒng)里面,用戶只有在不同的層級才能選擇值。如果是重要類別,像之前的例子,就不會出現(xiàn)問題;但是可選類別,情況就不一樣了。

當用戶尋找一件襯衫,很多可選類別都會發(fā)揮作用:“品牌”、“衣領(lǐng)類型”、“袖長”、“布料”、“圖案”、“口袋數(shù)”、“折扣”、“價錢”、“評價”、“受歡迎程度”等等。了解用戶糾結(jié)對哪個類別感興趣是很困難的,有的人可能都沒興趣,有的人會對多個、甚至全部都感興趣。

與其一個接一個地給出可選類別,設(shè)計師應(yīng)給提供一個動態(tài)的可選過濾器。這樣,用戶就可以只選擇感興趣的類別。

相反,下面的網(wǎng)站就沒有明確區(qū)分出重要類別和可選類別。它把所以類別,包括重要類別都做成動態(tài)過濾器。

filters1

重要類別不應(yīng)該做成動態(tài)過濾器

區(qū)分的缺失會導致一系列問題。第一,占據(jù)了大量豎直空間,使其他可選類別往下移,讓用戶經(jīng)常滾動才能看到,并做出選擇。

第二,動態(tài)過濾器是一個“重型裝備”:它很厲害,但是很耗費資源。當用戶選擇一個值,整個列表的值也會隨之改變。這個提供了及時反饋,但是交互卻變慢了。用傳統(tǒng)的導航菜單,選擇重要類別也能得到相同的結(jié)果,而且也會更快。

事實上,Nike的設(shè)計師的確提供了這樣一個菜單,讓我們驗證了這個假設(shè),在同一個界面里面測試兩種方式的方式,比較他們的速度和效率。

menu_bar11

重要類別還是應(yīng)該做成傳統(tǒng)的導航菜單

互斥類別

動態(tài)過濾器只有在可選類別可以被合并時才能使用。如果可選類別是互斥的,那么它們就應(yīng)該放在主導航菜單的下一個層級。

下面的截圖,Daily Express在最開始就問了用戶一個問題:選擇一種新聞的類型,如:“財經(jīng)”、“娛樂”、“生活”。然后在主頁的選擇部分,會給出這個類型的一些新聞?wù)瑤缀跛杏脩舳紩タ雌渲?~4篇新聞。對于那些想要看特定主題的讀者,在第一層導航下面列舉了子欄目。

news11

互斥的可選類型最好放在主導航菜單的下一個層級

上面的子欄目可以視作互斥類別,應(yīng)為一個娛樂項目不會既是一本書,又是一個電影。當然,合并也是可以的;書也可以放到電影欄目里面,但是文章摘要又怎么匹配這種分類方式?如果不能匹配,那動態(tài)過濾器就有意義。

這個問題的答案,取決于條目的數(shù)量和多樣性,而不是類型,當然也取決于目標用戶的偏好。

譬如,用戶不會尋找中式、低脂、圣誕主題的早餐;相反,他們會去找一個既不中式,也不低脂,也不是圣誕主題的早餐??蛇x類別就很難合并在一起,如果一個網(wǎng)站有上千個食譜,而目標用戶又會有各自的偏好,動態(tài)過濾器就會很有用。

mutually_exclusive1

一大堆不同種類的內(nèi)容+個性化的用戶偏好,就需要動態(tài)過濾器

最后,第3個元數(shù)據(jù)組別。

無關(guān)類別

無關(guān)類別就是目標用戶不看的內(nèi)容,但是它們也是交互中的一部分。

文章的元數(shù)據(jù)類別里面“字數(shù)”、“圖片數(shù)”。這些類別都會在數(shù)據(jù)庫中占據(jù)位置,內(nèi)容策劃者可能會查看這些類別,來推斷文章是否過長,是否太少圖片。這可能是用戶沒看完內(nèi)容就關(guān)閉網(wǎng)站的原因。內(nèi)容策劃者就會與設(shè)計師或者客戶討論這些可以提升內(nèi)容質(zhì)量的東西。這些類別對設(shè)計師很有價值,但是用戶不會因為“字數(shù)”、“圖片數(shù)”來選擇文章。

簡單來說,無關(guān)類別不應(yīng)該出現(xiàn)在頁面,它們會被忽視,會照成界面混亂,甚至混淆用戶。但是,無關(guān)類別可以轉(zhuǎn)化為可選類別。

例如,“字數(shù)”可能是個無關(guān)類別。但是下面的網(wǎng)站就積累了大量文章,因此設(shè)計師覺得有必要增加“文章長度”作為內(nèi)容的過濾器。

figures1

無關(guān)類別可以轉(zhuǎn)化為可選類別

上面展示食譜、衣服的網(wǎng)站也可以用來解釋優(yōu)化類別的重要性,因為它們對元數(shù)據(jù)類別有需求。但是它們沒有談到一個很多設(shè)計師都會遇到的問題,特別是設(shè)計公司網(wǎng)站時會遇到。

公司產(chǎn)品分類

很多食譜網(wǎng)站會不加選擇地收集食譜,然后讓設(shè)計師去分類。但是公司通常都有內(nèi)部的產(chǎn)品分類方式。這就可能會與需求沖突。

譬如說汽車的元數(shù)據(jù)類別。你可能會根據(jù)尺寸或是生活方式,如:“緊湊型”、“旅行車”、“運動型”、“轎車”、“豪華型”。這樣的分類很重要,因為每種車都是根據(jù)特定的生活方式設(shè)計出來,幾乎對每一個駕駛者來說都是如此。緊湊型,就是小巧、便宜、易于駕駛和方便停車;旅行車就很適合家庭;運動型……

很多汽車公司都會有自己的分類方案。寶馬,就是按數(shù)字來進行分類。

car

有時這種分類方案很有效

這種公司的內(nèi)部分類方案會導致可用性問題,寶馬的方案在信息架構(gòu)上的確很好。這種方案知名度也很好,數(shù)字與車的尺寸相匹配,某種程度上也算是典型的以“緊湊型”、“轎車”、“豪華型”進行分類。在這個案例中,換成其他分類方式反而會讓用戶不適。

下一個例子就沒那么直白。Opel用自己的內(nèi)部命名約定來列舉車。

corporation1

內(nèi)部分類對外部用戶就不夠直接

這種產(chǎn)品線的架構(gòu)不清晰,而且這樣的滑動瀏覽汽車的交互也很麻煩(唔……這是一個交互問題)。用戶不能理解車與車的區(qū)別,也就不能按照喜好來過濾。

如果分類方案本身不夠好,那么一個讓人熟悉的外部類別的優(yōu)先級應(yīng)該更好。

注意到,大眾也有自己的名稱分類:“Jetta,” “Passat,” “Touareg,” etc. 但是公司最注重常見的外部方案。結(jié)果就是,菜單更容易被理解,用戶也能更專注于他們喜歡的產(chǎn)品線。

cars1

優(yōu)先使用常見的外部方案使導航菜單更容易被理解

客戶可能不喜歡他們的分類方案歸為次要位置。但是,信息架構(gòu)師就是被請來把網(wǎng)站內(nèi)容變得易于瀏覽,你有與客戶溝通的義務(wù)。

解釋導航選項

根據(jù)用戶偏好來做構(gòu)造導航選項是簡化網(wǎng)站信息架構(gòu)的重要一步。但如果用戶一開始就不能理解這些選項,那最精巧的架構(gòu)都沒用。所以,先要考慮解釋導航選項的最佳方法。

給用戶足夠的理解選項的信息量。過多的信息會有混淆界面,減慢導航,甚至讓用戶放棄使用的風險。

也不要給太少的信息。如果用戶要猜測,鏈接指向哪里,哪里結(jié)束,他們很快就會對界面失去信心,離開網(wǎng)站。

設(shè)計師可以選擇一種方式來解釋導航選項:

1. 標簽

2. 標簽+圖

3. 標簽+圖+描述

選擇正確的方式,先評估用戶對標簽的熟悉程度

標簽

如果你用的標簽已被人熟知,那么只使用標簽就夠了。解釋“牛仔褲”、“短褲”、“襯衫”、“夾克”不需要使用大圖和長描述。

labels_only2

熟悉的條目,用標簽足夠了

保持標簽很值得稱道,但簡潔不應(yīng)該以清晰為代價??s寫和術(shù)語可是可以的,如:UX, BMI(body mass index),前提是目標用戶熟悉它們。

有時,盡管術(shù)語本身沒有問題,但是前后文可能會讓它產(chǎn)生歧義。很多大型機構(gòu)的網(wǎng)站包含一個固定水平導航來指向機構(gòu)的主要業(yè)務(wù),和一個隨內(nèi)容變化的豎直導航來指向下屬機構(gòu)。這樣會出現(xiàn)重復的標簽。巴斯大學(University of Bath),“研究”這一標簽出現(xiàn)在全局導航和左邊的豎直導航里。

duplicate_labels

有很多下屬機構(gòu)的大機構(gòu)經(jīng)常出現(xiàn)重復標簽

雖然這個會迷惑用戶,細致地設(shè)計就可以避免歧義。上面這幅截圖,菜單上面的標題“探索部門”就是很好的提示,下面的“研究”是指部門的,而不是學校的?;蛘呶覀兛梢允褂瞄L一點的標簽,“關(guān)于我們”改成“關(guān)于此部門”之類的做法。

另一個給標簽語境的方法就是使用數(shù)字,來表示這個類別下面有多少個條目。

statistic

在某些菜單中,數(shù)字可以配合標簽一起使用

這樣的數(shù)字經(jīng)常出現(xiàn)在動態(tài)過濾器中。

filters_statistics

動態(tài)過濾器旁邊經(jīng)常會出現(xiàn)代表條目的數(shù)字

很多用戶喜歡數(shù)字,但是要注意考慮什么時候展示它們。例如,瀏覽首頁的時候,用戶通常都不知道有多少內(nèi)容。這時候給出有多少內(nèi)容就可以說服用戶,他們會想,“這里一定有我想要的。”

statistics

在首頁標注內(nèi)容數(shù)量可以說服用戶

當然,如果內(nèi)容不多的情況下,你一定不想公開這個數(shù)字。

同樣地,用戶瀏覽分類,然后找到感興趣的主題,他們會查看相關(guān)的類別,即使只有幾個條目,又或者有很多條目。但是,這個時候展示數(shù)字就減低瀏覽速度,也會混淆界面。

statistic11

在某些情境,統(tǒng)計數(shù)據(jù)會妨礙用戶‘

動態(tài)過濾器也會有同樣的情況。用戶會因為條目的數(shù)量而選擇某個類別嗎?如果是,那就標出數(shù)字就講得通。如果不是,那只有那些你會去除,或者以灰色標注的類別旁邊會有個“0”。

要不,用戶選擇某一個類別,才顯示類別的條目數(shù);或者在動態(tài)選擇器選擇類別,才顯示相應(yīng)的條目數(shù)也是有用的信息。

圖標是另一種會出現(xiàn)在標簽旁邊的元素。精巧而又識別度高的圖標是很有用的附加物。無需解釋選項的區(qū)別,圖標就是很好的區(qū)別。下面的截圖中,我移走了菜單上的圖標,你會注意到標簽本身就可以解釋選項的意義。

labels_without_icons1

標簽足夠了,但會花費一點時間去識別。

然而,加上圖標可以讓用戶更好地識別和區(qū)別選項。

labels_with_icons

圖標使得識別的過程變得更容易

但是,只會圖標會也會讓人迷惑。即使圖標已經(jīng)為大家所熟知,用戶還是不太確定究竟它代表什么。

標簽+圖

對于熟悉的條目,標簽和圖標都很好用。對于特殊的條目,圖片就很有必要。例如,品牌名稱。下面的截圖里,車都是以純文字出現(xiàn)在菜單。

labels_and_pictures1

品牌名稱只有標簽是不足以被理解

我不知道“Tribeca”和“Legacy”分別代表什么。標簽不足以讓我做出選擇,帶圖片的標簽可能是一個更好方案。

pictures-e1376648165528

標簽+圖對于不熟悉的術(shù)語是個更好的方案

在導航上用圖片或圖標是一件很有趣的事。譬如描述特定的產(chǎn)品,“13-inch Macbook Pro”、 “Samsung Galaxy Note 3”,除了產(chǎn)品圖,沒有更好的方案。

但是描述一類類別就沒這么簡單。在某些菜單中,圖標可以被用來描述類別。

icons11

在某些菜單中,圖標可以被用來描述類別

在另一些菜單中,會用真實的產(chǎn)品圖片來做這件事。

pictures

在某些菜單中,會用真實的產(chǎn)品圖片來描述類別

對于產(chǎn)品分類,圖標可能比圖片更適用。一個寫實圖標讓整個菜單變得更專業(yè)。

用真實的產(chǎn)品圖片還可能產(chǎn)生新的問題。用戶會下意識問,“為什么這個產(chǎn)品可以代表這個類別?”、“這就是這個類別最好的產(chǎn)品?”、“我可以在這個網(wǎng)站找到其他產(chǎn)品嗎?”……如果他們點進去發(fā)現(xiàn)第一個產(chǎn)品就是菜單上面的那個,這種憂慮還會擴大。相反,圖標只是代表一個產(chǎn)品類別,僅此而已。

圖標還是有一定的標準。如果畫得不好,會顯得很業(yè)余。如果不能被辨認出來,會混淆用戶。所以當你無法保證圖標的專業(yè)性和可識別性,還是用圖片吧。

標簽+圖+描述

有時標簽+圖都不夠用。服務(wù)商提供一些復雜的方案,譬如銀行、保險經(jīng)紀、ISPs,然后它們的產(chǎn)品名像這樣,“50 Plus”、“Web on the Go”。一對夫婦跟保險經(jīng)紀談話,一個女孩在打電話,這樣的圖片無法描述服務(wù)商提供的服務(wù)。對于這種情況,幾行描述+標簽+圖才是最有效的方法。

labels_pictures_and_descriptions1

復雜的產(chǎn)品就需要標簽+圖+描述,才能被理解

頭條、文章標題這類標簽,可能需要,也可能不需要圖和描述。

很多作家支持標題只需要關(guān)鍵信息點,而且要盡量簡短。

headlines

建議:標題只需要關(guān)鍵信息點,而且要盡量簡短

標題很簡短,也有關(guān)鍵信息,但是這樣的書寫風格有它的風險,而且并不適合所有的網(wǎng)站。

應(yīng)不應(yīng)該,或者怎么樣寫描述。事實上BBC的標題是有描述的,上面那副圖只是被我去掉而已。下面那幅圖是有描述,你會發(fā)現(xiàn)基本上都是頭條新聞的詳細敘述,沒有大量的新信息。

headlines-opt

描述包含標題未傳達的信息

如果標題應(yīng)該像上面那樣用關(guān)鍵詞來堆砌,那么描述的意義并不大。因為只閱讀標題也能達到引導文章的效果。

然而,只有標題,或者用這種風格來寫標題不一定是最好的辦法。如果只是簡短的新聞時間,BBC風格是一個不錯的選作。如果是一篇長文章,標簽+圖+描述會更吸引人。

下面這個標題更注重吸引人,然后再用幾行小字寫信息點。圖片可以設(shè)定基調(diào)。

headline

標簽+圖+描述更能深度闡釋文章

從一個小片段了解文章并不困難。用標題抓住眼球,再用描述來闡釋文章,再配圖。這整個小片段給作者更多的空間去告訴讀者信息,并傳遞文章觀點。

那些關(guān)于標題的建議,讓它在網(wǎng)站之外也被理解。因為標題通常出現(xiàn)在搜索結(jié)果、社交媒體、或是其他文章里面。有些作者會做得更多,為這個目的設(shè)計書寫模板。

context

很多作者會嘗試讓標題更容易在其他地方被理解

但是在增添前后文的時候,注意不要增添多余的信息。

上圖的標題就沒有提供足夠前后文,因為在網(wǎng)頁設(shè)計里面,多欄式的版面可以出現(xiàn)在首頁、菜單、文章頁……并不局限于表格。所以,“表格可用性”這個額外增添的解釋,就是脫離了原文。其實不一定增添這樣一個東西,因為看文章的人大多知道這是在說什么。

搜索引擎的開發(fā)者知道,如果不能給出用戶想要的搜索結(jié)果,用戶就不會再用它了。所以他們會不斷地提升結(jié)果的相關(guān)性,加上一段描述、圖,改進算法——這些都是添加前后文的做法。如果一個標題出現(xiàn)在另一篇文章的的推薦閱讀里面,文章本身就會提供前后文語境。至于社交媒體,一個人推薦的標題,關(guān)注他的人也不會不知道他在說什么。

總結(jié)

信息架構(gòu)就是結(jié)構(gòu)化、標簽化內(nèi)容,這也是導航的基礎(chǔ)。設(shè)計師可有效地簡化網(wǎng)站信息架構(gòu),通過為目標用戶減少或增加導航的選項,同時也要減低這些選項的認知難度。

這篇文章的建議可以總結(jié)為兩個列表,“結(jié)構(gòu)化內(nèi)容”和“便簽化條目”。

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

收集和分類用于導航的元數(shù)據(jù)。

以重要的、可選的、無關(guān)的來給這個元數(shù)據(jù)分組。重要的表示對所有用戶都很重要,可選的表示對部分用戶很重要,無關(guān)的表示對目標用戶不重要。

在第一個層級展示一個重要類別。

如果第二層級的內(nèi)容不多,那就不再分類;否則,按順序,分層次提供其他重要類別。

所有的重要類別都用完以后,列出所有符合要求的內(nèi)容。

如果剩余內(nèi)容很多,可以在一個層次里面使用所有的可選類別。

如果可選類別互斥,那就再增添一個層次。如果可選類別可以合并,那就使用動態(tài)過濾器。

便簽化條目

如果大家都懂標簽的意思,那就可以直接用。盡量保持簡潔明了。 可以在首頁和分類頁加數(shù)字標示內(nèi)容數(shù)量。圖標可以提高選項的識別度。

如果標簽比較專業(yè),那就考慮加圖。用圖標來解釋選項,但是圖標必須要畫得好看,而且易認。不然還是用圖吧。

對于復雜的服務(wù)或產(chǎn)品,要考慮為標簽加圖和描述。描述應(yīng)該有新的信息而不只是復述標簽。同時注意為標題添加前后文時,不要創(chuàng)造多余的信息。

當你簡化完整個架構(gòu),用戶就想要舒適的體驗。因此你要設(shè)計一個容納選項導航菜單,并且交互要舒適。關(guān)于這一點會在Part 2里談到。

相關(guān)閱讀:有效地簡化導航-Part 2:導航系統(tǒng)

本文作者:@Anastasios Karafillis ? 翻譯:@lyzhie ? 來自:smashingmagazine

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. @我的印象筆記

    來自北京 回復
  2. nice

    來自廣西 回復