デザイン上の意思決定

アプリデザインとUXデザイン:どちらから始めるべき?

洗練された画面と使いやすい体験は、同じ成果ではありません。App Designは視覚的なインターフェースの作業とUXリサーチを分けて考え、プロダクトに実際に必要な作業を選べるようにします。

デザインキャンバスに並べたアプリのインターフェース案

品質に違いが出るところ

ビジュアルデザインは、ユーザーが見て操作するものを改善します。一方、UXの実践では、体験全体の流れがユーザーにとって理にかなっているかを検証します。

  1. 1

    判断すべきことを明確にする

    対象ユーザー、タスク、画面の順序がすでに分かっているなら、情報の優先順位、操作要素、状態、読みやすいコンテンツなど、インターフェースの設計から始めましょう。そうした前提が不確かなら、まずユーザーが何を達成しようとしているか、現在の体験の流れのどこに問題があるかを明らかにします。

  2. 2

    目的に合った成果物を作る

    画面デザインがあれば、チームはレイアウト、視覚的な一貫性、操作の細部を確認できます。UXフローやリサーチ結果があれば、そもそもどの画面、手順、説明をプロダクトに含めるべきかを判断できます。どちらの成果物も、もう一方の代わりにはなりません。

  3. 3

    成果を確認する

    ビジュアル面の作業では、読みやすさ、コントラスト、タッチ操作のしやすさ、分かりやすいフィードバックを確認しましょう。UXに関する前提は、想定ユーザーに近い人がタスクに取り組む様子を観察し、見た目が好きかどうかだけを尋ねるのではなく、ためらいやエラーを記録して検証します。

時間に違いが出るところ

解決すべき問題が定まっていれば、デザイン作業はすばやく進められます。取り組むべき問題を見極めるには、制作画面の外から根拠を集める必要があるため、より時間がかかります。

1

画面だけでは需要を検証できない

このページはデザインの対象範囲を区別するのに役立ちますが、説得力のあるインターフェースであっても、その機能を必要とする人がいるかどうかは分かりません。見た目への高評価は、プロダクトの価値の証明ではなく、見せ方に対するフィードバックとして扱いましょう。

代わりにすべきこと

詳細な画面設計に取りかかる前に、見込みユーザーに最近実際に行った作業について聞きましょう。

2

ブラウザー上での作業はユーザー調査ではない

ブラウザーでアプリのレイアウトを検討すると、アイデアが明確になり、見落としていた状態に気づけることがあります。しかし、想定ユーザーの実際の行動を観察したり、何を優先するかについての意見の相違を解消したりはできません。

代わりにすべきこと

対象ユーザーを代表する人たちに簡単なタスクフローを試してもらい、どこで立ち止まったり助けを求めたりするかを記録しましょう。

3

静的な画面ではすべての状態を網羅できない

洗練されたメイン画面の陰には、検索結果がない場合、権限が拒否された場合、エラーが発生した場合、作業が中断された場合など、対処の難しいケースが隠れていることがあります。こうした抜け漏れは、第一印象以上に体験に影響することが少なくありません。

代わりにすべきこと

重要なタスクごとに起こり得る状態を挙げ、メイン画面と併せて確認しましょう。

4

この比較は製品の品質を保証するものではない

ここでのガイダンスは、次に取り組む設計活動を選ぶためのものであり、特定のアプリのユーザビリティ監査やアクセシビリティ評価ではありません。

代わりにすべきこと

リリース前に、実際のインターフェースでタスクに基づくレビューとアクセシビリティチェックを行いましょう。

切り替えるべきタイミング

見た目を何度修正してもタスク自体に関する混乱が解消しない場合は、画面中心の作業からUX調査に切り替えましょう。

