以人人都是產品經理為例——如何升級互動UI?

以人人都是產品經理為例——如何升級互動UI?

人人都是產品經理屬於我常年存在手機但是卻很少開啟,但也不會解除安裝的一款應用。

雖然集結了眾多頭部大佬的文思泉湧,但這麼多年來APP端的UI風格和互動體驗始終“停留初心”。

(可能由於大家工作or摸魚瀏覽的場景都是在PC端,所以把APP端放養了哈哈(亂猜))

選擇這個APP做改版練習,一方面是考慮到有比較大的最佳化空間,第二也是很久沒出作品了鍛鍊一下動手能力。有不同的觀點歡迎在評論區留言。

以人人都是產品經理為例——如何升級互動UI?

一、前期調研

1. 產品是什麼?

人人都是產品經理是一個專注於產品、運營、設計的多方位交流學習平臺,以高質量行業文章為主要載體吸引使用者,以工作問答為交流媒介留存使用者。同時附帶課程、職場招聘等功能。

2. 什麼樣的使用者在使用?

各類PM、運營、互動設計等對產品設計感興趣的群體,使用者年齡集中在20-35歲區間,男性使用者遠多於女性。

3. 使用者想要達到什麼目的?

透過瀏覽文章和相關行業資訊來拓寬視野,與同行們相互交流探討答疑解惑,提升自己。

二、分析現有功能

以人人都是產品經理為例——如何升級互動UI?

首先第一步先去全方位的體驗和了解這款產品,分析現有的頁面框架、功能流程、視覺UI方面存在的問題,以便於為後續的改版方向提供切實依據。

1. 首頁

以人人都是產品經理為例——如何升級互動UI?

框架結構問題:

頂部總切換title是【文章】,可下面卻包含問答、課程和圈子等範疇,框架結構劃分不夠恰當。

流量分發效率低:

首頁的主要目的是為各個功能模組進行流量分發,目前的頁面佈局(以文章縱向流為主,中間穿插各種其他功能)圖片佔比過大,導致首屏只能展示4篇文章,使用者觸達資訊十分受限,屏效比低下。且大量的圖片佔據視覺重心,對比之下文字標題過於弱化,不利於使用者抓住資訊點。

Icon表意不當:

右上角更多icon常用於分類的全部展開,這裡放在和大title同級別,但內容包含的卻不是同一型別,而是專題、作者和早報等不同的功能集合。

2. 問答頁

以人人都是產品經理為例——如何升級互動UI?

【提問】按鈕引導弱:

問答本身是一個帶有社群屬性的功能,利用使用者好奇、學習、答疑解惑的心理、透過使用者之間自發的互動產生活躍和留存。這種場景下【提問】是一個非常重要的互動按鈕,現在放在右上角不明顯且不易觸達,影響了使用者提問的主動性。

瀏覽順序受阻:

【回答亮了】板塊是對於問答下的優秀回答單獨拎出來一個tab,但這裡的瀏覽行為就有點反人類。正常應該是有問才有答,但這裡的瀏覽順序目前是:先瞄到回答,然後看看問題,再回頭來看回答。這是比較不太合理的。

3. 個人中心

以人人都是產品經理為例——如何升級互動UI?

生產者 or 消費者?

使用者可以大致分類兩類:內容生產者和內容消費者。當前個人中心將發表的文章、參與的問答、點贊粉絲優先展示,可以看出來是側重於內容生產者,對於絕大多數內容消費者而言並不友好。

關注 or 訂閱

【我的關注】和【訂閱作者】從字義上理解很容易混淆,這裡的產品邏輯是:透過文章可以對作者進行【訂閱】,點進作者個人主頁則顯示為關注。訂閱了不代表關注,但是關注了這個人你的訂閱則會出現(這裡的兩種叫法和特意區分個人看來實無必要,沒搞懂)。

功能劃分混亂:

下方的功能列表劃分混亂,粉絲區和上方資料重複。

以人人都是產品經理為例——如何升級互動UI?

三、互動細節思考

以人人都是產品經理為例——如何升級互動UI?

1. 個人中心用什麼佈局

個人中心承載的功能比較雜,既包含了各種使用者資料、設定,還有付費內容。如何去排布功能的優先順序、劃分結構層級是重點。

以人人都是產品經理為例——如何升級互動UI?

方案一:

將收藏和課程收到二級頁面中,讓個人中心有更多其他內容的展示空間,優勢在於內容的分發效率比較高,但是對於收藏的內容展示空間受限,不夠直觀

方案二:

收藏的內容作為吸引使用者二次進入和留存的關鍵,具有較大的長尾價值,相比於發表的內容來說,普通使用者對於收藏的檢視需求更大,方案二的優勢在於直接鋪開了收藏,但缺點在於功能的拓展型較差。

最後的方案:

保留了收藏內容的鋪開形式,增加金剛區圖示對重要板塊進行靈活放置,滿足核心收藏、課程足夠突出的同時也兼顧了內容的可拓展性

2. 是否需要【最新】板塊 ?

什麼時候需要放【最新】呢?我的想法是:這關係到內容本身。

比如知乎就沒有【最新】板塊,因為知乎更注重內容是否專業權威有說服力,時間這個緯度對內容偏好的影響不大,有價值的內容過個幾年再去看仍然有價值。而豆瓣小組就相反,甚至【最新】的優先順序還要高於【推薦】,因為時間影響到了小組成員對內容的判斷和採納,最新的內容更能滿足成員對於資訊的需求。

以人人都是產品經理為例——如何升級互動UI?

對於人人問答這個場景來說,使用者期望關注的是熱議問題和有價值的答案,那最新的吸引力顯然要弱於參與度高的問答,所以單獨給一個tab去讓使用者切換檢視的成本是比較高的。所以將頂部切換中的最新拿掉,最新的問答將以權重佔比在推薦中展示。

3. 【賞金】按鈕跟隨鍵盤還是頁面

在原版提問的頁面中有一個懸賞紅包的按鈕,原版是跟隨鍵盤出現,點選開啟後頁面中會彈起選擇框,選擇紅包型別後才會出現金額選擇模組。

原版:

以人人都是產品經理為例——如何升級互動UI?

改版後:

以人人都是產品經理為例——如何升級互動UI?

四、視覺風格

以人人都是產品經理為例——如何升級互動UI?

以人人都是產品經理為例——如何升級互動UI?

以人人都是產品經理為例——如何升級互動UI?

以人人都是產品經理為例——如何升級互動UI?

以人人都是產品經理為例——如何升級互動UI?

本文由 @晚一 原創釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自 Pexels,基於 CC0 協議

頂部