「信息降噪」在設計中的運用

「信息降噪」在設計中的運用

「信息降噪」在設計中的運用,觀點,今日頭條UED,原創文章站酷網,中國設計師互動平台。

前言

今日頭條作為資訊閱讀類產品,Feed流場景是資訊類產品的核心場景之一,關於Feed流的改版嘗試一直在進行,針對本次優化,多次在線上進行驗證後,得到一個滿意的結果,也將我們關於【頭條首頁改版】運用到的設計方法進行分享。

觀點—實驗—規則


項目前期提出設計論點,通過方案和實驗去驗證可行性,最後結合案例形成符合當前場景的設計規則,這也是本次設計探索所運用到的論證方法。

閱讀需求

什麼是閱讀需求?

一組信息通過不同的字號反差組合來滿足不同場景下的文字閱讀需求,這稱之為閱讀需求,閱讀需求一般可以歸納為以下3種類型:快速定位型、瀏覽型、閱讀型。


快速定位型:主體內容突出,反差比大,可快速檢索到需要的信息。

瀏覽型:被檢索信息主次較為平均,字號反差比適中。

閱讀型:無特殊強調內容,需要用戶沉浸式閱讀,字號反差比較小。

三種閱讀需求

今日頭條首頁的閱讀需求是什麼?

今日頭條Feed的閱讀需求,我們定義為快速定位型和瀏覽型之間。原因是在閱讀Feed時,用戶有獲取標題關鍵信息的強定位屬性,同時也有瀏覽feed信息的瀏覽訴求;從Feed閱讀習慣的分析,我們提到兩個關鍵詞,信息的定位瀏覽,後面的探索也會圍繞這兩個關鍵詞展開。

首頁的閱讀需求

信噪比

信噪比與界面

“信噪比”(Signal-to-Noise Ratio)原本是用在聲音和圖像領域的概念,指在聲音傳播過程中信號和噪音的比例。這個理論也可以運用在頁面中,如果要將訊息完整地傳遞給使用者,可以選擇強化原有的訊息,或是降低多餘的雜訊,來提高“信噪比”(Signal-to-Noise Ratio )以增加訊息成功被判讀的機率,也讓使用者能更輕鬆地閱讀資訊。

一組信息是否更好的兼容定位與瀏覽屬性,在於信息本身是否足夠強調清晰;“信噪比”理論是幫助我們理解“信息清晰度”的存在。

簡而言之,“信噪比”理論通指有效信息次級信息的比例,控制平衡這個比例,可以有利於信息完整的傳遞給用戶,也能更輕鬆的獲取資訊。

通過強化頁面內的有效資訊,降低多餘雜訊,從而提升頁面內的“信噪比”,以達到提高有效資訊傳遞,幫助用戶能更輕鬆獲取資訊的目的。 “信噪比”理論是非常通用、使用廣泛的指導理論,對信息流頁面設計有明確的指導作用;

提升“信噪比”的目的

視覺搜尋實驗

視覺搜尋實驗

在視覺搜尋的實驗裡,讓受試者從許多個「X」裡面挑出1個「O」,然後再讓他們從「┸」裡面挑出一個「┼」。我們把所有的視覺元素稱作刺激總量,大部分的元素(「X」和「┸」)稱為乾擾物,唯一不一樣的那個元素(上面例子的「O」和「┼」)稱為目標物。而實驗的目的,就是要檢測在干擾物增加和同等情況下,受試者會不會需要花費更多時間才能找到目標物。

當我們的視覺系統在辨識影像時,有一些影像的屬性很容易被大腦處理,我們的視覺系統可以很快過濾辨識這些基礎特徵,讓我們的大腦分辨這些影像屬性更容易一些。因此我們涉及到大量信息的設計時,如果能夠善用這些基本特徵,便可以提高用戶的閱讀效率。

那麼,什麼樣的特徵能夠幫助訊息更快,更有效的被用戶判讀和接收呢?在視覺搜尋實驗中,有一些基礎特徵很容易被我們的視覺系統所辨識出來,其中主要有4種不需注意力介入便能輕易分辨的基本特徵:

1. 顏色

2. 線段方向

3. 大小

4. 運動

4種基礎特徵

強化信息的基本特徵是增強信息被判讀最有效的方式,我們可以根據場景和用戶訴求,選取最合理的方式來對信息進行處理;這4個基礎特徵,通過反差來增強核心信息的突出程度,輔助信息更好的傳遞給用戶。

通過“視覺搜尋實驗”,我們可以得到兩點結論:

1. 在干擾物增多的情況下,基礎特徵和其它區別不明顯的物體,用戶會花費更多時間才能發現。

2. 元素對比越強,用戶能越快獲取自己想要的信息。

這兩點結論是對於“信噪比”理論的補充,處理好信息的“信噪比”關係,強化有效資訊,弱化次要雜訊,幫助用戶有效接收資訊,更輕鬆獲取資訊。

