跳至主要內容
Change page

Web3 介面設計的 7 個啟發式原則

易用性啟發式原則是廣泛的「經驗法則」,可用來衡量網站的易用性。 這裡的 7 個啟發式原則是專為 Web3 量身打造的,應與 Jakob Nielsen 的互動設計 10 大通用原則 (在新分頁開啟)搭配使用。

Web3 的七個易用性啟發式原則

  1. 動作後提供回饋
  2. 安全與信任
  3. 最重要的資訊顯而易見
  4. 易懂的術語
  5. 動作盡可能簡短
  6. 網路連線可見且具彈性
  7. 從應用程式控制,而非錢包

定義與範例

1. 動作後提供回饋

當某事已經發生或正在發生時,應該要顯而易見。

使用者會根據前一個步驟的結果來決定下一步。因此,讓他們隨時了解系統狀態至關重要。這在 Web3 中尤為重要,因為交易有時需要一小段時間才能提交到區塊鏈。如果沒有回饋通知他們等待,使用者會不確定是否發生了任何事情。

提示:

  • 透過訊息、通知和其他警報來通知使用者。
  • 清楚傳達等待時間。
  • 如果一個動作需要超過幾秒鐘的時間,請使用計時器或動畫來安撫使用者,讓他們感覺系統正在運作。
  • 如果一個流程有多個步驟,請顯示每一個步驟。

範例: 顯示交易中涉及的每個步驟,有助於使用者了解他們在流程中的位置。適當的圖示能讓使用者知道其動作的狀態。

Informing the user about each step when swapping tokens

2. 內建安全與信任

安全性應優先考量,並應向使用者強調這一點。 人們非常關心他們的資料。安全性通常是使用者的首要考量,因此在設計的各個層面都應將其納入考量。你應該始終致力於贏得使用者的信任,但在不同的應用程式中,實現這一點的方式可能代表不同的意義。它不應該是事後才想到的,而應該在整個過程中進行有意識的設計。在整個使用者體驗中建立信任,包括社群管道、文件以及最終的使用者介面 (UI)。諸如去中心化程度、資金庫多重簽名狀態以及團隊是否公開身分等因素,都會影響使用者的信任。

提示:

  • 自豪地列出你的稽核報告
  • 取得多項稽核
  • 宣傳你設計的任何安全功能
  • 突顯潛在風險,包括底層整合
  • 傳達策略的複雜性
  • 考慮可能影響使用者安全感知的非 UI 問題

範例: 在頁尾以醒目的尺寸包含你的稽核報告。

Audits referenced in the website footer

3. 最重要的資訊顯而易見

對於複雜的系統,只顯示最相關的資料。確定什麼是最重要的,並優先顯示它。 過多的資訊會讓人不知所措,使用者在做決定時通常會錨定在一項資訊上。在去中心化金融 (DeFi) 中,這可能是收益應用程式上的 APR,以及借貸應用程式上的貸款價值比 (LTV)。

提示:

  • 使用者研究將揭示最重要的指標
  • 將關鍵資訊放大,其他細節縮小且不顯眼
  • 人們不閱讀,他們只掃描;確保你的設計易於掃描

範例: 全彩的大型代幣在掃描時很容易找到。APR 很大,並以強調色突顯。

The token and APR are easy to find

4. 清晰的術語

術語應該易於理解且適當。 技術術語可能是一個巨大的障礙,因為它需要建構一個全新的心智模型。使用者無法將設計與他們已經知道的單字、片語和概念連結起來。一切似乎都令人困惑和陌生,在他們甚至嘗試使用它之前,就有一個陡峭的學習曲線。使用者可能為了省點錢而接觸去中心化金融 (DeFi),但他們發現的是:挖礦、流動性挖礦 (farming)、質押、代幣排放 (emissions)、賄賂 (bribes)、金庫 (vaults)、鎖倉 (lockers)、veTokens、歸屬、紀元 (epochs)、去中心化的演算法、協定擁有的流動性…… 盡量使用最廣泛人群都能理解的簡單術語。不要只為你的專案發明全新的術語。

提示:

  • 使用簡單且一致的術語
  • 盡可能使用現有的語言
  • 不要發明自己的術語
  • 遵循出現的慣例
  • 盡可能教育使用者

範例: 「你的獎勵」是一個廣泛理解的中性術語;而不是為這個專案編造的新詞。獎勵以美元計價,以符合現實世界的心智模型,即使獎勵本身是另一種代幣。

Token rewards, displayed in U.S. dollars

5. 動作盡可能簡短

透過將子動作分組來加快使用者的互動速度。 這可以在智能合約層級以及 UI 上完成。使用者不應該為了完成一個常見動作而從系統的一個部分移動到另一個部分,或者完全離開系統。

提示:

  • 盡可能將「授權」與其他動作結合
  • 將簽署步驟盡可能緊密地綁定在一起

範例: 結合「添加流動性」和「質押」是一個簡單的加速器範例,可以為使用者節省時間和燃料。

Modal showing a switch to combine the deposit and stake actions

6. 網路連線可見且具彈性

通知使用者他們連接到哪個網路,並提供清晰的捷徑來更改網路。 這在多鏈應用程式上尤為重要。在斷線或連接到不支援的網路時,應用程式的主要功能仍應可見。

提示:

  • 在斷線時盡可能顯示應用程式的內容
  • 顯示使用者目前連接的網路
  • 不要讓使用者去錢包更改網路
  • 如果應用程式需要使用者切換網路,請從主要的行動呼籲 (CTA) 提示該動作
  • 如果應用程式包含多個網路的市場或金庫,請清楚說明使用者目前正在查看哪一組

範例: 在應用程式列中向使用者顯示他們連接的網路,並允許他們更改它。

Dropdown button showing the connected network

7. 從應用程式控制,而非錢包

UI 應該告訴使用者他們需要知道的一切,並讓他們控制需要做的一切。 在 Web3 中,有些動作在 UI 中進行,有些動作在錢包中進行。通常,你在 UI 中發起一個動作,然後在錢包中確認它。如果這兩個環節沒有仔細整合,使用者可能會感到不舒服。

提示:

  • 透過 UI 中的回饋傳達系統狀態
  • 保留他們的歷史紀錄
  • 提供舊交易的區塊鏈瀏覽器連結
  • 提供更改網路的捷徑。

範例: 一個低調的容器向使用者顯示他們錢包中有哪些相關代幣,而主要的行動呼籲 (CTA) 提供了更改網路的捷徑。

Main CTA is prompting the user to switch network