改善移動用戶體驗的10種方法

米歇爾·海曼斯(Michiel Heijmans)

Michiel是Yoast和我們的首席運營官的合伙人。 互聯網資深人士。 他大部分文章的主要目標是啟動網站優化。 需要做的事情還很多!

10種改善移動UX的方法10種改善移動UX的方法

您有一個移動網站,對嗎? 是響應式的還是您使用插件使其外觀更好? 它會轉換嗎? 多年來,隨著移動互聯網的使用激增,您的移動網站的用戶體驗(或移動UX)應獲得與桌面網站的用戶體驗一樣多的關注。 更重要的是,隨著Google會越來越根據您的移動版本來判斷您的網站。 在本文中,我想分享您可以做的十件事,以增強您的移動網站的用戶體驗(UX)。

首先,讓我與眾不同。 儘管本文中提到的所有內容也適用於平板電腦,但在撰寫本文時,我們會牢記智能手機。 但是,在2020年,您不僅必須牢記智能手機,因為許多其他設備會消耗您的內容。 在您的smartwatch上閱讀此文章? 當然可以,為什麼不呢。

1.使用基於任務的設計

在設計用戶時要牢記用戶的移動網站及其結構,同時不要忘記 移動SEO。 您的用戶使用手機。 他們可能會去任何地方,需要檢查您網站上的內容。 那會是什麼呢? 考慮一下訪客在您的網站上所做的事情(檢查Google Analytics(分析),對您的業務使用常識或進行適當的測試)。 確定您的移動網站的首要任務。

10種改善移動UX的方法10種改善移動UX的方法Wijchen.nl具有基於任務的設計

根據最高任務專家 格里·麥戈文,首要任務是對您的客戶最重要的一小部分任務(通常少於十個,通常少於五個)。 這些是用戶期望在您的網站上快速完成的關鍵任務。 優化您的移動網站,使這些任務可以最輕鬆地訪問。

大衛·艾倫(David Allen)已經告訴過您。 您需要完成任務。 如果有人找到您的網站並開始瀏覽,請確保他們可以輕鬆找到並完成他們想做的事情。 在他們的手機上,可能有很多他們習慣使用的應用程序。 在移動設備上可能會使用戶難以集中精力。 干擾無處不在,而不僅僅是在電話上。 在切換到其他應用之前,請設計您的移動用戶體驗以確保它們能夠完成任務。

2.添加清除菜單和搜索選項

10種方法來改善mobile-ux-1 10種方法來改善移動用戶體驗可以在需要時進行搜索

移動UX的主要元素之一是搜索。 您必須能夠立即搜索。 閱讀頁面或單擊另一個頁面時,搜索選項應始終可用。 事實是,儘管我們努力提供如上一節所述的最簡單的網站,但總會有一些元素不那麼容易。 對於所有這些內容,最好使用移動搜索選項。

如果您是房地產經紀人或在線銷售服裝,那麼該搜索選項也可能是您的移動首頁上最重要的元素。 在這種情況下,請在內容區域中顯示該搜索選項,然後通過其他頁面上的菜單欄使其可用。

與搜索相關的移動UX的另一件事:擁有選項只是第一步。 確保您的內部搜索結果頁看起來也很棒。 結果應按相關性排序,例如在台式機和移動設備上。 確保可以區分各個結果,從而改善結果的分離。

3.無需分隔線

關於缺乏分離; 這並不意味著您應該在移動網站上使用各種分隔符。 分頻器會佔用空間,而這可能會對移動UX產生負面影響。 考慮樣式元素的方式,使它們看起來都像單獨的部分,而無需分隔線。 使用邊框,空格,標題。 在不增加僅佔用空間的線元素的情況下,可以做很多事情來改進移動UX。 當然,不禁止使用它們。 只要確保他們適合,不要分散用戶執行任務的注意力。

4.使用簡短形式

與您的桌面網站一樣,您的移動網站可能或應該針對轉化。 購買產品或獲取服務報價。 訂閱新聞通訊或僅填寫聯繫表都是需要用戶輸入的所有操作。 在手機上,六頁的表格破壞了移動用戶體驗。 用戶可能會填寫這些內容,但由於它是一個六頁的表格,因此功能強大。

為了獲得最佳的移動用戶體驗,您希望表格儘可能短。 刪除所有您想問但不需要的東西。 通訊? 只是電子郵件地址(帶有輸入欄位)。 引用? 姓氏和電子郵件地址。 店? 收貨地址發票地址地址。 或者至少可以選擇將送貨地址複製到發票地址。 不過,請確保您遵循GDPR指南!

5.調低聲音

您可能會認為您的桌面網站在所有這些顏色和巨大圖像下看起來都很棒,但是在您的移動網站上,效果會有所不同。 重點將減少。 您的網站不必僅是黑白的,但是一個不錯的白色背景,黑色字母和一種或兩種以上的支持顏色就足以成為更好的移動用戶體驗。

請確保您的移動網站和台式機網站具有 移動平價 -他們應該在移動設備和台式機上提供相同的體驗。 這不僅適用於內容,還應適用於設計。 另外,今天,當您評估自己的網站時,應始終從 移動優先。 因此,如果您要為網站開始重新設計項目,請首先進行移動。

