デザインとユーザーインターフェースの変更

デザインやユーザーインターフェイス(UI) の変更に貢献したりレビューしたりするときは、以下のガイドラインに従ってください。コードレビュー全般に関するより広範なアドバイスやベストプラクティスについては、コードレビューガイドを参照してください。

これらのガイドラインの基盤となっているのは、GitLabのデザインシステムであるPajamasです。Pajamasに追加や改善を貢献することをお勧めします。

マージリクエストレビュー

マージリクエスト(MR) の作成者として、あなたは以下を行う必要があります：

  • MR のワークフローで説明されているように、変更_前と_ _変更後の_スクリーンショット (または動画) を記述してください。これらのスクリーンショット/ビデオはすべてのレビュアーにとって非常に有用であり、特に変更が小さい場合、レビュープロセスをスピードアップすることができます。
  • ユーザー向けの変更があるマージリクエストには、~UXラベルを添付してください。これにより、レビュアールーレットがUXレビュアーを提案します。

あなたがチームメンバーの場合：レビュアー ルーレットが提案するプロダクトデザイナーをレビュアーに任命することをお勧めします。こうすることで、作業を均等に分散し、コミュニケーションを改善し、UIをより一貫性のあるものにすることができます。別のレビュアーに割り当てる理由がある場合は、好きなプロダクトデザイナーに割り当てたことを示すコメントを追加してください。

あなたがコミュニティの貢献者である場合：レビュアー ルーレットに関係なく、貢献する領域の専門家であるプロダクト デザイナーを選ぶことをお勧めします。

チェックリスト

UIの変更を_デザインする_ときと_レビューする_ときの両方で、これらの点をチェックしてください。

ライティング

パターン

ビジュアルデザイン

ブラウザの要素インスペクタ（Chrome、Firefox）でビジュアルデザインのプロパティを確認します。

ダークモード

この機能が実験である間は、ダークモード用にデザインする必要はありません。UX Foundationsチームは、将来的にダークモードを改善する予定です。Pajamasのコンポーネントを製品に統合し、ダークモードをサポートするための根本的な設計戦略が整うまでは、このモードにバグや負債が発生しないとは保証できません。あなたの判断で、ダークモードのパッチを作成する必要性を評価してください。

状態

ブラウザの_スタイルインスペクタを使って_状態を確認し、:hover などの CSS 擬似クラスを切り替えます（Chrome、Firefox）。

  • 該当するすべての状態（エラー、レスト、ローディング、フォーカス、ホバー、セレクテッド、ディスエーブル）を考慮してください。
  • データサイズに依存する状態を考慮（空、いくつかのデータ、多くのデータ）。
  • ユーザーロール、ユーザー設定、サブスクリプションに依存する状態を考慮。
  • アニメーションとトランジションを考慮し、そのガイドラインに従ってください。

レスポンシブ

ブラウザの_レスポンシブモード_（Chrome、Firefox）を使って、レスポンシブな動作を確認してください。

  • すべてのブレイクポイントで、要素のサイズ変更、折りたたみ、移動、折り返しを考慮してください（大きなビューポートが優先される場合でも）。
  • すべてのブレイクポイントで同じ情報とアクションを提供します。

アクセシビリティ

ブラウザの_アクセシビリティ・インスペクタ_（Chrome、Firefox）でアクセシビリティを確認してください。

ハンドオフ

デザインの準備ができたら、実装を開始する_前に_：

フォローアップ

随時ですが、通常はデザイン実施_中_または実施_後_です：

  • パジャマにイシューを貢献し、設計システムの追加や改善を行います。
  • 時間や実現可能性の問題により、合意されたUX要件から意図的に逸脱した場合、~UX debt ラベル付きのイシューを作成し、対応するイシューやマージリクエストにリンクします。
  • スコープクリープを避けるため、合意されたUX要件以外の機能追加や機能拡張のイシューを作成してください。