從背后的產(chǎn)品邏輯出發(fā),深入理解導(dǎo)航

3 評論 10953 瀏覽 49 收藏 13 分鐘

編輯導(dǎo)語:說到導(dǎo)航想必大家都不陌生,所有的產(chǎn)品基本都離不開當(dāng)導(dǎo)航,產(chǎn)品人要想辦法優(yōu)化導(dǎo)航,而用戶也要通過導(dǎo)航快速的找到想看的東西。那導(dǎo)航的范疇是什么?其背后的產(chǎn)品邏輯是什么?有哪些常見導(dǎo)航結(jié)構(gòu)?本文作者來為我們解答這些疑問。

導(dǎo)航,一個所有產(chǎn)品人都司空見慣的名詞,一個幾乎所有產(chǎn)品都離不開必備結(jié)構(gòu)。包括正在看這篇文章的你和你的產(chǎn)品,還有我,我們都需要一個更好的導(dǎo)航!

做好一個導(dǎo)航就等于做好了產(chǎn)品的一半,但是大家真的理解導(dǎo)航嗎?有沒有認(rèn)真的想過導(dǎo)航起作用的原理呢?

這篇文章從導(dǎo)航背后的產(chǎn)品邏輯出發(fā)幫大家重新認(rèn)識一下導(dǎo)航,通過這篇文章我們可以了解到以下內(nèi)容:

  1. 導(dǎo)航的范疇
  2. 導(dǎo)航起作用的產(chǎn)品邏輯
  3. 常見的導(dǎo)航結(jié)構(gòu)

一、導(dǎo)航的范疇

想做好導(dǎo)航就得先清楚什么是導(dǎo)航,我們先看一下新華詞典對導(dǎo)航的解釋:引導(dǎo)飛行器或船舶沿一定航線從一點運動到另一點的方法。

我們提煉一下關(guān)鍵詞:引導(dǎo),一點運動到另一點。

也就是說能夠?qū)_(dá)到目標(biāo)點起到引導(dǎo)作用的,能幫助你順利的從一個點到達(dá)另一個點的工具就可以稱作為導(dǎo)航。

在我們產(chǎn)品設(shè)計中也是一樣的道理,導(dǎo)航的目的或者說導(dǎo)航存在的根本意義,就是為了讓用戶在功能千千萬或內(nèi)容萬萬千的網(wǎng)站中迅速找到自己想要的。那么只要是有助于實現(xiàn)這一目的的設(shè)計,我們都可以劃分在導(dǎo)航需要考慮的范疇之內(nèi)。

即使你不是導(dǎo)航,但是你會影響到用戶能否迅速便捷的找到自己想要的,在這一刻你就是導(dǎo)航。

那么從產(chǎn)品設(shè)計上哪些設(shè)計會影響到用戶能否迅速便捷的找到自己想要的呢?

答案是:所有用戶看到的都會影響。

用戶想要找一個功能首先要知道這個功能在哪里,這個時候是頁面上文字描述的是不是夠準(zhǔn)確在起作用。假如用戶常用的功能被放在了一個突出顯示的區(qū)域用戶就會更容易找到目標(biāo),這個時候是排版布局夠不夠合理在起作用。

知道自己目標(biāo)的位置之后用戶要一層頁面一層頁面的點進(jìn)去直到目標(biāo)位置,這個時候是層級的控制是否合理、信息結(jié)構(gòu)的處理是否輕重分明在起作用。

用戶在使用過程中還會在不同的目標(biāo)直接來回的切換需要保證切換的順利方便,這個時候是路徑是否清晰、交互引導(dǎo)是否友好在起作用。

我們模擬了一遍用戶使用的具體場景之后會發(fā)現(xiàn),影響用戶能否迅速便捷的找到自己想要的點其實遍布了產(chǎn)品的每一個頁面每一個角落,所以我總結(jié)了一個概念的說法:所見皆導(dǎo)航。

按照場景不同可以將導(dǎo)航的范疇劃分為以下幾個方面:

  1. 文字表達(dá)
  2. 排版布局
  3. 信息結(jié)構(gòu)
  4. 跳轉(zhuǎn)路徑

最后一句話:導(dǎo)航并非只是看得見摸得著的樹狀的分類,分類只是信息結(jié)構(gòu)的一部分,導(dǎo)航更多的代表的是對影響瀏覽效率的產(chǎn)品邏輯的處理。

二、導(dǎo)航背后的產(chǎn)品邏輯

