[譯] 優化 Facebook 新鮮事,使其為您提供更好的服務

Lai_發表於2017-08-29

從去年年底開始,我們就著手探索如何讓新鮮事(News Feeds)更加易於閱讀、易於交流和易於瀏覽。可以想象,為一個連線 20 億使用者的社群進行設計,可能會面臨一些不同尋常的挑戰。

作為將 News Feed 帶到每天生活中的兩個設計團隊的管理人員,我們清楚地意識到,我們做出的任何改變都會在整個 Facebook 體驗中產生共鳴。在與世界各地使用 Facebook 的使用者溝通中,他們覺得 News Feed 變得很混亂、難以瀏覽。解決這個問題意味著需要優化 News Feed 的設計系統,這對於一個高度優化的產品而言,無疑是一個重大的挑戰。一些類似額外畫素的填充或者調整按鈕的色調之類的小變化,可能會帶來巨大的、意想不到的影響。

提高 News Feed 的可讀性

我們的設計和研發團隊堅持每天和真實的使用者交流。日積月累,我們瞭解到使用者最關心的是以下幾點:

  1. 內容本身,例如分享的照片
  2. 分享內容的
  3. 他們如何對正在瀏覽的內容留下反饋(像是評論或是互動操作)

帶著從真實使用者那裡得來的反饋,我們深入分析了常見的 story 型別的結構。我們的想法是,將問題分解成一個一個的小問題,再從我們之前所完成的設計中確定一個能立刻滿足我們使用者的需求的選擇。

改版前:這是在我們優化前現有的 News Feed 的 story 樣式。

我們問自己,是否符合 3 個主要目標:

我們如何改進 News Feed 使其更易讀閱讀,並能與內容的主要部分割槽分開來?

我們如何讓內容自身更具吸引力和沉浸感?

如何才能讓使用者更容易地留下反饋?

這些問題促使我們在設計 sprint 中不斷地探索和實驗,在兩個設計師團隊、研究人員和內容戰略師中展開了為期一週的頭腦風暴,併為新想法繪製原型。這次 sprint 的成品成為了一個指引,對形成未來的 News Feed 提供了很大的幫助。

我們設計 sprint 的第一版迭代更新的 story 樣式

我們嘗試了各種設計處理,以找尋機會去改進每種內容型別展示的方式。

  • 通過優化視覺層次結構、增加文字大小和顏色對比來增加 News Feed 詳情的易讀性
  • 通過改進圖示樣式、放大點選目標尺寸來幫助使用者更好地理解 News Feeds 的操作並與之進行互動
  • 通過擴大內容展示區域、減少不必要的 UI 元素來提供更精彩的內容體驗

我們的設計 sprint 都會有一個研究機會來驗證我們的探索。在 sprint 中,我們確保把作品展現在真實的使用者面前,來看看他們的反應。

第一輪測試的使用者反饋。

通過幾輪迭代和測試,我們瞭解到我們最初的一些設計方案有助於讓介面整潔,但是諸如將文案放置在照片頂部、刪除明確的文字標籤等決定,又引發了新的易讀性問題。每次迭代都讓我們離最終的設計又進了一步,我們的目標是佈局和板式更易使用而又不犧牲可理解性。

改版後:我們最後一輪的 News Feed 的 story 優化。

讓評論更具對話性和吸引力

我們的目標是讓人們容易參與到有意義的交流中去,讓交流更為集中的同時產生更多的互動,併為人們提供更多元的表達自己的方式。我們現有的樣式植根於留言板的風格,可供個人表達的方式大多相似且有限。當我們開始尋求其他評論樣式時,很明顯,訊息傳遞設計範能夠使人們比以前更好地進行交流。

以前的評論樣式(左圖)以及優化後的(右圖)。

讓 News Feed 詳情間的瀏覽更容易

我們想改進的另一個方面是使用者如何在整個系統間進入和離開 News Feed。根據內容型別,我們觀察發現實驗室研究中的使用者開啟他們的 Feed 後,僅僅只是陷於消費內容。我們也注意到,使用者如何努力尋找「返回」按鈕,而這是因為多年來我們與執行一致的功能可見性原則相違背。

以前的導航(左圖)以及優化後的(右圖)。

除了減少導航欄和 story 標題間的冗餘之外,我們團隊選擇了在所有沉浸式檢視中一致的返回可供性。我們還優化了從 News Feed 到 story 檢視頁的跳轉,通過擴充套件內容顯示區域,營造一種專注於情境的感覺。我們也改善了導航的手勢,讓使用者可以滑動螢幕回到 News Feed。

我們將繼續從這裡開始構建系統,在 Facebook 沒有什麼事情「做完」過。作為 Facebook 的設計師,我們以使用者為中心,所以我們著手以有意義的方式改進使用者體驗。這將是一個獨特的設計挑戰,因為我們不希望僅僅「在無關痛癢的地方瞎搞」,而是真正讓數十億人每天使用的東西不那麼令人沮喪。我們會在新基礎上繼續學習、迭代和改進,但是我們希望這一步可以邁向更好的 Facebook 體驗。

在這裡,我想祝賀我們成功發版,並衷心感謝團隊的每位成員!沒有你們的巨大努力和犧牲,是不可能做到的。

還要感謝 Geoff Teehan、John Evans、Julie Zhuo、Lars Backstrom、Hady ElKheir、John Hegeman、Mark Hull、Adam Mosseri、Tom Alison、Chris Cox 和 Mark Zuckerberg,以及其他參與過這個專案的所有人,感謝你們提供的支援和諮詢,並最終幫助推進專案上線。


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOSReact前端後端產品設計 等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章