有效地簡(jiǎn)化導(dǎo)航-Part 2:導(dǎo)航系統(tǒng)

1 評(píng)論 10679 瀏覽 13 收藏 23 分鐘

小編導(dǎo)讀:怎么才能做出一個(gè)既簡(jiǎn)潔而又具有預(yù)見性的導(dǎo)航?在Part 1里面說,前兩步分別是:組織內(nèi)容,簡(jiǎn)化導(dǎo)航選項(xiàng);解釋這些選擇,降低用戶的認(rèn)知障礙。

然而,我們還需要多做兩步——選擇正確的導(dǎo)航菜單形式,并設(shè)計(jì)出來。本系列 Part 2 將展示第三步和討論哪種導(dǎo)航菜單適應(yīng)哪些內(nèi)容。

界面上的導(dǎo)航菜單都為了給用戶提供瀏覽內(nèi)容的導(dǎo)航選項(xiàng)。這不包括,文章或商品頁面里面的超鏈接,因?yàn)樗鼈兊闹饕饔檬橇髁?,而不是?dǎo)航。

主(傳統(tǒng)的)導(dǎo)航和次級(jí)(備用的)導(dǎo)航之間是有區(qū)別的,但很難精確界定。有人說主導(dǎo)航主要是通過點(diǎn)擊、懸停來選擇或?yàn)g覽元素?fù)?jù)類型,而次級(jí)導(dǎo)航在其中某方面有缺失。

傳統(tǒng)的導(dǎo)航菜單

傳統(tǒng)的導(dǎo)航菜單有以下5種類型,從簡(jiǎn)單到復(fù)雜排序

1. 菜單欄

2. 常規(guī)下拉菜單

3. 多欄下拉菜單 (Mega-menu)

4. 分頁

5. 動(dòng)態(tài)過濾器

當(dāng)然還存在更復(fù)雜的混合型方案,但是所有混合型導(dǎo)航都能拆解成以上5個(gè)類型。現(xiàn)在問題是什么時(shí)候該選擇哪種類型。

就像 Part 1說的,設(shè)計(jì)師用3種方式來解釋導(dǎo)航選項(xiàng):標(biāo)簽;標(biāo)簽+圖;標(biāo)簽+圖+描述。為了降低用戶的認(rèn)知障礙,設(shè)計(jì)師應(yīng)為目標(biāo)用戶提供提供足夠的信息來讓他們理解這些選項(xiàng)。

下面這條經(jīng)驗(yàn)法則 (rule of thumb) 可以幫你決定什么時(shí)候選用哪條規(guī)則:越少的選項(xiàng),需要解釋的就越少,所以導(dǎo)航應(yīng)該盡可能簡(jiǎn)潔。

為什么有些 widget 更易用,什么時(shí)候應(yīng)該選擇這個(gè)而不是那個(gè)…… 首先仔細(xì)看下這5種導(dǎo)航菜單。

菜單欄

幾乎每個(gè)網(wǎng)站一個(gè)橫向或豎直的欄來容納頂級(jí)類別。

最基本的導(dǎo)航——一個(gè)橫向或豎直的欄

建議

最重要或最頻繁被訪問的欄目或類別應(yīng)該放到這個(gè)導(dǎo)航欄里面。

解釋

一個(gè)導(dǎo)航欄是最簡(jiǎn)單的導(dǎo)航形式。這個(gè)導(dǎo)航欄里面的欄目或類別都是全局性的,可以直接被看見及訪問。相比之下,用回會(huì)懸停在一個(gè)下拉菜單或等待分頁加載要訪問的選項(xiàng)。

問題

導(dǎo)航欄(橫向或豎直)只能放下一小撮欄目,而且還受限于屏幕寬度和方向,它會(huì)占據(jù)本應(yīng)該顯示主要內(nèi)容的空間。

下面的截圖中,會(huì)看到橫向的導(dǎo)航也是很好用,它只占據(jù)一行空間。為了把它放到更小尺寸的屏幕里面,設(shè)計(jì)師把導(dǎo)航堆砌在行里面,然而這樣就會(huì)把主要內(nèi)容壓下去,用戶就需要多滾動(dòng)幾次。

