移動界面的啟發式原則

已發表: 2022-03-11

Jakob Nielsen 在開始學習許多模式時,正在為人機交互中的可用性工程提供諮詢和教學。 所以在 1994 年,他收集並發布了一套可用性啟發式評估原則,這些原則反映了他所學到的東西。 今天,經過近 25 年的計算機轉變和智能手機的轉變,尼爾森的原則仍然堅定不移。

以人為本的設計放大了用戶的重要性,設計過程也相應地進行了調整; 然而,儘管尼爾森的原則在所有屏幕類型中仍然普遍存在,但隨著移動設備使用的不斷增加,重點還是在移動界面上。

在網上搜索啟發式原則,就會出現一長串略有不同的集合。 以下是十項原則的精選集合,這些原則的靈感來自以人為本的設計和可用性思想領袖。

可用性啟發式從用戶需求開始

在進入這套原則之前,必須認識到用戶的重要性在不斷增長。 GOV.UK 的重新設計儘管是一個政府網站,但卻是用戶主導產品因其可用性而獲得全球認可的典型例子。

該項目的設計總監 Ben Terrett 從一系列用戶界面設計原則開始,從產品策略到視覺設計方法。 第一條原則就像產品成功的北極星:“始終從用戶需求開始。 如果你不知道用戶的需求是什麼,你就不會構建正確的東西。 做研究,分析數據,與用戶交談。 不要做假設。 對用戶有同理心,並記住他們所要求的並不總是他們所需要的。”

可用性評估的啟發式原則有助於確定 UI 設計在哪些方面未能提供用戶友好的體驗。

#1 系統結構的透明度

使某些元素和結構可見的行為,以便用戶對上下文有充分的理解。

UI 應該讓用戶相信他們在控制之中。 他們應該能夠輕鬆地回答這些問題:“我現在在哪裡?” “我能從這裡去哪裡?” 當一個系統是透明的時,用戶可以控制接下來會發生什麼。 他們獲得了使用界面的自主權和隨後的信心。

導航菜單擴展可用性啟發式
導航菜單轉換為漢堡菜單,指示以後可以在哪裡找到信息。 (由 Gal Shir 設計)

#2 行動反饋的即時性

對確認系統已收到請求的用戶操作的響應。

任何用戶操作都應該有即時的界面反應。 即時反饋使用戶確信系統正在執行預期的操作。 Smashing Magazine 的 UX 專家 Nick Babich 使用進度指示器作為清晰傳達操作狀態的一個很好的例子。 他辯稱,它在視覺上通知用戶他們的操作已被接受,系統將很快顯示下一個操作。 如果沒有指標,用戶就會面臨不確定性和挫敗感,從而導致旅程中斷。

進度指示器發出動作反饋
一個簡單的動畫確認已收到拉動刷新操作,並且下面的內容是最新的。 (江小北設計)

#3 錯誤意識

當他們走上他們不想走的路時,用戶可以採取足夠數量的信息和選項。

在某些時候,用戶總是以非預期的方式與移動界面進行交互,並發現自己處於不支持他們需求的令人沮喪和低效的境地。 障礙和死胡同是旅程提前結束的常見原因。 UI 應該提供足夠的指示器來幫助用戶識別、診斷和從錯誤中恢復。

援助應始終易於獲得; 然而,要取得平衡是困難的。 太多的選擇會導致認知超負荷。 用戶應該清楚地了解如何解決錯誤並了解將來如何防止它。

用戶界面設計原則中的錯誤狀態
此移動界面中的空白狀態解釋了用戶看到屏幕的原因,並提供了兩個可以解決錯誤的操作。 (穆拉特穆特魯設計)

#4 使用靈活性

具有不同經驗範圍的用戶可以直觀有效地使用的界面。

交互式移動體驗必須獨立於外部用戶指導。 無論是用戶第一次使用移動應用程序還是第 100 次,界面都應該適應這兩種情況。

經驗豐富的用戶應該可以使用快捷方式和更深入的系統理解,而新用戶永遠不應該在簡單的混亂中被拋棄。 借助 UI 的靈活性,用戶可以選擇和控制最適合其能力和需求的旅程。

Jill Gerhardt-Powal 的認知工程原則建議設計師“在適當的時候提供多種數據編碼——系統應提供不同格式和/或詳細程度的數據,以提高認知靈活性並滿足用戶偏好。” 壓倒性或限制性的界面將確保令人沮喪的體驗。

尼爾森關於使用靈活性的啟發式方法
應該向新用戶介紹工具功能,但經驗豐富的用戶永遠不會看到他們定期執行的操作的工具提示。 (拉克希米·卡魯皮亞設計)

#5 熟悉普遍體驗

使用與人類共同經驗和期望相關的設計元素。

GUI 的歷史始於 Apple 在第一個用戶友好的計算機界面設計中使用真實世界的參考。 “Lisa”設計有文件夾圖標等元素來指示文件組織。 當大多數人不熟悉數字交互時,這些物理參考很有用,但隨著數字素養的提高,通用參考不再需要如此字面。

