移動用戶體驗設計原則

已發表: 2022-03-11

好的設計就是好的設計,對吧? 沒錯,但是根據該設計的媒介,有一些專門的考慮因素會發揮作用。 類似在台式計算機上運行的應用程序的設計原則通常與最有效的移動用戶體驗設計慣例略有不同。

即使在“移動用戶體驗設計”這樣的總括類別中,設計應用程序和設計移動網站之間也存在差異。 當用戶下載應用程序時,他們不僅想要網站的移動版本。 他們想要一種獨特的體驗來證明他們下載應用程序所花費的時間(以及它在手機上佔用的空間)是合理的。 用戶無需擔心刪除他們認為不值得的應用程序——75% 的應用程序下載只打開一次。

一般來說,移動設計不容忽視。 在全球範圍內,通過移動設備和平板電腦訪問互聯網的人數超過了通過台式電腦訪問互聯網的人數。 忽略這些用戶不再是 UX 設計師可以證明的。 對於移動設計師來說,在設計過程的每一步都考慮移動 UX 最佳實踐非常重要。

把用戶放在第一位

這一點不言而喻,但在任何設計項目中,用戶都應該是第一位的,而用戶需求在移動設備上更為重要(也更具體)。 如果設計師不滿足移動用戶的需求,這些用戶將很快轉移到其他網站、應用程序或分散注意力的地方。

以下是設計師可以做的一些事情來滿足移動用戶的特定需求。

移動用戶體驗最佳實踐:將用戶放在首位
在設計任何移動體驗時始終將用戶放在首位。

使導航直觀

移動網站和應用程序上的導航需要比桌面網站更直觀。 用戶需要能夠立即確定如何繞過移動應用程序或網站。 這可以通過可識別的設計模式(例如漢堡菜單)以及可識別的圖標(主屏幕的“主頁”圖標、消息傳遞的聊天氣泡等)來實現。

移動設計模式:直觀的圖標
當包含圖標標籤時,使用直觀的圖標(“睡眠”的月亮,“冥想”的祈禱手等)更加用戶友好。

如果用戶必須考慮如何導航,他們更有可能脫離網站,或者關閉應用程序並尋找更簡單的解決方案。

創建跨設備的無縫體驗

無論用戶是訪問應用程序、移動網站還是桌面網站上的內容,使用它們之間的轉換都需要無縫。 設計元素應該相互映照(例如,設計師不應將藍色用於應用程序,而將紅色用於網站)。

無縫體驗不僅讓使用網站或應用程序的人更輕鬆,而且還建立了對品牌的信任。

移動用戶體驗設計原則:設備之間的無縫過渡
在不同設備上使用應用程序或網站之間的轉換應該是無縫的。

關注用戶目標

人們在移動應用程序或網站上的目標可能與他們在完整的桌面網站上的目標不同。 例如,在餐廳應用程序上,訪問者可能只想做幾件事:查看菜單、預訂或查詢路線。 在大多數情況下,他們不會在手機上查看業務的完整歷史記錄——這類內容可以隱藏在菜單或子菜單中。

想想用戶在移動應用上真正想要做什麼。 設計師經常忽略的一件重要事情是需要登錄才能完成基本任務。 例如,銀行應用程序通常要求登錄才能在應用程序上執行任何操作。 但是,諸如查找最近的 ATM 位置之類的任務實際上並不需要用戶登錄。使這些功能易於訪問是改善用戶體驗的好方法。

移動應用程序設計原則:讓用戶輕鬆
這個本地信用合作社允許人們查找位置而無需先登錄。

允許個性化

對於移動應用程序,個性化是改善用戶體驗的關鍵。 個性化還可以幫助實現營銷目標。 這對所有相關的利益相關者來說都是雙贏的。

個性化應該將用戶推向他們正在尋找的內容,並遠離與他們無關的內容。 它還可以消除網站上的干擾,簡化購買流程等組件,並確保營銷信息與訪問者的實際需求保持同步。

UX 原則:允許用戶個性化
健身應用 Strava 會自動為用戶加載最近使用的運動類型,但也可以輕鬆切換運動(將最可能的選項放在頂部附近)。

