如何設計出色的移動用戶體驗

已發表: 2018-08-06

如何設計出色的移動用戶體驗需要成為您的企業在網絡上所做的一切的最前沿。 除非您首先考慮到移動設計,否則您的業務將不會取得應有的成功。 原因很簡單:手機早已取代桌面成為人們訪問互聯網的第一方式。 換句話說,無法為移動設備設計……無法獲得盡可能多的網站訪問者、潛在客戶和客戶。

讓我們看看統計數據。

根據 Smart Insights 的說法,我們已經超過了移動用戶數量超過桌面用戶數量的地步。 這個轉折點發生在 2014 年。從那時起,全球移動用戶數量僅繼續大幅攀升,而桌面用戶數量增長速度放緩。

底線:更多的潛在客戶、訪問者和客戶將通過他們的手機而不是台式機登陸您的網站。

如果您想最大限度地提高轉化率,那麼您的網站必須首先針對移動設備進行優化。 今天,出色的移動用戶體驗也是成功的移動營銷。

讓我們來看看。

如何設計出色的移動用戶體驗:統計數據說明了什麼

每當您想建立一個可靠的用例來證明您的業務支出的合理性時,例如,對於移動優先設計,只需查看有關這些天人們購買方式和地點的統計數據。 去證據引導你的地方。

專門從事商業營銷的全球科技公司 Criteo 發布了一份新聞稿,顯示僅美國的移動銷售就佔所有電子商務交易的 52%。 顯然,如果您想有效並成功地進行銷售……您需要一個非常高效的移動設備和出色的用戶體驗。

這是另一個非常有趣的統計數據,乍一看,它實際上揭示的不僅僅是它看起來的東西。

根據 Adob​​e 的移動零售報告,桌面端的轉化率是移動端的 2.8 倍。 如果您認為這意味著針對移動設備進行優化並不重要,請再想一想。 這實際上是致力於移動優先策略的更多理由,特別是因為移動端仍然比桌面端佔據更多流量。

台式機上的轉化率較高的原因可能是因為移動體驗沒有得到應有的優化,而不是因為人們不喜歡在移動設備上購物和轉化,因為移動設備對他們來說更方便!

想像一下,您的移動網站得到了完美優化,獲得的流量比桌面網站多,轉化次數比桌面網站多,這一切都是因為您實施了出色的移動用戶體驗。

它觸手可及。 這是該怎麼做。

為拇指設計……但不是主要為拇指設計

移動可用性應該基於人們已知的與智能手機交互的所有各種方式。 如何設計出色的移動 UX 既是常識,也是基於證據的。

很容易假設,如果我使用我的智能手機在移動網站上導航和購物,那麼我只用一隻手拿著手機,另一隻手用拇指來完成我的用戶,這樣做會更方便目標。 同樣很容易假設我用雙手(一隻手拿著電話,另一隻手的食指來完成我的用戶目標)會不太方便。

然而,這種傳統觀念實際上是錯誤的,因為它假定人們隻或主要使用一隻手來操作他們的手機。

研究表明,人們實際上有六種不同的方式來握住手機並與之互動。 任何未能針對所有六種方式進行設計的移動網站都會失敗並體驗較低的轉化率,因為用戶體驗會受到影響。

這六種方法是:

  • 搖籃式(一隻手支撐手機,另一隻手拇指輕敲)
  • 握住並觸摸(一隻手支撐手機,另一隻手食指輕敲)
  • 橫向方向的兩隻手(想想您將如何握住像 Nintendo 2DS XL 這樣的手持遊戲設備)
  • 一隻手——第一順序(一隻手拿著手機,另一隻手的拇指輕敲)
  • 一隻手 - 第二順序(一隻手握住手機,同時另一隻手的拇指輕敲,但從更高的起始位置)
  • 兩隻手用於縱向(想想你如何握住手持遊戲設備,這一次,就像舊的 Nintendo Gameboy 一樣)

