編輯導語:説到導航想必大家都不陌生,所有的產品基本都離不開當導航,產品人要想辦法優化導航,而用户也要通過導航快速的找到想看的東西。那導航的範疇是什麼?其背後的產品邏輯是什麼?有哪些常見導航結構?本文作者來為我們解答這些疑問。
導航,一個所有產品人都司空見慣的名詞,一個幾乎所有產品都離不開必備結構。包括正在看這篇文章的你和你的產品,還有我,我們都需要一個更好的導航!
做好一個導航就等於做好了產品的一半,但是大家真的理解導航嗎?有沒有認真的想過導航起作用的原理呢?
這篇文章從導航背後的產品邏輯出發幫大家重新認識一下導航,通過這篇文章我們可以瞭解到以下內容:
一、導航的範疇想做好導航就得先清楚什麼是導航,我們先看一下新華詞典對導航的解釋:引導飛行器或船舶沿一定航線從一點運動到另一點的方法。
我們提煉一下關鍵詞:引導,一點運動到另一點。
也就是説能夠對達到目標點起到引導作用的,能幫助你順利的從一個點到達另一個點的工具就可以稱作為導航。
在我們產品設計中也是一樣的道理,導航的目的或者説導航存在的根本意義,就是為了讓用户在功能千千萬或內容萬萬千的網站中迅速找到自己想要的。那麼只要是有助於實現這一目的的設計,我們都可以劃分在導航需要考慮的範疇之內。
即使你不是導航,但是你會影響到用户能否迅速便捷的找到自己想要的,在這一刻你就是導航。
那麼從產品設計上哪些設計會影響到用户能否迅速便捷的找到自己想要的呢?
答案是:所有用户看到的都會影響。
用户想要找一個功能首先要知道這個功能在哪裏,這個時候是頁面上文字描述的是不是夠準確在起作用。假如用户常用的功能被放在了一個突出顯示的區域用户就會更容易找到目標,這個時候是排版佈局夠不夠合理在起作用。
知道自己目標的位置之後用户要一層頁面一層頁面的點進去直到目標位置,這個時候是層級的控制是否合理、信息結構的處理是否輕重分明在起作用。
用户在使用過程中還會在不同的目標直接來回的切換需要保證切換的順利方便,這個時候是路徑是否清晰、交互引導是否友好在起作用。
我們模擬了一遍用户使用的具體場景之後會發現,影響用户能否迅速便捷的找到自己想要的點其實遍佈了產品的每一個頁面每一個角落,所以我總結了一個概念的説法:所見皆導航。
按照場景不同可以將導航的範疇劃分為以下幾個方面:
最後一句話:導航並非只是看得見摸得着的樹狀的分類,分類只是信息結構的一部分,導航更多的代表的是對影響瀏覽效率的產品邏輯的處理。
二、導航背後的產品邏輯剛才説完了導航的範疇,相信通過對上述內容的閲讀大家對導航背後的邏輯也應該有了一些理解。
所有設計都是產品的一部分,最終目的都是為讓用户使用產品的體驗更好,導航在這方面起到的作用是舉足輕重的。
大家經常會遇到一些諸如把導航做成懸浮的、減少一下導航的層級之類的產品優化,可能今天改改這個點明天改改那個點,看似每天都在優化產品倒不如説是隨着不停暴露出來的問題在手忙腳亂的補漏洞。
原因是這些優化都很零散,沒有人思考過他們背後的邏輯是什麼、處在什麼樣的一個大場景裏,是不成體系的,沒有體系也就沒有方向,每天都是遇到問題處理問題而不能提前預知並且掌握在自己的產品規劃之內。
我們可以一起思考一下當用户打開一個網站時最初心理活動是什麼?
導航,用通俗一點的話來説就是幫助用户找東西。就像逛商場,分為兩種人:有目標和無目標,為了更好的説明導航的作用我們這篇文章只説有目標的情況。
清楚的知道自己要買什麼但是這個人不一定知道怎麼找,所以又分為這三種情況:
然後我們分別思考下這三種場景下用户的心理活動:
1. 知道怎麼找我很清楚商場的商品分類、每個分類的位置,我要找一條最近的路徑直接走過去。
這個心理活動表現在產品使用上就是這樣的:我用過這個產品,知道怎麼用,我也知道我的目標位置(要操作的功能或要閲讀的文章等),我知道要先去哪個頁面再點哪個button,我希望快速的到達我的目標位置。
於是我們就知道了針對於這種情況該怎麼有效的優化導航:
1)優化產品的信息結構避免層級過深;
2)調整頁面佈局提高常用功能的曝光度。
2. 不知道怎麼找我第一次來商場,並不知道商場裏的各種商品是分類擺放的,甚至不確定我要買的東西屬於哪一類。我需要先搞清楚這個商場裏的東西都是怎麼放的,要找的東西在哪,還要看下地標找到過去的路。
這個心理活動表現在產品使用上就是這樣的:我對這個產品很陌生、我得先看下這個產品都能幹嘛、我要找的功能有可能在哪一個模塊或者頁面、我怎麼操作才能找到這個功能。
於是我們就知道了針對於這種情況有效的優化方式是:
1)頁面標籤明確與用户心理預期一致,我認為一把木質梳子屬於日常用品類你就不要給它打上木質傢俱的標籤;
2)清晰展示產品的框架結構,讓用户對產品的功能範圍一目瞭然;
3)適當的使用交互效果來引導用户快速的學會使用產品,比如在搜索框旁邊顯示一個放大鏡的圖標,多數人一看就明白這裏可以搜索。
遵守易懂大於易到達的原則,用户對於一個陌生的產品首先要先能看懂第一步從哪裏開始、怎麼開始,再便捷的操作路徑也需要用户先知道才會去操作。
3. 中途折回尋找我現在剛剛吃完了美食,突然想到要買幾件衣服,我得看下去服裝區的路在哪。
我記得是在二樓,我先看下我現在在幾樓就可以了。但是不巧這個商場設計的太差了根本沒有標註清楚現在的樓層,但是我記得剛進來的時候是怎麼到那裏的,我可以先回到大門口再過去。
這種情況表現在產品使用上就是這樣的:我剛看完了一篇科技類的文章,現在想去看一看教育類的文章,我得看下我現在在哪個分類,怎麼過去教育分類。
如果知道返回的路徑的話我能不能直接一步就跳轉過去,如果不巧產品的信息結構設計的很亂,用户隨便跳幾個頁面就迷路了,用户很可能會希望先重新返回首頁再找教育分類。
於是我們就知道了針對這種情況有效的優化方式是:
- 採用懸浮導航:不管用户在頁面的哪個位置都能快速的通過導航切換到目標位置;
- 提供相關推薦:預測用户在瀏覽當前內容或者使用當前功能時下一步有可能會採取的動作,並把他放在某個易見的區域;
- 明確用户的當前位置和返回的路徑;
- 提供最近瀏覽是一個很好的選擇;
- 明確首頁位置,並儘可能的在每個頁面都提供直達首頁的入口。
清楚了用户使用產品時的不同情境、在不同情境下的不同需求,才能採取針對性的產品優化措施。
我們把所有對導航的需求場景總結為三類,從用户的心理活動出發搞清楚每一類場景背後的需求邏輯。我們會發現所有需要做的優化都有了方向,這樣我們就能把工作做在前邊,提前對產品做好規劃,效果顯著而且事半功倍。
三、常見的導航結構這個就是大家普遍認為的導航了,有抽屜式、下拉式、列表式,也有頂部佈局、左側佈局、底部佈局等等表現形式。
其實導航的結構只是導航的外在表現形式,只有先理解了導航背後的產品邏輯才能看懂不同的結構各自的區別在哪裏,從而能根據自己的產品的實際情況選擇最合適的導航結構。
這部分內容工具性就比較強了,沒有多少好理解的,根據需要選擇合適的拿來用就可以了。
這裏只列舉一些常見的導航結構供大家參考:標籤導航、舵式導航、抽屜導航、Tab導航、宮格導航、點聚導航、組合導航、列表導航、輪播導航、瀑布導航。
每種導航各有優缺,需要大家根據需要自行判斷或者組合使用,可以從以下幾個方面進行考慮:
- 我們的主入口有幾個?
- 我們是否有特別要突出的入口?
- 界面中的次級元素入口多與少?
- 界面是否要展示次級界面的部分元素信息?
……
四、結語這篇文章是我這些年做產品以來對導航的一些個人思考,在寫這篇文章之前也特意瀏覽過互聯網三巨頭體系下的一些官方主頁,其中也不乏一些需要優化的點。
由此讓我感覺到很多人對導航的理解可能並不是特別的深入,所以特意寫了這篇文章希望能拋磚引玉,對產品路上的小夥伴們有所幫助。
大家有任何不同的看法歡迎在評論區一起留言討論,謝謝大家閲讀這篇文章!
進階提問:
- 一篇寫VR教育的文章是該歸為科技類文章還是教育類文章呢?
- 一瓶桃子罐頭應該把他放在休閒零食區?飲料區?還是水果區呢?
有興趣的同學可以在評論區討論。
本文由 @毛竹 原創發佈於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議