移動用戶界面的5個設(shè)計原則
文章分享了關(guān)于衡量用戶交互作用的5個原則,希望能夠?qū)δ阌兴鶈l(fā)。
去年移動端用戶首次在全球范圍內(nèi)超過桌面端用戶。看看來自全球的統(tǒng)計數(shù)據(jù),如今超過22%屏幕的分辨率為640×360。
這種趨勢不容忽視,盡管響應(yīng)式和移動式開發(fā)已有一段時間了,移動界面中的交互與桌面界面中的交互卻非常不同。隨著React Native和Progressive Web Apps(響應(yīng)式網(wǎng)頁程序)的興起,未來幾年移動用戶界面的開發(fā)也將成為Web開發(fā)的重要組成部分。
在開發(fā)移動用戶界面時,簡易性對于良好的用戶體驗至關(guān)重要。界面應(yīng)保持一致,避免用戶的認知超負荷和讓用戶感覺到混亂。
為了滿足和權(quán)衡用戶交互的作用,本文提到了5個可衡量的原則。這篇文章將分別對這些原則做一個簡短的總結(jié),并舉例子來概述我們在創(chuàng)建移動界面時應(yīng)該考慮的問題。
有效性
有效性可檢驗當用戶在使用界面時候的有效性如何。用戶有從其他界面和現(xiàn)實世界中獲取的經(jīng)驗。在人機交互(HCI)中,稱為用戶正在創(chuàng)建的心理模型,以便更容易地理解復(fù)雜的概念。我們可以根據(jù)現(xiàn)實生活中獲取的知識來提高用戶的效率。有效性的目標是減少完成任務(wù)所需的操作次數(shù)。
舉一些例子:
PWA是使用心理模型來提升用戶效率的一個極好的例子。通過設(shè)計類似于模擬調(diào)諧器的數(shù)字調(diào)諧器,用戶可以立即將這個數(shù)字版本的調(diào)諧器映射到他在現(xiàn)實世界的體驗中。
使用匹配和已知的圖標來減少認知負擔。把它們和小標簽結(jié)合起來,減少錯誤的解讀。
心理模型的另一個例子就是將事物的轉(zhuǎn)換看成類似于現(xiàn)實世界中燈光的切換。
效率
效率是指用戶能夠以何種方式理解應(yīng)用程序的當前狀態(tài)以及可以執(zhí)行的操作。它以每秒動作來衡量,并描述了用戶完成任務(wù)的效率。
一些例子
在界面中提供用戶所在位置的視覺提示。例如顯示標題,在窗體中提供進度條,突出顯示當前標簽。
如果界面變得太復(fù)雜了,那就設(shè)計出可分配子任務(wù)的簡單類別。例如所有用戶相關(guān)數(shù)據(jù)的概要,過去保存項目的集合以及新信息的檢索。
生產(chǎn)率
生產(chǎn)率是指用戶成功完成任務(wù)所需的時間以及用戶發(fā)現(xiàn)和識別界面功能的容易程度。它是根據(jù)相對于時間完成任務(wù)所需的動作數(shù)量來衡量的。
一些例子
通過提供界面核心任務(wù)的快捷方式來減少打字的需要。
避免使用誤導性的標簽,例如使用錯誤的圖標。
提供錯誤消息,以便用戶可以快速從錯誤中恢復(fù)。
反饋錯誤信息
給用戶反饋是界面設(shè)計中最重要的部分之一。恰當?shù)姆答伩梢悦黠@減少我們的錯誤。我們可以通過每個任務(wù)的每個操作中提交的錯誤數(shù)量來衡量失誤。
一些例子:
- 為用戶操作提供適當?shù)姆答仭?/li>
- 突出重要/新信息。
- 提供教程或提示,可以在需要時查看。
- 顯示當前視圖/任務(wù)/用戶的名稱。
- 當用戶發(fā)生錯誤或系統(tǒng)未按預(yù)期工作提供反饋。例如,表單錯誤,無法上傳/處理。
認知負荷
減少用戶的認知負擔對于界面的友好度至關(guān)重要的。我們可以通過使用隱喻來解決晦澀的概念,并保持界面簡單,以免使用戶混淆。衡量認知負荷的一種方法是計算每個視圖的動作。
一些例子:
- 在視圖和內(nèi)容切換之間提供動畫,切勿粗糙的剪切和混亂的篡改內(nèi)容。
- 使用熟悉和匹配的符號,使用戶易于完成任務(wù)。
- 使用邏輯流程讓用戶快速完成一項新任務(wù)。
結(jié)論
當我們設(shè)計一個用戶界面時,它的設(shè)計重點就應(yīng)該是幫助用戶完成他要完成的任務(wù)。那么在界面設(shè)計過程中你應(yīng)該問自己一些問題:
- 我設(shè)計的界面是否讓用戶以最簡單的方式來完成任務(wù)?
- 界面是否遵循簡單性以及利用心智模型來減少認知負荷?
- 該界面是否顯示用戶所在的位置,避免用戶混淆和迷失方向?
- 用戶是否得到了恰當?shù)姆答佉庖姡?/li>
- 界面是否考慮過可能出現(xiàn)的錯誤并提供對這些錯誤的反饋?
由于屏幕尺寸小,移動界面很受限制,因此將應(yīng)用程序簡單化并把重心放在用戶想要完成的任務(wù)上就顯得尤為重要。如果界面變得過于復(fù)雜和混亂,可能是因為它試圖去滿足許多不同的條件,實際上應(yīng)該被拆分成不同的應(yīng)用程序。
通過保持界面的有效性,效率,生產(chǎn)率,及時反饋錯誤信息和減少認知負載,我們可以避免設(shè)計出一些看起來花哨,實際上并不支持用戶完成任務(wù)的用戶界面。
原文作者:Lisi Linhart
原文地址:https://medium.com/swlh/principles-of-mobile-user-interfaces-94661cca7c16
本文由@Mockplus團隊翻譯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自PEXELS,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!