[提高網站 SEO 排名及轉化系列] – 9 個關於 UX/UI那些有用的設計

0

一向都想寫一篇關於網站設計的文章,雖然可能對 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 發表一篇文章,文章的重點應該放在那裏?

  1. 文章的前 60%
  2. 文章的後 60%

那一種做法會有比較多人分享? 為什麼呢? (答案在文章後半部)

雖然以上臉書跟網站設計不同,但其實當中的心理原素是相通的。對美,Google 還是在從數據學習,這些數據就是各位在 Google Analytics 的數據。

我搜集了 9 個關於網站設計時有利讀者的觀察,部份來自書籍,部份來自網上測試,在各位設計網站時,不坊作為參考。

手機編

各位有否想過當我們用手機觀看網站時,假設你是用右手的話,屏幕那一個位置最難接觸呢? 又如果你想訪客按下一個鍵,那個位置最好呢?

根據 Steven Hoober (2004) 年的研究,他發現了以下現像﹕

  • 螢幕的中央是最容易點擊的地方
  • 螢幕的中央是點擊準確率最高而且點擊速度最快的區域
  • 人們會經常變換拿手機的方式,以便觸碰螢幕的任何地方
  • 在中央區域外的大部份點擊都是用兩隻手
  • 有 49% 的時間,人們是用單手拿著手機,並用同一隻手的拇指操作
  • 人們經常會用另一隻手的食指去操作

用數據進行優化

你是否知道你的內容當中,那一個部份讀者最想看到呢?

若你留意的話,我的文章通常長度都頗長,原因是長文對 SEO 有利。因此,我全部文章在開始時都會有一個插件 (Easy Table of Content) 生成的小目錄。

問題是﹕「若我要優化,或加入內容,應該先優化那個部份,若要加內容,應該在那個標題或副標題先下手呢? 」

其中一個做法是我會觀察訪客的點擊 – 以下是我其中一篇文章的目錄點擊 heatmap﹕

用 HEATMAP 觀察網站的用戶行為

以上可以知道訪客對那個題目比較有興趣,我便可以因應點擊次數,調整優化的次序。又或,你可以把較受歡迎的內容放在內容較前的位置,提高顧客的用戶體驗。

另一個情況是,讀者未讀到正文,網頁的其他原素已經令他們分心了,也是用 heat map 可以觀察,發現有問題便需要調整。(我曾經用過的 Heat Map 工具,包括 HotjarOptimizely)

這個紀錄是一星期,走進這佪頁面有大概 113 人,其中 7 次點擊是未進內文已經進行。

數字的影響力

一個常識是,一件商品,標價是 $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?

如果你的內容有內部或外部連結,你會用以下那一個選項呢?

  1. 反向鏈結 (同一視窗開啟)
  2. 反向鏈結 (新視窗開啟)

WordPress 的預設定是選項(1),但綜合不少讀者的建議,若是網誌的話,他們覺得 (2) 是比較好的選項。我想主要原因在於我的文章是長文,有機會在文章中段已經有外部文章連結,倘若要重温便可能要來回多次才能閱畢整編文章。

聯絡你真的容易嗎?

我不明白這個顯淺的道理為何現在還是有這麼多人忽略。很多人還是在網頁上放一個電話、一個 Email 已經足夠,你知道我的網頁有多少個聯絡方法嗎?

若在手機上觀看我的頁面,我還是

「與我聯絡」這個鍵是隨著網頁卷動而移動,我就是要讀者能立刻聯絡上

我自己的確觀察到訪客的耐性越來越短,若遇到「問題」,誰「最快」有可能勝過誰「最好」

在「最快」當中,假若你是最「了解」他們,你的成交率便越高。

在跟潛在客戶聯絡前,我們已經知道客戶的經驗及能力,對於推銷你的產品及服務可以更客制化。上星期在 2019 Wordcamp 活動中跟 More Digital 的 Rem 傾談過,若你想 Sales Lead 質素提高,先行過濾的確比較好。

我自己主有兩個工具,一個是用 Clickfunnel 做的問卷,另一個是找程式員寫的。

總結

我不是 UX/UI的專家,個人認為雖則以上的資訊有參考價值,但也應該由真實數據去決定似乎較為準確 (最簡單的可以由 Google Analytics 埋手)。舉個例子,AMP版本的網頁在很多 SEO 專家對排名有很多幫助,但我自己的經驗卻令跳出率提高了不少。同一時間,有朋友跟我說,AMP 的確令轉化率了高了。

我的見解是,搜尋者到不同網站會有不同預期,他們在進入網站時處於什麼階段 (閒逛? 資訊搜索 ? 預備購買?)也會令結果有所分別,不妨多加測試會比較理想。

坊間有不少書本講述 UX 及 UI,我推薦由 Susan M. Weinschenk 寫的 <<更了解「人,你才知道怎麼設計!>>,不僅在網頁設計上有用,對掌握消費者心理也有很大參考價值。

如果你想提高公司網站排名的話

你可以試一試我們好評如潮的 SEO 服務

唔信? 聽下其他人點講 !

1 分鐘讓我說服你

Estee Lauder 創辦人曾經講過﹕「我人生從來沒有一天工作不做行銷,如果我相信一件事,我會推銷它,而且我會努力推銷。」 我深信 SEO 可以為你公司帶來正回報,一定有把它納入你的行銷策略之一 !

找不到你想看的文章?

到我的網站目錄吧!

Share.

About Author

熱愛研究網路行銷、網賺了7年,開辦了首個收費廣東話 SEO 課程。現專注研究搜尋引擎優化! 深信 BE FAST or Be LAST,故是狂野時速粉 !

Comments are closed.

與我聯絡
Call Now Button> 按下立即致電查詢 <