UX
UI
DB
データベース

UIとUXの違いを概念データモデルで表現してみた


なぜやろうと思ったか

UIとUXはよく並列で語られていて、なにが違うのかという説明も多くなされているとは思いますが、実際にUI・UXを良くしようという段になると結局やることは UIの改善によるUXの改善でしかない ということが多いんじゃないかと思いました。

これはやっぱりUIとUXの違いを腹落ちできてないのも原因のひとつではと思いました。

そんなことを思っていたときに、ちょうどデータベーススペシャリスト試験の勉強として身の回りにあるものをDB化することにハマっていたのでUI・UXもDB化してみるかとなり今回の内容を思いつきました。

DB化というか概念データモデル化してそれぞれの関係をわかりやすくしてみようというものになります。


概念データモデルとは?

Screen Shot 2018-07-07 at 14.57.20.jpg

上図のような概念と概念間の関係を整理したものです。

あるスーパーの売上を管理するシステムのDBを構築するとして、まずはこのように商品や得意先などの登場人物の関係を整理します。

商品と売上の関係は、ある商品が何個も買われることもあれば、全く買われないこともあるので1対多(0以上)という関係になります。

得意先と売上の関係は、ある得意先が何回も売上に貢献することもあれば、全く貢献しないこともあるので、これも1対多(0以上)という関係になります。

実務ではわざわざ概念モデルからDBの構築をすることは稀だと思いますが、こういった考え方を知っておくと役に立つと思いますし、ちゃんとDBを構築するときには頭の中か無意識にこういった関係を思い描いているものだと思います。


早速UI・UXを概念データモデル化してみる

あらためてUXってなに?ということで手っ取り早くググってみました。


UXとは、 ユーザーエクスペリエンス(User Experience)の略で、 ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、 UI( ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。

UXとは - Webマーケティング用語|ferret [フェレット]


ざっくり登場人物は「ユーザー」「サービス(製品)」「体験」であるように思えます。

さらにUIとUXの違いもググってみたところ次のようなページも見つかりました。


例えばホームページの場合、

・ デザインがキレイ

・ フォントが読みやすい

・ お問い合せ フォームや購入 ページまでの導線がわかりやすい といった表層的な部分から、

・ 商品を注文したらすぐに届いた

・ 対応が丁寧だった

・ 商品のクオリティが高い

というようなサービスの質に関わる部分も「UX」です。

UIとは?UXとは?違いを理解しよう!|ferret [フェレット]


これによれば体験というのは1種類ではなさそうです。

そして、ここまでを概念モデルにすると次のような形になりそうです。

Screen Shot 2018-07-07 at 14.52.13.jpg

ひとつのサービスには多数のUX(体験)があるし、ひとりのユーザーも多数のUX(体験)をする。

そして、UXとはあるひとつのものを指しているのではなく、複数のユーザーそれぞれにまた複数のUXというものがあるという形になりそうです。

また、DB構築時の考えとして、登場人物をマスタ系とトランザクション系に分けるというものがあります。

マスタ系とは商品や得意先などリソースが決定されてるもので、トランザクション系はマスタ系同士が関わりあうことで記録されるログのようなイメージです。

その考えでいくと、ユーザーやサービス自体はマスタ系ですが、UXはトランザクション系ということも言えそうです。


ユーザーはサービスのなにに対してUXを獲得するか?


・ デザインがキレイ

・ フォントが読みやすい

・ お問い合せ フォームや購入 ページまでの導線がわかりやすい といった 表層的な部分 から、

・ 商品を注文したらすぐに届いた

・ 対応が丁寧だった

・ 商品のクオリティが高いというような サービスの質に関わる部分

UIとは?UXとは?違いを理解しよう!|ferret [フェレット]


先ほどのUIとUXの違いの例ですが、「表層的な部分」「サービスの質に関わる部分」それぞれから異なる種類のUXを獲得することができるとあります。

つまり、サービスそのものに対してというより、サービスの様々な「部分」に対してUXを獲得するようです。

ここでは、そのような「部分」をサービスの「機能」と呼んでみます。

それを図で表すとこのような感じになるのではないでしょうか。

Screen Shot 2018-07-07 at 16.40.47.jpg

ひとつのサービスには複数の機能があり、ひとつの機能から得られるUX(体験)もユーザーによって違う。


サービスの「機能」にはどんな種類があるか?


  • コンテンツ(サービスが提供するもの自体)

  • UI(サービスが提供するコンテンツとユーザーの接触面。デザイン、導線、使いやすさ)

  • パフォーマンス(スピードなど)

  • その他(上記3つに属さないもの。ストーリーなど?)

先ほどの例では、「表層的な部分」「サービスの質に関わる部分」がそれぞれ別のものとして挙げられていました。

これらは大別して、UIとコンテンツと言ってよいかと思います。

自分は他にパフォーマンスやそれらのいずれにも属さないものがあるかと思いました。

現実のサービスでも、コンテンツ、UI、パフォーマンスが一緒でもその他の部分でUXが変わることは考えられます。

例えばサービスができた経緯などのストーリーは、知っていてもコンテンツにもUIにもパフォーマンスにも影響しませんが、愛着が湧いて使いたくなる(UXが高まる)などはあるのではないかというものです。


まとめ

Screen Shot 2018-07-07 at 16.45.41.jpg

上記は最終的な概念モデル図です。

機能には複数種類あるということを追加しています。

こうしてみるとUIとUXの位置は明確に違っています。

UIはあくまでサービスの一機能ですが、UXはUIも含めた複数の機能からユーザーが得た結果です。

UIはマスタ系ですが、UXはトランザクション系ということも言えそうです。

まとめると下記のようになります。

・ひとつのサービスに対してひとつのUXがあるわけではなく、多数のユーザーそれぞれに対して多数のUXがある

・UXをよくするときは、どのユーザーのどの機能に対するUXをよくしたいかを考えた方がよさそう

・UIはサービスの機能のひとつだが、UXはユーザーとのやり取りの結果

UIは「見た目」でUXは「体験」という単語だけだとこういった理解はできなかったと思うので、またわかりづらい概念があればこうして図にしてみるのもいいなと思いました。