どうもこんにちはJBです。
UIを作る際に、どうやったら分かりやすくなるだろか…と考えるわけですが、「大体ここら辺を気をつけておけば、一定の理解度は担保されるんじゃないのかしら」というものをまとめてみました。

UIデザインを分かりやすくする４要素

他にもたくさんありますが、バッサリと割愛しまして…

• アイコン
• 文字要素
• レイアウト
• 色

これらをうまくいことしちまえば、何とかなるんじゃないのと。オシャレにするんじゃなくて、あくまで分かりやすくするということで…
それでは行ってみましょう！

アイコン

アイコンをうまく使うことで、認識の向上や省スペースに役立ちます。
そのためにはきちんと意味にあったアイコンを使うこと、一目で何となく意味が把握できることが大事です。
ただし、「とりあえずアイコン入れとけ」と言わんばかりに、不必要なところにねじ込むくらいだったらない方がいいかも知れないですね…。

あとはOSによって、同じ意味でもアイコンが全然違うデザインだったりします。

OSに合わせたものをきちんと使ったほうがいいですよ！そんなわけで、デフォルトのアイコンセットはきっちり把握した方がいいかもしれません。

文字要素

アイコンだけでは「ちょっと理解し辛いかな？」という時の補助的文字や、ボタンのラベルなんかも理解を助けます！
状況にあった文言を選ぶことが必要です。たとえば決済のアクションで、「OK」と「購入する」だったらどっちが分かりやすいかという話。

また、フォントのサイズや文字のジャンプ率（フォントサイズの差のことです）も「何が大事な情報か」を認識させる要素になります。

レイアウト

余白の話の時も触れましたが、情報の構成に合わせてブロックを作ったりすると認識しやすくなります。

他にも時系列とかに応じて配置方向を決めたり、ユーザーの想定アクションによって場所を変えてみたりということも必要です。
こういうのは日常的な動きや慣習に則っていくと比較的うまくいくのではないでしょうか！ここは遷移やアクションとかとも大きく関わるので考えどころですね。

そんでもって、OSごとのレギュレーションも大事です。iOSはタブが下のことが多いけれどAndroidは上、とか。使っている人にとって、どちらが普通か？ということを考えて作ります。
そんなもの関係ないくらいに革新的なUIだったらもうここら辺は無視していいですけれどね…。

色

一般的な認識として、モデレートには青・緑系、注意喚起には赤・黄＆黒の様な物がありますよね！用途に合った色使いは理解度の向上にきっといいはず。
ここら辺は色彩心理学も関係してきますかねー…

他にもカテゴリで色分けをしたり、色の濃淡で強弱を示したり…情報認識の補助にとっても役に立ちます。


とはいえ色覚障がいの方も大勢いらっしゃるので、色だけで…という訳にもいきません。そこはアイコンや文字とかの合わせ技で分かりやすくしておくことが大事です。

まとめ

いかがだったでしょうか？

上記要素をうまいこと組み合わせていけば、ある程度分かりやすいものが出来るのではなかろうかと思います！
アイコンも直感的じゃないし文字もない…みたいなものは正直何が出来るものなのか分からないです。「コレは飾りか…ボタンか…？」と思って一か八か押してみたら思いがけない動きをしたりとか…あんまりよくないですよね…（動きとかで魅せる斬新なUIなら別ですよ！でもそういう奴の設計は高度な鍛錬が必要なはず）。
ただ、盛りすぎると逆にカオスになるかもしれないので、そこはうまいこと引き算してください。

それではー！