navigation-stack-preview-opt

多列的導(dǎo)航就會(huì)變得很難用。

在寬屏中,豎直的導(dǎo)航適用于更多的菜單欄目,但它有另一個(gè)缺點(diǎn)。它占據(jù)的豎直空間本可以更高效地展示主要內(nèi)容,文章、視頻、商品信息……下面我展示并對(duì)比它們的效果。

03-navigation-bar-500

豎直導(dǎo)航會(huì)束縛內(nèi)容在寬屏中的展示效果。

這就是為什么下拉、浮動(dòng)菜單更適合多欄目。它們可以根據(jù)需要來顯示額外的欄目,把舞臺(tái)讓給內(nèi)容。

常規(guī)下拉菜單

下拉、浮動(dòng)菜單,被觸發(fā)的時(shí)候,就會(huì)出現(xiàn)在內(nèi)容上面。它的條目都是豎直堆砌在一列里面,由文字或文字+圖標(biāo)組成。

04-dropdown-menu-500

下拉菜單把所有條目豎直堆砌在一列里面。

建議

如果欄目可以很好地用文字表達(dá),并且不會(huì)太長(zhǎng),一個(gè)常規(guī)下拉菜單是最簡(jiǎn)單而又有效的方案。

解釋

與多欄下拉菜單相比,常規(guī)下拉菜單有如下優(yōu)點(diǎn):

快速加載

多欄下拉菜單需要更多的空間,而常規(guī)下拉菜單只需要少量文字。多欄下拉菜單還會(huì)干擾用戶,至少也會(huì)降低他們的瀏覽速度,因?yàn)樗麄冃枰ㄙM(fèi)時(shí)間來搞清楚這個(gè)布局。相比之下,一個(gè)簡(jiǎn)短的豎直列表就很適合快速閱讀和理解。

問題

如果菜單太長(zhǎng),整件事就會(huì)變得很奇葩。一個(gè)長(zhǎng)的豎直下拉列表會(huì)被瀏覽器窗口切掉一部分,這就需要用戶不斷滾動(dòng)。有兩個(gè)方法可以處理這個(gè)問題。

把表弄成子類別。但這個(gè)方法,如果交互設(shè)計(jì)得不恰當(dāng)?shù)脑挘瑥囊粋€(gè)子菜單到另一個(gè)子菜單的導(dǎo)航會(huì)讓人沮喪。這個(gè)問題會(huì)在本系列的 Part 3 中說到。

第二個(gè)方法就是使用適合屏幕方向的多列下拉菜單。

05-dropdown-menu-500

如果屏幕空間是決定性因素,讓菜單適應(yīng)屏幕方向不錯(cuò)的變通方案。

多欄下拉菜單 (MEGA-MENUS)

有一種很特別的下拉菜單叫做多欄下拉菜單。多欄下拉菜單就是下拉或浮動(dòng)菜單,但它并不是用一列條目堆砌起來,而是用圖片、印刷上的層級(jí)、不同的圖層來顯示選項(xiàng)。

06-mega-menu-500

多欄下拉菜單就是一個(gè)更大、更復(fù)雜的下拉菜單。

建議

如果選項(xiàng)需要文字+圖片,那多欄下拉菜單就是個(gè)好選擇。

解釋

常規(guī)下拉菜單不能提供這樣的空間或形象化的選項(xiàng)。不管是常規(guī)還是多列,與分頁相比都會(huì)有以下的優(yōu)點(diǎn)

快速加載

降低認(rèn)識(shí)障礙。分頁的話,用戶就會(huì)思考“哪個(gè)是廣告?”,“哪個(gè)才是真正的內(nèi)容?”,“導(dǎo)航在哪?”……下拉菜單只會(huì)出現(xiàn)在導(dǎo)航,并且出現(xiàn)在鼠標(biāo)光標(biāo)附近。

問題

即使是多列下拉菜單,空間也是有限的。如果有很多很多欄目,那分頁就不可避免。

分頁

