特集「DX KEYWORD TEST」では、DXで必須となるキーワードに関するテストを実施。
さらに、4枚の図を使って、サクッと解説します。今回のキーワードは「UI/UX」。全問正解目指してがんばってください!
解説編
ここからは、DX KEYWORD TESTの設問を図解していきます。
UI/UXって何?
UI/UXという言葉、聞いたことはあるものの、なんとなく理解したり使ったりしているのではないでしょうか。
まずは適切にUI/UXを捉えられるよう、言葉の意味について紹介します。
UIはUser Interface(ユーザーインターフェイス)の略で、Userは「利用者」、Interfaceは「境界面、接点」という意味です。
つまり、製品やサービスを使う利用者が接するあらゆるものを指します。
例えばパソコンのUIは、本体のデザインをはじめ、マウスやキーボード、マイクやディスプレイなどがあげられるでしょう。
UXはUser Express(ユーザーエクスペリエンス)の略で、「顧客体験」と訳されます。
UIの使い勝手による体験に加え、「気持ちがいい」「癒された」「感動した」など、抽象的な感情に対しても使われる言葉です。
UXを実現するためにUIがあるという位置づけで語られることが多く、UXが「何」で、「解像度はどのくらいか」によって、UIは変わります。
例えば、スマートフォンを利用した時のUXの場合、UIはスマートフォンのデザインやボタン、カメラやスピーカーなど、デバイス自体に関係するものです。
この解像度をこまかくして、スマートフォンの中で活用されるアプリのUXと定義すると、UIはアプリのデザインやボタンの位置、画面遷移など、アプリの仕様に変わってきます。
そのため、UX/UIという言葉を聞いたり使ったりするときには、何に対して、どれくらいの解像度で話しているかを捉える必要があります。
しかし多くの場合は、Webサイトやアプリケーションなどの、画面の操作性に対して利用される言葉なので、次の章では、WebサービスのUI/UXについて解説していきます。
ウェブサイトにおけるUI/UX
ウェブサイトの目的は、何かを認知してもらいたい広告的なサイトや、具体的に製品やサービスを購入してもらいたいサイト、メディアのように読みに来てくれる人が為になる情報を提供するためのサイトなど、ウェブサイトを作る側の意図によって異なってきます。
例えばホテルの予約サイトでは、ホテルを予約してもらうことが目的です。
その目的を達成するために、UXを「ワクワクする」と設定したとします。
サイトに訪れた人が「ワクワクする」体験をできるよう、デザインや配色、ボタンの位置にくわえ、ボタンを押した後にどのようなページに遷移していくかといった、ユーザーが接する具体的な使用感や見た目などが、UIにあたります。
そしてこのUIは、パソコンで見るのか、携帯で見るのかといった、ハードウェアに合わせて変えるのが一般的です。
最近ではほとんど見なくなりましたが、スマートフォンが登場したての時は、文字や画像の位置がおかしく表示されることも頻繁にありました。
あれは、パソコンのUIしか考えられておらず、スマートフォンに適応しきれていない状態だったのですね。涙
IoTにおけるUI/UXとは?
現在のデジタルサービスのほとんどは、スマートフォンやパソコンなどの画面がUIとなり、様々な設計が行われています。
しかし、IoTサービスは現実世界のさまざまな「モノ」もUIの役割を果たします。
身近なIoTサービスである、IoT家電を例に挙げます。
IoT家電とは、家電製品にセンサやカメラなどを取り付け、遠隔から操作したり、閾値(特定の温度や時間などの値を設定すること)に達すると自動で家電が動いたり、家電から音や音声で通知をしてくれるなど、インターネットとつながっている家電のことです。
例えば、IoT家電を作る際のUXを「先進的なかっこいい生活をスマートに送ること」と設定すると、家電のUIは見た目のスタイリッシュさに加え、家電からの通知は最小限にし、通知自体も生活を邪魔しない音や音声であるのがよさそうです。
連携するアプリも、無駄なボタンや情報などはなるべく排除し、すっきりとしたUIで統一するなどの工夫が必要です。
同じIoT家電でも、UXが「暖かい家族団らん」と設定したら、家電のUIは温かみのある見た目や家族の話題が弾むような仕掛けが搭載されていて、アプリも適度に情報がアップされた方が楽しいかもしれません。
このように、同じIoT家電でもUXが変わればUIも変わりますし、画面だけの設計と比べると、考えなければならない要素が増えてきます。
UXという「体験」に重きを置くということは、ソフトウェアとハードウェアの垣根を超えたUIを設計する必要があるということなのです。
ユーザーの声を聞きながらUI改善したオイシックスの事例
オイシックス株式会社は、食品宅配専用のECサービス「Oisix」を展開し、20分以内に2品作ることができる、レシピ付きの食材宅配サービス「KitOisix」を提供しています。
今回は、2017年に発表されている、KitOisix販売ページのUI改善について紹介します。
これまでKitOisixの販売ページでは、サイトからメニューを選んでもらい、そのメニューを作ることができる食材セットを提供していました。
つまり、料理をするうえでの、「スーパーに買い物に行く」「買った素材から一から作る」という工程のサポートをしていました。
しかしこれでは、何を食べたいのかは自分で考える必要があります。
そこで、「毎日献立を考えるのが大変」「料理はできるだけ短い時間で終わらせたい」というユーザーのUX向上を目的に、レシピを探す手間も解消するべく、販売サイトのUI改善が行われました。
UI改善のために実施されたことは、以下の4つです。
①ユーザー行動の仮説を立て、UIのモック(試作品)をいくつか作成する
②モックをユーザーに見てもらいながら、ヒアリングする
③ヒアリング結果からモックの改修をし、さらにヒラリングを重ねて方向性を固めていく
④完成したUIを実験的に一部のユーザーに公開し、結果を確認しながらPDCA(計画・実行・評価・改善)を回していく
①のユーザー行動の仮説では、「写真をおいしそうに見せる」ことで、より直感的に注文できるのではないかと考えたそうです。
そして、ヒアリングを行いながらモックを作り、写真を大きくして見せるUIにしました。
また、写真の上に「クール」や「がっつり」といったハッシュタグを表示することで、気分に合わせた他のレシピが表示されるようなUIにしました。
その結果、ユーザーのアンケートで「料理がおいしそうに見えるようになった」という声が挙がったそうです。
しかし、実際に調べてみると、ハッシュタグ検索があまり押されていないことがわかり、すぐに修正をするなど、その後もUIの改善は続けられています。
無料メルマガ会員に登録しませんか?
「DXトレンド解説」と「DX実践講座」は、IoTNEWSの運営母体となる株式会社アールジーンのコンサルタントが、これまでの経験と知見をお伝えするコーナーです。
「体系的に勉強会を開いてほしい」「企画のアドバイスが欲しい」「コンサルティングをしてほしい」などのご要望は、問い合わせフォームよりご連絡ください。