移動使用者介面的5個設計原則

Mockplus發表於2019-02-19

以下內容由Mockplus(摹客)團隊翻譯整理,僅供學習交流,Mockplus是更快更簡單的原型設計工具

去年移動端使用者首次在全球範圍內超過桌面端使用者。看看來自全球的統計資料,如今超過22%螢幕的解析度為640x360。

這種趨勢不容忽視,儘管響應式和移動式開發已有一段時間了,移動介面中的互動與桌面介面中的互動卻非常不同。隨著React Native和Progressive Web Apps(響應式網頁程式)的興起,未來幾年移動使用者介面的開發也將成為Web開發的重要組成部分。

在開發移動使用者介面時,簡易性對於良好的使用者體驗至關重要。介面應保持一致,避免使用者的認知超負荷和讓使用者感覺到混亂。

為了滿足和權衡使用者互動的作用,本文提到了5個可衡量的原則。這篇文章將分別對這些原則做一個簡短的總結,並舉例子來概述我們在建立移動介面時應該考慮的問題。

有效性

有效性可檢驗當使用者在使用介面時候的有效性如何。使用者有從其他介面和現實世界中獲取的經驗。在人機互動(HCI)中,稱為使用者正在建立的心理模型,以便更容易地理解複雜的概念。我們可以根據現實生活中獲取的知識來提高使用者的效率。有效性的目標是減少完成任務所需的操作次數。

舉一些例子:

PWA是使用心理模型來提升使用者效率的一個極好的例子。通過設計類似於模擬調諧器的數字調諧器,使用者可以立即將這個數字版本的調諧器對映到他在現實世界的體驗中。

使用匹配和已知的圖示來減少認知負擔。把它們和小標籤結合起來,減少錯誤的解讀。

心理模型的另一個例子就是將事物的轉換看成類似於現實世界中燈光的切換。

(圖片1)

移動使用者介面的5個設計原則

效率

效率是指使用者能夠以何種方式理解應用程式的當前狀態以及可以執行的操作。它以每秒動作來衡量,並描述了使用者完成任務的效率。

一些例子

在介面中提供使用者所在位置的視覺提示。例如顯示標題,在窗體中提供進度條,突出顯示當前標籤。

如果介面變得太複雜了,那就設計出可分配子任務的簡單類別。例如所有使用者相關資料的概要,過去儲存專案的集合以及新資訊的檢索。

(圖片2)

移動使用者介面的5個設計原則

生產率

生產率是指使用者成功完成任務所需的時間以及使用者發現和識別介面功能的容易程度。它是根據相對於時間完成任務所需的動作數量來衡量的。

一些例子

通過提供介面核心任務的快捷方式來減少打字的需要。

避免使用誤導性的標籤,例如使用錯誤的圖示。

提供錯誤訊息,以便使用者可以快速從錯誤中恢復。

(圖片3)

移動使用者介面的5個設計原則

反饋錯誤資訊

給使用者反饋是介面設計中最重要的部分之一。恰當的反饋可以明顯減少我們的錯誤。我們可以通過每個任務的每個操作中提交的錯誤數量來衡量失誤。

一些例子

為使用者操作提供適當的反饋。

突出重要/新資訊。

提供教程或提示,可以在需要時檢視。

顯示當前檢視/任務/使用者的名稱。

當使用者發生錯誤或系統未按預期工作提供反饋。例如,表單錯誤,無法上傳/處理。

(圖片4)

移動使用者介面的5個設計原則

認知負荷

減少使用者的認知負擔對於介面的友好度至關重要的。我們可以通過使用隱喻來解決晦澀的概念,並保持介面簡單,以免使使用者混淆。衡量認知負荷的一種方法是計算每個檢視的動作。

一些例子

在檢視和內容切換之間提供動畫,切勿粗糙的剪下和混亂的篡改內容。

使用熟悉和匹配的符號,使使用者易於完成任務。

使用邏輯流程讓使用者快速完成一項新任務。

(圖片5)

移動使用者介面的5個設計原則

結論

當我們設計一個使用者介面時,它的設計重點就應該是幫助使用者完成他要完成的任務。那麼在介面設計過程中你應該問自己一些問題:

我設計的介面是否讓使用者以最簡單的方式來完成任務?

介面是否遵循簡單性以及利用心智模型來減少認知負荷?

該介面是否顯示使用者所在的位置,避免使用者混淆和迷失方向?

使用者是否得到了恰當的反饋意見?

介面是否考慮過可能出現的錯誤並提供對這些錯誤的反饋?

由於螢幕尺寸小,移動介面很受限制,因此將應用程式簡單化並把重心放在使用者想要完成的任務上就顯得尤為重要。如果介面變得過於複雜和混亂,可能是因為它試圖去滿足許多不同的條件,實際上應該被拆分成不同的應用程式。通過保持介面的有效性,效率,生產率,及時反饋錯誤資訊和減少認知負載,我們可以避免設計出一些看起來花哨,實際上並不支援使用者完成任務的使用者介面。

學習工具,但不受限於某種工具。Mockplus做原型,更快更簡單,現在下載Mockplus,免費體驗暢快的原型設計之旅。

原文連結:https://medium.com/swlh/principles-of-mobile-user-interfaces-94661cca7c16

原文作者:Lisi Linhart


相關文章