UXデザインチェックリスト

設計プロセス中に、製品のいくつかの欠陥が見過ごされます。 これらの小さな（または時には大きな）ことは、ユーザーがソフトウェアを使用しているときのエクスペリエンスを損なう可能性があります。 デザインが承認される前に確認できるポイントのリストをまとめました。

これらのポイントのすべてがすべての製品に当てはまるわけではありませんが、一般的に、これらは最も関連性の高いものであることに注意してください。

インタラクションデザイン

01 –繰り返しの行動や頻繁な活動は楽に感じる

重要性：同じ出力に対する反復アクション（たとえば、異なるフォームに同じ情報を入力する）は、ユーザーが目標をより速くまたはより良く達成するのに役立たない、大変な作業です。 ユーザーはまた、それを回避する方法を見つけようとする可能性があります。たとえば、より速く/より良くするのを助けることができる競合他社を探します。

テスト方法：まず、製品のすべてのフローを分析し、ユーザーの行動を観察する必要があります。 繰り返しのアクションが存在する場合、それらを容易にする方法があることを確認する必要があります。以前に入力した情報を使用するオプションです。

02 –ユーザーはエラーから簡単に回復できます

重要性：多くの場合、ユーザーは意図しないアクションや目的の結果につながらないアクションを実行します。ユーザーが戻って再試行できるようにすることで、イライラすることなく、簡単に回復し、流れを続けることができます。

テスト方法：まず、ナビゲーションシステムで戻ることができること、およびアクションを元に戻すことができることを確認します。 次に、ユーザビリティテストを実施するときに、ユーザーが間違ったアクションを実行する可能性が最も高いシナリオを作成し、ユーザーが簡単に回復できるかどうかを確認します。

03 –ユーザーは専門知識のレベルに応じて適切にサポートされます

重要性：製品の初心者ユーザーがスムーズな学習体験を行えるようにすることが重要です。 ただし、製品に慣れてしまえば、フローをより速く移動するのに役立つツールに取って代わられるはずです。 どちらのシナリオでも、使いやすさと保持力が向上します。 たとえば、エキスパートユーザー向けのショートカット、初心者ユーザー向けのツールチップなどです。

テスト方法：まず、両方の対象者向けのツールがあるかどうかを確認します。 次に、初心者およびエキスパートユーザーを対象にユーザビリティテストを実施して、これらのツールが適切に使用されているかどうかを確認します。

04 –ヘルプへのアクセスはユーザーの進行を妨げません

重要性：ユーザーは、製品の特定の部分で立ち往生しているときはいつでも助けを求めます。 オンラインまたはオフラインのヘルプを追加して、ユーザーが中断したところから作業を再開できるようにすることが重要です。

テスト方法：ユーザーがヘルプを求め、ワークフローと進行状況が中断されていないかどうかを確認するテストシナリオを作成します。

ビジュアルデザイン

05 –3つ以下の原色

重要性：これは固定されたルールではありません。特定の場合には、3つ以上の原色を使用できる場合があります。 ただし、3色を組み合わせるのはすでに難しいので、ほとんどの場合、それ以上は避ける必要があります。

テスト方法：製品の設計時に使用したカラーパレットの原色が3色以下であることを確認してください。

06 –階層、コンテンツ、または機能を伝えるために色だけが使用されることはありません

重要性：アクセス可能な製品を用意することはプラスではありません。それは必須です。 色覚異常などの視覚障害を持つ人々は、階層、コンテンツ、または機能を伝えるために色だけに依存しています。 これは、彼らがあなたの製品を使用することができず、除外された人口統計になることを意味します。

テスト方法： colorfilter.wickline.orgを使用すると、Webページの上にカラーフィルターを配置して、さまざまな種類の色盲についてテストできます。 また、製品をスクリーンキャプチャして、画像エディタでグレースケールに変換し、色を簡単に区別できるかどうかを確認することもできます。

07 –視覚的な階層により、ユーザーは必要なアクションに誘導されます

重要性：ユーザーは、製品の階層と手がかりを利用して、何をすべきか、どこに行くべきかを知っています。これを理解し、その階層を使用して適切にガイドすることが不可欠です。

テスト方法：製品内のフローがどのように機能するか、およびその主要なアクションが視覚的な階層によってインセンティブを与えられているかどうかを理解します。

08 –視覚的階層の最上位のアイテムが最も重要です

