網路架站

輪播能放更多內容,不代表訪客看得到更多,該排的是優先序

多數人談首頁改版,理由都差不多,版面就那麼大,想放的訊息卻不只一則,輪播於是成了最直覺的解法,反正每多加一張,就能多塞一則訊息。這個算術本身沒有問題,輪播能放的張數確實比一張固定圖多;問題出在下一步。訪客實際上會看到、會點到的,通常只是這疊張數裡最前面那一張,後面幾張多半只是陪榜。

輪播(carousel)指的是首頁或重要版位上,一組圖片或訊息輪流自動或手動切換播放的元件,常見形式是一張大圖配一句標語,搭配左右箭頭或下方圓點讓訪客切換。這種元件被普遍使用的原因很單純,它讓「這個版位放得下幾則訊息」這件事,在畫面上看起來被解決了。只是曝光的張數跟訪客真正接收到的張數,從一開始就是兩件事,把兩者混為一談,是首頁改版最容易犯、也最少被拆穿的假設。

這個落差,得先從輪播的兩個身分講起。設計者眼中的它是一個容器,訪客眼中的它卻只是滑過去的其中一眼,兩者根本不是同一件事。

「能放更多」不等於「使用者看得到更多」

設計輪播時,團隊通常把它當成一份要露出的畫面清單在規劃,這次改版有幾個活動要宣傳、幾個新品要曝光,就切成幾張。Nielsen Norman Group 的研究(作者 Kara Pernice)點出這套思維的破綻,訪客實際接觸到的往往只是這一組畫面裡的其中一張,而不是整組。如果訪客剛好只看到跟主業務關聯度低、或內容顯得突兀的那一張,對品牌的第一印象就會直接被那張畫面定型,即使背後還有另外三張畫面試圖平衡整體印象,訪客也沒有機會看到。

輪播之所以還是被大量採用,理由多半很現實。首頁最上方那塊版位就那麼大,能宣傳的事情卻不只一件,這一季有新品要推、有活動要曝光、還有幾則需要露出的公告,每一件事聽起來都值得被放在最顯眼的位置。輪播提供了一個看起來公平的解法,與其在誰該被放上去、誰該被拿下來之間長時間拉鋸,不如每個人都分到一張,張數用來換取版位夠不夠的安心感。

這套算術聽起來合理,但它從頭到尾都建立在一個沒被檢驗的假設上,張數等於曝光。真正的訪客行為攤開來看,完全是另一回事。

輪播點擊集中在第一張,其餘幾乎乏人問津

美國聖母大學(University of Notre Dame)的網站開發者 Erik Runyon,曾在 2013 年公開追蹤自家首頁輪播的真實點擊數據,答案比多數人猜的更極端。整體只有約 1% 的訪客會點擊輪播裡的任何一項,而這 1% 裡頭,84% 集中在第一張,其餘四張合計平分剩下的比例,各約 4%。也就是說,張數多加的那三、四張,實際換到的關注幾乎可以忽略。

自動輪播的點擊有 84% 落在第一張,其餘四張各約 4%,多加的張數幾乎沒換到關注
自動輪播的點擊高度集中在第一張,其餘幾張幾乎乏人問津(資料來源:Erik Runyon)。

Runyon 同時追蹤另外三個不會自動播放、只能靠訪客手動切換的靜態輪播,平均點擊率落在 1.7% 到 2.3% 之間,第一格仍拿下 48% 到 62% 的點擊,就算讓訪客自己決定要不要滑到下一張,注意力還是死死壓在第一張上。他手上唯一一個真的會自動輪播的站台,整體點擊率反而是最高的 8.8%,但攤開分佈仍舊快速遞減,第一張拿走 40%,第二張掉到 18%,最後一張只剩 11%。自動播放讓更多人被迫看過後面幾張,卻沒有讓後面幾張真的被點擊。

這不是單一網站的個案。Baymard Institute 的研究負責人 Edward Scott 在大型電商可用性測試中發現,美國與歐洲前段班的電商網站裡,有 33% 首頁裝了輪播,其中卻有高達 46% 存在明顯的可用性問題。換句話說,輪播被採用的普及程度,跟它被做對的比例完全不成正比。