然而,過多的個性化可能很容易落入陷阱。 個性化程度需要與用戶對應用程序和公司的信任程度相匹配。 當網站展示他們正在考慮(或談論)但甚至沒有搜索過的東西的廣告時,人們多久會感到不安或奇怪? 當然,這只是高級廣告算法的預測性質,但這種程度的個性化仍然會讓訪問者感到擔憂。

總是讓事情變得更容易

當一個人在移動設備上訪問網站或應用程序時,他們希望盡快完成手頭的任務。 由設計師來盡可能輕鬆地完成必要的任務。 消除對每項任務並非絕對重要的所有內容是一個很好的起點。 在移動界面上簡化必要的任務也是關鍵。

例如,許多電子商務應用程序和網站現在提供用於輸入信用卡信息的攝像頭選項。 購物者無需輸入卡號,只需將相機對准信用卡,應用程序就會自動讀取卡號。

其他事情,比如在表單字段中指定輸入的類型(例如,當電子郵件地址是預期的輸入時,@符號和“.com”會在主鍵盤屏幕上彈出)。

良好的入職實踐

良好的入職培訓對於移動應用程序至關重要。 但不同類型的應用程序對“好”的定義差異很大。 易於使用的應用程序(例如待辦事項列表或網絡瀏覽器)需要最少的引導。 大多數用戶需要開始使用幾個指出獨特功能的啟動畫面。

移動應用程序設計原則:良好的入職培訓
Masterclass 為新用戶提供了出色的入職流程,展示了一些關鍵功能,同時還為用戶提供了查看更多內容或登錄的選項。

但更複雜的應用程序,例如用於金融服務或項目管理的應用程序,需要更全面的引導。

使用既定手勢

這一點不言而喻,但移動設計師需要考慮人們已經習慣在他們的設備上使用的既定手勢。 對於大多數用戶來說,像捏縮放或滑動這樣的操作已經變得很直觀,應該盡可能地使用。

移動用戶體驗最佳實踐:使用既定手勢
設計師應該盡可能使用人們已經熟悉的既定手勢。

在設計師決定偏離既定手勢的情況下,無論是在入職過程中還是在第一次出現用例時,都必須讓用戶了解這種偏離。

手機版面設計

設計移動佈局與設計任何其他類型的佈局並沒有完全不同,但設計師需要考慮一些因素。

最大的考慮因素之一是觸摸屏目標的大小。 雖然鼠標或觸控板可以精確地點擊,但指尖的準確度要低得多。 理想情況下,移動設備屏幕上的目標應為 7-10 毫米。 這允許指尖輕敲目標,而不必過於仔細地瞄準。

需要考慮的一個相關區域是手部位置控制和移動設備上的“拇指區”——當人們用一隻手拿著手機時,可以用拇指輕鬆訪問手機屏幕的區域。 將大部分交互式內容(尤其是號召性用語)放在該區域對於創造積極的用戶體驗至關重要。

移動用戶體驗設計:考慮拇指區域
“拇指區”是移動用戶體驗設計需要考慮的一個重要方面。 (圖片由盧克W)

對於移動設計來說,盡可能多地消除雜亂是很重要的。 在移動應用程序方面,極簡主義是設計師的朋友。 試圖將桌面 UI 中的所有內容都塞進一個只有一小部分大小的屏幕中,這會使設計看起來局促並且可能會讓人不知所措。

專注於目標,最小化導航選項(菜單和子菜單可以幫助實現這一點),並且通常消除對用戶做他們需要做的事情不是必需的任何元素,將創建一個更精簡和用戶友好的 UI。

移動用戶體驗模式:極簡設計
谷歌的移動應用程序採用簡約設計,刪除了所有不必要的元素。

在消除屏幕混亂的同時,設計師必須確保不要忽視一些關鍵的設計注意事項。 其中一項考慮是確保各種設計元素具有足夠的對比度。 人們經常在不太理想的條件下查看他們的移動設備。 像明亮的陽光這樣的東西會使屏幕上的元素難以看到,但高對比度有助於使元素更明顯。

排版是另一個關鍵考慮因素。 在移動設計中擁有清晰的排版層次結構非常重要。 標題和標題應該很容易發現,一般來說,字體應該更大。 沒有人喜歡瞇著眼睛盯著屏幕嘗試閱讀手機上的大段文字。 清晰的標題、項目符號或編號列表以及簡短的段落都使移動文本更清晰易讀。

