見出し画像

UIとUXについて【初心者向け】


「UIとUXって何?」と、アパレルのEC部門で運営スタッフをやっている家人に突然聞かれたので「UIがボタンで、UXがそのボタンを押した結果得られる体験」と、答えたものの。
それがwebサービスにどう関係するのか?と言う点をうまく伝えることができませんでした。初めてその言葉にふれる人向けに概要をまとめておこうと思いました。


UIとは、ユーザーインターフェイス(User Interface)の略です。

インターフェイスとは、日本語に直訳すると「境界面」「接点」という意味です。ユーザーとは利用者ですね。つまり直訳すると、ユーザーインターフェイスは「利用者・接点」って意味なんですね。一種のインターフェイスではないでしょうか。

先ほど事例で「ボタン」と表現しましたが、インターフェイスは有体物であるとは限りません。無体物であることもあります。例えばコンビニエンスストアに入った時のセンサー音も一種のインターフェイスではないでしょうか。

インターフェイスの持つ役割は、単純明快です。
人間が得ようとする結果に対して、アクションを行う際に触れるものがインターフェイスです。

スマホのアプリで言うと、アプリの利用者が触れている画面上のボタンや、
画像が表示されていたり、コメントが表示されていたりすると思いますが、それらがUIです。

カメラのアプリで写真を撮ろうとした場合、写真を撮影する瞬間にタップするボタン。それがユーザーインターフェイスです。

そして撮影された画像がその後、どこにどう保存されて、どういう情報を持つか、それをどのようにみることができるか。ここがUXの設計により実現された機能です。

UXとは、ユーザーエクスペリエンス(User Experience)の略です。

エクスペリエンスとは、日本語に直訳すると「経験」「体験」と言う意味ですね。直訳するとユーザーエクスペリエンスは「利用者・体験」という意味になります。

ユーザーエクスペリエンスは説明されてもちょっと理解しにくいかもしれません。ただ、ユーザーエクスペリエンスと言う言葉は、単体ではあまり意味を持っていないように思います。我々サービスを開発する側の人間からするとUXデザインとか、UX設計と言った言葉と組み合わせて使われる方がより適しているように思います。

身近な例で言うと、エレベーターのボタンと、そのエレベーターの挙動がわかりやすいかなと思っています。

エレベーターのボタンを押すと、エレベーターのカゴが他の階からやってきて、音が鳴ります。

そして、利用者はその音を聞いてエレベーターのカゴが自分の待っている階に到着したことを知りますね。

エレベータの扉がゆっくりと開いて、人が乗り込み、目的階のボタンを押して、扉が閉まります。
目的階のボタンを押すと、光りますね。そして「開く」「閉じる」のボタンを押すと、一時的に光りますね。

扉が閉まってからカゴ の移動が始まります。
人体に移動加重があまりかからない移動速度で移動して、人を目的地へと運びます。

現在地を表す目安の階が表示され、到着を知らせる音が鳴り、ゆっくりと扉が開き、利用者はカゴを後にします。

優れたUXは、これらの一連の、利用者の目的を果たす行動に対して、体験の質を高める工夫が設計されています。もし、UXが全く考慮されずに機能だけを提供されたエレベータがあったら。想像してみてください。こんなエレベータ。

1)カゴを呼ぶボタンがわかりにくかったら
2)カゴを呼ぶボタンの位置がわかりにくかったら
3)カゴが来たときに音がならなかったら
4)エレベータの扉がものすごい速度で開いたら
5)エレベータの扉が極端に遅く開いたら
6)エレベータの扉が開いている時間が極端に短かったら
7)エレベータの扉に挟み込み防止の装置がついていなかったら
8)カゴの移動速度が早すぎてGがかかり立っていられなかったら
9)カゴの移動速度が早すぎてほぼ落下に近かったら
10)到着したけど音も鳴らなかったら

危険ですよね。こんなエレベータ。
UXは利用者が適切に目的を果たせるように設計される必要があります。

UXの設計が綿密にされているエレベータはこの体験が上質です。
高級なホテルのエレベータと経年劣化の激しいマンションのエレベータの違いはUI上は同じでも、UXに大きな違いが現れます。

UXは様々なところで設計されています。
アプリやwebも同様です。

スマホの画面は大型化していますが、主に縦に伸びています。そのため、片手で利用することの多いスマホアプリの操作系UIは近年、UXデザインのトレンドにより画面の下半分に配置されるようになりつつあります。

画面の半分より上によく使うボタンが配置されているアプリは、あまりUX設計されていないと感じます。

このように、UIとUX設計は同じ場所に置かれることが多いので、同一視されやすいですが、領域は別です。


UIデザインはUXデザインを含みません。
UXデザインは、UIデザインができなくてもできます。

似た言葉なので、同列で語られがちですが、UIデザイナーとUXデザイナーは全くの別職種です。

UIはUIのトレンドがあり、UXにはUXのトレンドがあるので、
それぞれ追っていかなければいけませんね。

参考文献を貼っておきます。
どちらも名著です。サービス開発する人は必修です。読んでおいて損はなし。

Photo by acworks

多少なりとも、あなたの生活にプラスとなるような情報でしたら嬉しいです。