重要性：視覚的な階層により、ユーザーは情報をすばやくスキャンし、差し迫ったニーズに基づいてコンテンツに優先順位を付けることができます。 視覚的階層の最上位に近いアイテムは、ビジネスにとって最も重要であり、ユーザーにとって最も関連性が高いものでなければなりません。

テスト方法：デジタル製品をスクリーンキャプチャしてから、ガウスぼかしでそのスクリーンショットを半径約5pxにします。 結果を見ると、階層がすぐに視覚化され、どの要素が目立つかがわかります。 それらはビジネスとユーザーにとって最も重要ですか？

09 –一次アクションは二次アクションと視覚的に区別されます

重要性：一次アクションと二次アクションが異なるということは、ユーザーが製品を操作するときに混乱することがなく、間違いを犯しにくいことを意味します。 たとえば、「送信」と「キャンセル」は明確に区別する必要があります。

テスト方法：ユーザビリティテストを実施するときは、ユーザーの意図ではなく、一次アクションと二次アクションの区別が不十分なために発生する一般的なエラーに注意してください。 また、デザインを確認するときは、色、サイズ、配置、およびその他の要素がアクションを区別することを確認してください。

10 –インタラクティブな要素は抽象化されていません

重要性：新製品を使用する場合、ユーザーは、他のデジタル製品を使用した以前の経験から構築された一連の期待を抱きます。たとえば、ボタンの外観や機能などです。 これらの期待に応えることは、不必要な摩擦を生み出していないことを意味します。

テスト方法：まず、一般的なパターンが使用されていない領域を探して製品を確認します。 たとえば、リンクのように見えないリンク。

11 –フォームの送信は視覚的に異なる方法で確認されます

重要性：アクションが正常に実行されたかどうかをユーザーに確認させることが重要です。 たとえば、フォームを送信した後、カラーバナーの形式の明確な確認メッセージは、ユーザーが次のタスクに進むことができることを意味します。

テスト方法：ユーザーが情報を入力する製品のすべての領域を確認します。 ユーザー入力が完了したら、そのアクションが成功したかどうかに関する確認をトリガーします。 終了ステータスに関してフィードバックが明確であることを確認してください。

12 –アラートメッセージは一貫しています

内容：アラートメッセージは同じ視覚スタイルを持ち、同じ場所に同じ方法で表示されます。

重要性：一貫したアラートメッセージがあるということは、ユーザーがすぐに注目に値するものを常に理解することを意味します。 アラートと一貫性がないということは、新しいアラートがポップアップするたびに余分な精神的負荷がかかることを意味します。

テスト方法：アラートメッセージの視覚スタイルが同じであり、位置が類似または同一であることを確認します。

13 –アラートメッセージは視覚的に区別されます

重要性：アラートメッセージが他の画面要素と明確に区​​別されていることを確認することで、ユーザーは実際にそれらに気づいたり、それに基づいて行動したりできます。

テスト方法：視覚的な違いを自分で確認した後、ユーザビリティテストでユーザーがアラートメッセージにどのように反応するかを確認します。

情報アーキテクチャ

14 –ナビゲーションは一貫しています

重要性：ユーザーが製品を方向付けてナビゲートする方法は、現在のページに関係なく、ユーザーが目標を達成できるかどうかに直接影響します。

テスト方法：情報アーキテクチャのドキュメントをチェックし、すべてのページでナビゲーションにアクセスできること、およびナビゲーションが変更または非表示にならないことを確認します。 ビジュアルデザインに飛び込む前に、カードの並べ替えまたはツリーテストを試して、情報アーキテクチャの経路が可能な限り直感的であることを確認してください。

15 –成長の余地

重要性：新しい機能やコンテンツが発生するたびに、製品のナビゲーションおよび情報システムを再設計することはできません。 ナビゲーションメニューと全体的なレイアウトは、中断することなく、より多くのカテゴリ/トピックをサポートする必要があります。 成長の余地がある設計とは、主要な設計と開発の取り組みがインターフェイス全体で簡単に拡張できることを意味します。

テスト方法：すべての利害関係者に、製品のコンテンツが時間の経過とともにどのように成長するかについて質問します。 より静的なコンテンツをサポートしますか？ アーキテクチャはビデオをサポートする必要がありますか？

タイポグラフィ

16 –2つ以下の異なる型族が使用されます

