「區塊鏈新手」如何解讀 Web3 介面？
2022 是幣圈動盪很多的一年。除了觀察幣價到底還能跌到多深，在熟悉的設計議題中也有些觀察。
我自己在 2021 年末開始接觸區塊鏈，2022 開始區塊鏈相關的設計工作。算是入圈不久的菜鳥，一邊瘋狂查資料，一邊慢慢理解 Web3 產品。簡單來說，Web3 是一個廣泛的概念，可泛指有和區塊鏈互動的網站或 App。
文章含有以下內容：新手時期使用 Web3 介面的疑惑、近半年觀察到的好介面、探討造成介面轉變的原因。
一腳踏入 Web3
設計工作的開端，是從競品和搜集 reference 開始。在找資料的過程中，不時困惑於行業內的用語，舉個例子，當時常見的 Web3 網頁類似這樣。
在通常顯示著登入按鈕的地方，會像這樣寫著：
Connect……wallet…..，如果是一個 Web3 新手也許會想：是我口袋裡這個裝錢的包包嗎？
總之先試著點下去
恩？
突然冒出了很多字，Metamask？Wallet connect？Coinbase…….看起來像是某個服務商。他們都有一顆 logo ，能猜測他們是個別的品牌，雖然還不知道是做什麼用途的。
讓我們再看一個例子—— Alcor 的換幣功能頁面。類似於實體世界的貨幣換匯。提供了不同種加密貨幣匯兌的服務。
在貨幣的輸入框下方，有數個欄位： Slippage、Price impact、Liquidity source。後面的數值單位是百分比。這些欄位似乎跟輸入的金額有某種關聯，但從介面上無法得知細節。
為了誰設計
設計這些網站的人真的認為使用者能理解這個流程嗎？假設有一位初次接觸 Web3 的使用者，對於沒見過的新名詞，有可能會感到困惑。若是在理解畫面時卡關，關掉分頁的機率提升，就不用談轉換率等等產品指標了。
當我試著提出這個問題，跟團隊內的夥伴討論時（他們大多在 2019 年以前開始接觸區塊鏈）。他們覺得這是一個合理的流程、也已能順暢使用這樣的介面。其實只要打開 Web3 網站，幾乎每個都是如此：按鈕文案都寫著 connect wallet、充滿難以理解的字眼。
使用者的背景知識
在這裏我們要談到背景知識的概念。這指得是已經存在在腦袋裡的知識，可以透過學習取得，或是擁有相關領域的經驗。
比方說，在路上開車需要有駕照。而考取駕照需要熟讀道路交通守則，並成功通過筆試。（當然還有路考啦）往後在路上行駛時，看到交通號誌，馬上就能明白它代表的意涵。號誌本身只傳達了符號，大腦調用了背景知識來解析符號，幫助人們順利理解意義。
介面設計與使用者
接著，試著將背景知識的概念套到網站使用的流程上。當使用者看到「登入」這個按鈕時，可能已經聯想到「帳號」、「密碼」等資訊。如果有此聯想，代表他有登入相關的背景知識，可能還有操作經驗。
設計師平時在設計介面，該如何擺放資訊，除了頁面本身的資訊動線與層級。其他的考量也包含對使用者的了解，假設使用者的背景知識到哪裡，他們是否有相關領域的經驗。
2022 以前的 Web3 ：為經驗豐富者設計的產品
以前大多數的 Web3 網站，預設了受眾是具有 Web3 背景知識的一群人，甚至是資深使用者。在 Web3 知識尚未進入教育體制的此刻，除了有相關經驗、或是習慣自行上網吸收新知的人，其他人應無此背景知識。有 Web3 背景知識，代表他已經知道錢包、TxID、確認區塊等等專有名詞代表的涵意。當時的市場主要服務的對象，就是這樣的族群。
如果還沒擁有這些背景知識怎麼辦呢？那就多查查資料再來吧。反正賺錢的機會是不留給懶蟲的。沒錯！賺錢！這給了大多數進入區塊鏈的新手們一個強烈的動機，讓他們拚命跨越知識的高牆，勤勞 google 每個生字。只為了擠進財富自由的圈子裡。
因為市場熱度與社群的支持，對於產品經營者來說，似乎也少了誘因去優化新手的使用體驗。
故事的轉折
市場的寒冬來臨，2022 一月時，幣價走勢開始向下， 2022 年全年度都在熊市氣氛中度過，隨著交易量緊縮，狂熱的信眾漸漸退去。熊市確實是做好產品的時機，有更多機會檢視產品。也是在這時期，搜尋 reference 時看到越來越多細緻的 UX 出現。
舉例來說。前面提到的 connect wallet 按鈕，有越來越多的網站願意解釋這個動作是什麼，為什麼使用者需要執行他。
Matcha 交易所的連接錢包畫面是優秀的範例。很好的貼合了資深與新手的需求。視覺動線由左邊開始，資深用戶可以點擊錢包直接開始使用。右方區塊用「What is a wallet?」 叫住那些迷茫的新手，向他們解釋並給予引導。
開頭提到的 Swap 介面，也有了更友善的版本。舉例來說，這是 Raydium 網站上的介面。提供加密貨幣之間的兌換服務。介面預設的模樣是這樣子的，
填入想兌換的數字後，會展開更多資訊。Minimum received 這欄位很絕妙，算完一切該支付的手續費、滑點風險後，告訴你預估的最終數值，個人認為相當直覺。
如果是有經驗的使用者，可能會想要點擊「More information」查看更多：
介面上有許多 tooltip 來輔助解釋專有名詞，並沒有預設使用者本身就具備背景知識。雖然看了解釋能吸收多少可能也是一個問題，但總是個好的轉變。
學習中心
另一個有感的轉變是說明性質的內容變多了。對於較小的產品，可能比較難有資源維護教學內容。可喜的是，大公司們已紛紛開始建立，且都有很不錯的內容。例如： OpenSea 的 Learn、Binance 的 Academy。使用者若能夠自行排除問題，有助於使用體驗，也能節省客服成本。下圖是 OpenSea connect wallet 的 彈窗。開頭的說明文字對應到新手客群。
點擊「Learn more」後，會連到 OpenSea 的教學文章。
服務對象轉移
對於介面開始對新手友善，固然覺得很欣慰，一方面也好奇，是什麼原因讓產品團隊開始往這個方向投入資源？個人的猜測是加密市場熱度降低，流量也變少了，需要留住更多類型的使用者，因此不再像過往專注於服務資深使用者。
另一個猜測是因為市況，於是功能與活動的發布暫緩，有更多時間還這些產品債，終於有機會把輔助性質的內容放到排程中。
總結，好的 Web3 體驗該具備什麼？
最後，整理本篇的案例中，可以學習的地方如下：
- 意識到不同使用族群的存在
- 設想不同使用族群的背景知識與使用經驗
- 通用性的設計，讓有經驗的使用者順暢使用、新手使用者能找到答案
好的體驗所需的要素不只上述幾點，所謂易用性高的介面，很多使用慣例都來自 Web2 產品。說真的，Web2 和 Web3 在介面表層並沒有那麼不同，畢竟使用者還是人，應用的是同一套認知心理學。只是，Web3 產品還需要一些時間成長，慢慢補足各個面向。
2023 年，UX 的風終於吹進 Web3 了～
-Lynn Kuo
如果你喜歡這邊文章，別忘了 Follow 設計丸
如果你想知道更多產品設計/UIUX 小知識，歡迎追蹤設計丸 IG帳號 👋👋👋