現在,這就是事情變得真正相關的地方,以下是您握住手機的各種方式的不同用例:

  • 點擊鏈接 - 大多數人按住並點擊或搖籃
  • 複選框 - 大多數搖籃或按住並點擊
  • 打字——大多數人同時使用兩個手指或拇指,或者按住並點擊
  • 短滾動 - 大多數按住並點擊或搖籃
  • 更長的滾動 - 大多數搖籃或按住並點擊

底線:設計您的移動網站以適應人們持有手機的這些不同方式的範圍。

更大的按鈕更好

如果您正在考慮如何設計出色的移動 UX,那麼最重要的方面之一就是按鈕大小。 與所有移動設備一樣,您的屏幕尺寸比平板電腦或台式機小得多,因此如果按鈕太小,則會影響您的移動網站的可用性。 尺寸不足的按鈕會導致 UX 錯誤,例如:

  • 難以正確點擊按鈕
  • 首先看到按鈕的問題
  • 很難理解按鈕可以被點擊或以其他方式與之交互

犯錯越大越好。

更大的按鈕可確保為您的購物者、客戶、訪客等提供更流暢的用戶體驗。

這就引出了一個問題,到底有多大?

根據 Google 自己的 Material Design Touch Target Size 指南,移動按鈕的觸摸屏尺寸應該在 7 到 10 毫米之間。 換句話說,按鈕應該擁有大約 1 厘米的物理尺寸,無論它們出現在什麼屏幕上。 這確保了以下之間的巨大平衡:

  • 信息密度
  • 用戶界面元素的“目標性”

當您的用戶可以更輕鬆地看到按鈕、了解它們與其他屏幕元素的空間關係並點擊它們以成功完成頁面目標時,您就可以為他們提供令人驚嘆的 UX。

優先考慮最重要的內容

問題的答案,如何設計出色的移動用戶體驗? 有時在於您減去而不是添加。 對於屏幕內容,此規則適用 100%。

儘管最近有增加手機屏幕尺寸的趨勢,但智能手機的優勢在於其小巧便攜的尺寸。 這種便利有一個缺點,就是用戶要承受更大的交互成本。 這是他們為實現移動網站目標而必須付出的體力和腦力。

例如,如果您在桌面上瀏覽新聞網站,您可能會在首頁上的首屏側邊欄中看到體育比分和天氣預報,因此您不必費心向下滾動。 然而,在移動設備上,同樣的內容可能需要一些認真的滾動才能到達,因為移動設備的空間非常寶貴。

因此,唯一的解決方案是優先考慮移動設備上最重要的內容。 換句話說,仔細考慮在您的移動頁面上向用戶和訪問者展示哪些內容。 畢竟,對於您在首屏包含的每個內容元素,必須將另一個元素向下推,甚至在首屏以下犧牲。

幫助您最大化首屏移動內容的一種方法是最小化所謂的 chrome。 在這種情況下,我們不是在談論 Google 的瀏覽器。 Chrome 是視覺設計元素的集合,可幫助用戶與界面內容交互或提供有關界面內容的額外信息,但不是內容的一部分。 Chrome來自手機的操作系統。

當您在 Gmail 應用程序的收件箱中查看電子郵件時,與用戶帳戶關聯的所有圖片就是 chrome 的一個示例。 在此示例中,這些圖片可幫助您額外識別發件人,但它們對於識別它們並不是絕對必要的(電子郵件本身中的 From 行就足夠了)。

通過減少這些鍍鉻元素,您可以大大節省移動屏幕空間,因此更有可能將最重要的信息放在小折疊區域上方。

關注最終用戶

如何設計出色的移動 UX 的秘訣始終取決於最終用戶。 在設計您的移動網站時請記住這一點,您將創建一個用戶友好的網站。 就是這麼簡單。

要做到這一點,請確保您基於真實數據而非假設進行設計。 一個很好的起點是您的用戶首先如何握住他們的手機。 如果您正在為許多人甚至不拿著手機的方式進行設計,那麼所有的賭注都沒有了。

還請記住,由於移動屏幕較小,因此必須輕鬆快速地查看內容,因此要使元素更大,並確保最重要的內容位於首屏。