デザイン

実装前にチームで確認、UIデザインで考慮したいチェックリスト

ユーザビリティ研究の第一人者とも呼ばれる、ニールセンのデザイン原則 をもとにUIデザインで考慮したいチェックリストをオハコでまとめてみました。
読了目安:5分
avator
Misaki Akimoto
2018-11-21

プロトタイプがデザイナーから上がってきたとき

「よし、だいぶカタチになってきた!」

と感情が上向くのと同時に

「この画面遷移だとなんとなく違和感があるな・・・」 「修正してほしいけれど、ノンデザイナーの自分から何を根拠に伝えればよいだろうか・・・」

といった気持ちになることはありませんか。

このような違和感は、開発実装を行う前に改善することがとても大切です。

開発においてはテストを行いながら品質保証を行う習慣がありますが、 デザインフェーズで「ユーザー視点から品質を評価する」ということが根付いているチームはそう多くないと思います。

そこで今回は、”ユーザビリティ研究の第一人者”とも呼ばれるヤコブ・ニールセンのデザイン原則をもとにしてUIデザインで考慮したいチェックリストをオハコで作成してみました。

UIデザイナーの方がデザインをしていくうえで確認するだけでなく、 チェックリストを活用しながらチーム内でデザインの品質をより高めてもらえたらと思います。

ヤコブ・ニールセンって誰?

ヤコブ・ニールセン(Jakob Nielsen, Ph.D.、1957年 - )

ユーザーエクスペリエンスのコンサルティングで有名なニールセン・ノーマン・グループの代表です。

コペンハーゲン生まれ。デンマーク工科大学を卒業後、ベル研究所やIBMを経て、サン・マイクロシステムズでユーザビリティ分野の業務に従事し、1998年に同社設立後、今に至ります。

安く早く実行できるユーザビリティ向上術について提唱し、いくつかの実用的な方法論を提供することでムーブメントを起こしたということで、まさに”ユーザビリティ研究の第一人者”です。

適切なインタラクションデザインを実現するチェックリスト

ニールセンの「10 Usability Heuristics for User Interface Design」を参考に、チェックしやすいようにアレンジしています。

チェックしやすくするために、3つの軸に切り分けていたりします。

  1. ビジュアル
  2. 機能・コンテンツ
  3. 情報設計

ビジュアル

項目 説明
一貫性と標準化 ビジュアルテイストや要素の形、サイズに一貫性があるかどうか
認識負荷の抑制 オブジェクト、アクションおよびオプションを統合・明示させ、ユーザーの認識負荷を最小限に抑えているかどうか
審美的でシンプル 過度な装飾や、余分なラベル等によって不必要な認知負荷をビジュアルによって掛けていないか

機能・コンテンツ

項目 説明
ユーザーエラー防止 事前に防げるユーザーエラー(意図しないユーザーの行動)を予防できているか
目的に沿った充足性 サービス利用の目的が達成できる機能・コンテンツが充足しているか
不要なコンテンツ 不要な機能・コンテンツが提供されていないか
ヘルプとドキュメント ドキュメントなしで利用できるシステムであっても、ユーザー難易度をカバーするための簡潔なドキュメントを提供できているか

情報設計

項目 説明
システム状態の可視性 システムは妥当な時間内に適切なフィードバックを得て、何が起きているかをユーザーに伝えているか
ラベリングの妥当性 システム指向の用語ではなく、ユーザーがよく知っている単語、フレーズかどうか
表示情報の妥当性 関連性のない情報やごく稀にしか必要のない情報が含まれていないかどうか
ユーザーの主導権の確保 操作を誤った操作をしても取り消せたり、戻れたりすることはできるか、また、特定の操作のみを強要させていないか
一貫性と標準化 ラベリングやボタン配置に一貫性があるかどうか
認識負荷の抑制 オブジェクト、アクションおよびオプションを統合・明示させ、ユーザーの認識負荷を最小限に抑えているかどうか
画面構造の妥当性 余計な画面遷移を挟んでいないか、機能と画面構造がリンクしているか
エラーメッセージ エラーメッセージはエラーコードだけでなくユーザーに解決策を提示しているか

結論

今回のチェックリストは

・ デザイナー自身が設計を進めていくにあたってのガイド ・プロトタイプ完成後のレビュー

という利用シーンを想定して作成しました。

実際にオハコでも上記のチェックリストを活用してデザインレビューを進めることもあります。以下がその一例です。

実際に形になったプロトタイプを触ってみる。 そして自身が違和感を覚えた箇所についてユーザーの視点から課題を考えてみる。 そうすることでユーザーのために「まず何を改善する必要があるのか」優先順位を立てて修正することが可能になりました。

オハコの例では、チェックした内容についてドキュメントにまとめていますが、上記の観点からユーザー視点でディスカッションをするだけでも気づきが多いのではないでしょうか。

今回のチェックリストによりあなたのチームがさらにユーザーに寄り添い、プロダクトの品質を高められたら嬉しいです。

UIデザイン
デザインパートナーをお探しではありませんか?
オハコはデザインと実装の力で、サービスをゼロから形にするデザインコンサルティング会社です。 サービスの成長から逆算し、最適なプロジェクトをデザインします。
デザインについてのご相談は下記よりお問い合わせください。
avator
Misaki Akimoto
プロダクトマネージャー/ Product Huntをチェックするのが日課です^^