編輯導(dǎo)讀：用戶在使用導(dǎo)航頁(yè)面的時(shí)候，最關(guān)心的就是效率問(wèn)題，用最短的時(shí)間找到他們想要的東西。導(dǎo)航菜單的層級(jí)越多，消耗的時(shí)間也就越多。本文將以最常見(jiàn)的三級(jí)導(dǎo)航為例，分析如何優(yōu)化導(dǎo)航設(shè)計(jì)，希望對(duì)你有幫助。

當(dāng)用戶使用PC端導(dǎo)航時(shí)，效率是最重要的衡量標(biāo)準(zhǔn)之一，讓用戶更快的找到想要的東西，他們就能在任務(wù)流中節(jié)省更多的時(shí)長(zhǎng)。

效率對(duì)于多個(gè)級(jí)別的導(dǎo)航菜單是至關(guān)重要的，菜單的層級(jí)越多消耗的時(shí)間越長(zhǎng)，最常見(jiàn)的是三級(jí)導(dǎo)航，優(yōu)化三級(jí)導(dǎo)航的高效性最簡(jiǎn)單的方式是優(yōu)化布局。

常見(jiàn)的三級(jí)導(dǎo)航布局包括：上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。級(jí)別標(biāo)注按優(yōu)先級(jí)和層級(jí)排序，研究方向包括導(dǎo)航時(shí)間、用戶猶豫、光標(biāo)移動(dòng)、選擇錯(cuò)誤和用戶偏好。

一、導(dǎo)航時(shí)間

研究表明，左側(cè)導(dǎo)航比頂部導(dǎo)航效率更高，當(dāng)一級(jí)導(dǎo)航和二級(jí)導(dǎo)航分開時(shí)，識(shí)別速度更快，總之：左-上-上、上-左-左排版時(shí)效率最高。

二、用戶猶豫

猶豫是指用戶在將光標(biāo)從一個(gè)導(dǎo)航移動(dòng)到另一個(gè)導(dǎo)航時(shí)猶豫不決思考的時(shí)長(zhǎng)。在所有布局中，左-上-上結(jié)構(gòu)的猶豫值最小，上-左-上猶豫值最大。其中當(dāng)二級(jí)和三級(jí)導(dǎo)航在同一平面時(shí)猶豫值最小。

三、光標(biāo)移動(dòng)

當(dāng)一級(jí)導(dǎo)航在左側(cè)時(shí)，光標(biāo)移動(dòng)較少。一級(jí)和二級(jí)導(dǎo)航分開時(shí)，光標(biāo)移動(dòng)也較少。當(dāng)二級(jí)和三級(jí)導(dǎo)航不在同一方向時(shí)，會(huì)發(fā)生許多光標(biāo)移動(dòng)，反之則光標(biāo)移動(dòng)較少。

左-左-左和上-上-上的光標(biāo)移動(dòng)量最少，上-上-左和上-左-上的光標(biāo)移動(dòng)量最大。這種效果是有意義的，因?yàn)楫?dāng)所有導(dǎo)航都在同一方向時(shí)，用戶就更難將光標(biāo)移到錯(cuò)誤的平面上。

四、選擇錯(cuò)誤

單擊次數(shù)過(guò)多表示選擇錯(cuò)誤。當(dāng)一級(jí)導(dǎo)航在左側(cè)時(shí)，選擇錯(cuò)誤率最低（左側(cè)與頂部相比錯(cuò)誤率減少了80%）。

當(dāng)一級(jí)和二級(jí)導(dǎo)航都在頂部時(shí)，會(huì)出現(xiàn)大量的選擇錯(cuò)誤。上-上-上和上-上-左效率最差，當(dāng)二級(jí)和三級(jí)導(dǎo)航與一級(jí)導(dǎo)航不在同一方向時(shí)，選擇錯(cuò)誤率會(huì)大幅度降低。

五、用戶偏好

大多數(shù)用戶更喜歡一級(jí)導(dǎo)航在左側(cè)，最優(yōu)布局是左-左-左和左-上-上。人們強(qiáng)烈傾向于二級(jí)和三級(jí)導(dǎo)航在同一方向。

六、最佳布局

根據(jù)所有類別的表現(xiàn)，對(duì)每個(gè)布局進(jìn)行總體評(píng)分。性能最好的導(dǎo)航布局是左-上-上，其次是左-左-左。表現(xiàn)最差的兩個(gè)是上-上-左和上-左-上。在兩個(gè)最好之中，左-上-上比左-左-左快17秒左右。

左-左-左慢于左-上-上，因?yàn)楫?dāng)所有菜單都在左側(cè)時(shí)，它要求用戶滾動(dòng)瀏覽項(xiàng)目列表。隨著級(jí)別的擴(kuò)展和深入，用戶必須滾動(dòng)查看更多內(nèi)容，并且無(wú)法再在一個(gè)屏幕上查看所有主要項(xiàng)目類別。但是，左-左-左的好處是用戶可以在每個(gè)屏幕視圖中消費(fèi)更多內(nèi)容。用戶花費(fèi)在導(dǎo)航內(nèi)容屏幕上的時(shí)間少。

總結(jié)：

一級(jí)導(dǎo)航應(yīng)該在左側(cè)而不是頂部（節(jié)省約17秒）。

因?yàn)橐粤斜硎浇M織菜單項(xiàng)使它們更容易掃描。

一級(jí)導(dǎo)航與二級(jí)、三級(jí)導(dǎo)航應(yīng)在不同方向（節(jié)省約23秒）。

因?yàn)橹鞑藛问歉割悇e，它比子類別具有更高的優(yōu)先級(jí)。當(dāng)二級(jí)和三級(jí)與一級(jí)分離時(shí)，它可以清楚地區(qū)分層次結(jié)構(gòu)并防止在同一方向上出現(xiàn)視覺(jué)混亂。

二級(jí)和三級(jí)導(dǎo)航應(yīng)該在同一方向上（節(jié)省約9秒）。

因?yàn)槎?jí)和三級(jí)都是父類的子類，這使得它們更為相關(guān)。將它們放在同一個(gè)平面上，可以使從一個(gè)孩子到另一個(gè)孩子的導(dǎo)航更加直觀和容易理解。

本文由 @UX Talk 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議