網站特效越酷炫越好?視覺傳達的限制?

此篇文章將介紹兩個眼動研究,討論視覺傳達的限制。

圖片對廣告文宣的負面影響?

James Breeze 在 2009 年用眼動儀做了一個很有趣的廣告研究,該研究請受試者執行一個簡單的任務:觀看兩個相同的尿布廣告,唯一的不同是嬰兒的圖片。試著思考一下,你比較喜歡哪張廣告文宣呢?你覺得哪一個廣告文宣最能促使受試者購買該尿布呢?

左圖:廣告文宣裡的嬰兒為正面;右圖:廣告文宣裡的嬰兒為側面。

我第一次聽到這個研究是在台灣心理學年會眼動儀廠商在報告時,我當下毫不猶豫地就想說「我喜歡嬰兒正面看著我的那個廣告文宣,他整體看起來比較吸引人。」

那我們來看看下圖眼動儀的研究結果,在嬰兒正面對著我們微笑的廣告文宣裡,受試者都將注意力集中在嬰兒身上,他們最終可能不會知道這是一個尿布廣告,或者是這個尿布主打什麼,他們只會記得「那個嬰兒很可愛」。

相反地,在第二則廣告文宣裡,嬰兒側身看著大標題,形成一個引導,讓受試者更容易注意到標題,並融入於文字內容之中。雖然圖片本身沒那麼吸引人,但觀看者最終會記得這是一個尿布廣告,記得這個尿布主打什麼,也比較容易讓觀看者去購買商品。所以,右圖才是一個比較成功的廣告文宣。

左圖:廣告文宣裡的嬰兒為正面;右圖:廣告文宣裡的嬰兒為側面。

總結來說,圖片太過吸引人、太容易獨佔所有注意力,在廣告文宣裡,反而是個分心物、干擾源,不利於廣告文宣整體的;相反地,圖片沒這麼吸引人,如果可以適時地引導人們觀看資訊,那麼它對整體就是有助益的。

動態效果對網站的負面影響?

使用者討厭網站載入速度過慢,而造成載入速度過慢的原因並不是 圖片過大,而是 伺服器延遲(server delay) 和 過度花俏的小套件(overly fancy page widgets)。美國使用者研究協會(Nielsen Norman Group, NN/g)曾用眼動儀去觀察使用者在幻燈片(carousel) 延遲八秒載入 與 即時載入 的行為變化。

左圖:頁面的幻燈片延遲八秒載入;右圖:頁面的幻燈片即時載入。

幻燈片佔整體頁面空間的23%,但一旦需要延遲八秒載入,使用者在此空間中僅花費了其總觀看時間的1%;相反地,若能即時載入,則使用者會花費其總觀看時間的20%在這個空間的圖片上,也就是說,使用者傾向忽略載入速度太慢的特效或圖片。

公司團隊可能花了很長時間去想幻燈片的形象廣告、促銷內容、以及製作幻燈片,但他們沒想到的是,只要這些圖片、特效讓網站速度有所延遲,使用者就傾向忽略這些訊息。所以如果技術不足、時間不夠,用簡單的方式將訊息帶給消費者,反而或許能讓消費者更快地得到最重要的資訊,公司亦能得到更好的轉換率。

所以,網站 不該做得很酷炫嗎?

動態效果就像圖片在網站的功能一樣,它的存在比文字更好地去掠奪使用者的注意力、傳達情緒、更容易瀏覽、能獲得使用者更多的喜愛。但,過多的、與內容無相關的視覺效果,將不利於整體的使用經驗。

適度的網站特效還是可以吸引注意力、增加趣味性、引導使用者的。就像是,Apple官網做得很酷炫,他的動態效果主要還是圍繞在產品及功能上,讓觀看者能聚焦於資訊本身的;但像 General Electric網站的動態效果、背景圖片雖然很吸引人,但反而容易導致使用者無法聚焦於他的產品、服務上,就成了網站資訊的分心物。

所以,總結來說,視覺效果的使用應該要有其目的性,幫忙使用者聚焦於產品或服務本身,並且,若公司本身資源不夠,不足以掌握或妥善運用一些視覺效果的小套件,那麼適時地捨棄,反而有可能帶來更好的使用者經驗。

參考資源

謝謝閱讀

謝謝你閱讀完一整篇文章,如果有任何回饋都請不吝與我分享,如果你覺得這篇文章有幫助的話,也請幫我鼓鼓掌噢!在Medium上,長按鼓掌最多可以增加50下鼓掌噢~


網站特效越酷炫越好?視覺傳達的限制? was originally published in AAPD — As A Product Designer on Medium, where people are continuing the conversation by highlighting and responding to this story.

網站特效越酷炫越好?視覺傳達的限制?