自販機を例に、UI/UXについての理解を進める
はじめに
UI/UXを簡潔に説明しようとするなら、自販機の話をするのが一番良い。
なにを言ってるのかと仰られるかもしれませんが真面目にそう考えています。
今、書店のWEB関連のコーナーを見るとUI/UXについて説明している本が沢山ならんでいます。ネットを検索すれば解説ページやセミナーの告知、オンライン動画講座を配信するUdemyでも「UI UX」と検索すると5,000件近い講座がヒットするなど、UI/UXへの関心は数年前から高まっていましたが、その関心の水準は高いところで保たれているように感じます。
しかしながら、UI/UXについて、「興味はあるがどうにもとっつきにくい」「言葉が似たような響きでわかりにくい」という印象を持たれている方が少なくありません。実際に私の知り合いでも、説明を見聞きしたけれど結局理解はできなかった、という方がいます。これは非常にもったいないと感じると同時に、私自身よく理解できなかった時期があるので、そのわからなさ（とっつきにくさ）についても理解できます。
今回の記事ではそのとっつきにくさを解消する一助となるよう、UX/UIとは何なのかという初歩的な解説をし、その後WEBサイトにおけるUX/UIについて書いていきたいと思います。
目次
UI/UXとは
体験の中に接点がある
以前書いた記事で、UI/UXとは何なのかということについて軽く触れました。
要点をかいつまめば、UXは体験でありUIは接点である、ということを言っているわけですが、少し想像がつきにくいと思うので身近なものでこの二つを説明していきたいと思います。身近なもの、それは先ほどから何度も申しているとおり、自販機です。
自販機を使う場面といえばもちろん、そこにあるモノを買うときです。さて、私たちが自販機でモノを買うときの流れは、おおよそ次のような順番になります。
- 商品ラインナップ見て買うものを考える
- 買うモノのボタンを押す
- 料金を支払う
- 受取口から商品を取る
現金か電子マネーかで多少順番は変わりますが、このモノを買う一連の体験、これこそがUX（ユーザー体験）です。モノを買うという行為を、自販機というインターフェイス（接点）を通して体験しているのです。
もう少し掘り下げてみてみましょう。
私たちが自販機を使うとき、必ず目的が存在します。それは中にあるモノを買う、という目的です。そして、その目的を達成するには
1.「何が買えるのかを知る」必要があり、
2.「買いたいものを選択する」ことができ、
3.「代価を払う方法」があって、
4.「最終的にモノを受け取る」ことができる必要があります。
この1～4という接点を通じて目的達成という体験を受け取っている、というわけです。
この自販機の例からわかるように、UXというのは体験そのもの（上記で言えばモノを受け取るまでのこと）であり、UIは私と私の目的を達成するための接点（自販機）ということになります。つまり、UXの中にUIがあるという構図になります。
優れたUXとそうでないもの
優れたUXとは何なのか。ひとつは使っていて心地が良いかどうかです。
あいまいな定義だな、と思われるかもしれませんが、このあいまいな感覚、感性はかなり重要です。なぜなら人は自分が持つ感性を基準に物事を判断していることが少なからずあるからです。そのことは、同じような機能を持つものに対し最終どのような基準で選ぶか、という思考実験を考えればすぐにわかるでしょう。現在はモノが溢れ、市場には似たような機能と性能を持ったものが大量にあります。その中で何を基準に選ぶかといえば、やはりそれは感性ではないでしょうか。
とはいえ、使っていて何が心地よいのか、というのは難しい問です。
ひとつ、これは外せないだろうというのがあるとすれば、ストレスを感じさせないということでしょうか。
さきほどの自販機の例で言えば、ボタンを押しても反応しない、コインを投入口に入れても釣銭の受取口から返ってきてしまう、ということが起きればこれは大変なストレスになります。場合によってはユーザーは怒ってしまい何も買わず、その場から立ち去ってしまうかもしれません。また買えてもらったとしても、使い心地の悪さは残っているわけですから決して良い体験ではないでしょう。
ストレスを感じさせないというのはネガティブイメージの回避です。と同時に、使い勝手の向上やユニバーサルデザインの追及を目指せばポジティブな体験にもなりえます。
UXとWEBサイト
WEBサイトを見るとき、私たちは何かしらの目的を持っています。ニュースを読む、お問合せをする、何か情報を調べる、ただ単に暇をつぶしている–その目的は何でも構いません。もし、その目的を達成するために何かしらの障害、ストレスを感じさせることがあったとき、きっと私を含め多くの人はそこで閲覧するのを止めるのではないでしょうか。
これは私の実体験なのですが、とある家電メーカーに問い合わせを送るために、そのメーカーのWEBサイトを閲覧していたときの話です。そのサイトは意図してかお問い合わせページがわかりにくいところに存在しており、また問い合わせページ自体も複雑な構造をしていました。具体的に言うと、このページに行けば解決する、と思えば、またそこから内容が細分化し、また別のページに飛ぶ必要がある、といった風にどんどん深くに潜っていく必要があったのです。
結局、問い合わせ自体はできたのですが、フォームから送った後はへとへとになったのを覚えています。
上記の例はいささか極端ではあるものの、適切な設計をしなければ体験価値は下がります。またサイトの構造だけでなく、ちょっとしたあしらいや配色、情報の整理なども正しくされていないと、同じようにユーザー体験は低下してしまいます。
お問合せフォームに潜むUXを低下させる要素
お問合せフォームは企業のサイトであれば必ずと言ってよいほどあるものですが、だからこそ設計は慎重に行われなければなりません。
例えば必要項目に「*」が付いたこのようなフォーム、ひと昔前はよく見かけたものでしたが、これはUXにおける典型的なバッドパターンです。まず一目見て「*」が何を指すのかわかりません。必須項目にしたいのなら「必須」と文字で書くのが一番スマートです。このように一見してそのマークが何を示しているのか判断がつかない場合、それの意味を探すために余計な視線の移動が増えることになります。人間、基本的には余計なことはしたくありません。ストレスを感じさせるのはUXにおいてはNGです。
次にバリテーションです。画像では入力してほしい文字や数字を例としてあらかじめ表示しています。これ自体は素晴らしい設計です。次に考えるべきは意図しない文字や、必須の欄が空白だった時に表示されるエラーメッセージが出るタイミングでしょう。
送信ボタンを押したタイミングでエラーメッセージを表示させているサイトが多いと思いますが、もしかしたらリアルタイムでバリデーションエラーを表示させた方がUXが向上するかもしれません。ただし、その場合はエラーメッセージが出る場所を考えたり、出た後の処理をどうするのかを考える必要があります（リアルタイムでエラーを表示した場合、コンバージョンが下がるという調査結果もあり、必ずしもUXを向上させるものではないかもしれません）。
入力欄やボタンの間隔も重要です。特にスマートフォンのような小さい画面だと、ユーザーが意図しないところをタップする可能性があります。UXを向上させるなら適切なボタンの大きさ、間隔をあけるなどの適切な画面設計が必要になります。
画面設計とビジュアルについて
WEBサイトを制作するにあたり、要件定義、画面設計、ビジュアル作成は必須ですが、だれがどこまで担当するべきなのでしょうか。
結論から言えば、そもそも必要とされるスキルが様々あるので、境界線は曖昧にしかならず、明確な担当分けをすることはできません。デザイナーだからここまでやらなくてはいけない、と考えると追いつめられてしまいます。いろんなスキルを持つチームで制作するのですから、得意分野を活かしつつ協力していくのがよいでしょう。
マイクロインタラクション
ボタンをタップしたり、ホバーしたときに何もアクションがないと、本当に反応しているのか不安にならないでしょうか。
マイクロインタラクションとはユーザーが何かしらのアクションをしたとき、その結果を表現したりステータスの変化（ローディングやタスクの進行状況など）をわかりやすく伝えるデザインのことです。Twiiterの「いいね」などは典型的なマイクロインタラクションの例でしょう。
https://lottiefiles.com/2415-twitter-heart
マイクロインタラクションを実装すると、ユーザーに今どういう状況なのか、ちゃんと反応したのかというのをわかりやすく伝えることができます。そのためユーザがストレスを感じずにサービスを利用することができます。ただし、直感的にわかりやすいデザインにする、目立つようにデザインすることが必要です。もし、これらを守れていないと逆に使い心地の悪さを感じさせてしまうため、マイクロインタラクションがどういうものなのかを十分理解したうえで実装する必要があります。
さいごに
UXを向上させるためにはそもそもUXとUIの関係性を十分理解し、その上でUIデザインの知識を深化させる必要があります。弊社ではUX/UIの向上はもとより、それぞれのクライアントに最適なサービスのご提案をさせていただいております。お問合せにつきましてはこちらからよろしくお願いいたします。
この記事を書いたライター