第四種顯示欄目、類別的方法就是用一個(gè)獨(dú)立頁面。

07-separate-pages-500

分頁就可以容納很多子類別。

建議

如果需要文字+圖片+描述,分頁就是最好的。

解釋

用多列下拉菜單來容納這些內(nèi)容也是可行的,但也只有描述很短的時(shí)候。

問題

把用戶帶到一個(gè)分頁來瀏覽導(dǎo)航選項(xiàng),而不是內(nèi)容,這并不是一個(gè)優(yōu)雅的方案。同時(shí)用戶也會(huì)被帶離當(dāng)前頁面的語境。但如果多列下拉菜單不足以容納這么多的選項(xiàng),分頁就是最好的方案。

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

動(dòng)態(tài)過濾器是最復(fù)雜,最強(qiáng)大的方案,依靠用戶的組合他們想要看的內(nèi)容流。

08-filter-500

復(fù)雜而強(qiáng)大,動(dòng)態(tài)過濾器讓用戶可一組織他們需要的內(nèi)容。

很多網(wǎng)站只有前3種導(dǎo)航菜單,動(dòng)態(tài)過濾器就沒有單獨(dú)出現(xiàn)。而是作為一個(gè)選項(xiàng)附加在主導(dǎo)航上。

Kmart (下圖)以下拉菜單開始導(dǎo)航步驟,常規(guī)和多列都有。在下一個(gè)層級(jí),使用分頁來展示產(chǎn)品類別。當(dāng)用戶導(dǎo)航至某個(gè)系里面,他們就會(huì)看見一個(gè)動(dòng)態(tài)過濾器。用以精準(zhǔn)搜索。

09-dynamic-filter-500

動(dòng)態(tài)過濾器經(jīng)常會(huì)附加在主導(dǎo)航上。

建議

符合在Part 1里面討論的元數(shù)據(jù)類別。可以這樣說,前3種導(dǎo)航適合重要和互斥類別,動(dòng)態(tài)過濾器適合把類別整合在一起。

解釋

動(dòng)態(tài)過濾器的有點(diǎn)就是可以讓用戶選擇,并及時(shí)改變值。而不是在不同導(dǎo)航層級(jí)里面前進(jìn)、后退,用戶可以停在一個(gè)層級(jí),動(dòng)態(tài)地整合值,直到結(jié)果符合他們的要求。

動(dòng)態(tài)過濾器通常是豎直的并不是一個(gè)缺點(diǎn),因?yàn)檫^濾結(jié)果并不是前面所說的“內(nèi)容”。他們?nèi)匀皇菍?dǎo)航的一部分,左邊選擇的值和右邊及時(shí)反饋的結(jié)果是有動(dòng)態(tài)聯(lián)系的。

問題

動(dòng)態(tài)過濾器很強(qiáng)大,也很復(fù)雜。它們占據(jù)更多的空間,需要更多的時(shí)間來加載。用戶需要去分析這些不同的元素,包括過濾器、結(jié)果、結(jié)果排序、展示模式,這些使動(dòng)態(tài)過濾器在電腦上造成挑戰(zhàn),就更別說手機(jī)上。如果更簡(jiǎn)單的導(dǎo)航就可以完成工作,就不要使用它。

備用的導(dǎo)航

幾乎所有的網(wǎng)站都會(huì)選用其中一種傳統(tǒng)導(dǎo)航作為它們的主導(dǎo)航。然而,很多還會(huì)以備用導(dǎo)航系統(tǒng)作為補(bǔ)充。這么流行的方式也是很重要的。

這里有四種基本的形式:

搜索

A-Z的索引

標(biāo)簽

搜索

搜索讓用戶從在各個(gè)導(dǎo)航層級(jí)中抽離出來,把他們直接帶到目的地。其中的不同點(diǎn)在于,頁面的標(biāo)題已經(jīng)由用戶手動(dòng)設(shè)定好了。

10-search-500

搜索是在不同層級(jí)中瀏覽想要的內(nèi)容的快捷方式

