跳至主要内容
Change page

Web3 介面設計的 7 個啓發法

頁面最後更新時間: 2024年12月25日

可用性啓發法是廣泛的 “經驗法則”,你可以用其來衡量網站的可用性。 這 7 個啓發法是爲 Web3 量身定制的,並且應該與 Jakob Nielsen 的介面設計的 10 條通用原則 (opens in a new tab)一起使用。

Web3 的 7 個可用性啓發法

  1. 操作后進行反饋
  2. 安全與信任
  3. 凸顯最重要的資訊
  4. 易於理解的術語
  5. 盡可能簡短的操作
  6. 靈活且可見的網路連接
  7. 透過應用程式而非錢包進行控制

定義和範例

1. 操作后進行反饋

當某些事情已經或正在發生時,應該明確地展示出來。

使用者會以前面步驟的結果為基礎,做出後續步驟的決定。 因此,確保他們隨時了解系統狀態至關重要。 這在 Web3 中尤其重要,因爲交易有時只需很短的時間就提交到區塊鏈了。 如果沒有反饋來通知他們等待,使用者將不確定是否發生了任何操作。

提示:

  • 透過訊息、通知或其他警報來通知使用者。
  • 明確地傳達等待時間。
  • 如果操作需要的時間超過幾秒鐘,請用一個計時器或動畫來讓使用者放心,讓他們知道有操作正在發生。
  • 如果某個過程有多個步驟,請顯示每個步驟。

例如: 展示交易中涉及的每個步驟,有助於使用者了解自己正處於該過程的什麽位置。 適當的圖標能讓使用者了解他們的操作狀態。

交換代幣時,通知用戶每個步驟

2. 融入安全與信任

應該優先考慮安全性,並向使用者强調這一點。 人們非常在乎他們的資料。 安全往往是用戶的首要關注點,因此應該在設計的所有層面充分考慮安全問題。 你應該始終努力贏得使用者的信任,但實現這一點的方式在不同的應用程式中可能有不同的含義。 這不應該是事後才考慮的問題,而應該有意識地設計爲貫穿始終。 在整個使用者體驗中建立信任,包括社交頻道和相關文檔,以及最終的使用者介面。 如去中心化水平,資金庫的多重簽名狀態,以及團隊是否接受監督之類的因素,都會影響使用者的信任。

提示:

  • 自豪地展示你的審核
  • 進行多次審核
  • 宣傳你設計的任何安全功能
  • 强調任何可能的風險,包括底層的整合
  • 傳達策略的複雜性
  • 考慮可能會影響使用者安全感的非使用者介面問題

範例: 在頁脚以顯眼的尺寸包含你的審核内容。

網站頁腳中引用的審計報告

3 凸顯最重要的資訊

對於複雜的系統,只展示最相關的資料。 確定那些資訊是最重要的,並優先展示它們。 太多的資訊會讓人無所適從,並且使用者通常只依托一條資訊做出決定。 在去中心化金融 (DeFi) 中,這可能會是收益應用程式中的年化收益率和借貸應用程式中的貸款價值比。

提示:

  • 使用者研究將揭示最重要的指標
  • 讓關鍵資訊變大,並讓其他細節變小且不引人注目
  • 人們不會仔細閲讀,而是一掃而過;確保你的設計是可掃視的

範例: 在掃視時,巨大的全彩色代幣很容易就被找到。 年化收益率用大號字體和强調色突出顯示。

易於尋找的代幣和年化收益率

4. 易於理解的術語

術語應該是易於理解且恰儅的。 技術行話可能構成巨大的阻礙,因爲它需要構建一個全新的心理模型。 使用者無法將設計與他們已知的詞語、短語或概念聯係起來。 一切似乎都令人感到困惑且陌生,他們需要經歷一條陡峭的學習曲綫才能嘗試使用。 使用者可能是出於省錢目的而接觸到去中心化金融的,而他們找到的卻是: 挖礦、礦池、質押、排放、賄賂、金庫、置物櫃、投票托管代幣、歸屬、時期、去中心化演算法、協議自有流動性… 嘗試使用大多數人能夠理解的簡單術語。 不要僅僅爲你的項目發明新術語。

提示:

  • 使用簡單且一致的術語
  • 盡可能多地使用現有語言
  • 不要杜撰自己的術語
  • 遵循現有的慣例
  • 盡可能對使用者進行教育

例如: 「你的獎勵」 是一個衆所周知的中性術語,並非為該項目創造的新詞。 代幣

代幣獎勵,以美元展示

5. 盡可能簡短的操作

透過歸類子操作來加速使用者的互動。 這可以在智能合約的層面上完成,也可以在使用者介面完成。 用戶不應該從系統的一部分移動到另一部分 - 或者完全離開系統 - 來完成一個常見的操作。

提示:

  • 盡可能將「批准」與其他操作相結合
  • 盡可能將簽名步驟緊密地捆綁起來

例如: 將「增加流動性資金」與「質押」結合起來,是一個能節省使用者時間與燃料的簡單加速器示例。

一個彈窗,顯示了融合了存款和質押動作的開關

6. 可見且靈活的網路連結

向用戶告知他們所連結的網路,並提供清晰的切換網路的快鍵。 這在多鏈應用程式中尤其重要。 當斷開連結或連結到不支持的網路時,應用程式的主要功能仍然應該可見。

提示:

  • 在斷開連結時盡可能多地顯示應用程式内容
  • 顯示使用者正在連結的網路
  • 不要讓使用者到錢包中切換網路
  • 如果應用程式需要使用者切換網路,請從主要行動號召中提示該操作
  • 如果應用程式包含多個網絡的市場或金庫,請明確陳述使用者目前查看的是哪一組。

例如: 向用戶展示他們所連結的網路,並允許他們在應用程式欄中進行更改。

顯示所連結網路的下拉選單按鈕

7. 透過應用程式而非錢包進行控制

用戶介面應該告訴用戶他們需要知道的所有内容,並使他們能夠控制需要控制的一切。 在 Web3 中,有些操作需要在使用者介面内執行,有些需要在錢包内執行。 一般而言,在使用者介面開始一項操作,然後在錢包中確認它。 如果這兩條綫沒有仔細合併,使用者可能會感覺不適應。

提示:

  • 透過使用者介面中的反饋來傳達系統狀態
  • 保存他們的歷史記錄
  • 提供先前交易的區塊瀏覽器連結
  • 提供切換網路的快捷鍵。

**範例:**一個設計巧妙的容器,向使用者顯示了其錢包中的相關代幣,且主要的行動呼籲按鈕提供了切換網路的快捷鍵。

主要的行動呼籲按鈕提示使用者切換網路

這篇文章對你有幫助嗎?