天天看點

[譯] 移動界面設計的 10 項啟發式原則

原文位址:10 heuristic principles for mobile interfaces

原文作者:Jordan DeVos

譯文出自:掘金翻譯計劃

本文永久連結:github.com/xitu/gold-m…

譯者:Hyde Song

校對者:portandbridge、sunui

[譯] 移動界面設計的 10 項啟發式原則

當 Jakob Nielsen 開始研究設計模式時,他正在從事人機互動方面的可用性工程的咨詢和教學工作。是以在 1994 年,他收集并釋出了一套可用性啟發式 評估原則,這些原則反映了他所研究的東西。如今,經過了近 25 年的時間,随着電腦向智能手機的轉變,Nielsen 的原則依然站得住腳。

以人為本的設計強調了使用者的重要性,設計過程也相應地進行了調整;然而,雖然 Nielsen 的原則在所有螢幕類型上仍然是通用的,但是随着移動裝置使用量的不斷增加,設計的重心已然在 移動界面 上了。

在網上搜尋啟發性原則,你會列出很長的一份清單,但内容略有差異。以下是十項原則的精選集,這些原則由以人為本的設計和可用性思想倡導者所啟發。

可用性啟發從使用者需求開始

在開始讨論這十項原則之前,必須認識到使用者的重要性正在不斷增長。GOV.UK 雖然是一個政府網站,但它的重新設計是使用者主導的産品因其可用性獲得全球認可的一個典型例子。

項目設計總監 Ben Terrett 以一套使用者界面 設計原則 為起點,這套原則涵蓋從産品政策到視覺設計方法的方方面面。正是第一項原則指引了産品的成功:“永遠從使用者需求出發。如果不知道使用者需要什麼,就無法建構正确的東西。做調查、分析資料、與使用者交流。不要假設。對使用者要有同理心,記住他們要求的并不總是他們需要的。”

可用性評估的啟發式原則有助于确定 UI 設計在哪些方面不能提供使用者友好的體驗。

一、系統結構的透明度

讓某些元素和結構可見的做法,可以讓使用者對上下文有足夠的了解。

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

[譯] 移動界面設計的 10 項啟發式原則

二、操作回報的即時性

對使用者操作響應證明系統已收到請求。

任何使用者操作都應該有一個即時的界面回報。即時回報讓使用者放心,系統正在做預期的事情。Nick Babich 是 Smashing Magazine 的 UX 專家,他使用進度訓示器作為一個很好的例子,來明确傳達操作狀态。他認為,它可以直覺地通知使用者,他們的操作已經被接受,系統很快就會訓示下一步操作。如果沒有訓示器,使用者就會面臨不确定性和挫折感,進而導緻使用者通路中斷。

[譯] 移動界面設計的 10 項啟發式原則

三、讓使用者知悉錯誤資訊

使用者操作錯誤之後可以得到提示資訊和對應的操作選項。

有時候,使用者總是以一種意想不到的方式與移動界面進行互動,在使用的時候感到沮喪和煩惱,無法滿足自己的需求。使用者不能流暢輕松地使用是使用者提早離開的常見原因。UI 應該提供足夠的提示資訊來幫助使用者識别、判斷和從錯誤中恢複。

使用者應該總是容易獲得幫助資訊;然而,要取得平衡并不容易。給使用者太多的選擇反而會讓使用者應接不暇。應該讓使用者對如何解決錯誤有一個清晰的認識,并讓使用者了解以後如何防止錯誤的再次發生。

[譯] 移動界面設計的 10 項啟發式原則

四、使用的靈活性

界面應該能讓經驗不同的使用者都能直覺有效地使用。

移動端的互動體驗不應依賴外部的使用者操作指南。不管使用者第一次使用移動 app 還是第一百次使用,界面都應該适應這兩種場景。

要讓老使用者快捷地通路、更深入地整體地了解應用,但也不要讓新使用者因簡單的困惑陷入無助的境地。有了 UI 的靈活性,使用者就可以找到符合自身能力和滿足自己需求的途徑。

Jill Gerhardt-Powal 的 認知工程學原則建議設計師“在适當的時候提供多種資料編碼 —— 系統應該提供不同格式和/或細節級别的資料,以提高認知靈活性和滿足使用者偏好。”無論是讓使用者感到壓力的還是感到限制的界面必然會讓使用者在使用的時候感到煩惱。

[譯] 移動界面設計的 10 項啟發式原則

五、貼合大衆習慣的使用者體驗

使用符合人們常識的意料之内的設計元素。

圖形界面的曆史 始于蘋果計算機公司在第一個使用者友好的計算機界面設計中對照了現實世界的物品。“Lisa”的圖形界面中使用了比如用檔案夾圖示表示檔案組織結構的類似的設計元素。當大多數人都不熟悉數字互動時,這些現實的對照是有用的,但是随着人們數字素養的提高,大多的對照就不再需要字面化了。

