デザイナーの悩みを解決！UIデザインから考える、優れた UXデザインのための 4 ステップ

モバイルアプリやウェブサイトの制作者にとって、ユーザーの「満足度」は重要なポイントです。
目指すべきサービスの方向性を見定めたり、今後の改善をしたりするうえでも、見逃せない指標となるでしょう。

この満足度を計るうえでは、サイトのデザインや使いやすさといった、個々の要素も大切ですが、サービスを通して、ユーザーがどのような体験を得たられるかという、UX の観点で考える必要があります。
この UX を優れたものにするためには、どうすればいいのでしょうか。

UX を提供するには、優れた UI が必要

当然のことですが、どんなに優れた UX を提供しようとしても、制作側の意図する体験をユーザーが実感できる設計でなければ意味がありません。

例えば、「誰でも 2 ステップで EC サイトが作れる」というサイトを企画しても、ステップごとの手順が複雑であったり、専門知識を必要とするつくりであったりすれば、ユーザーが満足することはないでしょう。
「誰でも 2 ステップで」とうたう以上、サイトの複雑な設定はできる限り省き、ユーザーが迷わず最短でゴールへたどり着ける UI が求められます。

このように、制作側の計画する UX をユーザーに伝えるためには、効果的な UI が必要になります。
UI は UX をユーザーに伝えるための、橋渡しの役割を持っているのです。

優れた UX を設計するために必要な 4 つのステップ

1. ユーザーのアクションを書き出す

まずは、制作側が設計する UX に対して、ユーザーに起こしてほしいアクションを書き出していくことから始めます。
この際、書き出すアクションは「スクロールバーを探す」「登録ボタンが目に入る」などのように、できるだけ細かいものが望ましいでしょう。
ユーザーのアクションを細かく想定することで、それだけフォローの強い UI を設計することができます。

2. アクションに優先順位をつける

ユーザーのアクションが出そろったら、次はそれらを優先順位ごとに整理します。
例えば EC サイトにおいて「商品の比較をする」「商品の改善要求をする」「購入ボタンを押す」という 3 つのアクションがあった場合、その優先度は以下のようになるでしょう。

優先度
高：購入ボタンを押す
中：商品の比較をする
低：商品の改善要求をする

ここでの基準は、あくまで「制作側が意図する UX が実現できるかどうか」です。
「あったほうがベターだが、なくても問題ない」アクションは、思い切って優先度を下げたほうがいいでしょう。

3. フローを作る

アクションの優先度をもとに、ユーザーに取ってほしいアクションのフローを作成します。
優先度の高いものほど、少ないアクションでたどり着けるように組み立てるといいでしょう。

4. UI を当てはめる

3 で作成したフローをもとに、UI を当てはめていきます。
ここでもやはり、優先度の高いものは、画面の分かりやすい位置に置くなど、アクションしやすいよう配慮する必要があります。

ユーザーのアクションをベースに考える

優れた UX を提供するためには、ユーザーのアクションをベースに UI を設計することが必要です。
制作側はユーザーが意図しないアクションを起こさないよう、コントロールする必要があります。
逆に、UI が制作側の意図したアクションを引き出すことができれば、そのサイトやアプリは、ユーザーにとっても使いやすいものといえるでしょう。

参考サイト：
UX を考える上での大きな間違い「UX=UI」ではない。UX は、まず UI デザインから考える。
5 分でわかる UI と UX の違い