1. はじめに
引き続き、意図したUI設計ができるようにデザイン部分の基礎を学んでいます。
前回
UIの基礎
2. 色・形・動き
2.1. 色
色があると、人は同じようなものから、何かを見つけ出す行為が格段と早くできるようになる。
しかし、色の種類が増えすぎると、見つけ出す時間は長くなってしまう。
また、デザインをする上で、色を増やしていくことは簡単だが、減らすのはむず悪しい。
そのため、色を無闇に増やさないようにする必要がある。
2.2. 形
ホバーやフォーカスに対して、色や形を変化させることによって、ユーザーがどこを操作しているのか、何ができるのかを認識することができる。
また、視覚に障害を持つ方にも、形で表現することができていれば、認識することができる。
2.3. 動き
動きの種類は、注目のため、理解のため（画面のどこにいるのか、何が起こったのかなど）、装飾のため（極論なくても大丈夫なものではある）の3つがある。
3. インタラクションコスト
3.1. 概念
インタラクション*コストは、精神的な負荷と身体的な負荷の2種類。
精神的な負荷とは、ユーザが考えたり、判断したりする際に発生する。
小さい文字であったり、文章が長すぎるものは、負荷が増大する。
「読みやすい」と感じるものは、負荷が軽減する。
（例） 見ただけで押せるとわかるリンクなどは負荷が軽い。
身体的な負荷とは、クリック数やステップの多さなどによって、負荷が増大する。
*インタラクション：アクションが起こったことがわかるような状態（ユーザーの操作の結果）。
簡単で、楽で、使いやすいものはインタラクションコストがかからない！
「今までよくある動きで、サッとできて、パッと理解しやすい」みたいなニュアンス。
3.2. インタラクションコストを下げる方法
インタラクションコストを下げる方法（アプローチ）のキーワードは以下である。
- 一貫性（ユーザーが予測できる、安心できる、また、機能追加が容易になる。）
- シンプルさ
- 共通概念
一貫性の反対は柔軟性！
ここは反比例の関係。しっかり一貫性を整えた後に、ある程度の柔軟性を持たせる作りを考えると良い。
逆は難しい！
直感的とは
直感的とは、ユーザーの予想とその結果が完全に一致すること、いわば、学習コストが0で使えるということ。
シンプルとは、別の概念。
ユーザーのそれまでの経験によって、「直感」は違ってくる。
様々なユーザーの共通的な認識を見つけ、そこからインタラクションコストを下げ切った状態が直感的なデザインと言える。
4. 階層と構造（サイトマップをイメージする）
4.1. 階層
階層は、「浅く、広く」の方が使いやすいと感じられる傾向がある。
階層を上下する方が労力がかかる。
階層が広いほど、ラベリング（ページに名前をつけること）が具体的になるので、探しやすくなる。
ラベリングは、重複する意味がないようかつ、具体的に付けていく必要がある！
4.2. 現在地がわかるように差別化
ユーザーに階層のどこにいるかをわかるようにする必要がある。
手法としては、パンくずリストが挙げられるが、文字で表現するため、デザインに影響が出たり、認知の負荷がかかる。
別の方法として、ナビゲーションなどで、「太さ、いろ、大きさ、背景、目印」などを組み合わせることで、他の表示と差別化して、表現する手法が挙げられる。
注意点としては、「現在地」と「フォーカス」の表現を被らないようにする必要がある。
（例）現在地：太さ、色と目印、 フォーカス:色と背景色 で表現する など（GmailのPC）
4.3. 構造（一部）
4.3.1. 一覧画面の操作
一覧画面の操作は、「抽出」「並び替え」「切り替え」がある。
上記で画面表示に影響を与えた場合は、「何で絞っているか」や「何で並び替えているのか」、「何に切り替わっているか」などを表現する必要がある。
上記の状態がわからないのは、結構困る。
当たり前のように表示されているけど、なかったら、状態が把握できないから、何をしているかを忘れてしまったら、一から操作の必要があって非常に不便。
4.3.2. ユーザーの「わからない」とは
ユーザーの「わからない」という言葉には、「自分がどこにいるのかわからない」「操作方法がわからない」の2種類がある。
この2種類のわからないを解決する方法は、構造と操作方法において、一貫性のあるデザイン、UIである。
ある程度ユーザーが操作する方法を予測できることがデザインにおいて、わかりやすさを高める。
5. まとめ
今回から、記事に知識のアウトプットだけではなく、感想などの思ったことを書いてみました。
そうすることで、自分ごととして捉えて学習できそうだなと思いました！
続けてみます。