Introduction
Web 的發展一直令人深深感到著迷,從早期的純文字、圖片的呈現,一直到今日確切地和人們生活有著密不可分的情愫,除了帶來更豐富且多元的視覺饗宴,更因應人們的需求不斷發展出各式新奇有趣的 Web API,近些年來更因為 mobile device 的普及,讓使用者從早期的 desktop 遷徙到 mobile 來,「 mobile first」的口號也因此成為了眾多服務的首要目標。
在滿足了基本需求之後,人們也漸漸的開始重視最基本的瀏覽體驗,任何再怎麼新奇有趣的效果,如果帶來的瀏覽體驗很差的話,理所當然的不會受到使用者親睞。
「如何衡量界定 User Experience 的好與壞?」
使用者體驗 User Experience﹙以下簡稱 UX﹚隨著時空背景以及當前使用者的 know-how 差異往往總會帶來不同感受,很難有一套標準可以依循。雖是如此,Google 依然藉由眾多體驗的回饋,有效整理出一些困擾著人們的「設計」,藉由 Lighthouse 的檢測中,便可以有效地判定當前 web page 可以調整以及改進的項目。
檢測的項目很多,筆者今日比較著於 mobile 使用上的「 瀏覽」以及「操作」上,基本上可以有三個準則︰
- 字級大小,如果頁面上 60% 上的字級小於 12px,會造成使用者閱讀上的困擾,應有效調整讓使用者在瀏覽時可以很清楚且無礙的進行閱讀。
- 可按元件﹙按鈕或是連結﹚的感應區域,早期的訓練,為了有效節省圖片的 size,所以會儘量的裁切圖片的大小,也因為這樣無形的縮減了元件的感應區域,造成使用者在點擊的時候可能只能投過指尖小心翼翼地進行點擊,深怕一個不小心就點到旁邊的連結,因此可按元件的感應區域設計應該要好好的省思。
- 元件的顏色對比,顏色對比對於閱讀舒適度有著很大的影響,如果對比過淺,便會造成閱讀上的障礙,因此在草創整體頁面設計時,便應該優先考考量,不該以「 因為覺得好看」就想搪塞過去。
以上便是三個頁面設計應該注意的基本準則。
Cumulative Layout Shift
Cumulative Layout Shift﹙以下簡稱 CLS﹚,這是一個全新的 UX 測量準則。為了有效節省 web page 所需 request 數,讓使用者可以在最短的時間便可以看到部分頁面呈現﹙有研究指出等待時間的長短會決定使用者是否願意繼續瀏覽的意願﹚,也因為這緣故,越來越多的 web developers 採用了 lazy load 搭配 JavaScript rendering 的方式來做頁面模組的呈現。
雖然可以解決上述問題,不過卻可能因為 JavaScript rendering 的關係造成頁面突然被「撐開」,讓瀏覽的過程中,因為這不經意地跳動而感到不安以及憤怒,畢竟這突兀的行為是徒然的、無禮的亂入,使用者甚至還得往前、往後回捲才能找到剛剛正在閱讀的片段。
個人私心將 CLS 稱之為「蠻橫的版塊飄移 」,它確確實實對 UX 造成極大的影響,會造成這樣的原因大概可以分成下列幾類
- Lazy load + JavaScript rendering。
- <img /> 完成外部資源讀取,有了實體高度,撐開後續元件。
- <video /> 完成外部資源讀取,有了實體高度,撐開後續元件。
- <iframe /> 完成外部資源讀取, 有了實體高度,撐開後續元件。
- 字型完成外部資源讀取,置換相對應元件的字型,由於字型的 line-height 以及每個字所需寬度的差異,亦會造成板塊飄移。
- 使用了外部 widget,比方說 Google AdSense,它便會如同 lazy load + JavaScript renering 去撐開版位 。
因為不悅的 UX 越來越多,也因此 Google Lighthouse 決定將 CLS 納入檢測的標準之一,讓 web developers 能夠正視這項惱人的問題。
這項檢測標準將會跟著新版的 lighthouse 的一起釋出,以「 影響範圍」以及造成的「 位移差異」兩個變進行相乘所得出分數便是衡量的標準。
layout shift score = impact fraction * distance fraction
如上圖所示,灰色文字區塊原本佔當前 viewport height 50% 的範圍,因為 CLS 它往下滑動 25% viewport height,所以它的影響範圍值﹙紅色虛線即為影響範圍﹚為
0.5 + 0.25 = 0.75
位移差異就是發生 CLS 後造成既有 module 的高度變化,即上述的 25% 。
所以我們可以得出版塊飄移分數為
layout shift score = 0.75 * 0.25 = 0.1875
以上便是基本的量測方法,尚有其他量測的範例解釋,有興趣的朋友可以點擊下方網址進行一覽
What is a good CLS score ?
有了分數之後,自然會想知道該數值如何換算成「好 」、「 壞」?基本上只要版塊飄移分數小於 0.1 均算是一個好的 UX 表現,請以多次取樣以便獲得較為客觀的數據。
相信大家閱讀至此均相癢難耐都想暸解一下自己所服務的 web page CLS 是多少吧?!除了可以透過新版的 lighthouse 進行量測外,亦有一個 ONLINE Toole 可供 web developers 進行量測喔!
量測的方法很簡單︰
- 鍵入想要進行量測的網址
- 選擇環境以及網路連線
- 按下 GET CLS 按鈕
靜置一段時間後,便會秀出檢測出來的版塊飄移分數以及相關 web page 截圖。另外,CLS Calculator 亦支援 BOOKMARKLET,只要把 「 BOOKMARKLET」直接拖曳至網址 bar 後,便可以在任何網頁進行量測。
亦可自己新增 bookmark,於網址的部分直接輸入下列 JavaScript 代碼,便會在該 bookmark 被點擊後動態進行量測。
javascript:(function()%7Bwindow.cumulativeLayoutShiftScore %3D 0%3Bconst observer %3D new PerformanceObserver((list) %3D> %7Bfor (const entry of list.getEntries()) %7Bif (!entry.hadRecentInput %26%26 entry.entryType%3D%3D%3D"layout-shift") %7Bconsole.log("New observer entry for cls%3A " %2B entry.value)%3Bconsole.log(entry)%3Bwindow.cumulativeLayoutShiftScore %2B%3D entry.value%3B%7D%7D%7D)%3Bobserver.observe(%7Btype%3A 'layout-shift'%2C buffered%3A true%7D)%3Blet fcp %3D performance.getEntriesByName("first-contentful-paint").pop().startTime%3BsetTimeout(function()%7Balert( "CLS%3A " %2B window.cumulativeLayoutShiftScore %2B " FCP%3A " %2B fcp)%3B%7D%2C 2000)%7D)()
How to improve ?
了解了量測準則後,如何在設計上有效改善這不好的 UX 便是我們所應注重的目標,在頁面設計的時候可以朝以下三個方向進行,一開始便明確定義各 module 的寬以及高,讓 web page 開始 render 的時候便能夠有效計算整體頁面的排列,自然就不會「蠻橫的版塊飄移 」現象發生。
- 針對 <img />、<video /> 以及 <iframe /> 可以明確定義其寬高,避免外部資源讀取完,有了實體高度,撐開後續元件。除此之外,也可以搭配 Aspect Ratio Boxes 的設置,讓 module 的寬高可以維持一定比例,不管當前 viewport 寬度為何均可以維持 web developers 想要呈現的比例。AMP 因為有著完善的 layout system ,亦撰文表示符合 CLS 的標準與期待。
/* CSS */
<style>
.aspect-ratio {
position: relative;
width: 100%;
--w: 4;
--h: 3;
}
.aspect-ratio:before {
content: '';
width: 100%;
padding-top: calc(var(--h) * 100% / var(--w));
display: block;
}
.aspect-ratio .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>/* HTML */
<div class="aspect-ratio">
<div class="content">
/* put your content here */
</div>
</div>
如上所示,web developers 可以透過 CSS Variables w 以及 h 來動態調整所需的比例數值,CSS 便會自動將該顯示比例確切無誤的 render 出來了。
- 儘可能地不要進行動態調整 DOM Tree ﹙變更頁面呈現結構﹚的動作,除非那是使用者意識到的行為,太過突兀的行為總是會形成不好 UX,因此儘可能避免這樣的動作。筆者第一個想到的便是 infinity scroll 的效果,每每不經意的瀏覽一但觸發 infinity scroll 的發動,便要重新回憶方才瀏覽的段落在哪裡,或許可以搭配 Load more 按鈕來讓消彌這樣的不安。
- Web page 難免會有一些使用者點擊後的回饋動畫效果,請儘量以 CSS transform 屬性來進行 animation 的設置,這是因為透過 transform 屬性的便更不僅可以在視覺上達到移動、放大縮小以及比例調整的漸變效果,更棒的是它不會影響到頁面元件的所佔位置和大小,自然就不會產生版塊飄移的現象發生。
Conclusion
以上,便是筆者對於這個全新的 UX 量測標準 CLS 的一點心得,做 frontend 真是辛苦,三天兩天便有新的準則冒出需要遵守,不過也因為這樣,才讓這一條路上充滿了挑戰與冒險,更讓筆者在習得新的知識與技能後,總能隱隱地聽到身後響起 Level Up 的背景音樂!分享給一同在這領域奮鬥的朋友們,希望對大家有所助益。