随着人們花更多的時間與螢幕互動,共同的使用者預期已經形成。我們希望“+”可以展開更多資訊,導航菜單停留在移動螢幕的頂部或底部。利用大多數使用者都能了解的對照,界面變得直覺。

[譯] 移動界面設計的 10 項啟發式原則

六、防止過多資訊和過度設計

建立精簡的設計,排除可能影響流暢的且有目的性的使用者體驗的非必要元素。

一般原則是,數字互動設計不要讓使用者産生困惑。為了減少決策時間和錯誤,Jill Gerhardt-Powal 向設計師提出了一個挑戰,通過以一種清晰而明顯的方式顯示資料來減少不确定性。這可以通過去除不必要的内容以及使用顔色、布局和排版引導使用者通過螢幕來實作。不應該讓使用者分心,而應該向他們提供足夠的指導,然他們更容易實作目的。

Ben Terrett 經常使用 GOV.UK 的第四條設計原則:“努力讓事情變得簡單。”他認為,設計團隊應該完全了解他們正在處理的問題,以及提供直覺、資訊豐富和成功使用者體驗的最佳解決方案的過程。在這個 案例研究 中,記錄了他們的方法。

[譯] 移動界面設計的 10 項啟發式原則

七、功能優先于形式

設計決策是由元素的作用來驅動的,而不是優先考慮它的視覺風格。

“如果你認為某件事很聰明、很複雜,要小心 —— 這可能是自我放縱。” —— Don Norman,高産的産品設計師,《The Design of Everyday Things》的作者。

界面的視覺設計應該總是從定義的功能開始。當風格和趨勢被優先考慮時,結果可能看起來很漂亮,很引人注目,但最終可能導緻脫節的 使用者體驗。視覺形式無法拯救功能失調的設計。

視覺提示可以用來在應用程式的功能中引導使用者。Fritt 法則 指出,形狀、間距和大小可以引導使用者了解情況并采取所需的行動。正是在這裡,形式支撐并放大了功能。

[譯] 移動界面設計的 10 項啟發式原則

八、資訊要容易獲得

把界面元素放在使用者觸“指”可及的最佳位置,這樣使用者就不必憑記憶來操作。

認出某物比回憶某物要容易。如果移動界面的功能以少量資訊或閱聽人不太熟悉的系統為基礎,那麼就應該讓資訊容易獲得,友善使用者使用。

Nielsen 的 啟發式原則之一建議,設計人員應該“通過使每個對象、動作和選項都是可見的來減少使用者記憶的負擔。使用者不必記住會話的每個部分的資訊。使用該系統的訓示應是可見的,或在适當時容易檢索。”

Jill Gerhardt-Powal 建議“将較低層次的資料整合到較高層次的總和中,以減少認知負擔。”她還表示,“顯示名稱和标簽應該與上下文相關,這将提高回憶和識别能力。”重要的是要意識到,第一次看到界面的使用者不會像設計師那樣了解和熟悉資訊。對于經驗豐富的團隊來說,重複資訊似乎有些備援,但對于新使用者來說卻是必不可少的。

[譯] 移動界面設計的 10 項啟發式原則

九、可靠的一緻性

使用一緻的和标準化的元素,如文案、場景和操作來建立一個有凝聚力的體驗。

人類被模式所吸引 —— 我們用模式來了解世界。在移動界面中建立模式,它将成為一個訓練工具,讓使用者了解應該期望什麼以及如何與 界面設計 互動。

“這不應該成為束縛。每一種情況都是不同的。” GOV.UK 的設計原則表明,界面風格應該是一緻的,但不應該是千篇一律的。正如 Jill Gerhardt-Powal 所呼應的,“新資訊應該在熟悉的架構内呈現(例如,模式、隐喻、日常用語),這樣資訊更容易被人們接收。”

[譯] 移動界面設計的 10 項啟發式原則

十、明智的備援

在設計過程中不斷進行反思,以確定使用者界面設計原則和可用性啟發與産品的目的和使用者需求保持一緻。

Jakob Nielsen 是第一個承認不可能為 UI 設計 提供通用細節的人。例如,他的兩條啟發式原則可以互相沖突 —— #6:提供使用者做出決策所需的所有資訊;#8:消除任何不必要的東西。

為特殊用例确定最佳政策的責任就落在了啟發式評估人員和設計團隊肩上了。如果産品是以人為本而設計的并圍繞使用者需求建構的,團隊了解這一點後在做決定時有明确的目标。

擴充閱讀:

Heuristic Analysis for UX — How to Run a Usability Evaluation The Principles of Design and Their Importance The Importance of Human-Centered Design in Product Design Creating a UI Style Guide for Better UX Mobile App Design Best Practices and Mistakes

本篇文章最初發表在 www.toptal.com。

作者:Hyde

連結:

https://juejin.im/post/5cbe6d3d5188250a80187a57

來源:掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

繼續閱讀