剛才說完了導(dǎo)航的范疇,相信通過對上述內(nèi)容的閱讀大家對導(dǎo)航背后的邏輯也應(yīng)該有了一些理解。

所有設(shè)計都是產(chǎn)品的一部分,最終目的都是為讓用戶使用產(chǎn)品的體驗更好,導(dǎo)航在這方面起到的作用是舉足輕重的。

大家經(jīng)常會遇到一些諸如把導(dǎo)航做成懸浮的、減少一下導(dǎo)航的層級之類的產(chǎn)品優(yōu)化,可能今天改改這個點明天改改那個點,看似每天都在優(yōu)化產(chǎn)品倒不如說是隨著不停暴露出來的問題在手忙腳亂的補(bǔ)漏洞。

原因是這些優(yōu)化都很零散,沒有人思考過他們背后的邏輯是什么、處在什么樣的一個大場景里,是不成體系的,沒有體系也就沒有方向,每天都是遇到問題處理問題而不能提前預(yù)知并且掌握在自己的產(chǎn)品規(guī)劃之內(nèi)。

我們可以一起思考一下當(dāng)用戶打開一個網(wǎng)站時最初心理活動是什么?

導(dǎo)航,用通俗一點的話來說就是幫助用戶找東西。就像逛商場,分為兩種人:有目標(biāo)和無目標(biāo),為了更好的說明導(dǎo)航的作用我們這篇文章只說有目標(biāo)的情況。

清楚的知道自己要買什么但是這個人不一定知道怎么找,所以又分為這三種情況:

  1. 知道怎么找
  2. 不知道怎么找
  3. 中途折回尋找

然后我們分別思考下這三種場景下用戶的心理活動:

1. 知道怎么找

我很清楚商場的商品分類、每個分類的位置,我要找一條最近的路徑直接走過去。

這個心理活動表現(xiàn)在產(chǎn)品使用上就是這樣的:我用過這個產(chǎn)品,知道怎么用,我也知道我的目標(biāo)位置(要操作的功能或要閱讀的文章等),我知道要先去哪個頁面再點哪個button,我希望快速的到達(dá)我的目標(biāo)位置。

于是我們就知道了針對于這種情況該怎么有效的優(yōu)化導(dǎo)航:

1)優(yōu)化產(chǎn)品的信息結(jié)構(gòu)避免層級過深;

2)調(diào)整頁面布局提高常用功能的曝光度。

2. 不知道怎么找

我第一次來商場,并不知道商場里的各種商品是分類擺放的,甚至不確定我要買的東西屬于哪一類。我需要先搞清楚這個商場里的東西都是怎么放的,要找的東西在哪,還要看下地標(biāo)找到過去的路。

這個心理活動表現(xiàn)在產(chǎn)品使用上就是這樣的:我對這個產(chǎn)品很陌生、我得先看下這個產(chǎn)品都能干嘛、我要找的功能有可能在哪一個模塊或者頁面、我怎么操作才能找到這個功能。

于是我們就知道了針對于這種情況有效的優(yōu)化方式是:

1)頁面標(biāo)簽明確與用戶心理預(yù)期一致,我認(rèn)為一把木質(zhì)梳子屬于日常用品類你就不要給它打上木質(zhì)家具的標(biāo)簽;

2)清晰展示產(chǎn)品的框架結(jié)構(gòu),讓用戶對產(chǎn)品的功能范圍一目了然;

3)適當(dāng)?shù)氖褂媒换バЧ麃硪龑?dǎo)用戶快速的學(xué)會使用產(chǎn)品,比如在搜索框旁邊顯示一個放大鏡的圖標(biāo),多數(shù)人一看就明白這里可以搜索。

遵守易懂大于易到達(dá)的原則,用戶對于一個陌生的產(chǎn)品首先要先能看懂第一步從哪里開始、怎么開始,再便捷的操作路徑也需要用戶先知道才會去操作。

3. 中途折回尋找

我現(xiàn)在剛剛吃完了美食,突然想到要買幾件衣服,我得看下去服裝區(qū)的路在哪。

我記得是在二樓,我先看下我現(xiàn)在在幾樓就可以了。但是不巧這個商場設(shè)計的太差了根本沒有標(biāo)注清楚現(xiàn)在的樓層,但是我記得剛進(jìn)來的時候是怎么到那里的,我可以先回到大門口再過去。

這種情況表現(xiàn)在產(chǎn)品使用上就是這樣的:我剛看完了一篇科技類的文章,現(xiàn)在想去看一看教育類的文章,我得看下我現(xiàn)在在哪個分類,怎么過去教育分類。

