Web3インターフェースデザインのための7つのヒューリスティック

ユーザビリティヒューリスティックとは、サイトの使いやすさを評価するために使用できる広範な「経験則」です。 これらのヒューリスティックは、特にWeb3に合わせて調整されており、Jakob Nielsenのインタラクションデザインに関する10の一般原則(opens in a new tab)と併せて使用するべきものです。

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

1. アクションにはフィードバックが伴う
2. セキュリティと信頼
3. 最も重要な情報が明確である
4. 用語が理解しやすい
5. アクションは可能な限り短くする
6. ネットワーク接続が可視化され、柔軟である
7. ウォレットではなくアプリから操作できる

定義と例

1. アクションにはフィードバックが伴う

何かが起こった時、あるいは起こっている時は、それが明らかであるべきです

ユーザーは、前のステップの結果に基づいて次のステップを決定します。 そのため、システムのステータスについて常に把握していることが重要です。 これは特にWeb3において重要です。トランザクションがブロックチェーンに確定するまでに少し時間がかかることがあるからです。 待つように知らせるフィードバックがないと、ユーザーは何か起こったのかどうか分かりません。

ヒント：

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

例：トランザクションに関わる各ステップを表示することで、ユーザーはプロセスのどこにいるのかを知ることができます。 適切なアイコンを使用すれば、ユーザーはアクションの状態を把握できます。

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

セキュリティは最優先されるべきであり、これはユーザーに強調する必要があります。 人々は自分のデータを非常に大切にしています。 安全性はユーザーにとってしばしば最も重要な懸念事項であり、デザインのあらゆる段階で考慮されるべきです。 常にユーザーの信頼を得ることを目指すべきですが、その方法はアプリごとに異なる場合があります。 信頼は後から考えるのではなく、意識的にデザインに組み込む必要があります。 ソーシャルチャネルやドキュメント、最終的なUIに至るまで、ユーザー体験全体で信頼を築くことが重要です。 分散化のレベル、トレジャリーのマルチシグの状態、チームが身元を明かしているかどうかなど、これらすべてがユーザーの信頼に影響を与えます。

ヒント：

• セキュリティ監査結果を誇らしげに公開しましょう
• 複数のセキュリティ監査を受けましょう
• 設計した安全機能を広告しましょう
• 統合されたシステムに関連するリスクを含め、潜在的なリスクを強調しましょう
• 戦略の複雑さをユーザーに伝えましょう
• ユーザーの安全性の認識に影響を与える可能性のある、UI以外の問題を考慮しましょう

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

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

複雑なシステムでは、最も関連性の高いデータだけを表示するようにしましょう。 何が最も重要かを判断し、それを優先して表示してください。 情報が多すぎると圧倒されてしまい、ユーザーは意思決定の際に1つの情報に固執しがちです。 DeFiの場合、これはおそらく利回りアプリではAPR、レンディングアプリではLTVになるでしょう。

ヒント：

• ユーザーリサーチによって最も重要な指標が明らかになります
• 重要な情報は大きく、その他の詳細は小さく目立たないようにします
• 人々は文章を読まずに流し見するため、デザインが流し見しやすいようにします

例: 大きく視覚的に目立つトークンシンボルは、流し見してもすぐに見つけられます。 APRが大きく、アクセントカラーで強調されています。

4. 用語の明確さ

用語は理解しやすく、適切であるべきです。 テクニカルな専門用語は大きな障壁となり得ます。なぜなら、新しいメンタルモデルを構築しなければならないからです。 ユーザーはそのデザインを、すでに知っている言葉、フレーズ、概念と関連付けることができません。 すべてが混乱して馴染みがないような印象を受け、使用を試みることさえ険しい道のりになります。 ユーザーは、お金を節約したいと思ってDeFiにアプローチするかもしれませんが、見つかるのは以下のようなものです：マイニング、ファーミング、ステーキング、エミッション、賄賂、ボールト、ロッカー、veトークン、ベスティング、エポック、分散型アルゴリズム、プロトコル所有の流動性... なるべく広い範囲の人々に理解される簡単な用語を使うように心がけましょう。 自分のプロジェクトだけの新しい用語を発明することは避けてください。

ヒント：

• 簡単で一貫性のある用語を使いましょう
• 可能な限り既存の言葉を使いましょう
• 独自の用語を考え出さないようにしましょう
• 現れる慣習に従いましょう
• ユーザーにできるだけ教育しましょう

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

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

ユーザーの操作をスピードアップさせるために、サブアクションをグループ化しましょう。 これはスマートコントラクトレベルでも、UIレベルでも行うことができます。 ユーザーが一般的なアクションを完了するために、システムの一部から別の部分に移動したり、システムを完全に離れる必要がないようにするべきです。

ヒント：

• 「承認」を他のアクションと組み合わせられる場合はそうしましょう
• 署名ステップをできるだけ近くにまとめましょう

例：「流動性の追加」と「ステーキング」を組み合わせることは、ユーザーの時間とガス代を節約する簡単な例です。

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

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

ヒント：

• 接続が切れている間も、アプリの機能をできるだけ多く表示します
• ユーザーが現在接続しているネットワークを表示します
• ネットワークを変更するためにウォレットに移動する必要がないようにします
• アプリがユーザーにネットワークの切り替えを要求する場合、メインのアクションから直接促します
• アプリに複数のネットワークのマーケットやボールトが含まれている場合は、ユーザーが現在どのセットを見ているかを明確に示します

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

7. ウォレットではなくアプリから操作できる

UIは、ユーザーが知るべきことをすべて伝え、行うべき操作をすべてコントロールできるようにする必要があります。 Web3では、UI上で行う操作とウォレットで行う操作があります。 一般的には、UIでアクションを開始し、その後ウォレットで確認を行います。 これらの2つのプロセスが慎重に統合されていない場合、ユーザーは不安を感じることがあります。

ヒント：

• UIでフィードバックを通じてシステムの状態を伝えます
• ユーザーの履歴を記録します
• 過去の取引に関するリンクをブロックエクスプローラーに提供します
• ネットワークを変更するためのショートカットを提供します

例：控えめなコンテナがウォレット内の関連トークンを表示し、メインのCTA （Call to Action）がネットワーク変更のショートカットを提供します。