Web3 UIUXデザイン：最初のクリックからアクションまで

デザインは、プロダクトが明確にすべき瞬間から始まります

Web3 UIUXデザインは、プロダクトの機能とユーザーが次に理解すべきことを結びつけます。まずユーザータスクから始め、その周りにジャーニーとインターフェースを形作ります。

例えば、アンバサダープログラムの担当者が、投稿が少なかった月の後にプロジェクトダッシュボードを開く場面を想像してください。何に注意が必要か確認したいが、次のステップが明確ではありません。私たちは、ユーザーが完了しようとしているタスクを調べ、混乱が始まる場所をマッピングし、重要な選択をより追いやすくします。

同じアプローチは、dApp、ウォレット、取引所、ランディングフローにも有効です。プロダクト、想定ユーザー、既存の素材をレビューします。リサーチと競合レビューにより、詳細な画面を描く前に、欠けているコンテキストや不自然なステップに気づくことができます。

開始点は、チームが既に把握している内容によって異なります。ジャーニーが明確であれば、インターフェースデザインとプロトタイプに集中できます。明確でなければ、まずフローを整理します。ビジュアルサポートも必要な場合は、Web3デザインとビジュアルと連携できます。

Web3インターフェースは、ウォレットアクションをどのようにガイドすべきですか？

有用なウォレットフローは、ユーザーが何をできるか、次に何が起こるか、インターフェースがどう応答するかを示します。各重要なアクションをマッピングしてから、画面を洗練します。

新しいユーザーがウォレット接続プロンプトに到達し、なぜ必要なのかわからない場合を考えます。プロンプトの前にどの情報が必要か、接続後にユーザーが何を見るかを検討します。また、フローがトランザクションやエラーを説明すべき場所もマッピングします。目的は、技術的なステップを隠すのではなく、次の判断を理解可能にすることです。

トランザクションジャーニーでは、接続、確認、応答の3つの瞬間をマッピングすることがよくあります。ワイヤーフレームにより、チームはビジュアルデザインの前に順序と文言を確認できます。その後、プロトタイプにより、選択したパスを接続された体験として議論しやすくなります。

有用な最初のレビューのために、主要タスク、現在の要件、既存の画面、既知のウォレットまたはトランザクション状態をお持ちください。プロダクトの文言に別途注意が必要な場合は、Web3コピーライティングがインターフェース言語の一貫性を保つのに役立ちます。プロダクトオーナーは、デザインチームが推測できないルールを確認する必要があります。

プロダクトチームがレビューできる作業ファイル

ユーザージャーニーのレビューと実装準備のための、接続されたデザイン素材一式を受け取ります。詳細デザインを始める前に、どのタスクと画面に焦点を当てるかを合意します。

典型的な作業セットには以下が含まれます：

• リサーチノートと競合レビュー。
• 優先タスクのユーザーフローとワイヤーフレーム。
• ビジュアルデザインシステムとコンポーネントライブラリ。
• 選択したパスのクリック可能なプロトタイプ。
• ユーザビリティテストとFigmaでの開発者ハンドオフ。

フローとワイヤーフレームは、タスクの構造を示します。デザインシステムとコンポーネントは、チームが画面全体のビジュアル言語をレビューするのに役立ちます。クリック可能なプロトタイプにより、選択したジャーニーをより簡単に体験できます。ユーザビリティテストは、ユーザーがより多くのコンテキストを必要とする場所を観察する機会を提供します。

最終ハンドオフでは、合意したFigma作業を開発者向けに整理します。プロダクトの広範なアイデンティティがまだ形成中の場合は、ビジュアル方向性を確定する前に、仮想通貨プロジェクトのブランディングとインターフェース判断を調整します。その後、チームはプロダクト言語とデザインを一緒にレビューできます。

最初のレビューからFigmaハンドオフまで

作業は、プロダクトコンテキストからフロー、インターフェース判断、プロトタイプ、開発者ハンドオフへと進みます。次のレイヤーが構築される前にチームが応答できるよう、レビューポイントを設定します。

Brand Communityでは、キックオフチェックリストを使用して、オーディエンス、優先タスク、既存のデザインファイル、プロダクト要件、既知の質問を収集します。次に、プロダクトの質問に答えられる人と作業をレビューする人を合意します。2つのレビューポイントがフィードバックを明確に保つのに役立ちます：1つはフローとワイヤーフレーム用、もう1つはビジュアル方向性と選択したプロトタイプ用です。

スケジュールは、ジャーニーの数と複雑さ、既存の素材、意思決定のスピードに依存します。作業は、仮想通貨コンテンツ制作や、より広範なソーシャルメディアとコンテンツチームと、共有プロダクト言語を通じて連携することもできます。

インターフェースを形作るプロダクト判断を持ち寄る

デザインレビューは、チームがユーザー、タスク、その背後にあるプロダクトルールを説明できるときに最も有用です。未回答の質問をフローに可視化することはできますが、推測で埋めるべきではありません。

Figmaプロトタイプは、意図したウォレットやトランザクション状態を示すことはできますが、接続されたウォレットが何を表示するかを決定することはできません。また、ネットワークトランザクションが完了するかどうかも決定できません。これらの動作とその背後にあるプロダクトルールは、プラットフォームとプロダクトチームに委ねられます。

最初のレビューを進めるために、以下の3つを準備してください：

1. 短いプロダクト概要と、使用が想定されるユーザー。
2. 最も重要な1つのジャーニーと、現在のFigmaファイルまたは要件。
3. プロダクト判断を確認し、フィードバックを集められる1人の担当者。

洗練されたブリーフは必要ありません。未解決の画面や質問を含め、お持ちのものをお送りください。素材を一緒にレビューし、最初のジャーニーとレビューポイントを合意し、プロトタイプとFigmaハンドオフへの明確なルートをマッピングします。

仕組み

1. プロダクトの全体像を共有プロダクト概要、想定ユーザー、優先タスク、既存のデザインファイルや要件をお送りください。
2. レビュー内容を合意どのジャーニーに焦点を当てるか、プロダクトの質問に答えられる人、チームが判断をレビューするタイミングを確認します。
3. ユーザータスクをマッピング合意したフローとワイヤーフレームを準備し、チームがインターフェースデザインの前に構造を確認できるようにします。
4. 選択したパスをデザイン・テストビジュアルシステムと画面を作成し、クリック可能なプロトタイプを構築し、合意に応じてユーザビリティテストを実施します。
5. Figmaハンドオフを準備承認されたデザインファイルを開発者向けに整理し、関連するインターフェースの選択肢をチームに説明します。