UIをリデザインしてみた vol.1

最近は新型コロナウイルスの影響もあり様々な情報を調べたり探す必要がありますが、その内容があまりに分かりづらいなと感じる事が多いため、UIデザインを修正してその方法を今回はnoteでご紹介したいと思います。

新宿区の情報ページを修正

左は新宿区の新型コロナウイルス感染症対策ページで、右がそれを元に修正したものです。

さほど時間をかけずに修正したため、実際の業務であれば更に良いレイアウトはないか検討するべきですが一旦これを完成形とします。

それではどのような意図をもってリデザインしたのか説明していきます。

タップできると分かるよう修正

まず最初に目についたのは赤いテキストがリンクだと多くのユーザーが気づかない点です。

このデザインでは「別ページへ移動」というテキストを読んでなお、タップできるのか確証が持てるユーザーは少ないと思います。

多くのユーザーはタップやクリックを貨幣のような価値観で捉えているため、タップが無駄になる事をとても嫌います。

「タップしたけど反応しない・タップしたら期待と違うページだった」といった事が起こらないよう配慮する必要があります。

例えばもしこれが青色の文字だったならリンクと気付きやすくなったでしょう。そしてリンクと分かれば「別ページへ移動」というお節介なテキストはムダ以外の何者でもなくなります。

そして同じテキストは画面内にいくつもあると認知負荷が高まり理解するのが遅くなるためこのような表現はなくすべきです。

修正後ではリンクとわかるよう右側にアイコンを配置しました。テキストを青にする事も考えましたが、さらに下にあるボタン群を青にして目立たせたかったため、それよりも控えめにしました。

なお元の画面では赤色に太字とこの画面で最も目立たせたいという意志が感じられましたが、あとで追加したので「追加したのが分かるように目立たせろ」という安易な考えだったのではと予想しています。

この画面に訪れる多くのユーザーは下のボタン群を目当てに訪れます。そのためここはそれよりも控えめにすべきと考えました。

そしてこの時点で青色がインタラクティブな要素と私の中で定義しており、基本的にタップできる部分には青色を使い、タップできない要素には青色は使わないというルールを設けています。

更新日時を「◯◯日前」に表現変更

更新日時は慣例から日付をそのまま掲載する事が多いと思いますが、多くのユーザーはそれを瞬時にいつなのかを理解する事ができません。

それはもちろん、今日の日付を思い出さなければその日付が何日前のものか理解できないからです。

今日の日付が分からない場合はもちろん、分かったとしても今日の日付から逆算する必要があるため、理解に時間がかかる表現です。

一概には言えませんが「どれくらい最新か」を知りたいだけの場合は、Twitterやインスタのように閲覧した時点からどれくらい前なのかを書く方が親切な可能性があります。

リンクをカテゴリ分け

元の画面では縦にボタンを単に12個並べていましたが、カテゴリ分けして整理しました。

この画像ではボタンが6 → 12個と情報が倍に増えていますが右の方が分かりやすく感じると思います。

それは人が一度に処理できる情報の塊の数がそれ程多くないためです。

人はマジックナンバーと呼ばれる4±1が瞬時に理解しやすい数です。そのため一度に12個をまとめて見せるよりも、3〜5個ずつに分けて見せる方が理解しやすくなります。

例えば電話番号を08012345678ではなく080-1234-5678とハイフンで区切るのも同じ理由です。

なお元のボタン内のテキストは中央寄せですが、修正後は左寄せにしました。

ボタンは横並びや数が少ないと中央寄せの方が美しく見えますが、数が多く縦に整列させる場合は揃えた方が美しくなる可能性があります。

またテキストの頭を揃えたことで、ガタガタな視線導線が一直線になり、よりシンプルな視線導線でテキストを流し読みできるようになりました。

情報構造を整理

ユーザーはWebサイトのテキストを「読み」ません。これは様々な研究で明らかになっており、正しくはWebサイトはざっくり「見る」のです。

そのため情報構造は読まなくても理解出来るよう視覚的にも整理するべきです。

この画面で最も重要なのはどういった症状だと電話相談をしなければならないのかを理解する事です。

元の画面では1の項目と注記が直接紐づいているにも関わらず、その間に2の項目を挟んだため距離が離れてしまいました。これでは注記を読まずに1との関係性を理解できません。

けれどもユーザーはWebサイトを必要以上には読まないため、このままでは2日間の場合でも電話相談する必要がある事を知らずに離脱する恐れがあります。

ゲシュタルトの法則により、関連性の高いものは距離を近くするのがUIの基本です。どのような段階だと相談するべきなのかを配置と色を使ってリデザインしました。

なお図やグラフといった画像を使用すると理解しやすくなるだけでなく、感情に働きかけ、より記憶に残るという研究結果があります。

デザイナーはこうした画像優位性効果を十分に活用する事を心がけましょう。

電話がかけられると分かるよう修正

元の画像では電話番号がタップできると分かるようせっかく青色になっていますが、その機能に気づくユーザーは少ないでしょう。

その理由は青色が暗く、通常のテキストとの差が分かりづらい事。そして上の見出しがタップ出来ないにも関わらず同じ色が使われているからです。タップ出来ないものと出来るものは基本的に同じ色を使わない方が安全です。

修正後ではインタラクティブな要素の色として定義してある青色を使用しており、タップ出来る事が一目で分かります。そしてこの色はタップできない場所には決して使いません。

フォントカラーで文章構造を整理

修正後の画面では3種類のフォントカラーを使用しています。

<h> 見出し → 黒100%
<p> 本文 → 黒87%
<small> サブテキスト → 黒54%

これらに加えてフォントサイズやフォントウェイトも利用し、文章構造を視覚的にも分かるようにしました。

まとめ

人の脳は出来る限り「考えない」ように努めているため、例えそれが自分に必要な情報であっても分かりづらければ無視してしまいます。

役所や企業はその前提で情報発信し、必要なユーザーに正しく伝わる努力をする必要があります。

今回修正したのは新宿区ですが、多くの役所で同じような課題を抱えていると思います。

UIデザイナーは情報発信者にとって最も必要な人材のひとつです。

スキルあるUIデザイナーを正当に評価し、どんどん雇ってUIデザイナーの価値を上げて欲しいものです。笑

✳︎修正前と修正後の画像はTwitterで公開していますので比較はこちらの方が分かりやすいかもしれません。ぜひフォロー宜しくお願いします。