隨著我們花費更多時間與屏幕進行交互,共同的用戶期望已經形成。 我們希望“+”可以擴展為更多信息,並且導航菜單將保留在移動屏幕的頂部或底部。 通過利用大多數用戶會理解的參考資料,界面變得直觀。

啟發式原則依賴於熟悉度
這兩個圖標可以立即識別,並清楚地表明大多數用戶可以理解的操作。 (由 <a href=”https://dribbble.com/pixelamiri 設計

#6 信息和設計審美的局限

創建一個最小化的設計,消除可能干擾流線型和有目的的體驗的不必要元素。

所有數字交互的一般經驗法則是消除混淆。 為了減少決策時間和錯誤,Jill Gerhardt-Powal 要求設計師通過以清晰明了的方式顯示數據來減少不確定性。 這可以通過刪除不必要的內容並使用顏色、佈局和排版來引導用戶瀏覽屏幕來實現。 用戶不應分心,但應提供足夠的指導以輕鬆實現其目的。

Ben Terrett 經常使用 GOV.UK 的第四條設計原則:“努力工作,讓它變得簡單。” 他認為,設計團隊有責任充分了解他們正在處理的問題,以及導致提供直觀、信息豐富和成功的用戶體驗的最佳解決方案的過程。 本案例研究中描述了他們的一些方法。

英國政府
英國政府數字服務部門分解信息以確定用戶需要了解的內容,並創建了視覺設計,消除了任何不必要的內容,以支持信息的清晰度。 (由政府數字服務設計)

#7 功能優先於形式

設計決策取決於元素的用途,而不是優先考慮其視覺風格。

“如果你認為某件事既聰明又復雜,請當心——這可能是自我放縱。” — Don Norman,多產的產品設計師和《日常事物的設計》的作者

界面的視覺設計應始終從定義的功能開始。 當風格和趨勢被優先考慮時,結果可能看起來很漂亮並引起了很多關注,但最終可能導致用戶體驗脫節。 視覺形式無法挽救功能失調的設計。

視覺提示可用於引導用戶了解應用程序的功能。 菲特定律指出,形狀、間距和大小可以引導用戶了解情況並採取所需的行動。 正是在這裡,形式支撐和放大了功能。

可用性啟發式中的形式遵循功能
這種數字登機牌考慮了旅客將如何需要信息,並使用視覺技術使信息發揮作用。 (馬林·貝戈維奇設計)

#8 信息的可用性

用戶觸手可及的界面元素的戰略佈局,因此他們不必依賴記憶。

識別某件事比從記憶中回憶它更容易。 如果移動界面功能依賴於一條信息或對系統的理解不是普遍熟悉的,則該信息應該是可訪問的,以便用戶可以輕鬆引用它。

尼爾森的啟發式原則之一建議設計者應該“通過使對象、動作和選項可見來最小化用戶的記憶負荷。 用戶不必記住從對話的一部分到另一部分的信息。 系統的使用說明應在適當的時候可見或易於檢索。”

Jill Gerhardt-Powal 建議“將較低級別的數據整合到較高級別的總和中,以減少認知負擔。” 她還指出,“顯示名稱和標籤應該與上下文相關,這將提高回憶和識別能力。” 重要的是要意識到,第一次看到界面的用戶不會像設計師那樣了解和熟悉信息。 對於經驗豐富的團隊來說,重複信息可能看起來過多,但對於新用戶來說卻是必不可少的。

優步在應用程序中提供信息
優步的應用程序提供三個級別的出租車服務,並使用戶在需要時可以輕鬆訪問每個選項。 (優步設計)

#9 一致性的可靠性

使用一致和標準化的元素,如文字、情境和行動來創造有凝聚力的體驗。

人類被模式所吸引——我們用它們來理解世界。 在移動界面中製作模式,它成為用戶學習預期內容以及如何與界面設計交互的教學工具。

“這不是緊身衣或規則手冊。 每種情況都不一樣。” GOV.UK 的設計原則規定界面應該是一致的,但不是統一的。 正如 Jill Gerhardt-Powal 所回應的那樣,“新信息應該在熟悉的框架(例如,模式、隱喻、日常用語)中呈現,以便更容易吸收信息。”

尼爾森啟發式要求一致性
谷歌對設計的高度關注體現在其所有 UI 設計的詳細指南中。 (按材質設計)

#10 明智的冗餘

在設計過程中不斷進行反思,以確保用戶界面設計原則和可用性啟發式與產品的目的和用戶需求保持一致。

Jakob Nielsen 是第一個承認不可能呈現 UI 設計的通用細節的人。 例如,他的兩個啟發式原則可能會相互矛盾——#6:提供用戶做出決定所需的所有信息;#8:消除任何不必要的信息。

由啟發式評估者和設計團隊決定針對其獨特用例的最佳決策。 如果產品以人為本並圍繞用戶需求構建,團隊將因了解這一點而得到支持,並在做出這些決策時具有強烈的目的感。

• • •

進一步閱讀 Toptal 設計博客:

  • UX 的啟發式分析 - 如何進行可用性評估
  • 設計原則及其重要性
  • 以人為本的設計在產品設計中的重要性
  • 為更好的用戶體驗創建 UI 樣式指南
  • 移動應用程序設計最佳實踐和錯誤