Webやゲームのクリエイターの皆さん!
初めまして。HCD-Net理事の松原幸行と申します。HCD-Netとは、HCD(人間中心設計)を日本で普及させることを目的として活動しているNPO法人です。私はこの団体で理事を担当しております。本シリーズでは、これからのWebやゲームのデザインにとってとても重要な、HCDやUXデザイン(User eXperience Design;経験デザイン)について“実践的UXデザイン論 〜HCD視点のアプローチとノウハウ〜”と題し、6つのトピックをお話しします。
どうぞご期待ください。

第1回目は「Webやゲームにおけるユーザビリティとユーザエクスペリエンス」というテーマでお話しします。まず「ユーザビリティ」と「ユーザエクスペリエンス」という言葉について。
ユーザビリティは日本語では使用性といい、使用しやすいかどうかを表す尺度です。つまり使用する瞬間が良いかどうかを問うわけです。その問いを、有効さ・効率・満足度の3つで計るわけです(*1)。そしてその対象はインタフェースである、と言っても良いと思います。

他にも性能(Performance)やシステムの振る舞い(Behavior)などもあるわけですが、このコラムに一番関係が深いのは、何と言ってもユーザインタフェース(User Interface:UI)です。このUIとユーザエクスペリエンス(User eXperience:UX)は割と一緒に語られる事が多く、「UI/UX」などと並べて表記されることも多々あります。あまり意識せず使用されていますが「UXとUIってどう違うの?」という質問も度々聞かれます。

「UXは経験の事で、UIはインタフェースの事です」と言ってもピンときません。経験はコトの事を言っており、UIはモノの事を言っていますが、UIはインタラクションする(相互対話)ためのものだから、インタラクション=体験すること、でしょ?じゃ経験とどう違うの?とますます混乱しますね。体験も経験も英語ではExperienceですから。ところが、インタラクション=経験とはなりません。

インタラクションはモノでは無いけれど、まさにインタラクションするその時、その一瞬における体験を問題にしています。これに対してUXとは、体験が連続的に連なり時間軸を伴うまとまりのある経験(登山の経験とか、インターンシップ経験など)のことを指します。そこで一つ、UIとUXの違いについてとても分かりやすい例を一つあげます。

例えば私がよく使うビルのエレベーターです。エレベーターには、上下階の移動を指示するモノとしてUIが備えられています。私がよく使うビルではエレベーターが2基並んでいますが、その2基のエレベーターのボタン配列が異なります。勿論両方とも、”シンプルで整然としたグリッドレイアウト”、つまりいわゆる良いデザインです。何故2基の配列が違うかというと、B1が有るか無いかで、1Fボタンの位置を変えてしまっているからです。

恐らく停止階の違うエレベーターが並ぶ事を想定していなかってんでしょうね。片方のエレベーターはB1まで行き、他方は1F止まりなんです。デザイナーは”シンプルで整然としたボタン配列を良いUIデザインであるとして、操作時のインタラクションしか考えなかったようです。ところがそのビルに行く機会の多い私には、ホールに入るタイミングにおいて、その時のエレベーターの稼働状況との兼ね合いで2基のどちらを利用するかが決まってきます。つまり事前に決められないわけです。

このような場合、2基のボタン配列が異なっていたらどうでしょう。場所記憶が成立せず、習慣的な解決かできず、毎回のように押し間違えます。またはじっとよく見てどこを押すべきか、毎回確認しなければなりません。エレベーターは何のために利用するのか、つまりそのシステムには、ビルを頻繁に利用する経験の中で、UIがどうあるべきなのかを考える視点が欠けています。これが「UIは考えているがUXは考えていない」ということであり、インタラクションだけを考えると失敗するという好例です。このような視点で見ると、UXとUIは明らかに違うことがお分かりでしょう。

さて、今回はたまたま組込み系のUIを例にUXとUIの違いを述べていますが、WebやゲームのUIも同様です。要は、対話するその瞬間のみを考えるか、その地点も含めた一連の流れを「経験として」考えるかの違いです。前者はUIを取り扱うことであり、後者はUXを取り扱うことになります。
UIかUXかではなく、問題は違うところにもあります。経験をどの範囲として捉えるのかということです。Webはもともとインターネットというコンテクストの中で成立しているので、”経験として捉える範囲”を意識することはとても重要です。ゲームなどもRPG(Role-Playing Game)など、文脈の長いものもあります。

ところで、最近の”購入の仕方”はだいぶ昔とは異なるようです。服の購入を例にその流れを見てみます。


  1. 事前に オンラインで確認する(ビジョニンング:どんな服を着るべきか)
    ||
    Web UI

  2. 実店舗で実際の服を試着する(予期的UX(*2):フィット感を確認する)
    ||
    店舗やフィッティングルームなどのUI

  3. オンライン で購入する(体験的UX(*2):洋服を購入する)
    ||
    Web UI

  4. 自宅で受け取る(エピソード的UX(*2):購入方法が正しかったかどうかを思い返す)
    ||
    配達伝票(伝票UI)

流れを見てみると、3のUXデザインでは、1や2で選んだものを確認できなければなりませんし、受け取り方法4を指定できなければなりません。しかしもう一つ。1の前には”どんな服が似合うかという思考を支援するサービス”があるかもしれません。また4の後には”その購入した服に似合うデートの場所を提案する(その人の履歴を応用する)サービス”があるかもしれません。つまり文脈は決して途切れないのです。途切れない文脈の中で切り取ったものが“サービスとしての経験”であり、いかに切り取るかによってサービス価値の良し悪しも変わってきます(*3)。その経験の中で、UIはタッチポイントとして存在します。そしてこのタッチポイントでの体験を「マイクロUX」と呼ぶこともあります(*4)

このようにUIとUXは範囲を特定するのが難しいですが、明確に意識することで狙いが定まり適切な策を講じられるため、ユーザーの利便性を高めることがきます。
ユーザビリティとユーザエクスペリエンスの話はいかがでしたでしょうか?

次回は、良いUXデザインとは何かについて、幾つかの理論や事例を踏まえながら述べたいと思います。ご期待ください。

参考情報

(*1) ISO-9241-11 https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en
(*2) 「UX白書」(Virpi Rotoら、翻訳:hvdvalue、2011)より https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxoY2R2YWx1ZXxneDo2NWIxZTQwMTdjYTU1YTNm
(*3) 家計簿アプリには、単に家計簿をつけるだけのもの、または銀行口座と連動して預金管理を行えるところまでサポートするもの、などがあります。
(*4) What is micro UX? 14 joyful examples https://econsultancy.com/blog/65849-what-is-micro-ux-14-joyful-examples

関連記事

感性思考デザイン 第5回 〜チーム発想のしかた〜
感性思考デザイン 第4回 〜発想法の使い方と発想力の強化〜
感性思考デザイン 第3回 〜必要なスキルやノウハウ〜
感性思考デザイン 第2回 〜コモディティー・トラップを回避する〜
感性思考デザイン 第1回 〜感性がビジネスを豊かにする〜
実践的UXデザイン論 第6回 イノベーションとUXナッジ
実践的UXデザイン論 第5回 HCD(人間中心設計)におけるアイディア発想
実践的UXデザイン論 第4回 デザイン思考 〜 IDEOから全ての企業へ〜
実践的UXデザイン論 第3回 サービスデザイン歳時記 〜幅広い視点からデザインを考える〜
実践的UXデザイン論 第2回 良いUXデザインとは 〜ノーマンやモービルやギャレットらと共に〜
実践的UXデザイン論 第1回 Webやゲームにおけるユーザビリティとユーザエクスペリエンス