產(chǎn)品經(jīng)理,你真的了解web導(dǎo)航么?
本文作者依據(jù)工作中實(shí)踐的所思所想,并結(jié)合案例等分享了web導(dǎo)航相關(guān)知識(shí),供大家一同參考和學(xué)習(xí)。
上次寫(xiě)了一篇概述B端產(chǎn)品經(jīng)理的三項(xiàng)基本功的文章(B端產(chǎn)品經(jīng)理要掌握的硬核基本功)后,很多朋友私信說(shuō)想讓我寫(xiě)寫(xiě)導(dǎo)航,想來(lái)網(wǎng)上跟導(dǎo)航有關(guān)的文章也比較少,這次就聊聊web導(dǎo)航,也讓各位產(chǎn)品經(jīng)理多一個(gè)參考。
我一直都認(rèn)為產(chǎn)品經(jīng)理是一個(gè)非常專(zhuān)業(yè)的職業(yè),很多事情都有一套方法論,導(dǎo)航設(shè)計(jì)也不例外,本文既然要詳細(xì)聊聊導(dǎo)航,那就得把跟導(dǎo)航有關(guān)的所有事情都聊清楚,各位看官不要急,我們先從信息的最初來(lái)源——元數(shù)據(jù)講起。
一、從信息元數(shù)據(jù)說(shuō)起
元數(shù)據(jù)這個(gè)概念相信所有PM都不陌生,在大家的潛意識(shí)里,好像元數(shù)據(jù)這個(gè)玩意是后端開(kāi)發(fā)才需要了解的。
但是我認(rèn)為,一個(gè)PM應(yīng)該比開(kāi)發(fā)更了解元數(shù)據(jù),不是了解各個(gè)接口的每行代碼如何寫(xiě),而是要了解這個(gè)系統(tǒng)有現(xiàn)在有哪些數(shù)據(jù),是如何組織的,將來(lái)要有哪些數(shù)據(jù)?
元數(shù)據(jù)是信息的信息,可以理解為一塊塊磚,在搭建一個(gè)系統(tǒng)的信息架構(gòu)時(shí),每一處地方都需要這一塊塊不同的磚來(lái)填充.
元數(shù)據(jù)主要分為三大類(lèi)——固有性元數(shù)據(jù)、管理型元數(shù)據(jù)、描述性元數(shù)據(jù)。
- 固有性元數(shù)據(jù)是指和信息構(gòu)成有關(guān)的數(shù)據(jù),比如如一條任務(wù)的ID,一個(gè)視頻文件的大小。
- 管理性元數(shù)據(jù)是指與信息處理方式有關(guān)的數(shù)據(jù),比如一條申請(qǐng)的審批狀態(tài),編輯人賬號(hào)名等。
- 描述性元數(shù)據(jù)是指對(duì)信息本質(zhì)進(jìn)行描述的數(shù)據(jù),很多時(shí)候以標(biāo)簽的形式展現(xiàn),比如你在B站上搜索“騷”,會(huì)出現(xiàn)很多跟“洪世賢”有關(guān)的視頻,說(shuō)明在B站的元數(shù)據(jù)中,“洪世賢”的本質(zhì)是“騷”。
為了讓大家更好的理解三種元數(shù)據(jù)區(qū)別,我舉一個(gè)例子,請(qǐng)看下圖。
上圖是我去年在重慶北站接K總時(shí)用手機(jī)拍的照片,左邊可以很清晰的看出照片的三類(lèi)元數(shù)據(jù),如果這張照片被上傳到攝影論壇,一個(gè)用戶(hù)要是想找到它,很可能到火車(chē)站標(biāo)簽下尋找,或者直接檢索重慶火車(chē)站,而不是去用ID”6781″去檢索。
這也說(shuō)明了一個(gè)事實(shí):大家更愿意去使用描述性元數(shù)據(jù)檢索,而不是難以記憶和識(shí)別的固有性元數(shù)據(jù)。
元數(shù)據(jù)是確定信息組織形式最關(guān)鍵的信息,可以把元數(shù)據(jù)看成一個(gè)個(gè)標(biāo)簽,不僅能夠?yàn)楫a(chǎn)品經(jīng)理提供分類(lèi)的依據(jù),還可以很方便的根據(jù)元數(shù)據(jù)做信息關(guān)聯(lián)。
了解你的元數(shù)據(jù),是設(shè)計(jì)導(dǎo)航的前提。
二、用戶(hù)是怎樣尋找信息的
導(dǎo)航的目的是幫助用戶(hù)查找信息,那么你有沒(méi)有想過(guò)一個(gè)問(wèn)題——用戶(hù)究竟是怎么查找信息的呢?
一般來(lái)說(shuō),用戶(hù)查找信息有以下四個(gè)場(chǎng)景。
場(chǎng)景一:用戶(hù)知道想要什么,且知道如何找
對(duì)于C端產(chǎn)品來(lái)說(shuō),由于同類(lèi)產(chǎn)品對(duì)市場(chǎng)的教育,讓用戶(hù)接觸到你的產(chǎn)品時(shí)就知道如何操作,但是對(duì)于B端產(chǎn)品,基本不會(huì)出現(xiàn)一上手就會(huì)用的情況。
對(duì)于該場(chǎng)景下的用戶(hù),其實(shí)他們已經(jīng)可以很熟練的使用系統(tǒng)了,此時(shí)在首頁(yè)提供一個(gè)高頻頁(yè)面入口或者一個(gè)搜索更能讓這類(lèi)用戶(hù)心花怒放。
場(chǎng)景二:用戶(hù)知道想要什么,但不知道如何找
這種場(chǎng)景經(jīng)常會(huì)出現(xiàn),比如用戶(hù)想看知道自己的消費(fèi)記錄,但是不太確定是在哪個(gè)頁(yè)面找。
再舉一個(gè)更直觀的例子,你想要買(mǎi)一個(gè)能頂餓又美味的零食,你該如何鍵入關(guān)鍵詞,或者你該在哪個(gè)頁(yè)面找到它。
這類(lèi)情況就需要通過(guò)優(yōu)化信息元數(shù)據(jù),增加更多的描述性元數(shù)據(jù)來(lái)解決,淘寶的很多面包商品都有頂餓的標(biāo)簽,直接搜索“頂餓美味”就可以搜出來(lái)。
當(dāng)然,同時(shí)也要注重導(dǎo)航架構(gòu)的優(yōu)化,如果你的很大一部分用戶(hù)都在搜“頂餓美味”,你是否考慮將頂餓美味做為食品下的一個(gè)子類(lèi)目呢?
場(chǎng)景三:用戶(hù)不知道自己想要什么
這種場(chǎng)景在B端很少出現(xiàn),畢竟使用B端產(chǎn)品的人都是有著明確目的的。但是在C端卻經(jīng)常出現(xiàn),比如很多人在逛淘寶的時(shí)候可能僅僅是無(wú)聊,而不是因?yàn)樽约合胭I(mǎi)東西。
為了應(yīng)對(duì)這類(lèi)用戶(hù),就需要搬出C端大殺器——關(guān)聯(lián)導(dǎo)航,就是說(shuō)在瀏覽某一頁(yè)面時(shí),會(huì)給你推薦相關(guān)的商品或者算法算出你可能會(huì)感興趣的商品,有時(shí)候也叫關(guān)聯(lián)推薦。
關(guān)聯(lián)導(dǎo)航可以使用描述性元數(shù)據(jù)實(shí)現(xiàn),將有相同標(biāo)簽的商品在商品詳情頁(yè)做推薦展示。
場(chǎng)景四:再次搜索
再次搜索是指用戶(hù)可能想返回去找到他們過(guò)去發(fā)現(xiàn)的某些東西,這個(gè)其實(shí)很好解決,無(wú)非就是一個(gè)瀏覽記錄和合理的結(jié)構(gòu)導(dǎo)航設(shè)置罷了,這個(gè)很多產(chǎn)品都實(shí)現(xiàn)了,有一套比較成熟的解決方案。
只要抓住了以上這四類(lèi)場(chǎng)景,在設(shè)置導(dǎo)航時(shí),充分考慮用戶(hù)在每個(gè)頁(yè)面會(huì)遇到哪些問(wèn)題,針對(duì)問(wèn)題修改導(dǎo)航的邏輯與布局,導(dǎo)航設(shè)計(jì)其實(shí)是一件很簡(jiǎn)單的事情。
三、結(jié)構(gòu)導(dǎo)航、關(guān)聯(lián)導(dǎo)航與可用性導(dǎo)航
好了,講了這么多,終于說(shuō)到導(dǎo)航了,導(dǎo)航分為三類(lèi)——結(jié)構(gòu)性導(dǎo)航、關(guān)聯(lián)導(dǎo)航、可用性導(dǎo)航。下圖可以很直觀的看出三類(lèi)導(dǎo)航的區(qū)別。
1. 結(jié)構(gòu)性導(dǎo)航
結(jié)構(gòu)性導(dǎo)航表示了網(wǎng)站的層次結(jié)構(gòu),有全局導(dǎo)航和局部導(dǎo)航兩種,一般展示網(wǎng)頁(yè)主體的信息架構(gòu),告訴用戶(hù)這個(gè)網(wǎng)站有什么,結(jié)構(gòu)性導(dǎo)航是一個(gè)網(wǎng)站最重要的導(dǎo)航。
全局導(dǎo)航往往都是一級(jí)導(dǎo)航,在大多數(shù)頁(yè)面都會(huì)出現(xiàn),方便用戶(hù)跳轉(zhuǎn)以及隨時(shí)查看這個(gè)網(wǎng)站有哪些內(nèi)容。
局部導(dǎo)航和全局導(dǎo)航是有層級(jí)關(guān)系的,局部導(dǎo)航幫助用戶(hù)瀏覽到更加特定的頁(yè)面,有的產(chǎn)品也會(huì)把全部的下級(jí)導(dǎo)航都放在全局導(dǎo)航上,鼠標(biāo)畫(huà)上去時(shí)有個(gè)下拉的hover效果,這個(gè)要看具體的業(yè)務(wù)情況。
值得一提的是,全局導(dǎo)航也不是所有頁(yè)面都需要的,比如京東的支付頁(yè)面,在這個(gè)頁(yè)面,產(chǎn)品經(jīng)理只希望用戶(hù)趕快完成支付行為,而不受其他頁(yè)面干擾,所以在這一頁(yè)不應(yīng)該出現(xiàn)全局導(dǎo)航,在這里不支持用戶(hù)跳轉(zhuǎn)到別的地方。
2. 關(guān)聯(lián)導(dǎo)航
關(guān)聯(lián)導(dǎo)航是一種跨越信息架構(gòu)的層次,快速跳轉(zhuǎn)到相關(guān)頁(yè)面的一種導(dǎo)航形式,在B端產(chǎn)品中不多見(jiàn),但是在C端產(chǎn)品中極其常見(jiàn),比如在B站上面看漫威蜘蛛俠的視頻,旁邊就有相關(guān)視頻的推薦。
關(guān)聯(lián)導(dǎo)航有兩個(gè)作用:
一是給用戶(hù)提供下一步的內(nèi)容,當(dāng)用戶(hù)看完這個(gè)視頻后,很可能點(diǎn)擊下一個(gè)視頻,這樣就很有可能把一個(gè)5分鐘的訪問(wèn)行為擴(kuò)大到15分鐘,甚至一個(gè)小時(shí);
另一個(gè)作用是給自己的產(chǎn)品提供了一層“安全網(wǎng)”,如果用戶(hù)對(duì)正在觀看的視頻不感興趣,你覺(jué)得他會(huì)重新回到主頁(yè)再輸入其他關(guān)鍵詞還是會(huì)直接離開(kāi)呢?不要挑戰(zhàn)用戶(hù)的耐性,再給他推薦幾個(gè),留住他的心。
關(guān)聯(lián)導(dǎo)航的實(shí)現(xiàn)可以通過(guò)增加描述性元數(shù)據(jù)來(lái)實(shí)現(xiàn),對(duì)于很多相關(guān)的標(biāo)簽,可以建立受控詞匯表來(lái)進(jìn)行關(guān)聯(lián)。
3. 用性導(dǎo)航
可用性導(dǎo)航是指一些幫助提升網(wǎng)站可用性的功能,不是主要功能,但是一個(gè)也不能少,比如賬戶(hù)信息、網(wǎng)站幫助、操作手冊(cè)等。
這些信息有個(gè)通用的慣例,都是放在網(wǎng)站的右上角,各位產(chǎn)品經(jīng)理在設(shè)計(jì)網(wǎng)站的時(shí)候,要注意跟隨慣例,不要讓用戶(hù)摸不著頭腦。
四、一些導(dǎo)航設(shè)計(jì)小技巧
最后給各位聊聊一些導(dǎo)航設(shè)計(jì)的小技巧,都是我在產(chǎn)品設(shè)計(jì)中積累的經(jīng)驗(yàn),相信能夠讓你在導(dǎo)航設(shè)計(jì)中少踩坑。
1. 一定要明確希望用戶(hù)做什么
在設(shè)計(jì)導(dǎo)航前,產(chǎn)品經(jīng)理應(yīng)當(dāng)好好考慮一下,自己究竟希望用戶(hù)在網(wǎng)站上做什么,希望用戶(hù)四處瀏覽,還是緊盯著手上的任務(wù),不需要其他的干擾。
比如上文說(shuō)到的B站關(guān)聯(lián)導(dǎo)航和京東的支付頁(yè)面,產(chǎn)品經(jīng)理對(duì)用戶(hù)有著不同的行為期望,所以設(shè)計(jì)出了不同的導(dǎo)航。
2. 不要忽視分頁(yè)導(dǎo)航
分頁(yè)導(dǎo)航主要是針對(duì)表單和過(guò)程設(shè)計(jì)的,在表單或者過(guò)程步驟過(guò)多的時(shí)候需要采用此類(lèi)導(dǎo)航,這時(shí)每頁(yè)內(nèi)容展示量以及是否支持跨頁(yè)跳轉(zhuǎn)是考量的關(guān)鍵。
3. B端隱藏導(dǎo)航最好不要超過(guò)兩級(jí)
隨著各種產(chǎn)品的體驗(yàn)越來(lái)越好,現(xiàn)在的用戶(hù)也變得挑剔,無(wú)法忍受體驗(yàn)不好的產(chǎn)品。
如果你細(xì)心觀察,你會(huì)發(fā)現(xiàn)一般的B端產(chǎn)品的隱藏導(dǎo)航一般不超過(guò)兩級(jí),加上展示出來(lái)的全局導(dǎo)航,一共不超過(guò)三級(jí)。
層級(jí)越多,用戶(hù)體驗(yàn)越差,如果迫不得已,可以采用一些手段來(lái)優(yōu)化用戶(hù)體驗(yàn),例如有贊微商城的導(dǎo)航很復(fù)雜,就采用把一二級(jí)導(dǎo)航直接展示出來(lái)的方式來(lái)提升用戶(hù)體驗(yàn)。
4. 水平導(dǎo)航巧用“more”
web端導(dǎo)航有兩種常見(jiàn)的布局形式——水平導(dǎo)航和側(cè)邊導(dǎo)航。
水平導(dǎo)航更方便使用且不會(huì)縮短頁(yè)面寬度,是很多產(chǎn)品都喜歡采用的形式,但是由于屏幕的寬度有限,水平導(dǎo)航無(wú)法展示太多內(nèi)容,這個(gè)時(shí)候就可以使用一個(gè)“more”來(lái)增強(qiáng)水平導(dǎo)航的信息量。
以上是我對(duì)導(dǎo)航設(shè)計(jì)做的一個(gè)整體梳理,篇幅有限,細(xì)節(jié)難免有疏漏,如有問(wèn)題可在評(píng)論區(qū)留言,或者關(guān)注我的公眾號(hào)——pmhenry。
希望每一個(gè)產(chǎn)品經(jīng)理都能設(shè)計(jì)出屬于自己的錦繡藍(lán)圖。
本文由 @王撼宇 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議。
您好,請(qǐng)問(wèn)有關(guān)固有性元數(shù)據(jù)、管理型元數(shù)據(jù)、描述性元數(shù)據(jù)這三個(gè)元素,我是否可以理解為一個(gè)大的標(biāo)簽,在數(shù)據(jù)庫(kù)中,除了ID這類(lèi)唯一標(biāo)識(shí),都是多對(duì)多的關(guān)系呢?
是的
寫(xiě)的很好,受教了
感謝認(rèn)可
很好
我好像在公眾號(hào)搶先看了
關(guān)注公眾號(hào),精彩搶先看
等了這么久終于又更了
7總久等了
收藏
驚現(xiàn)撈叔客串
一般不都是叫撈姐么
nb學(xué)習(xí)了
我是K總,他沒(méi)有去接我,他吹牛的
K總還是健忘
等了這么久終于又更了,這樣催更是不是不太好 ?