設(shè)計(jì)師會(huì)在所有的頁面上應(yīng)用標(biāo)簽、關(guān)鍵字系統(tǒng),來解釋用戶和搜索引擎之間的誤差,例如錯(cuò)別字、同義詞、內(nèi)容不同的概念模型。換言而知,搜索引擎會(huì)嘗試猜測(cè)用戶究竟想要什么。

建議

提供搜索作為主導(dǎo)航的補(bǔ)充,并不等于作為主導(dǎo)航。

解釋

用戶是否以搜索為主導(dǎo),關(guān)于這點(diǎn)不同的研究有不同的結(jié)論。當(dāng)然,這也會(huì)受搜索引擎是如何設(shè)計(jì)、展現(xiàn)等因素影響,甚至導(dǎo)航的設(shè)計(jì)太差也會(huì)增加搜索的占有率??傊阉鞑⒉皇鞘滓桨?。

盡管開發(fā)者作出各種努力來避免錯(cuò)誤,搜索成功率還是很低。原因是每個(gè)網(wǎng)站都會(huì)有自己的標(biāo)簽、分類方案、命名習(xí)慣。用戶不知道這些細(xì)節(jié),所以它們經(jīng)常猜測(cè)性地填寫搜索請(qǐng)求,這是一個(gè)累贅而又不確定的過程,導(dǎo)致很多人只有一、兩次搜索功能。在移動(dòng)設(shè)備上尤其明顯,因?yàn)樘顚懰阉髡?qǐng)求的體驗(yàn)更不舒服。

另外一個(gè)問題就是,即使搜索結(jié)果都是相關(guān),用戶也不確定它的完整性?!皶?huì)不會(huì)因?yàn)樗阉饕媲饬宋业乃阉髡?qǐng)求而導(dǎo)致少了些什么?”……傳統(tǒng)的導(dǎo)航,確立并展現(xiàn)所有類別,同時(shí)展示所有相關(guān)條目,提供用戶所瀏覽的確定信息。

另外,還會(huì)經(jīng)常討論搜索的轉(zhuǎn)化率比導(dǎo)航菜單高。其實(shí)這可以被解釋——瀏覽和搜索的區(qū)別。瀏覽型的用戶會(huì)用菜單,而很少?zèng)Q定買些舍呢么,那些知道自己想買什么的用戶,就會(huì)直接輸入并搜索。

然而,搜索能夠更有效地找到特定商品,它并不那么流行。

11-search-vs-navigation-500

用戶會(huì)傾向于使用傳統(tǒng)導(dǎo)航,即使是在找特定商品的時(shí)候。

用搜索的問題是,不同的詳細(xì)配置、不同的地區(qū)命名或型號(hào),很難說出產(chǎn)品的確切名稱?!癎S-50 or G-150?”,“這個(gè)有額外的電池?”通過動(dòng)態(tài)過濾器,用戶可以指定他們想要的功能,而不需要想起具體型號(hào)、編碼。

另外一個(gè)問題就是,搜索會(huì)妨礙用戶尋找相關(guān)條目,如果用戶找到他想要的確切條目,他就不會(huì)去看其他。而使用動(dòng)態(tài)過濾器,用戶就會(huì)看到相關(guān)的條目,包括一些功能更多或價(jià)格更低的物品。

給搜索引擎添加動(dòng)態(tài)過濾器也是可的,這可以結(jié)合兩種的有點(diǎn)。

總的來說,搜索引擎,特別是有復(fù)雜的功能和算法,可以提供很好的結(jié)果,但是它本身存在的問題使得它還不如一個(gè)經(jīng)過精心設(shè)計(jì)的傳統(tǒng)菜單。這就是為什么把搜索是作為一個(gè)備選方案,它并不是導(dǎo)航的核心。

搜索在用戶生成內(nèi)容 (user-generated content) 的本地應(yīng)用能更好地工作,因?yàn)橛脩糁浪麄兠^、標(biāo)記過的內(nèi)容。

A – Z的索引 (A – Z index)

一個(gè) A – Z 的索引包括網(wǎng)站上面的所有條目,并按字母順序排列。

12-index

A – Z 的索引按字母順序排列網(wǎng)站的所有內(nèi)容。