首頁目標的變化

資訊的生命週期中,包括了產生、傳遞、接收這三個重要的階段,而每個階段都有可能造成信息的損耗;

信息產生是源頭,這裡的損耗在所難免,我們所要做的,是盡可能控制“傳遞”和“接受”階段的損耗;早期的頭條首頁承載大量信息,目的是為了讓用戶可以接受到更多信息,這時“效率”會是第一位。

但在承載大量信息的同時,頁面信息過多,容易造成信息對比弱、佈局密集,從而導致信息“傳遞”階段的損耗,同時用戶在“接受”信息時,看到擁擠的信息佈局,接受信息的“效率”被降低,被迫造成損耗。

為了更好的提升首頁閱讀效率,我們重新審視當前的設計目標,通過對不同組合的空間調整,平衡展示效率以及閱讀識別性,控制“傳遞”和“接受”中不必要的信息損耗;將設計目標從過去的“效率最大化”,調整為“有效,輕鬆的閱讀

對於這個目標,我們結合之前抽離的“信噪比”理論,進行更為細緻的拆解,確保能落實到後續的設計方案中。

設計目標轉變

回顧信噪比

“信噪比”理論可以平衡頁面內有效信息和次級信息,在這樣理論的引導下,提供的方案其實更具備說服力。

和圖片噪點一樣,噪點越低,清晰度越高,映射到頁面也是如此,頁面內的雜訊過多,影響到有效訊息的傳遞,我們需要做的,就是給頁面進行【降噪】處理

反差比

文字的反差比

根據前期的“信噪比”論點和“視覺搜尋實驗”,我們得出兩個核心觀點:

1. 強化頁面內的有效資訊,降低多餘雜訊,能給幫助用戶有效獲取信息。

2. 元素對比越強,用戶能越快獲取自己想要的資訊。

兩個論點其實都提到了信息對比強弱對於用戶判讀的影響,由此可見,不同信息的反差關係,是增強信息傳遞,縮短用戶接受信息耗費時間的關鍵指標。


如果說“信噪比”是信息流優化的理論依據,那麼“反差比”則是驗證頁面信息反差關係的手段。

調整頁面內文字反差,一般通過三種方式來提升或調整

1. 字號

2. 字重

3. 字色

提昇文字反差方式

讓我們來看首頁中Feed流的標題字號,我們通過iOS和Android的通用文字規範可以發現,最小閱讀文字為12號字(10號字用在標籤,9號字用在數字提醒,都不適合作為閱讀文字),Material design中正文內容默認字號為16px ,iOS規範中則定義了7個正文字階(14、15、16、17、19、21、23),綜合多方因素,我們選取了16號字、17號字為主要驗證目標.最後形成16/12 17/12這兩組組合來驗證線上Feed信息流。

“信噪比”和“視覺搜索”理論中,多次提到增強元素反差比,用戶能越快獲取資訊;所以我們也嘗試了加粗字體和加大文字的實驗嘗試,用於驗證文字反差比的上限。

iOS/Android 通用文字

反差比公式

為了更好的驗證和觀察Feed流中的不同文字字號的反差關係範圍,我們提出了一個坐標公式用於驗證,可以直觀的觀察字號,字色,字重三組信息間的關係。

Y軸代表字號,X軸是不同灰階文字顏色,我們可以將Feed信息組合中的字號放入表格中,通過科學方法檢驗反差範圍

關於這套驗證公式,是我們為了驗證文字反差比所提出的檢驗方法,通過不同實驗組中字號的反差範圍來驗證哪組更適合Feed場景,最後輸出成符合當前場景的通用規則。

文字/灰階反差比推導圖

最後,我們選擇4組方案進行首頁反差比驗證,同時將比字號放入坐標軸中,可以看出以下文字的反差範圍

16號字加粗/12號字

17號字/12號字

17號字加粗/12號字

18號字/12號字

在反差比範圍內,選取的四種字體組合

上面4個表格分別對應4組反差比驗證的字號組合,不同字號組合的反差比範圍,我們都可視化出來,以便於更好驗證哪個信噪比範圍更合理;每組方案的反差比範圍都不一樣,我們會通過線上實驗,選取最適合當前場景的反差比範圍,並形成適用於Feed的反差比規則。

這裡也是驗證首頁Feed反差比的上限和下限範圍,有時主體並不是反差越強越好,反差也是有閾值範圍,超過這個閾值範圍,會導致信息展示比例不協調,用戶側也會起到反作用。

目前對於坐標公式驗證文字反差比的理論還處於實驗理論階段,我們認為對於字號和灰階之間,有合理的規則存在,單獨對於規則的抽離和梳理,還需要大量樣本去實驗論證,後續有新的結論產出和模型迭代。

設計方案