多數訪客沒能等到輪播轉完就已經離開

問題不只出在點擊率低,更根本的是訪客到站後的行為模式,跟輪播靠時間換曝光的邏輯本來就相衝突。Baymard Institute 大型可用性測試觀察到,不管是在桌機還是行動裝置上,受測者經常在輪播完成一輪切換之前,就已經點進別的頁面,或直接往下捲動,他們根本沒打算站在原地等畫面自己換。

行動裝置的情況更明顯。同一份測試發現,多數受測者甚至在首頁還沒完全載入完成前,就已經打開搜尋或主選單去找東西,代表輪播上的內容他們幾乎沒看過。行動裝置也沒有滑鼠 hover 這個動作可以讓系統偵測「使用者正在細看某一張」,於是常發生訪客正要點下去、畫面卻在那一瞬間自動切到下一張的狀況,結果點到的是完全不相干的頁面。

Nielsen Norman Group 也提醒,自動切換的秒數常常抓得太短,他們用每秒 3 個字估算多數人的閱讀速度,拿來檢查一張輪播的文字量,配上停留秒數合不合理;同一份研究也直接建議,行動版網站乾脆不要做自動輪播,讓訪客自己決定要不要往下看。

自動輪播打斷閱讀節奏,也把身心障礙者留在門外

這件事不只是行銷效益的問題,國際無障礙規範也白紙黑字寫著同一個結論。W3C 的網頁內容無障礙指引 WCAG 2.2.2(Pause, Stop, Hide)規定,任何會自動移動、閃爍、捲動或更新,持續超過 5 秒、又與頁面其他內容並存的元件都必須提供使用者可以暫停、停止或隱藏的方式,輪播正好符合這個定義,不符合就連 WCAG 最基本的 A 級規範都稱不上。

WebAIM(美國猶他州立大學附屬的無障礙研究機構)進一步指出,對注意力不足過動症(ADHD)使用者而言,這個症狀估計影響超過 8% 的青少年與超過 4% 的成人,即使畫面上只有一個會動的小元件,也可能讓他們難以專注在原本要做的事情上。有認知障礙或低視力的使用者,通常需要更多時間閱讀同一段文字,自動輪播卻從來不會等他們讀完。WebAIM 說得很直接:「多數使用者會忽略或迴避輪播,導致大量內容被錯過。」

畫面自動變動打斷的其實不只是身心障礙者。任何人正在讀一句話的中途,背景忽然切換成另一張圖、另一句標語,注意力都會被硬生生拉走一次,這解釋了為什麼前面幾節看到的點擊數字會這麼難看。多數訪客根本不是不感興趣,而是連好好把一張畫面讀完的機會都沒被給過。

輪播真正解決的是部門版位之爭

訪客端的數據這麼一面倒,輪播卻沒有因此消失,原因多半不在使用者研究,而在組織內部。Nielsen Norman Group 明白指出,輪播真正的誘因是讓多個內容佔用同一塊寸土寸金的版位,藉此平息組織內部誰的訊息該優先曝光的爭執。行銷想露出這一季活動、產品想露出新品、公關想露出得獎消息,每個單位都認為自己的訊息夠重要,輪播提供了一個看起來誰都不用被犧牲的解法,每個人都分到一張。

這個妥協的代價,由訪客默默承擔。Nielsen Norman Group 同一篇研究也提醒一個反過來的效果,如果設計者事先知道這個版位只能選一張圖、一句話,反而會被逼著挑出真正有力量的那一個;但只要「反正輪播可以全部塞進去」的念頭一出現,篩選的壓力就消失了,結果往往是一堆平庸的素材被輪流端出來湊數量,沒有一張真的夠尖銳、夠值得停下來看。

在我看來,輪播真正該被檢討的,從來不是這個元件本身好不好用,而是它太容易被拿來當成組織內部妥協的工具。版位之爭是真實存在的組織問題,但輪播沒有解決它,只是把它藏起來——讓每個部門看起來都被公平對待。真正該被解決的問題,其實是另一個更前面的判斷,這個版位最重要的其實是哪一件事。

排出優先序,才是輪播設計真正該解決的事

