UIデザインの前提理解【本での理解編③】

今回も「UIデザインの教科書」を基にUIデザインの理解を深めます。
1章でUIデザインは「設計」であり、キレイな見た目としての”デザイン”はその中の一部の要素と理解をしましたが、そうなるとUIデザインの決定要素は下記の3つで決まると言ってよいかもしれません。

1.「ユーザ」=「人間の行動心理学
2.操作するデバイスの制約条件(物理的な特徴)
3.デバイスに表示させる「設計」(見た目のデザイン含む)

つまり、UIデザインにおいて重要なのは、操作する人間が何を見て、どう感じるかを知っている事なのです。ということで、今回の4章は「人間の認知特性」がテーマです。

【色による認知】
1.色がついていると瞬時に見つけることが出来る
2.一方、色が増えすぎると判断できなくなる(色の数は少なくする)
3.カテゴリ分類に色を使う(同階層に同色を)
4.フォーカス時に色を使う、色を反転させる

【形による認知】
1.他と形が異なると瞬時に見つけることが出来る
2.フォーカス時に形を小さくしたり、大きくさせる
3.人の顔写真は注意を引き付ける(広告のCVRが上がる)

【動きによる認知】
1.動きがあると、パッと「注目」を集めることはできる
2.スライドやマウスオーバーで状態変化の「理解」を補完することができる
3.装飾(パララックス等)として動きを使う手はある
4.シンプルな分かりやすさを求める上で「動き」を使うのは難易度は高い

【頭への負荷(インタラクションコスト①)の低減】
1.読まなくても分かる・できる
 1-1.文字が小さすぎない
 1-2.行間が適度に空いている
 1-3.1行ごとの文字数が多すぎない
2.理解しなくても分かる・できる
 2-1.入力フォームの数が多すぎない
 2-2.入力の仕方や内容が分かりやすい
 2-3.入力の到達度が分かる
3.覚えなくても分かる・できる

【身体への負荷(インタラクションコスト②)の低減】
1.クリック/タップを減らす(同じ操作を減らす)
 1-1.TV>スマホ>PCの順で入力負荷が高い
2.スクロールを減らす(移動が近い)
3.スワイプを減らす(手を持ち替えなくて良い)

上記の人間の認知特性を受けて、UIとしてイケている「設計」(デザイン)は、下記の3つのポイントを押さえれば良いようです。

1.一貫性: 既存のコンポーネントやライブラリを流用する
2.シンプルさ: なるべく情報量を減らす、ただ何度も使うものはインタラクションを減らす為、多ボタンでもOK(飛行機のコクピット)
3.共通概念: アイコンなどはユニバーサルデザインを使う(普通と異なる動作をするとユーザはイラつく)

つまり、既存の基本(GoogleやMicrosoftのガイドライン)に忠実に作ってみることが案外大事だという事ですね。UI的にイケてると言われる「直観的」デザインも、人間の本能的なデザインなのではなく、後天的な経験やルールに基づくデザインだという事を肝に銘じる必要があります。

関連記事

  1. アプリ設計におけるUI検討の難しさとAdobe XD

  2. UIデザインの実践練習【リアル編】

  3. CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

  4. UIデザインの実践準備

  5. UIデザインの学習開始

  6. UIデザインを検討して気づいた事

  7. UIデザインの実践【アプリ編】

  8. UIデザインの前提理解【本での理解編①】

PAGE TOP