視力と視野角から考える、スマホ画面で実際に見えているUI範囲
こんにちはPOP(@y_hiranai)です。趣味はお酒とゲームとUI/UX研究です。
UIデザイナーあるあるだと思いますが、自社サービスをSNSでエゴサしていると「こんな機能あったんだ!いつからあるんだろう。すごく便利!」みたいな投稿に出会うことがあると思います。
そんな時いつも思う・・・・
何故、気づいてくれないのか。何故、見えないのか!
その何故を知りたくて、いろいろ調べた結果、ある仮説にたどりついたのでnoteします。
原因は視野範囲だった?
気づいて欲しい機能のそばに広告があるとか、見えづらい位置にあるとか、いろいろ原因は考えられたんですが、そもそも見えていないのでは?という仮説にたどりつきました。というのも前職でOOH業界にいたのすが、その頃「視認性」というものを勉強していました。OOHは屋外広告物なので、設置した時に歩いている歩行者から適切に視認されるか。視認して可読できるかが非常に重要になってきます。
OOHの視認性とは
OOHをクライアントに提案する際はデザイン性も重要ですが、そもそも見えてなかったら意味がないので人間の視野範囲から、取り付け位置の高さや角度を考慮します。道路沿いの交通広告なら、走行してる車内から数秒で読み取れる様な文字サイズや情報量を精査した上で、デザインを提案していました。
モバイル端末上の視認性はどの程度なのか
OOHのときの経験をもとに、人がスマホでアプリを利用している場合、どの程度の範囲が見えているのかを検証・計算しました。(多分あってる…)
やはりあまり見えてない!
実際の状況ではこの可視範囲に加えてスクロールしながら利用するため、さらに可読性は下がることになります。
自社アプリ / ninaru baby
知られざる便利機能の代名詞、ninaru babyの天気予報は目立つようにヘッダーに置いたんですが、視野範囲外の可能性…
ninaru babyのメインコンテンツであるメッセージや記事がファーストビューの真ん中に配信される関係上、ヘビーユーザーほど慣れている分、自然と視線は画面中央に集まると予想されます。
こりゃ気づかれないわけだ・・・・
ヘッダーとタブは画面で固定で出ているし目立つし気づくでしょ!!
という固定概念を改める必要がありそうです。。
可視範囲確認用XD
最後に、今回つくった可視範囲確認用のXDを貼っておきます。
実機サイズで見れますので、気になる方は是非どうぞ。
では。
この記事が気に入ったらサポートをしてみませんか?