如果你正在猶豫要不要放輪播,Baymard Institute 的測試給出一個實際答案。靜態內容區塊能避開沒優化好的輪播常見的可用性問題,對多數使用者也更容易操作,不用煩惱切換秒數、不用煩惱手動或自動,也不用擔心暫停鍵有沒有做好。比起把力氣花在輪播的十項實作細節上,Baymard Institute 認為多數電商網站優先把這塊版位換成單一的靜態主圖、搭配一句夠清楚的訊息,會是更划算的取捨。

更關鍵的原則是,重要功能絕不能只透過輪播的某一張投影片才能被觸及,因為多數訪客根本沒看到輪播的內容。Nielsen Norman Group 呼應同樣的立場,任何出現在輪播裡的重要資訊,都該同時安排在網站的導覽列、頁面下方區塊等訪客會主動去找的地方,而不是只押寶在這一個會自動消失的容器上。

把版位當成能塞幾張的容器,訪客只接收到第一張;改問只能留哪一件事,露出的那張才真正被看到
輪播的重點不是能放幾張,而是先排出這個版位最重要的一件事,訪客才真正接收得到。

這也是整篇要翻轉的那個假設。輪播的價值從來不在於它能放多少,而在於逼著團隊回答一個更難、卻更重要的問題,如果只能選一件事讓訪客看到,會是哪一件。把這個答案想清楚,不管最後選擇用一張靜態主圖承載它,還是仍然做成輪播的第一格,結果都會比現在每個部門各分一張的版位分配,更接近訪客真正會停下來看的東西。

下一次你的團隊在會議上有人提案要再加一張輪播,值得先回頭問一句更根本的問題,這個版位真正要解決的,是訪客的問題,還是部門內部誰該被優先曝光的問題。前者只需要把一句話講清楚,後者卻沒有任何一張輪播能真正解決,只是暫時把爭執藏起來。

能放更多張,從來就不是輪播的優勢,反而是它最大的陷阱,它讓每個人都以為自己的訊息被顧及到了,實際上訪客可能連第一張都還沒看完就已經離開。與其糾結版面還放不放得下,不如先決定,如果整個版位只能留一件事,那件事會是什麼。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

首頁輪播的整體點擊率大概是多少?

根據 Erik Runyon 針對 Notre Dame 首頁輪播的實測,整體只有約 1% 訪客會點擊輪播內容,其中高達 84% 集中在第一張投影片,其餘四張合計僅平分剩下的比例,多加的張數幾乎沒換到關注。

為什麼企業首頁還是持續愛用輪播?

因為輪播能讓多個部門的訊息同時塞進同一個版位,藉此平息組織內部誰的訊息該優先曝光的爭執,行銷、產品、公關都能各分到一張;但這只是把版位之爭暫時藏起來,沒有真正解決訪客該先看到哪一件事的問題。

行動裝置上的輪播為什麼特別容易被忽略?

因為多數受測者甚至在首頁還沒完全載入完成前,就已經打開搜尋或主選單找東西;加上行動裝置沒有滑鼠 hover 可以偵測使用者正在細看,訪客正要點下去時畫面卻自動切換,常常點到不相干的頁面。

自動輪播對哪些使用者最不友善?

對注意力不足過動症與認知障礙、低視力使用者最不友善,這些族群需要更多時間閱讀同一段文字,自動輪播卻不會等他們讀完;WCAG 2.2.2 規定超過 5 秒的自動變動元件都必須提供暫停或停止的方式。

重要功能該怎麼安排,才不會被輪播埋沒?

重要功能不能只透過輪播的某一張投影片才能被觸及,應該同時安排在導覽列、頁面下方等訪客會主動尋找的地方;Baymard Institute 也建議多數電商網站優先把版位換成單一靜態主圖,搭配一句清楚的訊息。

資料來源
  1. Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors — Nielsen Norman Group
  2. 10 UX Requirements for Homepage Carousels — Baymard Institute
  3. Carousel Interaction Stats — Erik Runyon
  4. Understanding Success Criterion 2.2.2: Pause, Stop, Hide (WCAG 2.2) — W3C WCAG 2.2.2
  5. Animation and Carousels — WebAIM