「人人都是產品經理」web端首頁分析

17 評論 18938 瀏覽 140 收藏 16 分鐘

對于網站來說,首頁就是門面,直接決定用戶能不能準確接收網站的主題,能不能對網站產生興趣。

我們先來看看web端首頁的布局:

1.整體布局分析

除去懸浮導航,網頁采取左右型布局,分為兩列多行。左列為內容區,占據版面的3/4,根據導航分類推薦內容;右列維度較多,包括好書推薦、熱門文章、熱招職位等等區域,但只要細心就會發現,除了熱門文章,其他分類都是或軟或硬的推廣。

恰到好處的推廣不僅不會讓用戶反感,還會增加用戶體驗,留給用戶“有用”的印象。

  1. 要貼近用戶的當前需求。
  2. 不要阻斷用戶的當前行為。
  3. 不要干擾用戶的視線。

當然,如何平衡廣告效果和用戶體驗是永恒的難題,要視具體情況而定。

此時web首頁可以抽象成以下:

根據人類的閱讀習慣:從左到右,從上到下。

用戶首先會瀏覽到左側的推薦內容,待視線移到右側時,會看到推廣內容,再往下移,又從推薦內容看到推廣內容;當用戶形成習慣后,厭煩右側推廣內容的用戶可在視線到達內容區邊界時,收回視線,繼續向下瀏覽;而認為推廣內容有用的用戶可以直接判定右側的位置,向下瀏覽。

所以,這樣的布局在確保推廣有效的同時,不會干擾用戶的行為,影響用戶體驗。

2.導航欄合理性分析

網站使用導航欄是為了讓訪問者更清晰明朗的找到所需要的資源區域,尋找資源。