如果知道返回的路徑的話我能不能直接一步就跳轉(zhuǎn)過去,如果不巧產(chǎn)品的信息結(jié)構(gòu)設(shè)計的很亂,用戶隨便跳幾個頁面就迷路了,用戶很可能會希望先重新返回首頁再找教育分類。

于是我們就知道了針對這種情況有效的優(yōu)化方式是:

  1. 采用懸浮導(dǎo)航:不管用戶在頁面的哪個位置都能快速的通過導(dǎo)航切換到目標(biāo)位置;
  2. 提供相關(guān)推薦:預(yù)測用戶在瀏覽當(dāng)前內(nèi)容或者使用當(dāng)前功能時下一步有可能會采取的動作,并把他放在某個易見的區(qū)域;
  3. 明確用戶的當(dāng)前位置和返回的路徑;
  4. 提供最近瀏覽是一個很好的選擇;
  5. 明確首頁位置,并盡可能的在每個頁面都提供直達(dá)首頁的入口。

清楚了用戶使用產(chǎn)品時的不同情境、在不同情境下的不同需求,才能采取針對性的產(chǎn)品優(yōu)化措施。

我們把所有對導(dǎo)航的需求場景總結(jié)為三類,從用戶的心理活動出發(fā)搞清楚每一類場景背后的需求邏輯。我們會發(fā)現(xiàn)所有需要做的優(yōu)化都有了方向,這樣我們就能把工作做在前邊,提前對產(chǎn)品做好規(guī)劃,效果顯著而且事半功倍。

三、常見的導(dǎo)航結(jié)構(gòu)

這個就是大家普遍認(rèn)為的導(dǎo)航了,有抽屜式、下拉式、列表式,也有頂部布局、左側(cè)布局、底部布局等等表現(xiàn)形式。

其實導(dǎo)航的結(jié)構(gòu)只是導(dǎo)航的外在表現(xiàn)形式,只有先理解了導(dǎo)航背后的產(chǎn)品邏輯才能看懂不同的結(jié)構(gòu)各自的區(qū)別在哪里,從而能根據(jù)自己的產(chǎn)品的實際情況選擇最合適的導(dǎo)航結(jié)構(gòu)。

這部分內(nèi)容工具性就比較強(qiáng)了,沒有多少好理解的,根據(jù)需要選擇合適的拿來用就可以了。

這里只列舉一些常見的導(dǎo)航結(jié)構(gòu)供大家參考:標(biāo)簽導(dǎo)航、舵式導(dǎo)航、抽屜導(dǎo)航、Tab導(dǎo)航、宮格導(dǎo)航、點聚導(dǎo)航、組合導(dǎo)航、列表導(dǎo)航、輪播導(dǎo)航、瀑布導(dǎo)航。

每種導(dǎo)航各有優(yōu)缺,需要大家根據(jù)需要自行判斷或者組合使用,可以從以下幾個方面進(jìn)行考慮:

  1. 我們的主入口有幾個?
  2. 我們是否有特別要突出的入口?
  3. 界面中的次級元素入口多與少?
  4. 界面是否要展示次級界面的部分元素信息?

……

四、結(jié)語

這篇文章是我這些年做產(chǎn)品以來對導(dǎo)航的一些個人思考,在寫這篇文章之前也特意瀏覽過互聯(lián)網(wǎng)三巨頭體系下的一些官方主頁,其中也不乏一些需要優(yōu)化的點。

由此讓我感覺到很多人對導(dǎo)航的理解可能并不是特別的深入,所以特意寫了這篇文章希望能拋磚引玉,對產(chǎn)品路上的小伙伴們有所幫助。

大家有任何不同的看法歡迎在評論區(qū)一起留言討論,謝謝大家閱讀這篇文章!

進(jìn)階提問:

  • 一篇寫VR教育的文章是該歸為科技類文章還是教育類文章呢?
  • 一瓶桃子罐頭應(yīng)該把他放在休閑零食區(qū)?飲料區(qū)?還是水果區(qū)呢?

有興趣的同學(xué)可以在評論區(qū)討論。

 

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享,從本質(zhì)深層思考的部分給我新的認(rèn)知啟發(fā)。

    來自上海 回復(fù)
  2. 建議舉不同導(dǎo)航的詳細(xì)例子,讀者看著更清晰。而不是停留在概念上,也可以適當(dāng)配圖。

    來自福建 回復(fù)
    1. +1

      來自北京 回復(fù)