目前線上首頁存在以下問題:

1. Feed間距不統一,間距控件缺乏一致性。

2. 過去品牌顏色比較陳舊,未給用戶傳遞品牌印象。

3. 業務發展要更多拓展空間,當前首頁風格難以滿足。

為了解決這些問題,我們對於首頁的視覺語言進行了優化,通過“信噪比”理論,我們了解到平衡有效信息和雜訊的比例,是保持信息乾淨清晰,更好觸達用戶的保證;因此我們重新梳理不同題材的結構,確保核心信息在首頁展示的唯一性,去掉了對於用戶閱讀過程中可能造成阻礙的信息。

首頁前後對比

這樣,首頁上核心信息的展示層級得到統一,保證了信息乾淨清晰,能夠更好觸達用戶。

在“信噪比”理論和“反差比”實驗的基礎上,輸出了用於線上測試的設計方案,為了驗證首頁中不同變量的影響,我們把頭部,字號,字重,間距這些可能影響首頁的因素都拆分驗證對於首頁影響;同時,根據前面“反差比”的驗證理論,我們把“字號加大”和“文字加粗”也放進實驗中進行驗證,為後續實驗積累數據樣本。

線上驗證首頁方案

綜合前面的實驗結果,最終我們選擇了兩組這兩組方案,目前線上在進行最後實驗。在實驗中,我們也提取到幾點關鍵指標:

1. 用戶對於灰頭樣式並未特別排斥,這個對於過去頭條頂部必須是紅色的認知有些挑戰;其實當下設計趨勢是在減少用戶閱讀的信息干擾,灰頭更符合這一趨勢,同時使用灰頭也會提升頭條整體計品質感,對於後續設計拓展有很大幫助

2. 加粗字體上,男性用戶比較偏好加粗字體,但是女性用戶和年輕用戶較為反感。

3. 增大Feed字號,信息展示確實更突出,但是影響到整個首頁的感官,而且違背了我們的設計目標,同時也不利於後續設計拓展。部分用戶手機的展示情況和特殊字體設置都會受到大字體影響,需慎重考慮。

前面有談及18號字的問題,字號增大確實能增強視覺感官,但要考慮到頭條用戶比較喜歡運用特殊字體,特殊字體對比通用字體更加個性化,但是字體大小,展示高度並不可控,當字號比較大的情況下,再加上手寫字體,效果不可控。

線上手寫字體情況
線上實驗後,我們也進行了一次線下用戶調研,用研結果中用戶對新版滿意度高於舊版,其中有一個點多次被用戶提及到,就是調整後的全圓角搜索框。相比過去的方形搜索框,調整後的全圓角搜索框是能給用戶留下深刻印象的視覺記憶

流程复盤

回顧整個首頁改版過程,我們總結了項目中的流程和思考,希望能幫助大家:

1.定義當前使用場景的閱讀需求:

閱讀Feed的時候,用戶有獲取關鍵信息的強定位屬性,同時也兼顧feed信息的瀏覽屬性。 、

2.通過“信噪比”理論,明確設計方向:

強化頁面內的有效資訊,降低多餘雜訊,提升頁面內的“信噪比”,達到用戶有效接受資訊,輕鬆獲取資訊的目的。

3.運用“反差比”手段,提升信息反差比,增強信息傳遞:

文字可以通過字號,字色,字重調整反差關係,並且通過“文字反差驗證表”進行反差比範圍驗證,推導出更適合首頁的反差範圍,形成首頁反差比規則。

4.線上拆分驗證,量化首頁影響指標:

線上驗證方案,把字號、字重、間距疏密,頭部顏色多個維度拆分驗證,觀察不同個指標對首頁影響。

5.抽離項目中有價值的信息,後續形成統一規則:

間距樣式和信息層級統一的feed模塊;從矩形到全圓角的搜索框這些知識點都可以沉澱成信息流場景的認知規則,並且給予其它業務和項目理論和實踐支持,將理論和線上驗證相結合,形成真正有價值的設計方法。

寫在最後

”信噪比“理論可以廣泛運用到頁面信息設計中,幫助大家合理的梳理核心信息與次要信息關係,並且通過“反差比”手段,增強有效信息弱化次要信息;保障頁面內層級的合理佈局,幫助用戶更有效的判讀信息;這次改版也是對目前認知基礎上進行的一次解與構建,過去我們所認知的基礎目前可能處於變化階段,這也為我們後續方向探索提供更多可能性。

希望這些能為後續設計起到幫助,給予大家思路與靈感,更好的服務用戶。

參考資料

視覺搜尋(visual search):http://maximum-possibility.blogspot.com/2012/10/visual-search.html

資訊和特殊效果的絕妙平衡:http://blog.fourdesire.com/2014/12/11/zi-xun-he-te-shu-xiao-guo-de-jue-miao-ping-heng/

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。