為用戶設計更好的 Facebook 信息流

原文作者:Shali Nguyen 和 Ryan Freitas

譯者:Chulin Yang | 校對:DSC 北京組織者-糊糊

譯者按:我們每天都在接受著不同的信息,這些信息如果不能以合理的方式彙集成流,將會造成信息冗餘,很大地影響用戶的閱讀體驗,尤其是對於Facebook等需要展示大量信息流的產品,合理的信息流設計更加必要。這篇文章便是Facebook設計師探索信息流設計的一次創新性嘗試。

從去年開始,我們開始研究如何提高信息流可讀性、交流性、導覽性。可以想像,為一個連接著兩億人的社區設計產品有許多特殊的挑戰。

我們帶領兩個信息流產品的設計團隊,很清楚我們做的任何一個設計決定都會影響Facebook的整體使用體驗。在與世界各地用戶的交流過程中,我們明白了他們覺得信息流有些雜亂,不便瀏覽。解決這個問題等同於更新整個信息流的設計系統,這對於一個十分成熟的產品來說是一個很有意義的挑戰。一些小的變化,例如增加內邊距像素、改變按鈕的色調,都會帶來超出預期的效果。

提高信息流的可讀性

我們的設計與研究團隊每天都與真實用戶交談,用戶也讓我們了解了他們最關心的是什麼:

  1. 內容,例如一張分享的照片
  2. 內容的分享者
  3. 用戶給所見內容留下反饋的方式(評論或反應)

基於真實用戶的反饋,我們分析了一下幾種典型的帖子類型。方法是將幾種典型信息流內容分解,然後重新決策,使設計可以滿足用戶的現有需求。

之前,信息流架構如下圖所示:

△初始設計的信息流版本

我們思考了以下三個重要問題:

  1. 我們如何提升信息流,從而使信息流可以更加容易閱讀,並且突出內容的關鍵區域?
  2. 我們如何使得信息內容本身更加有娛樂性與沉浸性?
  3. 我們如何使用戶更快留下反饋?

這些問題在設計衝刺的活動中帶領我們探索與試驗,引導我們與兩組設計師、研究者和內容策劃者一起,進行了一周的頭腦風暴,並且完成了新想法的原型設計。

△在設計衝刺中迭代更新的信息流設計

我們做了一系列的設計,從而提升每種內容的呈現形式:

  1. 調整視覺架構,使得信息流中的帖子更加易於閱讀,加大字型大小與顏色對比;
  2. 提升圖像效果,幫助人們更好地理解信息流,與信息流互動;
  3. 通過增加內容模塊的寬度,減少不必要的交互元素,提供更加吸引人的內容體驗

我們的設計衝刺也包含各種討論,讓我們去驗證不同方法。通過這樣的衝刺,我們把設計放在真實用戶眼前,從而得到他們的反饋。

△第一輪測試的用戶反饋

通過幾輪的迭代與測試,我們了解到,我們最初的一些設計方案有助於簡化界面。然而一些設計決策,例如將文字放在圖片上方,或者移除顯眼的文字標籤,也有可能引起可讀性的問題。每一輪的迭代都幫助我們更加靠近我們的最終設計,這些設計的布局和排版更加易於讀者消化,同時又不會犧牲可讀性。

△我們最後一輪的信息流設計優化

提高評論的交流性與吸引力

我們的目標是使用戶可以更容易參與有意義的對話,使用戶間的互動集中在對話中,為用戶提供更多表達自我的途徑。我們目前的設計基於信息版風格,不能完全體現表達與交流的感覺。當我們研究了其它評論的設計方案時(如下圖),對話式的設計樣式使人們可以更好地對話。

△以前的評論 (左) 與改版的評論 (右)


提高信息流的導覽性

我們希望提升的另一個領域是用戶在不同帖子及整個信息流中的瀏覽體驗。根據幾種內容類型, 我們觀察到實驗室中的用戶打開信息流,但因為體驗不佳被卡住。我們也看到用戶常常找不到「返回」按鈕,因為我們過去幾年在執行功能可見性與一致性的時候做得還不夠。

△以前的導航(左)與改版後的導航(右)

除了減少導航欄與標題之間的冗餘,團隊決定使用連貫一致的返回設計,貫穿整個沉浸式的瀏覽體驗。我們也延伸了內容區域從而創造出一種時時刻刻都在內容中的感受,以此來提升從信息流到具體帖子的切換。我們使用戶通過滑動返回信息流,提升了導航的操作手勢。

我們始終在不懈地完善產品體驗,在Facebook,從來沒有「已完成」這個說法。作為Facebook的設計師,我們將用戶放到所有決策的首要位置,採取任何有意義的方式提升用戶體驗。這是一次特別的設計挑戰,因為我們並不想淺嘗輒止,而是要讓上億人每天都用的產品變得更好。我們會持續研究并迭代產品、不斷提升體驗;我們堅信,這是通向Facebook更優體驗的一步。

本文為 DSC 與 ONES Piece 聯合翻譯計劃的一部分。本文原載於 Medium,作者 Niya Stoimenova 和 Luuk Roos,由 DSC 翻譯成員 Chulin Yang 翻譯,DSC 北京組織者 糊糊 審校。Design Sprint China (DSC) 是一個專註有趣設計思維的創新創意社群,其翻譯團隊定期搬運相關海外文章,微信公眾號:設計衝刺。ONES Piece 是一個由 ONES Ventures 發起的非營利翻譯計劃,聚焦科技創新、生活方式和未來商業。

推薦閱讀:

【UXRen譯#134】Facebook做過最聰明的一件事居然是…
如何看待歐洲主流社交網站聯合宣言試圖禁止「仇恨言論」這一事件對美國大選的影響?臉書卻拒刪仇川言論?
Facebook上有哪些優秀的插畫師和設計師值得關注??
Facebook Timeline 的發布將對 Facebook 營銷造成什麼影響?

TAG:Facebook | 用户体验设计 |