UXデザイン
適用範囲
- デスクトップ、モバイル、Web向けの要求された製品タスク体験の設計、実装、修正、レビュー、最適化、または原則ガイダンスに適用します。バックエンドのみ、データベースのみ、その他ユーザー対面のインタラクションを伴わないタスクは、このスキルの範囲外です。
- このスキルはSDLCワークフローから独立して動作し、単独でインストールできます。視覚階層、タイポグラフィ、色、レイアウト、コントロールの形状、モーションなども含むタスクには、その判断のために
sdlc-ui-designなどの利用可能なUIガイダンスを使用します。 - 原則ガイダンスのみが要求された場合は、製品固有の設計、実装、受け入れテストに拡張せず、そのレベルで簡潔な回答を提供します。
- レビューのみのリクエストの場合、新しい設計を作成したり実装を変更したりせずに、所見と推奨事項を報告します。
- 設計探索、提案、コンセプト比較、プロトタイプ検証は、スタンドアロンの設計成果物のみを作成または変更します。リクエストに実装が含まれる場合にのみ、プロダクションコードを変更します。
- 混合リクエストの場合は、許可された実装に進む前に設計を提供します。それぞれを個別に提供し評価します。プロトタイプ検証は実装の受け入れを確立するものではありません。
- 実装については、既存のプロジェクトチェックに従います。現在の環境が欠陥の再現をサポートしている場合は、その欠陥に焦点を当てた再チェックを使用します。他の振る舞い変更のチェックは、そのリスクと範囲に応じて選択します。このスキルを満たすためだけに、追加の検証環境をセットアップしたり、正式な検証レポートを作成したり、既存のチェックを複製したりしないでください。
- 実装結果については、実行したチェック、観察結果、未検証の範囲を報告します。ランタイムの証拠、コードベースの推論、主観的判断を区別します。モデルの自己評価はユーザー受け入れではありません。
オンデマンドで読む
- 以下の共有原則に従い、実際のターゲットとシナリオに応じてプラットフォームリファレンスを読み込みます。
- デスクトップ:デスクトップ原則を読む。
- モバイル:モバイル原則を読む。
- Web:Web原則を読む。
- モバイルWebの場合は、モバイルとWebの両方の原則を読む。その他の組み合わせについては、選択したドキュメントの条件に従って追加のリファレンスを読み込みます。
- プラットフォームが指定されていない場合は、タスクとプロジェクトのコンテキストから推測します。一般的なアドバイスの場合は、共有原則のみを使用します。具体的なタスクに必要なプラットフォームの決定がまだない場合にのみ、明確化を求めます。
- 適応のコンテキストや制限については、ソースコンテキストのリンクされたエントリを参照し、必要に応じて原文を参照します。このスキルの英語の説明がローカル適応を定義します。参照によって、アップストリームのワークフローやツールチェーンがインポートされることはありません。
設計の提供
このセクションは、変更の規模に関係なく、要求されたインタラクション探索、提案、コンセプト比較、またはプロトタイプ検証のために使用します。混合タスクでは、設計部分に適用されます。実装の提供と受け入れは、タスクと既存のプロジェクト要件に従います。
- UXデザインをインタラクティブなシングルページHTMLアーティファクトとして提示します。プロトタイプで主要なアクション、関連する状態変化、必要な戻る/回復パスを操作可能にします。コントロールとフィードバックが意図した操作を示し、関連する状態を区別していることを確認します。ソースコンテキスト。
- デフォルトでインラインCSSとJavaScriptを使用し、HTMLが直接開くようにします。ローカル状態と明確に識別された例示データを使用して、合意されたインタラクション範囲を示します。
- 複合UI/UXデザインの場合は、最初に画像生成を使用してUI提案を行い、インタラクティブなUX HTMLプロトタイプを提供します。画像生成が利用できないか失敗した場合は、両方に1つのHTMLアーティファクトを使用します。ソースコンテキスト。
- レンダリングされたプロトタイプを、実際のコンテンツが利用可能な場合はそれを使用し、それ以外の場合は明確に識別された代表的なコンテンツを使用して、意図したビューポートで検査します。ソースコンテキスト。
- インタラクティブなプレビューと開くことができるHTMLファイルで提供をリードします。付随する散文は、開く手順、シミュレーション範囲、必要な制限事項に限定して簡潔に保ちます。
共有原則
原則の適用
- 要求された作業、ターゲットプラットフォーム、シナリオに関連する原則を適用します。
- 推奨に影響を与える条件とトレードオフを説明します。
- 数値要件や推奨事項を引用する前に、そのソース、単位、ターゲットプラットフォームへの適用可能性を確認します。
設計原則
- タスクとアウトカム: ユーザーの目標と操作順序に従ってUIを整理します。現在のタスクに必要な情報とアクションを優先します。各画面を、そこでユーザーが達成する必要があることによって評価します。ソースコンテキスト。
- エントリポイントとコントロール: 主要なエントリポイントを発見可能にし、各コントロールの意図されたアクションを明確にします。アクションとその対象を識別するボタンラベルを使用します。曖昧なアイコンにはラベルを付けます。ソースコンテキスト。
- アイコンのセマンティクス: アイコンのセマンティクスをその現在の使用法から決定します。可視テキストの隣にある冗長な装飾アイコンをアクセシビリティツリーから非表示にします。意味のあるスタンドアロンアイコンにはテキスト代替を提供します。アイコンコントロールのアクセシブルな名前と該当する状態を公開します。ソースコンテキスト。
- タスク優先度: タスク指向の画面では、ユーザーが最初に答える必要がある質問が、視覚的な強調と読み取り順序を決定するようにします。ソースコンテキスト。
- プレゼンテーション構造: プレゼンテーションページの主張とそのエビデンスが、どのセクションをどの順序で必要とするかを決定するようにします。ソースコンテキスト。
- 事実に基づく内容と例示内容: 実際の製品、顧客、ビジネス活動に関する主張とエビデンスは、利用可能な事実に基づきます。例示内容は明確に識別します。ソースコンテキスト。
- データの一貫性: 同じレポート範囲内では、同じ事実をどこに表示する場合でも一貫させ、派生した数値はその基礎となるデータと一貫させます。範囲、期間、計算基準の違いを明確にします。ソースコンテキスト。
- 認知的負荷: 意思決定に必要なオプションとコンテキストを提示し、記憶と繰り返し入力を減らし、ユーザーがデフォルトを検査および変更できるようにします。複雑なオプションは、関連性が生じたときに明らかにします。ステップを減らす場合も含め、意思決定に必要な情報を選択の時点で利用できるようにします。ソースコンテキスト。
- 学習: インターフェースによってもたらされる不必要な精神的負荷を軽減します。ユーザーがタスクを理解し習得するのに役立つ学習をサポートします。ソースコンテキスト。
- 簡素化: 簡素化を、ユーザーのタスクから取り除く障害によって判断します。必要な機能、意思決定に関連する情報、アクセシビリティを維持します。ソースコンテキスト。
- 一貫性: プラットフォームのインタラクション規則と一貫したコントロール動作に従います。
- ステータスと待機フィードバック: タスクまたはナビゲーション内でのユーザーの現在位置、処理ステータス、結果を表示します。ロード中、データなし、失敗を区別します。アクションに迅速に応答します。長時間の操作には、信頼性の高いステータスを提供し、測定可能な場合は実際の進捗状況を示します。頻繁な中断なしに、重要度に合わせてフィードバックを調整します。各状態の表示と利用可能なアクションをその意味に合わせます。読み取り専用、無効、進行中の状態を区別します。ソースコンテキスト。
- ユーザー制御: 発見可能な終了、キャンセル、戻るアクションを提供します。適切な場合は元に戻す/やり直しをサポートし、それらが影響する変更を明確にします。元に戻せないアクションの前に結果を説明します。視覚的な遷移は、サポートされている戻る、切り替え、キャンセルアクションを妨げてはなりません。アニメーションの中断とバックグラウンド操作のキャンセルを区別します。ソースコンテキスト。
- モダリティ: モーダルインタラクションは、現在の作業を中断したりフォーカスを保護したりする必要があるタスクのために予約します。ソースコンテキスト。
- エラー防止と回復: 入力と操作の制約を、該当する時点で事前に明示します。結果がそれを正当化する場合は確認を要求します。不完全な入力を中断することなく、適切なタイミングで検証します。失敗時には、有効な入力を保持し、問題とその場所を特定し、既知の原因を推測を事実として提示せずに説明し、回復パスを提供します。
- 接続性と回復: ネットワーク依存のタスクについては、制限された接続下で利用可能な機能を明確にします。製品が実際にサポートするフォールバックまたは回復アクションを提供します。ソースコンテキスト。
- インターフェース言語: 対象ユーザーが理解する言語を使用します。馴染みのあるドメイン用語は、意図された意味を正確に伝える場合に保持します。ソースコンテキスト。
- アクセシブルな操作: 対象環境でキーボードと支援技術をサポートし、識別可能なコントロール名、状態、フォーカスを提供します。精密な入力や複雑なジェスチャーに対して同等のアクションを提供します。実際に利用可能な入力機能に基づいてインタラクション動作を選択します。主要なアクションをホバーなしで使用可能にします。ソースコンテキスト。