如何降低白色雜訊對網站使用者體驗的影響？

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

摘要：廣告是商業網站的重要收入之一，同時也被稱為網站的白色雜訊。 對廣告處理不好，不僅會影響網站使用者體驗，還會影響網站的長遠發展。 如何平衡好廣告與內容之間的關係，如何對廣告進行合理安置?是設計師需要考慮的問題。

廣告，是每個商業網站中所不可缺少的部分。 在注重使用者體驗的今天，如何將廣告恰如其分地安放在網站中，同時也不會影響使用者在網站上的體驗呢? Dustin Cartwright在Webdesigner Depot發表了一篇文章《How white noise affects UX》，對該問題進行了詳細闡述。 下面為該文的編譯內容。

廣告、贊助、產品置入等是商業網站的重要收入之一。 設計者將這些元素安排入網站，最好的解決方案是什麼?什麼是白色雜訊，它又將如何影響網站的使用者體驗呢?

白色雜訊對網站使用者體驗的影響

白色雜訊，聽到這一術語，你可能第一時間想到的是當電視無法接收到信號時所呈現出的灰白色麻點。 從Web設計角度來講，該術語則表示使用者無法被正確引導至網站內容，從而對網站失去了興趣、注意力。 這是Web設計和開發社區中很著名的一個概念，用來強調內容第一的設計方法。 內容第一的設計方法，可以降低廣告搶佔內容風頭的可能性。

定期流覽Web網站的使用者可能遇到過這種場景：當你偶然流覽某個網站時，忽然發現自己找不到想看的內容，反而陷入過多的「額外內容」(如廣告等)中。 廣告、產品置入會過多地干擾使用者閱讀網站內容，這是糟糕的使用者體驗，甚至會導致使用者離開，並對該網站產生壞的印象。

通常情況下，身處該場景的使用者不會繼續在雜亂的內容中尋找自己想要的，而會立刻離開。 所以，高效合理地安排廣告位置對網站的成功至關重要。

消除影響可採用的幾大解決方案

作為主要的盈利方式之一，廣告已在網站中贏取了重要的地位。 沒有安裝廣告遮罩外掛程式的使用者會在每天Web衝浪中遭受無數廣告地狂轟濫炸。 聽起來這似乎是一個很糟糕的使用者體驗，但我們所喜愛的很多網站都是靠廣告來盈利的。

設計者所要做的是，使廣告的安放不會影響到使用者在網站中的體驗。

將內容與廣告混排

當你流覽某些網站，比如Twitter，你會發現它們的廣告混合在內容主體中。 如果方法得當，這一做法還是很容易被使用者接受的。

該方法的關鍵點是，使廣告看起來更像內容，但要明確指出它是一條廣告。 否則，使用者會感到自己被誤導去點擊廣告，從而對此網站失去信任。 引入該方法的網站還有Reddit、Tumblr 和Facebook。

在內容之外，巧妙地安放廣告

雖然上面的方法越來越流行，但很多網站也引入了其他方法，如Dribbble，將廣告放在網頁的底部和側欄處。 廣告雖被安放在不起眼的位置，但它們仍可「捕獲」到普通的遊客。

該方法雖然也正被逐漸接受，但一些廣告商覺得它的力度不夠。 這些廣告應該融入網站中，同時也不會影響到主要內容。 Dribbble在這方面做得很好，一方面保證了內容獲得最主要的關注，同時單獨突出廣告區域，從而獲得收入。

商業廣告

一些網站在安放廣告的位置仍保持著傳統的風格。 如在Youtube中，將廣告區域劃分為三種類型，其中一種為「商業廣告」。 總體來說，所有風格的廣告看起來更像TV。 它們通常放置在視頻區域中，很容易吸引使用者的注意力。

但該方法有時也會讓使用者嘗到苦頭，確保使用者看到與自身相關的內容還有很長一段路要走。 不過Hulu在這方面起到了很好的模範作用，它對使用者的興趣進行了調查，以提供更多定制化的廣告。

赤裸裸的廣告展示

採用該法安置廣告的效果最差。 廣告被投放在適合它們的任何位置，未進行過多處理，以保證與網站的內容相關，與網站的風格相一致。

採用該法的網站一般都有較高的廣告收入——但卻付出了醜陋網站介面的代價。 Frugally Sustainable就是一例，側欄全部是廣告。 那些追求專業、風度的網站都會拒絕使用這種方法。 有時一個網站利用此法可勉強維持，但廣告區域被過度銷售的感覺仍會讓使用者慢慢消失。

結論

近幾年，基於廣告、使用者體驗的網站有了很多變化。 現在的網站比以往任何時候更加注重以吸引人、親切的方法展現廣告。 反過來，這也給網站帶來了收入，同時保證使用者的注意力仍在內容上。

現在很多網站不會硬生生地把廣告放置於任何可能的位置，而是推薦與使用者相關的廣告內容。 隨著對廣告使用者體驗的重視，Web設計者也開始大量獲取和使用者體驗相關的技術。 (編譯：陳秋歌 審校：夏夢竹)

原文連結：How white noise affects UX

本文為CSDN編譯整理 原文：HTTP://www.csdn.net/article/2013-11-04/2817377-How-white-noise-affects-UX