若い頃、趣味でFlashサイト/ゲームを作って友達に見てもらい意気揚々と感想を聞くと、
「どうしたら良いかわからない」
「変わったデザインだね」
といった評価をもらい、「あんなの飾りです。偉い人にはそれが分からんのですよ。」という名言を思い出しながら憤りを感じつつも落ち込んでました。
言われてみると当たり前なんだけど慣れていない人だと結構失敗するかもしれないと思い、今回投稿してみました。
デザインにおける「わかりやすさ」とは
- 迷わないこと
- 何が起きるのか予想ができること
- 安心できること
デザインにおける「わかりやすさ」を説明するとこんな感じでしょうか。
では、WEBやアプリでは具体的にどういったことを考えれば良いのでしょうか。
ユーザーの行動から順を追って考えてみます。
PCであればこんな行動をします。
- 画面を見る
- マウスを動かす
- クリックする
それでは「画面を見て、次の動線までマウスを持っていき、クリックをする」というシナリオで考えてみましょう。
画面を見る
画面を見て得たい情報を探します。
たいていの場合、文字を読んだり画像を見る、そして次の画面への動線を探します。
文字は見やすいか
当然ですが、小さかったり、色のコントラストが低いと読みづらいです。
最近だと16pxの文字サイズが多い気がします。
業務で高齢者がターゲットとなるアプリを作ることがあったのですが、オフィスで老眼の方を探して「この文字読めますか？」と（失礼にも）聞いて文字サイズが十分か確認してました。
ターゲットによって最適な文字サイズは変わるので一概にどの大きさが良いということは言えないかと思います。
動線は気づきやすいか
通常のWEBであれば、リンクには下線が引かれ文字の色も変わります。
もし、これが普通の文字と同じであればかなりわかりづらいでしょう。
アプリであればリンクじゃなくてボタンのような部品もあるでしょう。
見た感じでクリック/タップできそうなことを表現しないといけません。
例えば、マテリアルデザインであれば、影をつけることによって「押せる感」を表現します。
マウスを動かす
動線を見つけたらユーザーはそこにマウスを持っていきます。
そして「やっぱり押せそうだ」という実感をユーザーに与える必要があります。
押せることに気づきやすいか
もし、ボタンの上にマウスを持って行って何も変化がなければ、「押せる感」が全くありません。
マウスのカーソルは指(ポインタ)に変化するべきです。
これはUIをあまり作らない人がUI部品を作った場合によくあるのですが、マウスカーソルを変化させることに気が回らないことがあります。
CSSであれば cursor: pointer という記述にあたります。
また、ボタンはマウスが重なった時に色が変わると、より一層わかりやすくなります。
スマホの場合、「マウスが重なる」に相当する動作がないので、より一層「押せる感」を表現する必要があります。
余談ですが以前、父と母にLINEで「紙を撮影した写真」を送ったことがあったのですが彼らは「読めない」と言ってきました。
写真をタップして拡大表示すれば十分読める大きさだったのですが、そもそも彼らはLINEで送られた写真をタップできることを知りませんでした。画面を見てもタップできることに気づかなかったのです。
クリックをする
マウスを動線まで持っていき「確かに押せそうだ」と感じたユーザーはクリックをします、
この時、ユーザーに不安を持たせないようにする必要があります。
何が起きるのか想像しやすいか
押した結果が想像できないと怖くて押せません。
例えば、「購入画面へと遷移するボタン」を考えてみます。
次の2つのボタンを見比べると、左のボタンは「購入が確定する」ように感じてしまいます。
これではユーザーは怖くてボタンを押せないかもしれません。
他にもアイコンを使うことがあるかと思いますが、アイコンだけで内容が想像できない可能性がある場合は言葉も添えた方が安心できます。
押したことがわかりやすいか
押して何も反応がなければユーザーは本当に押せたのか不安に感じます。
ボタンが凹んだような色や動きをしたり、新しい画面を表示したりなど、何らかのフィードバックをする必要があります。
またスマホの場合、自分の指が邪魔で色の変化が見えない可能性もあるので、アプリであれば振動したり音を出したりすると、より一層押したことが実感できると思います。
まとめ
「画面を見て、次の動線までマウスを持っていき、クリックをする」という流れを例に、「わかりやすさ」の話をしました。
どれも当たり前のことだったと思いますが、いざ自分でUIを作るとなると意識できてなかったりします。
ユーザーの行動を分解して、それぞれの動作についてわかりやすいかを考えてみると良いかもしれません。
また「わかりやすさ」は対象とするユーザーによって変わることを知っておく必要もあります。
アイコンに文字を添える話を書きましたが Instagram では文字は添えられていません。
電話の表現でよく黒電話のシルエットを使うことありますが、今時の子供は黒電話は知らないでしょう。（ジブリの影響とかで意外と知ってますけど）
他にもUI関係の投稿をしてますのでご興味があれば是非読んでみて下さい。
失敗しづらいUIへのアプローチ
https://qiita.com/megumu-u/items/b96b7fc7b0a57d72a47f
失敗しづらいアプリ開発へのアプローチ
https://qiita.com/megumu-u/items/c3c8f160f7c94599b717