建議

不要優(yōu)先考慮 A – Z的索引。只列出所有的類別頁面,比列出上千個(gè)獨(dú)立頁面要有用。

解釋

A – Z的索引的好處在于大家都知道怎么按字母順序來導(dǎo)航。但也存在3個(gè)問題。

第一,A – Z的索引很適合文字,不適用于圖片和描述,有很多時(shí)候圖片和描述是不可或缺。

第二,選取符合用戶期望的詞匯也不簡(jiǎn)單。由于地域、年代、術(shù)語的關(guān)系,可能會(huì)造成用戶在錯(cuò)誤的地方尋找想要的條目。唯一的變通方案就是,包含同義詞。在傳統(tǒng)導(dǎo)航中,同義詞并不是一個(gè)大問題,因?yàn)橛脩舨粫?huì)同時(shí)面對(duì)大量選項(xiàng)。

第三,A-Z的索引,就像搜索那樣,也會(huì)妨礙用戶發(fā)現(xiàn)相關(guān)條目。例如,找“eggs and beans”(…蛋和豆),他們就只能得到蛋和豆。在傳統(tǒng)導(dǎo)航里面,用戶還會(huì)見到其他早餐,因?yàn)樗麄兊膶?dǎo)航線路是“早餐”->“蛋和豆”。

網(wǎng)站地圖 (site maps)

網(wǎng)站地圖通過主標(biāo)題、副標(biāo)題來展示網(wǎng)站的結(jié)構(gòu)。

13-map-500

網(wǎng)站地圖展示網(wǎng)站結(jié)構(gòu)。

建議

sitemap.xml文檔可以幫助搜索引擎索引索引網(wǎng)站。但是不應(yīng)該把它視作導(dǎo)航手段。

解釋

網(wǎng)站地圖通常只包括文字,但是用戶需要的是圖標(biāo)、圖片、藐似來理解選項(xiàng)。網(wǎng)站地圖可以包含這些元素,不過這會(huì)加劇另一個(gè)問題。網(wǎng)站地圖通常會(huì)一次性顯示所有內(nèi)容,并不提供篩選。這就會(huì)影響用戶瀏覽這些內(nèi)容、獲取信息。

標(biāo)簽 (tags)

標(biāo)簽,可以是關(guān)鍵字,并不需要有父集、子集類別。通常出現(xiàn)在文章末尾。

14-tags

通常會(huì)帶上“More about”的標(biāo)簽

建議

基于標(biāo)簽的系統(tǒng)在調(diào)用額外信息方便做得很好,即便如此,仍沒傳統(tǒng)的基于類別系統(tǒng)做得好。

解釋

在所有的備用導(dǎo)航中,標(biāo)簽最接近傳統(tǒng)導(dǎo)航。畢竟,標(biāo)簽本質(zhì)上就是創(chuàng)造元數(shù)據(jù),信息架構(gòu)的第一步,傳統(tǒng)導(dǎo)航的基礎(chǔ)。然而每篇文章都有一串標(biāo)簽,你很快就會(huì)得到成千上萬個(gè)標(biāo)簽。

這就是為什么為標(biāo)簽分類這么重要。把這些標(biāo)簽整理成父類別、子類別,設(shè)計(jì)師就能把一大堆標(biāo)簽結(jié)構(gòu)化成一組組相關(guān)的信息。包含這些類別的傳統(tǒng)導(dǎo)航可以讓用戶跳過不想要的組別,直接瀏覽想要的信息。

很多以內(nèi)容為基礎(chǔ)的網(wǎng)站,會(huì)用混合導(dǎo)航 (hybrid navigation) 來代替?zhèn)鹘y(tǒng)的菜單。這些分類標(biāo)簽一般很粗略,依靠其他的導(dǎo)航模型,如外部和內(nèi)部的搜索引擎、feeds、社交媒體鏈接。這類系統(tǒng)可以把用戶帶到想看的文章,但這很難讓用戶找到想要的一類文章。為了解決這個(gè)問題,一些設(shè)計(jì)師簡(jiǎn)單地把他們歸結(jié)為一系列關(guān)鍵字——“Barack Obama,” “Democrats,” “Republicans,” “health care,” “shutdown.” 用戶訪問這些標(biāo)簽來瀏覽他們感興趣的相關(guān)文章。

