更少信任,更多真實:Web3 設計最佳實踐和模式
已發表: 2022-07-22開發人員有一個新互聯網的夢想。 Web3 是一種去中心化模型,它讓用戶對他們在網上創建的平台和內容擁有完全的所有權。 但試圖徹底改變互聯網帶來了多重設計挑戰——主要是構建用戶界面,以解決由 Web3 的獨特功能引起的混亂和安全問題。
Web3 解釋
要了解 Web3,了解 Internet 的簡史會很有幫助:
- Web 1.0 是去中心化的,這意味著內容和平台的所有權和控制權分佈在許多個人和企業之間。
- Web 2.0 是當前的互聯網迭代,得益於少數擁有用戶友好平台的軟件公司,如 Apple、Google、Facebook(現在的 Meta)和 Twitter。 隨著越來越多的人成為活躍的在線創作者和消費者,網絡變得更加集中,主要由少數公司擁有和控制。
借助 Web3,開發人員正在使互聯網再次去中心化。 技術壟斷企業將不再擁有和控制用戶創建的內容和平台。 Web3 還旨在解決互聯網的安全和隱私問題。
Web3 是:
- 無需信任:開發人員、內容創建者和其他用戶保留對 Web3 平台和 DApp(去中心化應用程序)的構建和維護方式以及可以發布的內容的控制權。 他們對代碼和服務的運行方式具有完全的可見性。 這與 Web 2.0 形成鮮明對比,在 Web 2.0 中,企業和政府擁有控制權,用戶無法獨立驗證有關如何開發和管理應用程序的信息。
- 無許可:用戶可以在未經公司或政府機構授權的情況下進入任何 Web3 應用程序。 他們使用持有他們的私鑰的數字加密錢包登錄,他們用來訪問數字貨幣的密碼。 錢包可以是類似於 USB 驅動器的硬件或 MetaMask 和 TrustWallet 等移動應用程序。
- 分佈式:互聯網產品和服務的權力和控制權並不集中在投資者或 CEO 手中,而是公平地分配給用戶,用戶根據他們對 Web3 平台開發和維護的貢獻獲得所有權。
- 開放: Web3 在區塊鏈上運行,將數據存儲在單獨的組中,稱為塊。 一旦一個區塊被填滿信息,它就會與前一個區塊鏈接,形成一個按時間順序排列的鏈。 區塊鍊是最常用於記錄金融交易的開放式賬本。
許多 Web3 應用程序是由主要由開發人員組成和領導的小團隊構建的。 有些團隊是獨立的; 其他人則受僱於公司,包括 NFT(不可替代令牌)市場和加密貨幣交易所。 通常,是開發人員聘請設計師來開發 Web3 產品。 在許多情況下,首選具有 Web3 經驗的設計師,因為在這個瞬息萬變的空間中學習曲線陡峭。
Web3 用例和擴展障礙
Web3 以金融應用為主:加密貨幣、用於交易的加密貨幣交易所(去中心化交易所,或 DEX)和 NFT,用於表示獨特的數字或物理項目的所有權。 此外,去中心化金融或 DeFi 允許用戶繞過銀行並訪問點對點金融服務,例如借貸、賺取利息和交易資產。
將 Web3 擴展到其他領域已被證明是困難的。 例如,沒有辦法區分合法的 Web3 網站是否存在欺詐——這個問題被放大了,因為用戶必須輸入他們的加密錢包憑據才能訪問 Web3 平台。 如果 Web3 網站是一個騙局,任何進入的用戶都可能損失所有的錢。
另一個問題是區塊鏈不允許上傳圖片或視頻。 用戶可以將媒體存儲在以太坊等加密網絡上,但價格昂貴。
在 Web3 視頻遊戲中,NFT 可以代表玩家的頭像和購買的物品——但通常不可能將這些資產轉移到其他遊戲或應用程序,從而減少玩家的投資並阻止他們玩 Web3 遊戲。
設計師必須知道的
利用以下 UI 模式和 UX 設計原則可以促進 Web3 平台的發展:
提供清晰的提示和完整的信息
許多 Web3 應用程序錯誤地假設用戶擁有豐富的經驗。 相反,設計人員應該澄清 Web3 不熟悉的功能和操作的含義。 例如,在將加密貨幣資金存入流動資金池之前,新投資者需要知道他們的資金可能會貶值——可以通過存款屏幕上的彈出消息發出警告。
DeFi 應用程序上的活動由稱為協議的標準管理。 大多數 DeFi 應用程序都會執行定期安全審計並記錄關鍵發現,包括漏洞、代碼問題和修復。 設計人員可以確保 DeFi 應用程序在新的審計報告可用時通知用戶,並且它們可以通過以明文形式總結複雜部分來幫助使審計更容易理解。
同樣,許多人閱讀 Web3 產品文檔以了解協議機制並就使用應用程序做出明智的決定。 這些材料大部分由難以理解的技術術語組成。
同樣,設計師可以通過在文檔部分的開頭提供對話摘要以及指向更多技術內容的鏈接來確保用戶友好的內容。 彈出詞彙表可以作為鏈接圖標嵌入文本中,使用戶能夠通過鼠標點擊或手指點擊來了解術語的含義。 文案可以分解為說明重要 Web3 概念的圖像。
使用熟悉的貨幣交流匯率
隨著比特幣等加密貨幣變得越來越流行並且它們的價格波動,很難追踪它們的價值。 在數字錢包和電子商務應用程序中,這些代幣用於購買、出售和交易 NFT 等資產,設計人員應向用戶展示從加密貨幣到其本國貨幣的價格轉換,並避免使用超過幾個小數位。
使錢包和交易哈希易於閱讀
默認情況下,區塊鏈上的每個地址都是一長串字符(最多 42 個),稱為 ID 或哈希。 發送資金時,人們必須檢查整個字符串。 很容易出錯,而且風險很高:所有區塊鏈交易都是最終的。 如果資產被發送到錯誤的錢包地址,則無法恢復它們。 在我工作的一家投資公司,我們促成了 ICO(首次代幣發行)交易,向參與的企業發送巨額轉賬——我們每次都有六個人檢查收款人的錢包地址。
以太坊名稱服務 (ENS) 使人們能夠將他們的哈希值更改為更易於閱讀和記住的內容,例如他們的名字加上.eth
。 然而,並不是每個人都使用 ENS,因為它很昂貴。
Web3 UX 設計師可以通過僅顯示哈希的第一個和最後四個字符來讓用戶在不檢查整個字符串的情況下驗證它,從而減輕交易壓力。 設計人員還可以要求用戶在進行任何交易之前仔細檢查哈希值,並且他們可以在每個收件人地址旁邊添加一個識別徽標。 這些額外的驗證層應該伴隨著提醒,將資產發送到錯誤的地址將導致資金完全損失。