淡化事物也適合您的狂野動畫等。 您添加到站點的JavaScript的每一個不必要的部分都使得載入和運行變得更加困難。 另外,動畫在移動網站上並不總是很有意義。 保持網站簡潔明了!

6.按鍵區域

它是如此明顯,但仍然值得關注。 多數使用手指和拇指來瀏覽移動網站,而按鈕並不總是提供足夠的空間來輕鬆點擊它們。 在Google的開發人員文檔中,您可以在以下位置找到此文件 可訪問的點擊目標。 我們還需要能夠使用該拇指單擊元素。

在上面鏈接的Google文章中,您可以找到該點擊目標的編號:

在具有正確設置的移動視口的網站上,建議的最小觸摸目標大小最小為48個獨立於設備的像素。 例如,雖然一個圖標的寬度和高度只能為24px,但是您可以使用其他填充將點按目標的尺寸提高到48px。 48×48像素區域對應於9mm左右,大約相當於一個人的指墊區域的大小。

此外,尼爾森的可用性專家發現 在手機上觸摸目標 渲染尺寸至少應為1厘米x 1厘米,以防止錯誤和挫敗感。 與按鈕擊中區域密切相關的是觸摸元素之間往往過於靠近的方式-Nielsen在該研究文章中也對此進行了描述。 單擊一個鏈接並在其他地方結束很煩人,只是因為它旁邊的鏈接太靠近您想要的鏈接。

7.不要使用太多的字體

印刷術可以造就或破壞移動網站。 您不僅會選擇重要的字體類型,而且還會選擇這些字體的大小。 您不能只使用移動網站上的所有桌面字體大小。 有兩個原因:

  1. 手機屏幕尺寸。 您不希望標題填滿整個屏幕。 您要確保文章在頁面的第一個視圖內開始。 您也不希望基本字體(如您的段落字體)太小而無需捏和縮放來閱讀。
  2. 當使用三種以上的字體大小時,會造成混亂。 大小差異將更加明顯。 這就是為什麼您應該將字體大小的數量限制為兩個,也許三個。

Google的移動友好測試甚至可以檢查 您的字體大小正確。 這主要用於正文字體,但仍然適用。

8.優化速度

正確的移動UX水平的另一個主要因素是速度。 有 多種工具檢查站點速度。 在大多數情況下,您可以做一些事情來提高性能。 第一個總是顯而易見的:圖像優化。 您至少應使用以下工具減小圖片尺寸: 南瓜。 除此之外,您應該合併並最小化已載入的CSS和JavaScript文件。 與伺服器建立的連接越少,您的網站越快,移動UX越好。 當然,您還應該使用優質的託管服務,因為對於許多站點來說,託管通常是一個捷徑。

網站速度是Google的熱門話題。 不久之前,他們宣布了一套稱為「核心網路生命力」的新指標。 這些指標為Google提供了新的排名因素的見解: 頁面體驗。 在2021年,還將根據移動網站為用戶提供的體驗來對其進行評估。 當然,站點速度是這些因素之一。 閱讀有關 三個核心網路生命 並按照 改善頁面體驗的五種方法 用於您的移動網站。

10種方式來改善mobile-ux-2 10種方式來改善移動用戶體驗PageSpeed Insights由Core Web Vitals9為您提供有關網站性能的出色反饋。 不要過度使用廣告

許多網站使用廣告賺錢,這完全可以。 但是,您不應該做的是用彈出窗口等嚇倒用戶。 當您讓用戶體驗到的第一件事是時事通訊的註冊表格時,您就不會真正尊重用戶。 在介紹廣告和CTA之前,請確保正確載入內容。 另外,保持它們的品味並淡化。 您正在尋找與用戶建立聯繫並建立聯繫的方式,當他們在進入您的移動網站後第二次閃過BUY MY STUFF時,這種情況就不會發生。 這是糟糕的用戶體驗-並且 甚至可能讓Google生氣的一款

10.一次又一次測試您的移動用戶體驗。

在為訪問者提供響應式網站時,您需要確保對桌面網站上的所有更改都在網站的移動版本上進行了測試。 這是確保您的移動網站始終保持最新狀態的唯一方法。 確保 測試您的移動網站 一次又一次。

因此,總而言之,移動UX涉及很多事情。 在本文中,我們討論了改善移動用戶體驗的以下十種方法:

  1. 使用基於任務的設計
  2. 提供帶有搜索選項的優質菜單
  3. 當節明確開始時,無需添加分隔線
  4. 使表格儘可能短
  5. 不要在設計中添加太多顏色
  6. 確保可以單擊按鈕和鏈接
  7. 不要過度使用字體大小變化
  8. 使您的網站儘可能快
  9. 不要做侵入性廣告和彈出窗口
  10. 在移動設備上測試對網站的所有更改

期待您的提示!

這些只是我們認為優化移動用戶體驗時應考慮的許多事情中的十件事。 我們確定您可以提出更多建議,並且期待您對此主題的看法:您認為移動網站還應考慮哪些其他事項?

閱讀更多: 移動SEO:最終指南»

資源

相關文章