アプリデザインの焦点 UXデザインの焦点
主な問い このアプリは画面上でどのように見え、動作すべきか? ユーザーは意図したタスクを達成できるか? そのタスクは実際のニーズを満たすか?
出発点となる有用な根拠 定義済みの機能、明確な対象ユーザー、合意済みのタスクフロー。 不明確なユーザーニーズ、観察されたつまずき、ユーザー体験の流れについての異なる考え。
典型的な作業 画面の階層構造、コンポーネント、ビジュアル言語、インターフェースの各状態。 リサーチ、タスク分析、情報アーキテクチャ、フロー、ユーザビリティテスト。
一般的な成果物 チームで議論し、改善できる画面とインターフェースの仕様。 インターフェースがそのように機能すべき理由を説明する調査結果、ジャーニーマップ、または検証済みのフロー。
品質チェック 明確さ、一貫性、アクセシビリティへの配慮、各状態での動作を確認する。 対象となるユーザーが、避けられるはずの混乱を招かれずに、意味のあるタスクを完了できるか観察する。
時間面のリスク 画面が支えるタスクが定まる前に画面を磨き込むと、手戻りが生じる可能性がある。 判断に役立てる具体的な目的がないままリサーチをすると、有用なデザイン作業に着手するのが遅れる可能性がある。
焦点を切り替える主な理由 対象ユーザー、タスク、フローが表現できる程度に明確になったら、画面の検討に戻る。 画面をわかりやすくしてもユーザーがタスクを見つけられない、理解できない、または完了できない場合は、調査する。

焦点を変えるとはどういうことか

画面レイアウトの検討に使用する構造化されたワイヤーフレーム
画面を確認する
アプリのインターフェースとユーザー体験で考慮すべき点を示すイラスト
ジャーニーを確認する

これらの画像は、文字どおりのデザイン変更前後ではなく、2つのレビュー視点を示しています。レイアウトを整理すれば理解しやすくなる可能性はありますが、ジャーニーを変えるには、画像だけではわからないユーザー、タスク、障害についての根拠が必要になる場合があります。

画面を確認するジャーニーを確認する

今できる判断から始める

アプリが誰のためのものか、その人が何を完了する必要があるか、まだ何がわかっていないかを書き出します。ジャーニーが不明確なら、まず調査しましょう。ジャーニーが明確なら、ブラウザベースのデザインの出発点を使ってインターフェースを検討し、その後、各状態を確認して、できあがったフローを実際のユーザーでテストします。

磨き込まれた画面より、明確なタスクを優先する

  • ユーザーに関する仮定と、見た目に関する決定を分ける。
  • 主要なタスクと、想定されるエラー状態や空の状態をデザインする。
  • 観察されたタスクの遂行状況をもとに、修正する点を決めましょう。
デザインのワークフローを見る

比較に関するよくある質問

アプリデザインは、アプリの画面、操作部品、ビジュアルシステム、操作時の細部を形にすることを指す場合が多いです。UXデザインは、調査、操作の流れ、使いやすさを含め、タスクを完了するまでの体験をより広く捉えます。両者は重なりますが、見栄えのよい画面だけで、よい体験が実現しているとは言えません。

まず、対象ユーザーとタスクを十分に理解し、見当違いの操作の流れをデザインしないようにしましょう。必ずしも長い調査期間が必要なわけではありません。的を絞った対話や簡単なタスクテストで、次に判断すべきことが見えてくる場合もあります。タスクがある程度明確になったら、画面にすることでアイデアを検討しやすくなります。

わかりやすいラベル、情報の優先順位、操作へのフィードバックは、使いにくさをある程度減らせます。しかし、不要な作業を求めたり、ユーザーが実行したい操作を見つけにくくしたりする一連の流れは、それだけでは直せません。見た目を改善しても迷いが残るなら、操作の流れと、その前提を見直しましょう。

対象ユーザー、タスク、操作の順序がすでに把握できていれば、初期段階のレビューには十分な場合があります。理想的な状態の画面だけでなく、重要な状態も含めましょう。リリース前には、実際にタスクを完了できるか確認してください。

ユーザーが何を必要としているか、次にどのステップに進むべきか、その機能がなぜ存在するのかといった疑問が、フィードバックで繰り返し出てきたら切り替えましょう。見た目の案を増やしても、そうした疑問には答えられないでしょう。明らかにしたい点を1つ選び、対象となるユーザーから根拠を集め、その結果をデザインに反映しましょう。

デザインを始める
デザインを始める