明確交易等待時間
通過銀行在線轉賬時,您會立即收到狀態更新或交易完成的確認信息。 Web3 DEX 並非如此。 區塊鏈交易的最短處理時間約為三分鐘,但我不得不等待長達兩個小時。 我已經使用這項技術六年了,當錢離開我的錢包並且我沒有收到及時的交貨確認時,我仍然感到恐慌。
更多 DEX 應該通過文本或動畫在狀態欄或通知中顯示交易狀態。 如果在 UI 中顯示更新不可行,則提供指向開源區塊瀏覽器(例如以太坊上的 Etherscan)的鏈接是一個不錯的選擇。
實現“發送最大值”按鈕
比特幣、以太幣和其他加密貨幣通常用許多小數位表示,例如 0.0000085191。 在向個人或企業匯款以購買 NFT 等資產或將資金存入智能合約時,很難準確有效地輸入總金額。 我建議設計師在應用程序中創建一個“Send Max”按鈕,允許用戶一鍵將其整個錢包餘額轉移到另一個地址。
當一個人的錢包餘額等於或略高於他們需要轉賬的金額時,這很方便; 一些用戶有多個錢包,這增加了發生這些事件的可能性。 他們可以發送全部餘額,該功能會自動將其轉換為比特幣或以太幣。 當錢包餘額大於應付總額時,此功能不會進行任何核算,因此設計人員應包含一個確認對話框,以確保用戶不會錯誤地發送超出預期的金額。
解釋汽油價格如何運作
Gas 可能是 Web3 中最煩人和最令人困惑的事情,尤其是對於加密新手來說。 Gas 價格是用戶支付的額外費用,用於支付處理交易所需的計算能力成本。 用戶可以選擇支付更高的費用來加快傳輸速度。
設計師需要解釋什麼是氣體以及它是如何工作的。 如果可能,他們應該以用戶最常用的本地法定貨幣(通常是美元)顯示 gas 價格。 設計人員還可以提出可行的 gas 價格和由此產生的傳輸速度組合; 如果交易因支付低gas而停滯或失敗,設計者應該允許用戶支付更高的費用來加速轉賬。
使用戶的交易歷史易於訪問
幾乎所有的集中式電子商務網站 (web 2.0) 都允許用戶查看他們全面的購買歷史。 在去中心化交易所很難訪問這樣的記錄:錢包提供交易歷史記錄,但一次只針對一個賬戶,而且很難或不可能被 DApp 過濾。 為了在集中式平台上獲得這種歷史記錄,Web3 用戶必須使用像 Etherscan 這樣的區塊瀏覽器,這對用戶不友好,並且很難找到特定的交易。
Web3 設計師應該為人們提供一種簡單的方法來審查他們在單個 DApp 中進行的鏈上交易。 這應該放置在易於找到的位置,例如側面板或菜單。 另一種選擇是創建一個由按鈕激活的“鍊式視圖”模式:一旦單擊,它將在整個 UI 上放置一個過濾器,指示存儲在區塊鏈上的 DApp 中的所有內容——包括交易歷史. 允許用戶輕鬆過濾和導出他們的交易記錄也很有幫助。
啟用簡單的私鑰管理
使用戶能夠訪問其數字錢包的私鑰並不容易存儲。 人們有時會忘記備份它們或不知道如何備份它們。 這些密鑰一旦丟失就無法恢復:沒有“重置密碼”選項。 設計者可以通過仿照 MetaMask 的例子來解決這個問題,並為每個用戶提供一個助記詞,即一系列可用於解鎖錢包的詞。
設計師還需要警告用戶,如果他們丟失了私鑰或助記詞,他們的資金將無法訪問並且容易被盜。 這樣的消息應該在用戶的錢包應用程序中彈出,首先作為設置錢包時的通知,然後作為預設時間表的重複提醒。
關鍵要點
為了讓 Web3 越來越受歡迎並擴展到數字錢包和金融平台之外,設計師需要讓 Web3 應用程序更加一致和直觀。 他們還必須提供更直接的用戶教育,以幫助新手熟悉 Web3 平台上的新功能和交互。
讓 DApps 感到安全也必須是重中之重。 控制 Web3 的無需信任、無需許可的性質是不可能的,但設計人員可以預測可能出現的問題並幫助防止這些情況發生。 更透明的風險警告將大大緩解人們的擔憂並說服他們接受 Web3。
Toptal 博客的進一步閱讀:
如何設計以獲得最大的產品信任
使用這些成功的交互設計原則提升您的用戶體驗
無代碼網頁設計的 Webflow 優勢:案例研究