AI 與 Framer 等工具讓 3D、動態畫布、橫向捲動和自訂游標變得容易許多。Luke Carter 把現在的網站設計形容成「健美階段」:能力愈來愈強,注意力卻可能放在展示技巧,而不是處理使用者真正要完成的事。最後吸引到的往往是其他設計師,不一定是客戶。

問題不在於網站不能漂亮,而是視覺效果有沒有妨礙理解、操作與載入速度。影片引用 Portent 的電商研究:樣本中的平均轉換率從一秒載入時的 3.05%,降至四秒時的 0.67%。這組資料不能證明所有華麗網站都賣不動,但足以提醒人,特效帶來的成本不只有開發時間,也包括使用者等待與離開的機會。

影片引用 Portent 2022 年資料,比較頁面載入時間與電商轉換率

來源:影片畫面擷取自 YouTube/Luke Carter

Carter 提出的 clarity-first framework 有四項檢查:

1. 五秒理解測試:第一次造訪的人,能否在五秒內說出這家公司做什麼、下一步該按哪裡。

2. 行動版效能預算:替素材大小與程式執行設下限制,不讓動畫拖垮手機上的載入與操作。

3. 原生操作完整性:不要任意改寫捲動、鍵盤與瀏覽器原有的操作方式。

4. 結果導向的視覺層級:每個元素都必須幫助使用者理解產品,或完成下一步行動;若只是用來展示工具能做什麼,就該刪掉。

Luke Carter 說明 clarity-first framework 的四項網站設計原則