読者です 読者をやめる 読者になる 読者になる

Tortoise Shell

デザイナーによる、デザインやライフハックブログです。

UIにおける情報の密度の話

アプリケーションのUIをデザインする際には、「情報の密度」のバランスが重要なポイントとなります。

なぜ、わたしたちは複雑なアプリも使いこなせるのか

わたしたちは普段、当たり前のようにアプリケーションを使いこなしています。

いっけん複雑な操作を連続で行っているように見えますが、分解すれば単純な操作を1つずつ行っているに過ぎないのです。

その1つ1つの単純な操作が分かりやすく設計されているからこそ、ユーザーはアプリケーションの一連を体験し、総括として使いやすいアプリケーションだと判断するのです。

なので、ユーザに「使いやすい」と思ってもらえるアプリケーションをデザインしようと思ったなら、一見地味に思える細かい操作の1つ1つを注意深くデザインする必要があるのです。 

たった1つのデザインのミスが命取りになる

あるタスクをユーザーに操作させたいと思ったときに、たった1つのタップの挙動を間違えてデザインしてしまっただけでも、ユーザーは「使いにくい」と判断し操作をやめてしまうのです。

ちなみに、この1つ1つのユーザーの操作がもたらすシステムとのやり取りの最小単位を「マイクロインタラクション」と呼びます。

マイクロインタラクションについて興味のある方は、下記の書籍を参照してください。

オライリー本ですが、いわゆるコードがずらっと並んでいる技術書ではなく、写真をたくさん使いマイクロインタラクションの事例について分かりやすく解説されている面白い読み物です。

マイクロインタラクション ―UI/UXデザインの神が宿る細部

マイクロインタラクション ―UI/UXデザインの神が宿る細部

 

まず、情報の密度を確認しよう

さて、話を「情報の密度」の話題に戻しましょう。

マイクロインタラクションは操作の最小単位ですが、マイクロインタラクションだけをひたすら見ていても使いやすいアプリケーションはできません。

逆に、今度はアプリケーション全体のインタラクションを俯瞰して判断する機会を無くすために、操作のルールに一貫性を欠いてしまうという別の問題が生じます。 

よって、UIデザインとは、細部と全体を行ったり来たりしながら詰めていくことが重要になります。

そこで、マイクロインタラクションを個別に見ていく前にやるべきことが、まず1つの画面についてぱっと見で「情報の密度が過多ではないか」というチェックです。

前半で、ユーザは複雑なアプリケーションの操作をしているが、それも分解すれば単純な操作がわかりやすく設計されているから成り立っているという旨を説明しました。

つまり、1つの画面に情報量が多すぎる場合、ユーザーがどうやって操作したらいいのか迷わせる原因になってしまうことがあるのです。 

最もわかりやすい例としては「マジカルナンバー」が有名ですね。

マジカルナンバーとは、人間が瞬間的に記憶できる情報の最大数は、7プラスマイナス2つまで…という認知心理学の用語です。

このマジカルナンバーはWebサイトのデザインにも適用されており、例えばサイト上部のグローバルナビゲーションなどは、7プラスマイナス2つまでにメニューも数が抑えられていることが多いと言われています。

細かい話をするとたくさんあるのですが、まずはぼんやりとでも良いのです。

「なんかこの画面、文字やボタンが多いな…」

そう思ったら、改良の余地があると疑ってみましょう!

P.S.

先に挙げたマイクロインタラクションには、快適なUIを実現するためのTipsがたくさんまとめられていますので、Webサイトやアプリの画面設計をきちんと理論的にやってみたいという方にはうってつけだと思います。

マイクロインタラクション ―UI/UXデザインの神が宿る細部

マイクロインタラクション ―UI/UXデザインの神が宿る細部

 

おすすめ記事セレクション