UIデザイン使用性チェックリスト

UIデザイン使用性チェックリストは、SmartHRのプロダクトデザイナーが日本産業規格(JIS X 25000シリーズ)を参考に開発した、プロダクトの使用性という「ユーザーがプロダクトをどのくらい使えるかの品質」を担保するための、UIデザイン時点で考慮すべき観点の一覧です。

以下、UIデザイン使用性チェックリストを「使用性チェックリスト」と省略表記します。

日本産業規格(JIS)との関係

使用性チェックリストは、プロダクトのユーザビリティが確保されることをより客観的に示すために、国家規格である日本産業規格の「JIS X 25000シリーズ(SQuaREシリーズ)」を参考にして開発されています。

  • ※ ユーザビリティに関する規格として、ソフトウェア製品の品質・評価に関する国際規格(ISO/IEC 25000シリーズ)の国内版 JIS X 25000シリーズの定義を採用

JIS X 25000シリーズで定義されている「使用性」の特性や測定基準を利用することで、チェックする観点の偏りや独自性を低減しながら「プロダクトとしての使いやすさを、JISで規定された製品品質の使用性を元にした観点によって、一定確保したUIデザインをしている」という説明責任を果たすツールとなり、使いやすさをより客観的に担保できることを目指しています。

できること

  • プロダクトデザイナーは、UIデザイン作業時に使用性チェックリストを利用することで、操作性や一貫性を確保したUIデザインができているかの確認(セルフチェック)や、デザインレビュー時の説明に役立てられます。
  • 他のプロダクトデザイナーが作成したデザインカンプに対して、レビューする際の観点や指摘の根拠に使えます。
  • プロダクトデザイナー以外のステークホルダーは、使用性チェックリストの結果を確認することで、プロダクトの「UIデザイン時点でのユーザビリティの品質(プロダクトの使用性)」を客観的に把握できます。

チェック内容

使用性チェックリストには、2023年11月現在、21項目のチェック内容があります。
今後の活用によって、チェックリストは随時更新される可能性があります。

#カテゴリチェック内容チェック内容
の達成基準
関連する品質測定量
(JIS X 25023:2018)
関連する副特性
(JIS X 25010:2013)
1情報設計ユーザーの業務を説明する達成基準1UOp-7-S 情報の理解可能な分類運用操作性
2情報設計概念モデルを説明する達成基準1UOp-7-S 情報の理解可能な分類運用操作性
3情報設計オブジェクトに付随するプロパティとアクションはユーザーの業務の遂行に十分なものであることを説明する達成基準1UOp-7-S 情報の理解可能な分類運用操作性
4情報設計ビューの呼び出し関係を説明する達成基準1UOp-7-S 情報の理解可能な分類運用操作性
5情報設計メインナビゲーションはユーザーの関心に沿って分類されていることを説明する達成基準1UOp-7-S 情報の理解可能な分類運用操作性
6デザインパターン視線誘導」の基準に沿っているか(見出しや色を適切に使用した画面全体の情報の流れ・強弱を表現できているか)達成基準2UIn-1-S ユーザインタフェースの外観の快美性ユーザインタフェース快美性
7デザインパターン視覚的グルーピング」の基準に沿っているか(色を適切に使用した視覚的グルーピングを含む)達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
UIn-1-S ユーザインタフェースの外観の快美性
運用操作性、ユーザインタフェース快美性
8デザインパターンページレイアウト」の基準に沿っているか(機能のトップとなるページに適切なリード文が書かれているか、を含む)達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
UAp-3-S ウェブサイト目的説明率
UIn-1-S ユーザインタフェースの外観の快美性
運用操作性、適切度認識性、ユーザインタフェース快美性
9デザインパターン余白の取り方」の基準に沿っているか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
UIn-1-S ユーザインタフェースの外観の快美性
運用操作性、ユーザインタフェース快美性
10デザインパターンモバイルレイアウト」の基準に沿っているか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
11デザインパターンユーザーへの通知・フィードバックの出し方が「フィードバック」の基準に沿っているか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
UOp-2-G メッセージ明確性
運用操作性
12デザインパターンモードがあるUIの場合は、「モーダルなUI」の基準に沿っているか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
13デザインパターンテーブルを使う場合は、「よくあるテーブル」の基準に沿っているか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
14デザインパターン入力要素が「デフォルト値」の基準に沿っているか達成基準2ULe-2-S 入力欄のデフォルト習得性
15デザインパターンエラー状態(Error state)が検討されており、エラーを回復・解消できるようなフィードバックの出し方が考慮されているか達成基準2UEp-3-S ユーザエラー回復性ユーザエラー防止性
16デザインパターン削除含む危険な操作、やり直しができない操作の前に、ワンクッションはさんでいるか達成基準2UOp-6-S 操作実行取消し能力
UEp-1-G 利用者操作エラー回避性
運用操作性、ユーザエラー防止性
17コンポーネントSmartHR UIと類似した独自のコンポーネントになっていないか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
18コンポーネントコンポーネントの基準に沿った利用方法をしているか達成基準2UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
19ライティングSmartHRの基本的な概念(用語)に合わせた命名をしているか任意UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
20ライティング操作の導線やアクション名がライティングの基準に沿っているか任意UOp-1-G 操作一貫性
UOp-8-S 外観の一貫性
運用操作性
21ライティングエラーメッセージ」の基準に沿っているか達成基準2ULe-3-S エラーメッセージ理解性
UEp-2-S 利用者入力エラーの訂正
習得性、ユーザエラー防止性