重要性：これは固定されたルールではありません。2つ以上を実行できる場合があります。 しかし、一般的に言って、2つ以上を一致させることは簡単な仕事ではありません。 使いやすさと視覚的な目的のために、2つに固執すると、活版印刷の階層が単純化され、理解が向上します。

テスト方法：デザインに2つ以上のタイプファミリーが混在していないことを確認してください。 選択した家族が適切に一致していることも確認しておくと役立ちます（詳細はこちらをご覧ください）。

17 –テキストコンテンツに使用されるフォントは少なくとも12pxのサイズです

重要性：繰り返しになりますが、これは固定されたルールではありません。理論的には、特定の目的に小さいサイズを使用できますが、一般的に、12ピクセル未満のサイズでは読みやすさが大幅に低下します。

テスト方法：すべてのコンテンツをチェックし、それらに使用されているフォントのサイズが少なくとも12ピクセルであることを確認します。

18 –ラベル、ヘッダー、または頭字語の大文字を予約する

重要性：大文字の使用を制限すると、理解が容易になることが知られています。視覚的に重くならず、ユーザーが消化しやすくなります。 特に強調または非常に制限された場合（頭字語など）に使用する必要があります。

テスト方法：徹底的なコンテンツチェックを実行し、大文字の単語がヘッダー、ラベル、または頭字語のみに制限されていることを確認します。

19 –コンテンツをコントロールから分離するために、さまざまなフォントスタイルまたはファミリが使用されています

重要性：コンテンツとは何か、コントロールとは何か、つまり、ユーザーが何を操作できるかについて、明確な指標が必要です。 これらのインジケーターには、サイズ、色、位置、フォントなどがあります。フォントは重要です。さまざまなスタイルやファミリを使用すると、ユーザーが混乱することなく、操作できるものを簡単に識別できます。

テスト方法：製品のすべてのコントロールを特定し、それらがコンテンツから目立つことを確認します。 ユーザビリティテストを実行するときは、ユーザーがコントロールを操作するのに問題がないかどうかに注意してください。

20 –フォントのサイズ/太さはコンテンツタイプを区別します

重要な理由：読みやすさと理解に大きく影響します。 見出し、小見出し、段落を明確に区別することで、そのコンテンツを消化する際の精神的な過負荷を軽減できます。 また、視覚的なメリットもあります。見た目も使い心地も良くなります。

テスト方法：製品内のコンテンツを確認するときは、見出し、小見出し、段落で異なるフォントサイズと太さを使用していることを確認してください。

ユーザーインターフェース

21 –近接性と位置合わせ

重要性：ユーザーは、機能的またはコンテキスト的に、互いに近いアイテムをグループ化する傾向があります。 ナビゲーションバーはこの良い例です。 このパターンに従い、接続されているアイテムをグループ化することは、ユーザーがインターフェースを即座に理解することを意味します。

テスト方法：機能が類似しているアイテムを探し、（可能な場合は）それらがグループ化されているかどうかを確認します。

22 –マルチステップワークフローの進行状況インジケーター

重要性：特にマルチステップワークフローの場合、ユーザーは簡単に圧倒されたり、最終的に完了するまでにどれくらいの時間がかかるのか疑問に思うことがあります。 進行状況インジケーターは、自分の位置を特定するのに役立ちますが、さらに重要なことは、達成感を生み出し、ドロップ率を下げることです。

テスト方法：何かを達成するためのさまざまなステップがある製品内のすべてのフローをチェックし、進行状況がインジケーターで示されていることを確認します。

23 –前景要素（コンテンツやコントロールなど）は、背景と簡単に区別できます

重要性：視覚障害を持つ人々にとって重要です。 また、ユーザーの学習曲線と理解力も向上します。 明確に区別することで、ナビゲーションが容易になり、ボタンにより多くの注意が向けられ、一般的に使いやすさが向上します。

テスト方法：製品をスクリーンキャプチャし、そのスクリーンショットを約3pxから5pxの半径にガウスぼかしします。 結果を見ると、前景に何があるのか​​、背景に何があるのか​​が簡単にわかりますか？

リストを通過しておめでとうございます！ しかし、これで終わりではありません。

これで製品はより堅固になり、いくつかの領域で改善された可能性があります。たとえば、よりアクセスしやすくなりましたが、常にテストを続け、ユーザーフィードバックを収集し、繰り返し続けることを忘れないでください。