最後一個 UI 考慮因素是過渡和動畫的使用。 動畫可以是向用戶發出的重要信號,表明他們剛剛採取的任何行動都會有所作為。 移動應用程序中屏幕或功能之間的動畫和清晰的過渡是反饋的關鍵部分,可以創造更令人滿意的用戶體驗。

移動用戶體驗最佳實踐

在設計移動應用程序和網站時,上述所有因素都是重要的考慮因素。 但是還有其他移動 UX 最佳實踐需要遵循,以確保獲得最佳的用戶體驗。

專注於速度

儘管有廣泛的 4G 數據可用性,但移動網絡通常仍然比 wifi 或寬帶服務慢。 而且在世界許多地方,4G 並不存在,移動用戶要么被 3G 所困,要么被更慢的數據速度所困。

移動用戶體驗設計:不是每個人都擁有最新的技術
並非每個使用移動應用程序或網站的人都會擁有最快的網絡連接,甚至是最新的設備。

這意味著移動網站,尤其是移動應用程序需要快速。 在應用程序中包含不需要每次加載應用程序時都下載的內容將使應用程序更快。 僅在必要時加載內容(儘管預測需要的內容並預加載它可以使應用程序在用戶看來更快)。

這是在不加載不會使用的內容(並用完數據)和通過預加載用戶接下來可能需要的內容來創建速度感知之間的平衡行為。

一種創造速度錯覺和安撫不耐煩用戶的方法是在內容加載之前使用佔位符。 Facebook 的移動應用程序就是這樣做的,當應用程序打開時,實際上看起來是一個精緻的線框加載,為下載時加載的帖子保留空間。 這個過渡屏幕向用戶發出信號,表明內容在實際加載之前正在發生某些事情。

向用戶提供反饋

在用戶在移動應用程序上執行操作時為他們提供反饋是積極用戶體驗的一個重要方面。 如前所述,動畫和過渡是提供反饋的一種方式。

移動設備也可以提供觸覺和音頻反饋。 在執行某些操作時提供觸摸反饋在手機遊戲中特別流行,並且在錯誤消息中也很流行。 音頻反饋在各種應用程序的功能中很受歡迎。 儘管如此,設計師不應該依賴音頻反饋,因為很多人一直保持手機靜音。

最小化數據輸入

另一個關鍵的移動用戶體驗最佳實踐是最小化所需的數據輸入量。 之前已經提到過這一點,但是一個人必須輸入移動應用程序的數據越多,他們放棄這項任務的可能性就越大。

在台式機或筆記本電腦上填寫包含四個或五個字段的表單可能沒什麼大不了,但在移動設備上,這四個或五個字段可能足以讓用戶拒絕,特別是如果他們看不到他們的目的。 確保在移動設備上填寫的表格中的每個字段都是必要的。 消除任何不是的。

這是一個讓人們可以選擇使用他們現有帳戶之一(例如 Facebook、Google 或 Twitter 帳戶)而不是從頭開始註冊可以大大提高轉化率的領域。 當用戶只需單擊以授權訪問而不是填寫新註冊表格時,他們更有可能這樣做。 只是不要僅僅依賴這些輔助應用程序——一些用戶仍然不信任關聯他們的帳戶,並且會花時間填寫表格。

移動用戶體驗:讓用戶輕鬆註冊
項目管理應用程序 Podio 使新用戶可以輕鬆地使用 Google 或 ShareFile 帳戶進行註冊。

結論

遵循這些既定的移動用戶體驗設計原則將為訪問移動網站或使用移動應用程序的人們創造更好的整體用戶體驗。 設計師只有幾秒鐘的時間來吸引人們的注意力,然後他們才會放棄一個應用程序或網站,轉而使用更用戶友好、直觀或精簡的應用程序或網站。

出色的移動設計正變得越來越普遍,並且在用戶對移動應用程序的期望方面進一步提高了標準。 設計人員不能再將移動設計視為事後的想法,而需要投入與其他格式設計一樣多的時間、考慮和資源。

• • •

進一步閱讀 Toptal 設計博客:

  • 移動 UX 設計 - 最佳實踐、約束和與開發人員合作
  • 通過這些移動應用入職靈感留住用戶
  • 移動可用性基本指南
  • 移動界面的啟發式原則
  • 移動體驗的電子商務 UX