[提高網站 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 可以為你公司帶來正回報,一定有把它納入你的行銷策略之一 !

為可你要聽我說?

你不會找一個不懂游泳的人教點游泳......

你不會找一個肥仔教你點減肥......

你不會找一個處男教你點......

上星期一間社交媒體公司說給我一個社交媒體計劃,好有自信的問我想不想生意翻兩倍?

我當然想,然後給了我一個月費 8000 的計劃,大概就是替我 Facebook 出 Post 優化我的 Facebook 廣告

然後我就走到他們的公司專頁一看,不得了

專頁有成 15000+ 粉絲

每個 Post 都有 3 至 5 個 Likes,而且 Account 幾乎一模一樣

這下真的很難說服我......

雖然 Like 不代表些什麼,但真的很難心理上說服自己......

是的,可能他們不方便公開客戶的資料,但連你自己的專頁都做不好,真係沒有什麼說服力......

Results Tell

我呢?

當然,為了說服顧客,有時唯有出賣自己網站排名......

相信,沒有一個行比起 SEO 這個行業更難獲得好排名吧!

桌面版 手機版

相信,沒有一個行比起 SEO 這個行業更難獲得好排名吧!

Share.

About Author

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

Comments are closed.

與我聯絡