デザイン工程が進んでいく間、気付かれないままに製品の欠陥が放置されてしまうことがあります。この、時に小さく時に大きな欠陥が、ユーザーがソフトウェアを使用する段階になって大変に厄介な問題を引き起こしかねません。
そんな悲劇を防ぐためのチェックリストをまとめました。製品がデザイナーの手を離れる前に気を付けるべき事として、参考にしてみてください。
万能とまでは言えませんが、一般的には役に立つ事ばかりだと思います。
システムの反応を設計するインタラクションデザイン
01 – 反復作業や頻出動作はめんどくさい！
何が困るのか？ : たとえ単純作業でも、果てしなく繰り返す（例えば、異なる入力欄に同じ情報を書き込むなど）のは面倒なものです。これを避けるため、ユーザーは改善策を見つけ出そうとするものです。もっと手順の楽な別の会社のサービスがないだろうかと探してみたり、ね。
解決策！ : ソフトウェアの一連の動作を分析しましょう。ユーザーの行動傾向を把握するのです。反復動作は出現しないでしょうか？これをマシにする手段はないでしょうか？例えば、入力済みの情報を呼び起こすような仕組みがあると良いですよね。
02 – エラー回復が簡単にできれば大丈夫
何が困るのか？ : 往々にして、ユーザーはうっかり想定外の操作をします。すぐに前の状態に戻ったり、難なくやり直しができたりすればストレスを感じる事なく操作を続行できます。
解決策！ : まず、ソフトウェア上のナビゲーション設定が「後戻り」できる仕組みになっているかどうか確認しましょう。そして、その動作は正常でしょうか。
次に、ユーザビリティテストを実施します。誤操作を起こしやすい箇所を想定しておき、実際にユーザーがサクッと動作をやり直しできるかどうかチェックしましょう。
03 – 経験値に合わせた心地よいサポート機能があれば嬉しい！
何が困るのか？ : 製品に不慣れなユーザーが、順調に操作経験を積んで行けるかどうか、確認する事は重要です。そしてユーザーが製品に慣れて来たら、もっと早く作業をこなすための方法が求められます。
それぞれの習熟度に合わせた使いやすさを提供しましょう。上級者向けショートカット、初級者向けツールチップなどが用意されていると素敵ですね。
解決策！ : まず、ソフトウェア上に初級者向け・熟練者向けそれぞれのツールが用意されているか確認しましょう。そして、ユーザビリティテストを行います。経験値の異なるユーザーが、それぞれにツールを使いこなせるかどうかその操作性を確認しましょう。
04 – ヘルプにアクセスしていたら作業が嫌になっちゃった…？
何が困るのか？ : ユーザーは、製品の操作に躓くとヘルプを利用します。オンライン、オフラインどちらでも良いので、ユーザーがヘルプの力を利用して躓きを克服できるかどうかが重要です。
解決策！ : 試験的にユーザーがヘルプ機能を利用する状況を用意しましょう。その時、ユーザーの作業の流れや進展が滞る様子がないでしょうか。観察して、改善に生かしましょう。
見た目の良さと伝わりやすさ
05 – 「3色遣い」までに抑えましょう
何が困るのか？ : こうでないといけない、と決まっているわけではありません。時には、基本色を4色以上用いてデザインされるケースもあるでしょう。ただし、3色を組み合わせるだけでも既に難易度の高い作業なのです。基本的には、それを超えないように心掛けるべきです。
解決策！ : 製品デザインに使用するカラーパレットに3つの基本色以外の色が置かれていないか確認してください。
06 – 色だけでは、重要度や機能が表現しにくい
何が困るのか？ : 製品にとって、みんなが利用できるという点は自慢するための要素ではありません。みんなが使える事が、当たり前にならなくては。
色覚異常などの視覚障害を持つ方たちにとって、色だけを頼りに重要度やタイトル、機能を見分ける事は困難です。これは、彼らに製品を使わせず、製品コミュニティに受け入れるつもりがないというメッセージとなるでしょう。
解決策！ : colorfilter.wickline.orgでは、ウェブページの表面にカラーフィルターを設定した状態で、様々な色覚パターン別に見え方を確認することができます。
スクリーンショットを使って、画像編集画面のグレイスケールと見比べてみましょう。色分けした部分が、意図した通り読み取れるかどうか確認してください。
07 – 視覚的階層でユーザーを適切な操作へと導く
何が困るのか？ : ユーザーは視覚的階層を頼りに操作手順や行先を見つけようとします。必ずこの事を踏まえて、ユーザーを正しく導いてあげましょう。
解決策！ : ソフトウェアの動作の流れを理解しましょう。その鍵となる操作を分析しましょう。その操作は、視覚的階層によって導かれた動きになっているでしょうか。
08 – 視覚的階層のいちばん上にあるアイテムこそが最も重要！
何が困るのか？ : 視覚的階層が設定されていることで、ユーザーは素早く情報を読み取ることができ、自分の都合に合わせてコンテンツに優先順位を付けられます。
階層の上位にある項目ほどビジネスにとって重要であり、ユーザーにとってより重要性の高い情報であるべきです。
解決策！ : 製品の表示画面を撮影し、半径5px程度にぼかし効果を掛けます。その状態でも、簡単に視覚的階層を読み取ることができるかどうかを確認しましょう。
どの機能が、より目立って見えるでしょうか？その項目は、事業やユーザーにとって最重要なものになっているでしょうか？
09 – 主要操作とそれ以外の見た目を区別する
何が困るのか？ : 主要操作や準主要操作を目立たせることで、ソフトウェアを活用しようとするユーザーを迷わせずに済みます。誤操作も防げるでしょう。
例えば、「了承」や「中止」がはっきり区別できるようにデザインされていますか？
解決策！ : ユーザビリティテストを実施して、よくあるエラーに着目しましょう。ユーザーによるうっかりミスではなく、目立たない機能表示や操作の紛らわしさが原因のエラーは起こっていませんか？
デザインを再考するなら、その表示の色使いや大きさ、位置など、機能を目立たせるための特徴を見直してください。
10 – インタラクティブエレメントは正常に動作しているか
何が困るのか？ : 新しい製品を使ってみる場合、ユーザーはこれまで別の製品を使って来た経験から動作を予測します。例えば、あの機能のボタンはこんな見た目をしているだろうなとか、それを押すとどんな動きをするだろうなといった具合に。
こういった予測を裏切らないためには、余計な独自機能を持たせない方が良いでしょう。
解決策！ : まず、一般的な型から外れている部分に着目してソフトウェアを見直します。例えば、リンクらしく見えないリンク機能の設定がなされていないかなど。
11 – 見た目の分かりやすいフォームが表示されているか
何が困るのか？ : 操作が正常に完了したかどうかをユーザーに知らせる機能は重要です。フォーム入力を完了させた後、フォーム上に明確な完了メッセージがカラーバナーで表示されるなどすれば、ユーザーは安心して次の操作に移れます。
解決策！ : ソフトウェア上の入力エリアを全てチェックしましょう。ユーザーの入力作業が終わったら、その入力がうまくいったかどうかの報告を表示させましょう。
作業完了のフィードバックは、いちばん分かりやすく表示される設定になっているでしょうか？確認してみてください。
12 – 一定のルールに沿った警告表示がなされているか
どういうこと？ : 警告メッセージは、常に同じ見た目で同じ位置に同じ現れ方をするべきです。
何が困るのか？ : 警告メッセージを一定のルールで表示させることで、ユーザーは取り急ぎ注意すべき事を把握できるでしょう。表示方法がまちまちだと、新着の警告メッセージが現れる度にストレスになります。
解決策！ : 警告メッセージが同じ見た目で同じような位置に出ているか確認しましょう。もし場所が変わる設定にするのなら、明確に変化させましよう。
13 – 警告メッセージを目立たせる
何が困るのか？ : 警告メッセージが画面上の他の機能と明らかに区別されているのが分かれば、ユーザーはそれにちゃんと気づいて必要な操作を行えるでしょう。
解決策！ : 見た目の違いをしっかり確認しましょう。その上で、ユーザビリティテストを実施します。ユーザーが実際にどう反応するかを確認し、必要があれば改善しましょう。
情報アーキテクチャ
14 – 一貫した誘導方法が採られているか
何が困るのか？ : ソフトウェアを使い始めたユーザーが、操作を通じてどのように製品上を案内されて行くのか。どこからでも、目的を達成できる構造になっている必要があります。
解決策！ : 設定した情報アーキテクチャを検証しましょう。その誘導設定は、ちゃんと各ページに繋がっていますか？ルートによって結果が変わってしまったり、表示するはずのページが消えてしまったりしていないでしょうか。
見た目のデザインを深めて行く前に、カードソーティング法かツリーテスティング法の構造構築を試してみてください。作成中の情報アーキテクチャ経路ができるだけ直感的に辿れる構造になるよう、しっかり確認しておきましょう。
15 – 伸びしろがあればこそ成長も喜ばしい
何が困るのか？ : ナビゲーションや情報構造は、新しい機能やコンテンツを追加する度に手直しできるものではありません。ナビゲーションメニューや全体のレイアウトを壊さずにカテゴリーや項目を増やして行く必要があります。
デザインに余裕や余白を残しておけば、努力次第で枠に囚われずより大きくコンテンツを成長させることも可能です。
解決策！ : 関係各位に、ソフトウェア上のコンテンツがどの程度増加する予定かを尋ねてみましょう。静止画コンテンツを増やす見込みはあるのか。動画を組み込める構造にしておく必要はないか。打ち合わせが必要です。
タイポグラフィ
16 – 多くても書式は2種類までに抑えましょう
何が困るのか？ : あくまで原則として捉えてください。種類を増やす場合もあり得ます。
ただし、一般的に言って3種類以上の書式を組み合わせる作業は簡単ではありません。使用感や見た目の均一性を考えて、2種類までに絞る方がより情報が伝わりやすくなります。
解決策！ : 3種類以上の書式が混在していないかチェックしましょう。選んだタイプファミリーの組み合わせは、相性良く映るでしょうか。
17 – 本文に使用するフォントサイズは少なくとも12px以上
何が困るのか？ : こちらも、原則として捉えてください。目的に応じて、小さなフォントを敢えて使用する場合もあるでしょう。しかし、一般的に12ピクセルを下回るサイズは非常に読みづらくなります。
解決策！ : 12ピクセル以上のフォントサイズが使われているか、全コンテンツを調べて確認してください。
18 – ラベルや見出し、頭文字語のみに大文字を使用する
何が困るのか？ : 大文字の使用を最小限に留めることで意味が読み取りやすくなると言われます。読み手には、負担を掛け過ぎない事です。何かを強調したい場合か、もしくは頭文字語などを表現する場合にのみ、大文字を使いましょう。
解決策！ : コンテンツに隈なく目を通しましょう。見出しやラベル、頭文字語以外に大文字が使われていないかを確認してください。
19 – フォントや書式が異なると、コンテンツ同士の関連性は見えなくなる
何が困るのか？ : コンテンツとユーザーが操作できるインジケーターとの違いは明確にしましょう。見分けるための手がかりとして、サイズや色、位置やフォントなどを区別すると良いでしょう。
フォントは特に重要です。インジケーターにコンテンツと異なるフォントや書式を設定する事で、ユーザーは迷わず快適にどこで操作ができるのかを認識できるはずです。
解決策！ : ソフトウェア上の全てのコントローラーを見つけ出し、それらが他のコンテンツとはっきり見分けが付く事を確認しましょう。
ユーザビリティテストを実施する際は、ユーザーがコントローラーの操作に手間取っていないかどうかを注意深く確認してください。
20 – フォントサイズやウエイトをコンテンツの種類に応じて区別する
何が困るのか？ : フォントサイズと文字の太さは、文章の読みやすさや分かりやすさを大きく左右します。見出しとサブ見出し、段落との間ではっきり区別する事でコンテンツの内容が読み手に無理なく伝わりやすくなります。見た目の良さにもつながります。
解決策！ : ソフトウェア上のコンテンツを読み返しながら、見出しとサブ見出しと本文でそれぞれ異なるフォントサイズやウエイトが設定されている事を確認しましょう。
ユーザーインターフェイス
21 – 行間と並びには、意味を持たせる
何が困るのか？ : ユーザーはアイテムを分類しようとします。機能や文脈から似たもの同士をカテゴライズするのです。
ナビゲーションバーを例に取りましょう。ナビゲーションで示される関連アイテムのパターン化とグループ化に沿って、ユーザーはインターフェイスの概要を一通り理解するのです。
解決策！ : 機能の似通ったアイテムを探し、グループとしてまとめられないかどうかを確認しましょう。
22 – インジケーターを多段階ワークフロー対応に
何が困るのか？ : 多段階ワークフローの扱いに戸惑うユーザーは多いでしょう。操作完了までの目処が立たないと、不安になるかもしれません。
インジケーターがこの問題を解決してくれます。もっと言えば、それは達成感を作り出します。ユーザーが作業を諦めてしまう現象を防ぐ効果が期待できます。
解決策！ : すべての工程を振り返って、何かを完成させるための手段が複数存在する箇所を確認しましょう。インジケーターは全ての手段を漏れなく計測しているでしょうか。
23 – いちばん手前にあるコンテンツは、背景と明確に区別されているか
何が困るのか？ : 視覚障害を持つ人たちにとって、これは大切な要素です。同時に、ユーザーの学習曲線と理解度を改善する効果もあります。明確な区別がある事で操作がスムーズに促されます。ボタンはより認識しやすくなり、全体の操作性が向上します。
解決策！ : スクリーンショットを撮影し、半径3pxから5pxまでガウスをぼかします。その状態で最前面のコンテンツと後ろにあるコンテンツをはっきり区別できますか？チェックして、必要があれば改善しましょう。
リストは以上です！お疲れ様でした
…ただし、作業はこれで終了ではありません。ここまでで、みなさんの製品の完成度は上がり、みなさん自身も成長を実感されていることでしょう。ひと回りか、それ以上にね。
しかし、忘れないでください。今後も常にテストを繰り返し、フィードバックに耳を傾け続ける事を。全ては、この繰り返しです。
おすすめ新着記事
おすすめタグ