表頭の説明

表の各項目の説明は以下のとおりです。

  • カテゴリ
  • チェック内容
    • 使用性を確保するためにチェックする項目。多くの項目が「〜〜の基準に沿っているか」を確認する。
  • 達成基準
  • 関連する品質測定量
    • チェック内容に関連付けられた品質測定量(JIS X 25023:2018 システム及びソフトウェア製品の品質の測定 より)
  • 関連する使用性の副特性
    • 品質測定量が属する使用性の副特性(JIS X 25010:2013 システム及びソフトウェア品質モデル より)

達成基準

カテゴリに応じて各チェック内容を達成する基準を設定しています。

1. 情報設計カテゴリの達成基準

2. その他のカテゴリの達成基準

ライティングの「No.19 SmartHRの基本的な概念(用語)に合わせた命名をしているか」および「No.20 操作の導線やアクション名が基準に沿っているか」のチェックは任意とします。(現時点では確認作業が大きくなりすぎる可能性があるため)
  • チェック内容にある基準に則っていること
  • 対象となる開発プロジェクトは、UIレビューを実施していること

SmartHRにおける運用

利用対象者

主にプロダクトデザイナーを想定していますが、プロダクトデザイナーに限らず以下のような人を対象としています。

  • デザインカンプ作成など、SmartHRプロダクトのUIデザインをする人
  • デザインレビューで他者のアウトプットをレビューする人

期待される効果

  • 利用対象者のアウトプットの品質向上
  • マルチプロダクトとしてのUIの一貫性の向上
  • デザインレビュー品質の向上
  • デザインシステムの品質向上(イシューの可視化)

利用方法

利用対象者は、共通認識としてあらかじめ使用性チェックリストの内容を把握しておいてください。

  • UIデザイン作業時、随時チェック手順にしたがって確認する。(セルフチェック)
  • デザインレビュー時に「なぜそのようにしたか」を、チェックの結果や基準判定フローチャートを活用して説明する。

チェック手順

チェックは「UIデザイン使用性チェックリスト回答テンプレート(Googleスプレッドシート)」を複製して使用してください。

ライティングの「No.19 SmartHRの基本的な概念(用語)に合わせた命名をしているか」および「No.20 操作の導線やアクション名が基準に沿っているか」のチェックは任意とします。(現時点では確認作業が大きくなりすぎる可能性があるため)
  1. 情報設計の項目を確認し、チェック内容への回答列を選択する。
    • 「はい」の場合
      • 説明・証明する中間成果物列に説明を記入するか、中間成果物のリンクなどを貼る。
    • 「いいえ」の場合
      • 中間成果物を作らない理由列を書く。
  2. デザインパターン、コンポーネント、ライティングの項目を確認し、チェック内容への回答列を選択する。
    • 「はい」の場合(基準に沿っている場合)
      • 対応不要
    • 「いいえ」の場合(基準に沿っていない場合)
      • 基準判定フローチャートを参照し、改めて基準に合わせるべきかを検討する。
      • 基準に合わせられない理由列に判断の理由を書く。
    • 「基準がない」の場合
      • 基準判定フローチャートを参照し、基準を作るべきかを検討する。
      • UIデザインの意思決定の背景列に、どのような考え方で現状のUIデザインに至ったかを書く。
      • レビュー会などで現状のUIデザインが妥当かを検討する。

基準判定フローチャート

開発現場においては、チェック内容の基準に合わせられない状況は頻繁に発生します。
例えば、以下のようなケースです。

  • 基準に合っていない既存プロダクトに機能追加する必要があり、基準に合わせると既存とズレてしまう場合
  • 開発チームで理想とするUIを検討したが、基準ではカバーできていない場合
  • ビジネス戦略上、ルック・アンド・フィールを追求する必要がある場合

基準判定フローチャートは、このような状況を客観的に分析し「基準に合わせるべきか・あえて合わせない方がよいか」の判断を支援するためのツールです。

また、フローチャートをどのように辿ったかを説明することで、他者に自身の判断プロセスを伝えることにも役立てられます。

基準判定フローチャート