Web3インターフェース設計のための7つのヒューリスティクス

ユーザビリティヒューリスティクスは、サイトのユーザビリティを測定するために使用できる幅広い「経験則」です。ここにある7つのヒューリスティクスは、特にWeb3向けに調整されており、ヤコブ・ニールセンのインタラクションデザインのための10の一般的な原則 (opens in a new tab)と一緒に使用する必要があります。

Web3のための7つのユーザビリティヒューリスティクス

フィードバックはアクションの後に続く
セキュリティと信頼
最も重要な情報が明確である
理解しやすい用語
アクションは可能な限り短くする
ネットワーク接続が可視化され、柔軟である
ウォレットからではなく、アプリから制御する

定義と例

1. フィードバックはアクションの後に続く

何かが起こった、または起こっていることが明確であるべきです。

ユーザーは、前のステップの結果に基づいて次のステップを決定します。したがって、システムの状態について常に情報を提供することが不可欠です。Web3では、トランザクションがブロックチェーンにコミットされるまでに少し時間がかかることがあるため、これは特に重要です。待つように知らせるフィードバックがないと、ユーザーは何かが起こっているのかどうか確信が持てません。

ヒント:

メッセージング、通知、その他のアラートを通じてユーザーに知らせます。
待ち時間を明確に伝えます。
アクションに数秒以上かかる場合は、タイマーやアニメーションでユーザーを安心させ、何かが起こっていると感じさせます。
プロセスに複数のステップがある場合は、各ステップを表示します。

例: トランザクションに関わる各ステップを表示することで、ユーザーはプロセス内のどこにいるかを知ることができます。適切なアイコンにより、ユーザーは自分のアクションのステータスを知ることができます。

2. セキュリティと信頼が組み込まれている

セキュリティを優先し、これをユーザーに強調する必要があります。人々は自分のデータを深く気にかけています。安全性はしばしばユーザーにとっての主要な関心事であるため、デザインのすべてのレベルで考慮されるべきです。常にユーザーの信頼を得るように努めるべきですが、その方法はアプリによって異なる意味を持つ場合があります。それは後付けではなく、全体を通して意識的に設計されるべきです。ソーシャルチャネルやドキュメント、そして最終的なUIを含め、ユーザーエクスペリエンス全体を通じて信頼を構築します。分散化のレベル、トレジャリーのマルチシグのステータス、チームの身元が公開されている（doxxed）かどうかなどはすべて、ユーザーの信頼に影響を与えます。

ヒント:

監査結果を誇りを持ってリストアップします
複数の監査を受けます
設計した安全機能を宣伝します
基礎となる統合を含む、考えられるリスクを強調します
戦略の複雑さを伝えます
ユーザーの安全性に対する認識に影響を与える可能性のある、UI以外の問題も考慮します

例: フッターに監査結果を目立つサイズで含めます。

3. 最も重要な情報が明確である

複雑なシステムの場合、最も関連性の高いデータのみを表示します。何が最も重要かを判断し、その表示を優先します。情報が多すぎると圧倒されてしまい、ユーザーは通常、意思決定を行う際に1つの情報にアンカーを置きます。DeFiでは、これはおそらくイールドアプリのAPRやレンディングアプリのLTVになるでしょう。

ヒント:

ユーザーリサーチにより、最も重要な指標が明らかになります
重要な情報を大きくし、その他の詳細は小さく目立たないようにします
人々は読みません、スキャンします。デザインがスキャン可能であることを確認してください

例: フルカラーの大きなトークンは、スキャン時に見つけやすくなります。APRは大きく、アクセントカラーで強調表示されています。

4. 明確な用語

用語は理解しやすく、適切であるべきです。専門用語は、完全に新しいメンタルモデルの構築を必要とするため、大きな障害になる可能性があります。ユーザーは、デザインをすでに知っている単語、フレーズ、概念に関連付けることができません。すべてが混乱して馴染みがないように見え、使用を試みる前に急な学習曲線があります。ユーザーがお金を節約したいと思ってDeFiにアプローチしたときに見つけるのは、マイニング、ファーミング、ステーキング、エミッション、ブライブ、ボールト、ロッカー、veToken、ベスティング、エポック、分散型アルゴリズム、プロトコル所有の流動性などです... 最も幅広いグループの人々に理解されるシンプルな用語を使用するようにしてください。プロジェクトのためだけに全く新しい用語を発明しないでください。

ヒント:

シンプルで一貫した用語を使用します
可能な限り既存の言語を使用します
独自の用語を考え出さないでください
慣例が現れたらそれに従います
可能な限りユーザーを教育します

例: 「あなたの報酬（Your rewards）」は、広く理解されている中立的な用語であり、このプロジェクトのために作られた新しい言葉ではありません。報酬自体が別のトークンであっても、現実世界のメンタルモデルに合わせるために、報酬はUSD建てで表示されます。

5. アクションは可能な限り短くする

サブアクションをグループ化することで、ユーザーのインタラクションをスピードアップします。これは、UIだけでなく、スマート・コントラクトレベルでも行われる場合があります。ユーザーは、一般的なアクションを完了するために、システムのある部分から別の部分に移動したり、システムから完全に離れたりする必要はありません。

ヒント:

可能な場合は、「承認する」を他のアクションと組み合わせます
署名ステップを可能な限り近づけてバンドルします

例: 「流動性の追加」と「ステーク」を組み合わせることは、ユーザーの時間とガスの両方を節約するアクセラレータの簡単な例です。

6. ネットワーク接続が可視化され、柔軟である

ユーザーが接続しているネットワークについて知らせ、ネットワークを変更するための明確なショートカットを提供します。これは、マルチチェーンアプリでは特に重要です。切断されている場合や、サポートされていないネットワークに接続されている場合でも、アプリの主な機能は表示されるべきです。

ヒント:

切断されている間も、アプリを可能な限り表示します
ユーザーが現在接続しているネットワークを表示します
ネットワークを変更するためにユーザーをウォレットに行かせないでください
アプリがユーザーにネットワークの切り替えを要求する場合は、メインのコールトゥアクションからアクションを促します
アプリに複数のネットワークの市場やボールトが含まれている場合は、ユーザーが現在どのセットを見ているかを明確に示します

例: ユーザーが接続しているネットワークを表示し、アプリバーで変更できるようにします。

7. ウォレットからではなく、アプリから制御する

UIは、ユーザーが知る必要があるすべてを伝え、行う必要があるすべてを制御できるようにする必要があります。 Web3では、UIで行うアクションとウォレットで行うアクションがあります。一般的に、UIでアクションを開始し、ウォレットで確認します。これら2つの要素が慎重に統合されていないと、ユーザーは不快に感じる可能性があります。

ヒント:

UIのフィードバックを通じてシステムの状態を伝えます
履歴の記録を保持します
古いトランザクションについては、ブロックエクスプローラーへのリンクを提供します
ネットワークを変更するためのショートカットを提供します。

例: さりげないコンテナにより、ユーザーはウォレットにどのような関連トークンを持っているかがわかり、メインのCTAはネットワークを変更するためのショートカットを提供します。