こんにちは、UX DAYS TOKYOスタッフの森です。2020年1月21日（火）に、六本木にてUX DAYS TOKYOが開催した「わかりやすいデザインとは？UI設計で大切な理論と考え方」に参加しました。過去に大阪で開催され好評だったため、東京開催にいたった講演会です。
日本で最初にモバイルファーストとレスポンシブデザインを広めた菊池 聡氏と、UX DAYS TOKYOオーガナイザーの大本 あかね氏が登壇し、UXをテーマに様々な分野に通じるデザインの「わかりやすさ」についてお話をしていただきました。
会場には100人以上集まり、クリエイターはもちろんのこと、エンジニアやディレクターなどの様々な職業の方が参加していました。「#uxdt2020」のハッシュタグでツイッターにて盛んに投稿が行われるイベントとなりました。
本質を知らなければ肩書だけのUXデザイナーになる
ビジビリティ・オブ・システム・ステータス 菊池 聡氏
菊池氏は以下のような質問を度々もらうそうです。
「UXを学ぶにはどんな書籍を読んだらいいですか？」
「どんなツールを使えばいいですか？」
「UI/UXの設計はどうやればいいですか？」
「UI事例集を沢山集めているのですが…」
菊池氏は、これらの質問をする人たちを「レシピだけ学ぼうとして、出汁を知らない状態」と表現していました。
海外のトップUXerやシニアデザイナーの方々は、脳の仕組みと行動について学んでおり、その基礎知識を元にUXやデザインを考えています。
基礎知識を持っていなければ、UXデザインのツールをたくさん知っていてもUXはできません。同様に、ベストUIをたくさん集めて、肩書だけUXデザイナーだと名乗っても、本質を理解した設計を行うことはできません。
身近な例から考える、UI改善の視点
Apple社でUI設計を担当したドン・ノーマンが所属し、世界中でUI＆UXコンサルティングを行っている、ノーマン/ニールセングループは「UIが持つべき10の法則」を発表しました。
10ある法則のうち、一番目の法則が「Visibility of system status（システムステータスの可視化）」です。この法則は「システムは常に、何がおきているのかを適切なタイミング、内容でユーザーにフィードバックしなければならない」というものです。
関連リンク：10 Usability Heuristics for User Interface Design
信号のデザインを分析する
菊池氏が取り上げた事例の中から信号機の例を紹介します。歩行者用信号機は、赤と青のランプを使って横断歩道を渡って良いかどうかを指示することで、歩行者を交通事故から守っています。頭の中で「青だな、渡ろう」「赤だな、待とう」と、システム（信号機）から得た情報を評価して行動を決めます。
信号機をよりわかりやすいプロダクトへ改善するのであれば、横断歩道が渡れる時間がどのくらい残っているかを具体的な数字で示すべきです。
残り時間を明確な数字で表現することで、横断歩道から離れた歩行者も渡れるかどうか判断しやすくなり、認知負荷が下がります。結果として、一目で分かりやすいデザインとなります。
ビジビリティ・オブ・システム・ステータスの視点を身に着けるためには、日常生活の中で良いデザインを見つけたり、改善案を考えると良いです。
適切な設計を行い、ユーザーにとってわかりやすいサービスや製品を作るためには、本質を学ぶ必要があります。本質を学ぶためには日々の訓練が必要となるため、時間がかかります。
ベストUIを集めたり、テンプレートをなんとなく使ってみたり、大手がやっているデザインだから採用する、というスタンスでは「ユーザーにとって本当に適切かどうか」を判断することができません。
見た目だけじゃない「本当のわかりやすさ」をデザインする
HCI&インタラクションデザインとUX-大本 あかね氏
冒頭で「UIやUXに関する記事には、UIとUXの違いについて説明したり、UIの説明のはずが近接やフォントの使い所など、グラフィック寄りの説明になっていて、インタラクションに触れているものが少ない」という話をしました。
見た目の「わかりやすさ」という観点で言えば、関連する要素同士が近かったり（近接）、読みやすいフォントであるだけでは不十分です。実際に利用することを考えた上での「わかりやすさ」を考えるためにHCI (Human-Computer Interaction)を考慮して、操作しやすいデザインにすることが必要です。
ボタンデザインでHCIについて考える
大本氏は「ユーザーが達成したいタスクに集中できるよう、なるべく考えさせないデザインにするべき」と言い、問い合わせボタンの例を用いて、認知負荷が低く、操作をしても疲れないデザインの必要性を説いていました。
長方形の中に「申し込み」と書かれているオブジェクトは、タイトルや見出しにも利用されるデザインなので、ユーザーにボタンだと認識しにくくなります。オブジェクトにドロップシャドウを付けたり、角を丸くするなど、「ボタンらしいあしらい」をすると、ボタンとしてわかりやすいオブジェクトにすることができます。
わかりやすく優しいデザインとは、「ユーザーに少し考えさせてもいいじゃないか」「これ、本当に迷うの？」と言われる部分にも気を使って設計していく必要があります。細部にこだわると、おのずとコンバージョンも変わってきます。
コンテキストを考慮して設計するとは？
トイレの空き状況がわかるデザインで考えてみる
UX DAYS TOKYOが主催するイベントでは、コンテキストの大切さを何度も説明しています。ユーザーのコンテキストまで考えられた、わかりやすいデザインの例として、トイレの案内板が紹介されていました。
個室数が多く広いトイレで、「中まで入ってみないと空いてるかどうかわからなかった」という経験をした人はいると思います。
とあるサービスエリアのトイレの入口には、使用状況と番号が表示されたサイネージが設置され、それぞれ個室の入口には入室状況を示すランプがついています。サイネージとランプがあることで、どこが空いているのかわざわざ中に入って探さなくても確認できるようになっています。
私も同じタイプのトイレを利用したことがあり、その便利さに今でも印象に残っています。どのサービスエリアにも導入してほしいなと思いました。
一方良くない例として、電車に乗っている最中でも、駅のトイレの利用状況がわかるアプリが紹介されていました。どうしてダメなのでしょうか？
アプリでわかるトイレの空き状況のデザイン
一見すると便利そうに見えるアプリですが、このアプリを使うユーザーのコンテキストを考慮すると、間違ったデザインであると気付くことができます。
電車に乗っている最中にトイレに行きたくなり、次の駅のトイレが空いていると確認しても、5分経つ間に状況は変わってしまうかもしれません。空いているかどうかより、もし仮に出すのであれば並んでいる状態を知りたいのがユーザー心理だと紹介されていました。
このように、ユーザー心理やコンテキストとのミスマッチを起こさないためには、ユーザー調査を行う事が必要ですね！
関連リンク：コンテキストの理解と実践 【UX基礎ワークショップ】
基礎を学んでUXの視点を身につける
講演中に紹介されていた理論や原則が発表されたのは、1995年頃でした。年代だけ聞くと「時代遅れの情報」と思うかもしれませんが、人の思考や行動原則は、時代が変わっても、本能や本質的なものは変化しません。
デバイスやツールが変わろうと、人が人であるかぎり変わらないものが認知の仕方や思考の癖です。
理論や原則を理解していないと、具体的かつ再現性のある「わかりやすいデザイン」を設計することができません。基礎と視点がなければ、良し悪しの判断ができず、適切な解決策を選択できません。
声が大きい人の意見に左右されたり、「他社が成功してるからこれがベストプラクティス」と考えていては、本当は適切でないデザインをユーザーに押し付けてしまいます。
ユーザーのコンテキストを考慮しつつ、日常生活で見逃しそうな細かい部分にも目を向けて、疑問と改善の視点を持ち続けていく大切さを感じました。記事以外にもいろいろな考え方が学べるイベントでした。手ごろなレシピをかき集めるのではなく、出汁をしっかり学んでいこうと感じた講演でした。
