一向都想寫一篇關於網站設計的文章，雖然可能對 SEO 未必有最直接的影響，但可以觀察到 Google 對好設計其實越來越重視。這裡的好設計不單是指看起來好，還有在用戶跟網站互動時也要感覺良好。
事實上，Google 演算法中 Rank Brian 針對的就是用戶行為 User Behavior ，而用戶行為明顯跟設計有關的。這篇文章也許跟坊間所講的 UX/UI 有分別，我把令用戶有感覺 (不論是正面或負面)的設計、排版都納入其中。這些資訊部份是親身經驗、也有些是由不同的書本或 Blog 而來，對提升 SEO 及轉化 (Conversion) 非常有參考價值。
這篇文章會不定時更新，每次有新的發現我都會加入在其中，建議各位收錄在自己的書籤夾內!
UX/UI 對 SEO 的實際影響
一個例子﹕不知道各位有否留意用手機做搜尋跟用桌上電腦做搜尋，同
我遇到一個問題是，數個關鍵字在手機搜尋上表現一般。我的網站沒有AMP 版本，關鍵字 A 在桌面上搜尋排頭 3，但用手機搜尋的排名則長期浮游於排名 8 – 12
起初我認為是網站速度表現不佳，於是優化，把 Google Page Speed 提高到 80+ 以上 – 但情形沒有改變 (持續觀察了兩個月)
苦無頭緒下找伙伴給予意見，結果找到了可能的原因 – 似乎是我的 Manychat Pop-Up 訂閱。當我關閉這個功能後，3天內其中3個關鍵字立即跳上前 3，已經持續了兩星期，但 Google Page Speed 分數沒有進步……
估計，這個 Pop-Up 令手機版的用戶體驗受了一定影響，令網站在手機版上的表現未如理想!
有些用戶體驗未必即時收效，以下是我搜集的一些資料，或多或少對提高轉化、用戶體驗有一定幫助。
一個簡單的例子是﹕你要在 Facebook 發表一篇文章，文章的重點應該放在那裏?
- 文章的前 60%
- 文章的後 60%
那一種做法會有比較多人分享? 為什麼呢? (答案在文章後半部)
雖然以上臉書跟網站設計不同，但其實當中的心理原素是相通的。對美，Google 還是在從數據學習，這些數據就是各位在 Google Analytics 的數據。
我搜集了 9 個關於網站設計時有利讀者的觀察，部份來自書籍，部份來自網上測試，在各位設計網站時，不坊作為參考。
手機編
各位有否想過當我們用手機觀看網站時，假設你是用右手的話，屏幕那一個位置最難接觸呢? 又如果你想訪客按下一個鍵，那個位置最好呢?
根據 Steven Hoober (2004) 年的研究，他發現了以下現像﹕
- 螢幕的中央是最容易點擊的地方
- 螢幕的中央是點擊準確率最高而且點擊速度最快的區域
- 人們會經常變換拿手機的方式，以便觸碰螢幕的任何地方
- 在中央區域外的大部份點擊都是用兩隻手
- 有 49% 的時間，人們是用單手拿著手機，並用同一隻手的拇指操作
- 人們經常會用另一隻手的食指去操作
用數據進行優化
你是否知道你的內容當中，那一個部份讀者最想看到呢?
若你留意的話，我的文章通常長度都頗長，原因是 長文對 SEO 有利。因此，我全部文章在開始時都會有一個插件 ( Easy Table of Content) 生成的小目錄。
問題是﹕「若我要優化，或加入內容，應該先優化那個部份，若要加內容，應該在那個標題或副標題先下手呢? 」
其中一個做法是我會觀察訪客的點擊 – 以下是我其中一篇文章的目錄點擊 heatmap﹕
以上可以知道訪客對那個題目比較有興趣，我便可以因應點擊次數，調整優化的次序。又或，你可以把較受歡迎的內容放在內容較前的位置，提高顧客的用戶體驗。
另一個情況是，讀者未讀到正文，網頁的其他原素已經令他們分心了，也是用 heat map 可以觀察，發現有問題便需要調整。(我曾經用過的 Heat Map 工具，包括 Hotjar 及 Optimizely)
數字的影響力
一個常識是，一件商品，標價是 $99 的話，應該會好賣過標價 $ 100，一個是 2 位數字，一個是 3 位數字。但如果你是賣服務的，有 3個會員計劃，分別是金、銀、銅，你應該用那一個排列次序呢?
- 銅會員計劃 – HKD 299
- 銀會員計劃 – HKD 499
- 金會員計劃 – HKD 699
還是用這個呢?
- 金會員計劃 – HKD 699
- 銀會員計劃 – HKD 499
- 銅會員計劃 – HKD 299
根據<< 快思慢想>> 作者 Daniel Kahneman 的實驗，因為人其實對於數字的概念是會變的，人們會以一個特定的數字作為參考點，而這個數字將會對後續出現數字的反應 (大部份是無意識的)。`即使後面出現的數字跟原來的數字沒有關係。
一個例子是，若在某家商的廣告上面寫著罐裝湯在促銷，平均購買量是 3 罐，但假若廣告上加上「每人最多只限賣 10 罐」，平均銷售量是 7 罐。
根據以上情況，若想提高銷售金額，應該先給準客戶看到貴價會員售價，即用以下排位﹕
- 金會員計劃 – HKD 699
- 銀會員計劃 – HKD 499
- 銅會員計劃 – HKD 299
網頁速度
明顯地，網站載入速度越高，用戶的感覺一定越好，在手機上的感覺尤為重要。事實上，超過 53% 使用者表明，若下載時間多於 3 秒，他們會選擇到另一個速度較快的網頁。( Source)
若你想提高網頁速度，Brain Dean 在2019年發佈了一份 深入的研究，你可以根據其中選擇供應商及優化，以下是部份節錄﹕
1) 平均來說桌面版網頁需要 1.285 秒來接受首 byte 的資訊 (TTFB)，手機版則要 2.594秒
2) 平均來說手機版網頁載入時間比網頁版多出 87.84%
3) 若你用 CDN，Squarespace 及 Weebly 在手機速度方面比較好。相反，Wix 及 WordPress接近包尾。
4) CDN 對於桌面版本網頁的 TTFB 影響很大，但對手機版網頁的 TTFB 則以 HTML Request 影響最明顯。
5) 網頁檔案太大會對網頁”視覺上完成”有很大的影響。大檔案網頁比小檔案室網頁需要載入時間多 318%。(GZIP 壓縮令圖片載入速度更快)
6) 網頁整個檔案大小對”整個網頁下載” 完成有著最重要的影響。
7) 在 Javascript Framwrok 中，Wink 及 Gatsby 表現最好
8) 第 3 方的的編碼 (scripts) 會令載入時間大幅增加。平均而言，每一組第3方編碼令載入時間多了 34.1 ms
9) 用 Responsive Image 整體而言令載入時間表現更好
10) 在 hosting provider 的層面，GitHub 及 Weebly web host 的 TTFB 表現最好。相反 Siteground 及 Wix 是最慢的。
字形大小與顏色
這個不難理解，年紀越大，視力會退化，人到40歲，眼球中的水晶體會開始老化變硬，眼睛對焦能力便會差，即俗稱老花。
若你的目標受眾在 40 歲以上，你應讓用稍為大一點的字體，例如 16pt 的字體
同一道理，人越大，顏色視覺也會衰退。辨識相近顏色會變得困難，而藍色看起來會褪色變淡，因此，最好不要用藍色做記號。同時，用對比很大的顏色作為強調點，效果會更好。
根據 Explosive Growth 作者 Cliff Lerner 的親身體驗，若你的受眾是女性，粉紅色的背景可以提高互動率。
分享不等於已閱讀
根據研究，很多人分享文章前其實並不會徹底讀完文章才分享出去，很多時被分享的文章只讀了不到 60%。
根據 Adrianne Jeffries (2014) 的一篇文章提到，世界頂級資訊性網站 Buzzfeed 及 Upworthy 的文章，被分享最大的可能性出現在內容頭 25%或是整編閱讀後。
另外，Chartbeat 的數據科學家 Josh Schwartz 分析了頁面的「捲動深度」。他發現，在閱讀長內容時，大部份人只有捲動到 60% 的位置。有10% 的人甚至完全沒捲動。
回應文章開首問題 – 請把最重要的資訊放在文章的前 60% 裏
如果你想人們分享大章，請在人們讀了 25% 的文章時就提醒他們，讀完整編後也多提醒一次。
用美金還是用港幣
這個問題跟轉化 Conversion 有關，比較跟賣網上課程的朋友有關。在列明價格時，用美金還是用港幣會有較高的轉化呢?
我問過網路行銷玩家的阿石，他說在他的角度，分別不大。雖然數字上，美金會小一點，但他認為賣的應該是價值，不是價格。他自己沒有做過一個比較。
例外情況是，受眾的貨幣比較低水。意思是，若馬幣當時比較弱，收美金會真的有影響，轉化會降低。
開新 TAB?
如果你的內容有內部或外部連結，你會用以下那一個選項呢?
- 反向鏈結 (同一視窗開啟)
- 反向鏈結 (新視窗開啟)
WordPress 的預設定是選項(1)，但綜合不少讀者的建議，若是網誌的話，他們覺得 (2) 是比較好的選項。我想主要原因在於我的文章是長文，有機會在文章中段已經有外部文章連結，倘若要重温便可能要來回多次才能閱畢整編文章。
聯絡你真的容易嗎?
我不明白這個顯淺的道理為何現在還是有這麼多人忽略。很多人還是在網頁上放一個電話、一個 Email 已經足夠，你知道我的網頁有多少個聯絡方法嗎?
若在手機上觀看我的頁面，我還是
我自己的確觀察到訪客的耐性越來越短，若遇到「問題」，誰「最快」有可能勝過誰「最好」。
在「最快」當中，假若你是最「了解」他們，你的成交率便越高。
在跟潛在客戶聯絡前，我們已經知道客戶的經驗及能力，對於推銷你的產品及服務可以更客制化。上星期在 2019 Wordcamp 活動中跟 More Digital 的 Rem 傾談過，若你想 Sales Lead 質素提高，先行過濾的確比較好。
我自己主有兩個工具，一個是用 Clickfunnel 做的問卷，另一個是找程式員寫的。
總結
我不是 UX/UI的專家，個人認為雖則以上的資訊有參考價值，但也應該由真實數據去決定似乎較為準確 (最簡單的可以由 Google Analytics 埋手)。舉個例子，AMP版本的網頁在很多 SEO 專家對排名有很多幫助，但我自己的經驗卻令跳出率提高了不少。同一時間，有朋友跟我說，AMP 的確令轉化率了高了。
我的見解是，搜尋者到不同網站會有不同預期，他們在 進入網站時處於什麼階段 (閒逛? 資訊搜索 ? 預備購買?)也會令結果有所分別，不妨多加測試會比較理想。
坊間有不少書本講述 UX 及 UI，我推薦由 Susan M. Weinschenk 寫的 <<更了解「人，你才知道怎麼設計!>>，不僅在網頁設計上有用，對掌握消費者心理也有很大參考價值。