首頁一共有2個導航欄,一個是網站的總導航欄(懸?。?,一個是首頁的內容導航欄。內容導航欄我認為有兩點不合理之處:

一是分類的依據不統一,沒有邏輯。

“最新文章”、“七日熱門”、“我的訂閱”的分類依據是“文章的特點”,最新的、熱門的、我訂閱的,本質上都是文章,可以合并成“文章”;“文章”、“熱門回答”、“知識體系”、“PM日報”的分類依據是“內容的類型”,類型包括文章、問答、專題、日報;網址導航單獨一類,不能歸納。

這就像分類為:熱帶水果、紫色水果、零食、蔬菜。當用戶看到“熱帶水果”和“紫色水果”很容易根據現實生活的邏輯,認定這個導航是水果分類導航,當看到“零食”、“蔬菜”時,發現與自己的邏輯不一致,又找不出新的邏輯歸納,只能當作零碎的單詞記憶;當用戶下一次想要找到“零食”時,記憶不能及時與導航欄產生聯系,就會增加用戶學習和熟悉的成本。

降低用戶的學習成本的方法

  1. 使用與大部分產品統一的符號和操作手勢(舉例:點贊、收藏符號,下滑刷新、左右翻頁手勢操作),
  2. 利用現實世界用戶熟悉的邏輯(舉例:微信“銀行卡”入口放在“我的錢包”中),
  3. 為用戶提供新手引導

二是導航欄內容在首頁的入口不止一個

在網站的總導航條上,同樣有問答、PM日報、我的訂閱的入口。分析用戶分別使用兩個入口的操作路徑,如圖。

總導航欄和內容導航欄的不同在于:總導航欄懸浮于整個網站的頂部,在任何頁面都很醒目,也可以直接操作;而內容導航欄只在首頁偏下位置。基于這個層面,用戶更愿意使用總導航欄。

從用戶的實際操作來說,問答、PM日報、我的訂閱情況有所不同。

問答:大部分用戶(偏向看答案)想要看到的問答是熱門問答的精品回答,從中學習知識,開拓思維。少部分用戶(偏向回答問題)想要看到的是最新的挑起他們回答興趣的問題。所以大部分用戶使用內容導航欄更方便(但內容導航欄下只有問題和回答人數等信息,和用戶看答案的期望有所不符,這一點后面討論)。

PM日報:兩個入口的終點相同,路徑差別不大,只是總導航欄中的PM日報隱藏在百寶箱中,所以用戶一般會使用內容導航欄的日報入口。

我的訂閱:大部分用戶訂閱作者的目的是為了查看“我喜歡的作者們”發布的文章,而不是查看我喜歡的作者列表,再去單個查看他們發布的文章;所以總導航欄(或者說個人中心)的“我的訂閱”入口是雞肋的,是用戶很少會使用的。但”我的訂閱”的位置,放在“個人中心”是更符合用戶邏輯的。

總的來說,總導航欄的入口位置更好,內容導航欄的入口更符合用戶需求;對于新用戶,兩個入口容易造成混亂,降低效率,特別是“我的訂閱”同樣的入口名,進入后結果不同,需要用戶適應;對于老用戶,兩個入口都不盡人意,位置符合邏輯的入口,操作路徑麻煩,操作符合需求的入口,位置不符合邏輯。

如何優化導航欄見第四點。

3.內容區布局分析

在左側內容區有個很奇怪的地方,如下圖。在默認分類(最新文章)的推薦內容板塊中,橫穿出一塊“學習專題”。

“學習專題”等同于內容分類導航中的“知識體系”,是對文章做的整理合集,現共有46個合集,每個合集包括5-30篇文章,大部分集中在13篇左右。

然而這樣設計給新用戶極大的混淆。原因如下:

  1. 含義模糊:無論是“學習專題”,還是“知識體系”,這兩個名字都不足以令用戶迅速聯系到“文章分類整理合集”。當用戶不清楚將要看到什么內容,用戶會選擇忽略跳過,而不是主動嘗試。
  2. 打亂視覺一致:文章之間的布局是一致的,但和插入的學習專題布局是不一致的,會讓用戶感到突?;靵y,在視覺上破壞用戶的瀏覽順暢。
  3. 弱化后部分內容:當用戶瀏覽推薦文章的行為突然被打斷,用戶對文章的興致和注意力會被破壞,對下面的文章興趣降低,使下面的文章推薦效果很差很雞肋;同時用戶可能被“學習專題”引走,完全放棄下面的文章。

那為什么還要這樣設計呢?去揣摩設計者的想法,這樣的設計的確有意義的。

首先“知識體系”的存在感非常弱,原因如下。(對于新用戶而言)

  1. 位置弱:內容分類導航欄,按“最新文章”、“七日熱門”、“熱門問答”、“知識體系”、“PM日報”、“我的訂閱”的順序排列,“知識體系”排在第四,已經是普通用戶不大會去探索的位置。
  2. 吸引力弱:其他分類都是用戶清楚含義感到熟悉的名詞,用戶會自然地不假思索地去嘗試;而“知識體系”讓用戶一頭霧水,降低嘗試欲望。
  3. 功能弱:“知識體系”就是文章分類合集,和“最新文章”、“七日熱門”有交叉重復之處,且“最新文章”、“七日熱門”都在更顯眼的位置。這兩個分類加上搜索功能會弱化“知識體系”。

然而,設計者非常重視“知識體系”,希望新用戶快速認識“知識體系”,通過專題進行更高效系統的學習。為了提高“知識體系”的存在感,在用戶最可能的瀏覽流程中插入“學習專題”,將用戶引入。

4.內容區重設計

結合2、3點的分析,我做了如下重設計:

整體:

整合優化“最新文章”、“七日熱門”、“學習體系”、“我的訂閱”為“文章”。

  1. 把“最新”和“熱門”體現到排序上(如圈2),熱門的排序算法結合發布日期;
  2. 把“學習體系”體現到文章的所屬專題(如圈3),總是推薦至少一篇專題文章,將用戶引入專題;
  3. 把“我的訂閱”體現在用戶標記上(如圈4),總是首先推薦“我訂閱的用戶”的文章。

問答:

對板塊內容進行合理增刪。

  1. 刪除回答用戶列舉(…已有19人參與了討論);與回答數重復,且列舉用戶頭像意義不大。
  2. 增加一個熱門答案,包括:答案的作者、贊數、收藏數、答案開頭,這樣更吸引用戶點開問題。(如圈1)
  3. 推送訂閱作者回答過的問題,把訂閱作者的答案放在首位。(如圈2)
  4. 在板塊末尾增加”天天問“頁面入口,雖然總導航欄上的入口更方便,但用戶很可能在瀏覽完推薦問答時,沒有找到感興趣的內容,期待看到更多;這時就產生了在板塊末尾進入”天天問“頁面的需求。(如圈3)

知識體系

給專題排序。

知識體系一共有46個,根據實際順序列舉前10個專題,如圖。專題頁是沒有專門設置搜索功能的,也就是說,當用戶要在這46個沒有邏輯順序的專題中尋找符合需求的專題,是需要從頭開始逐個瀏覽或者在整個頁面跳來跳去。

所以,我認為應該按照新手的學習順序做一個大概排序。這樣,新手可以根據排序學習(基礎到進階),而非新手也可以根據排序邏輯確定自己要找的專題的大概位置。

5.輪播推薦區分析

輪播推薦區同樣有一個奇怪(和大多數網站不一樣)的地方,如下圖。它沒有把5個推薦文章和為一塊輪播圖,而是輪播三個文章,單獨展示兩個文章。

這樣的設計有利有弊:

把板塊切割得太碎,視覺上不夠大氣,且有視覺不一致的問題。

讓用戶可以一眼看到三篇推薦文章,大大提高推薦效果。如果做成輪播5個圖,用戶大概看到第三個就放棄后面了。

總結

總的來說,利大于弊,本來想做類似下圖的重設計,把右側兩個圖片空間合并,替換為文字版的熱門文章,設計時發現空間太小,文章標題容易出現換行情況,且“輪播圖”和“活動推薦”兩塊大圖之間夾著文字,同樣會造成視覺不一致的不適感。最后放棄重設計。

總結

  1. 首頁整體布局合理,主要體現在內容和推廣的比例與分布。
  2. 內容導航欄不合理,導航分類沒有邏輯,可以合并優化。
  3. 內容區插入“知識專題”的布局不合理,可以刪掉,以文章來源的形式體現在文章列表中。
  4. 問答列表不合理,刪掉意義不大的回答用戶展示,增加熱門回答,體現“我的訂閱”。
  5. 學習專題排序可優化,按照新手學習的大致順序,提高專題的專業性;提供邏輯,方便用戶尋找定位。
  6. 輪播推薦區布局有利有弊,總體利大于弊,未想到更好方案。

如有差錯,請指正。

 

本文由 @?蔻三 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 嘿嘿,2年過過去了,突然想來看看,好感慨;當時寫這篇文章一是有寫東西的沖動,二是為了找工作有個材料;沒想到真的有人看!今天自己重看,太啰嗦了,難為各位眼睛;大四在產品助理崗實習了7個月,遇到一位很合拍的導師,容我盡情發揮。接觸到實際工作后,也理解了評論大佬們的話,產品不只是做好設計還要推動產品落地,而落地就面臨整個團隊對預期效果的質疑(畢竟人人都是產品經理嘿嘿),當然就會有各種阻力,甚至有時候你自己都沒把握。

    畢業后為了跨出舒適區做了項目經理,全國各地飛,還學了一整年爵士舞(我的頸椎再也不痛了)!也是奇妙的事。

    未來我會做什么呢?繼續做項目經理,或者做產品經理?說不定會成為寫故事的人,說不定會在手作工作室做小店員,說不定真的和跳舞結下不解之緣成為……舞蹈室小助理,嗨呀,只能活到80歲真的太難為愛好廣泛的人了。但不管做什么,對生活保持樂觀和熱情才是正事。

    來自四川 回復
  2. 我覺得總體而言寫的很好啊,而且你那個時候還是一個沒畢業的學生,我覺得已經非常到位了,不知道那些負面的評論有沒有影響到你做產品的信心,兩年后我的我看到這篇文章是真的希望他們沒有影響到你,希望你能夠堅持初心,祝福你~

    來自上海 回復
    1. 結果做了項目管理,目前生活知足開心;我相信在任何方向的努力都不是浪費,它們會在奇妙的時刻以奇妙的形式回饋給我。thank you ~

      來自四川 回復
  3. 很多時候是出于運營的需求,比如說導航欄不多不少剛好能展開看見所有分欄(所以就沒有收起來),至于各個欄目關聯度是他們自己沒考慮完善,文字引導不夠(其他地方也是如此)…

    要提到的一點是視覺流量軌跡不一定是z型的F型更常見,至于中間橫插一欄的話如果是考慮產品需求打破視覺流也不是不可,也可能是多方權衡的結果。

    總之,這是已經上線的產品而非設計稿,中間必然經過與產品、運營的妥協。

    回復
    1. 嗯嗯,學習了

      回復
  4. 寫的挺好的

    來自福建 回復
  5. 感覺這個網站和APP確實問題不少,作為一個產品經理社區很尷尬 ?

    來自北京 回復
  6. 少聽樓下說的,你的意識還是到位的,加油!

    來自浙江 回復
    1. :mrgreen: 謝謝

      來自四川 回復
  7. 看似有道理,實際很可能并無多少提高,還是得看數據

    回復
    1. 是的,沒有數據支撐我自己寫得都心虛,現在還沒開始工作,希望入行之后可以真正理解產品。

      來自四川 回復
  8. 我只想說,你整篇文章的觀點,我全都不認同,照你的想法,我估計整站流量得下降一大半;

    來自北京 回復
    1. 還在學習中,沒有什么實踐經驗,可能如上一位所說,我走歪了。能不能講講你的見解,謝謝

      來自四川 回復
  9. 信息架構圖用什么畫的呀

    來自廣東 回復
    1. 直接用百度腦圖畫的

      來自四川 回復
  10. 少看點產品心理學這樣的書,容易走歪。

    來自北京 回復
    1. 真的嗎?我還沒有做過產品的工作,確實沒有真正的項目經驗,依據理論知識憑空想象。文章算是給自己成長的一個記錄,繼續學習、實踐,修正自己。

      來自四川 回復