UI/UXデザイン
良いUIデザイン
可視性が高い
クリックしやすい
クリッカブルの認識性が高い
機能が認識しやすい
情報理解がしやすい
ユーザが必要な情報にたどり着きやすい
フォーム入力が容易
悪いUIデザイン
余白がない
… アイコンは全体の2/3
全てのパーツが同じサイズ
… 情報の優先順位
色が多い
… 1画面に4色以内
配色
色相 … 色の種類
彩度 … 色の鮮やかさ
明度 … 色の明るさ
配色パターン
1色(彩度あり) + 無彩色(彩度0の「白 - 黒」)
補色(配色比率は7:3)
3色の場合は6:3:1(カラーパレットで三角形を作る)
4色以上の場合は(カラーパレットでn角形を作る, 彩度は固定 or 1色だけ彩度高め)
Adobe Colorで配色を決定するのもアリ
インタラクションコストの概念
インタラクションコストとは
「アクション ⇄ リアクション」のコスト
(例)
アクション: メニューをタップ
リアクション: メニューが表示
(その他の例)
- フォームに合わせたキーボード選択
- バリデーションの即時表示(正誤がすぐに確認できる)
- 冗長なページの回避(ページの要約)
- サジェスト機能
- 類似商品やおすすめの最適化
UXデザイン
どんな体験 / 価値観を与えるか
世界観の創出
デザイン
グルーピング
… 類似性の高いものはカテゴライズ
デザインの一貫性
… 余白や配色のメリハリ
機能の連想
… 「アイコン × 文字」の組み合わせ