在傳統(tǒng)的導(dǎo)航,用戶會(huì)按相關(guān)的關(guān)鍵字來做導(dǎo)航——News → Politics → US → Domestic policy → Health care。在這個(gè)案例中,用戶會(huì)對(duì)這篇文章很感興趣,因?yàn)樗撌隽嗣绹t(yī)保系統(tǒng),而不是因?yàn)樗岬健癇arack Obama,” “Democrats,” “Republicans,” “shutdown.” 訪問父類別就能查看相關(guān)文章。

15-tags-500

傳統(tǒng)基于層級(jí)的菜單,是最精準(zhǔn)的導(dǎo)航類型。

基于標(biāo)簽的系統(tǒng),如果在社交媒體和搜索引擎的補(bǔ)充下,會(huì)變得十分有效。但是它作為一種導(dǎo)航方法,像釣魚,而不是目的性強(qiáng)的搜索。同時(shí),用戶不一定依賴搜索引擎、外部鏈接來瀏覽網(wǎng)站。他們更傾向在首頁尋找信息,所以經(jīng)過設(shè)計(jì)的傳統(tǒng)菜單還是最高效的方法。

結(jié)論

當(dāng)你要選擇恰當(dāng)?shù)膶?dǎo)航方式,底線是很明確的:盡可能少選項(xiàng),盡可能用簡(jiǎn)短的信息來解釋它們,盡可能簡(jiǎn)潔的導(dǎo)航。

最大的問題在于是否或怎么使用備用的導(dǎo)航,作為傳統(tǒng)導(dǎo)航的補(bǔ)充。

備用的方案不應(yīng)該是高成本的。而它們本身又有缺點(diǎn),以至于它們不能成為主導(dǎo)航系統(tǒng)。此外,用戶一般不會(huì)使用這些備用方案,除非主導(dǎo)航不起作用。

所以,與其投入大量努力去改進(jìn)、提升備用導(dǎo)航,還不如去設(shè)計(jì)一個(gè)好的主導(dǎo)航。這樣就不需要次級(jí)導(dǎo)航的出現(xiàn)。

這篇文章的建議都在下面總結(jié)了一遍。

選用傳統(tǒng)導(dǎo)航

一個(gè)豎直的導(dǎo)航欄并不會(huì)比橫向的差,但他會(huì)分散對(duì)主內(nèi)容的注意力,因?yàn)樗蛢?nèi)容出現(xiàn)在同一塊位置。一個(gè)橫向?qū)Ш綑诟m合頂級(jí)類別,只要條目可以放在一行里面。如果一行不夠的話,就使用下拉菜單或分頁,而不是簡(jiǎn)單地把它弄成豎直導(dǎo)航。

如果文字就足以解釋選項(xiàng),常規(guī)下拉菜單就足夠。把長(zhǎng)的列表分割成次級(jí)類別,或者選用適應(yīng)屏幕方向的多欄下拉菜單。

如果需要文字+圖片,選用多欄下拉菜單。

如果需要文字+圖片+描述,那就使用分頁。

上面這些對(duì)主要、互斥可選類別都很有效。如果可選類別可以合并,那就使用附加在傳統(tǒng)菜單上的動(dòng)態(tài)過濾器。

選用備用導(dǎo)航

如果用戶知道他們想找的具體條目,搜索或 A – Z 索引就很好用。然后它們都有礙于發(fā)現(xiàn)相關(guān)條目,不要把它們看得比傳統(tǒng)導(dǎo)航更重要。

如果分類內(nèi)容的成本不會(huì)太高的話,基于標(biāo)簽的系統(tǒng)是一個(gè)很好的方案。不過它需要社交媒體和搜索引擎的支援。

相關(guān)閱讀:有效地簡(jiǎn)化導(dǎo)航-Part 1:信息架構(gòu)

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

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App