お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

アプリUIを分かりやすくする4つのデザイン要素

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

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

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

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

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

アイコン

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

アイコンでパッと見で意味がつかみやすいGoogleMaps

アイコンでパッと見で意味がつかみやすいGoogleMaps



あとはOSによって、同じ意味でもアイコンが全然違うデザインだったりします。
アイコンの違い
OSに合わせたものをきちんと使ったほうがいいですよ!そんなわけで、デフォルトのアイコンセットはきっちり把握した方がいいかもしれません。
ちょっと昔の記事ですが、こちらが参考になります。
iOS、Android、Windows Phoneのデフォルトアイコン:Excite Designer’s Blog

文字要素

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

左はAppStoreのタブアイコン、右はmercariの購入ボタン

左はAppStoreのタブアイコン、右はmercariの購入ボタン

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

ジャンプ率で見出し・本文・メタデータがわかりやすいAntenna

ジャンプ率で見出し・本文・メタデータがわかりやすいAntenna


レイアウト

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

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

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

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


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

カテゴリーで色分けするSmartNews



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

まとめ

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

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

それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00