2022年4月13日に『uiデザイン必携ユーザーインターフェースの設計と改善を成功させるために』が出版されました。
目次の俯瞰
UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために
CHAPTER 1 UIとデザイン
1.1 UIとUX
UIとはユーザーと対象との接点
UXとは知ってから忘れるまでの総体験
UI と UX の関係
1.2 デザイン
デザインとは見た目のことではない
デザインとは設計のこと
設計とはどういう行為か
デザインの必要性
UIデザインの意味
CHAPTER 2 環境による影響
2.1 画面
画面の形
近くは小さく、遠くは大きく
変えられないことと変わること
2.2 入力手段
3つの入力手段 (操作方法)
ポインティング操作: マウス/ トラックパッド
直接接触: タッチパネル
フォーカス操作: リモコン/ゲームコントローラー
入力手段により異なる適したUI
インターフェースデザインの収斂
実例1 入力手段による使いやすさの違いを確かめる
2.3 Web サイトとアプリ
入力手段を介してユーザーが操作する場所
Webサイトは汎用的ツール
アプリは専用的ツール
CHAPTER 3 人間の認知特性
3.1 色、形、動き
色 : 瞬間的に見分ける力
色数は少なくする
色の組み合わせ
基本的な配色パターン
色によるブランド訴求
形: 異なるものを見付ける力
動き: 変化を見付ける力
3.2 インタラクション
「注目」としての動き
「理解」としての動き
「演出」 としての動き
複合的な効果
マイクロインタラクション
実例2 レストランのタブレット注文システム
3.3 整列と区分
整列
情報区分の強さ
3.4 近接 反復とスクロール
近接
反復
スクロールの向き
3.5 コントラストと偏重
コントラスト (対比)
全てを強めると全てが弱くなる
敢えて偏りを付ける
ボタンに重みを付ける
CHAPTER 4 構造とナビゲーション
4.1 構造と階層
縦&横でひとつの画面、 前後で複数の画面
構造とはサービス全体のデザイン
前後関係を表現する
階層は「深く狭く」 より 「浅く広く」
ラベリングは排他的に
4.2 トップ、 一覧、詳細
最もありふれた構造
規模によって構造は変わる
トップ: サービスの顔
一覧: サービスの要
検索も 「一覧」 である
「割り込み」 で他の切り口を見せる
一覧の操作は「並べ替え絞り込み 切り替え｣
詳細 : サービスの (当面の) ゴール
詳細 : 次の道を示し、回遊できるようにする
4.3 現在地とステータス
場所を表現する
現在地の表現
差別化表現のバリエーション
画面内位置の表現: ホバーとフォーカス
状態 (ステータス) の表現
4.4 AndroidとiOS
似てきた AndroidとiOS
戻るボタン
実例3 Android、iOS、Web、 3つのUI 制作
4.5 アイコン
省スペース化と認知の向上
ラベルを添えるか、 添えないか
意味が固定化されたアイコン
実例4 渋滞予測アプリでのアイコン事例
4.6 フィードバック
インターフェースとは入力と応答の繰り返し
あらゆる操作にはフィードバックが必要
ステータスを明確に示す
アクションの結果を明示する
2種類の「待ち状態」 を使い分ける
4.7 ひとつ戻る、 最初に戻る
迷ったら戻る、 悩んだら戻る
「ひとつ戻る」 と 「最初に戻る」 を担保する
4.8 ヘッダーとフッター
ヘッダーとフッターの役割
ヘッダーはサービスの全体図
フッターは補助的ツールの集積所
4.9 割り込み
2種類の割り込み
オーバーレイ
インレイ
4.10 スクロールとページング
コンテンツの見せ方は大きく2種類
スクロール
ページング
スクロールとページングの関係
カルーセル
4.11 マルチデバイスデザイン
複数のデバイスで、 同じサービスを展開する
同一ではなく、同等のことができる
デバイスの特徴や用途に従う
デバイスによってインターフェースを変える
デバイスを跨いで役割を補う
デバイスを跨いで機能を継承する
実例 5 PC/スマートフォン/TVでの同サービス展開
CHAPTER 5 分かりやすさ、使いやすさ
5.1 分からないとは
「分からない」 の3つの要因
場所が分からない
操作が分からない
状態が分からない
「分かりやすさ」と「使いやすさ」 は相関する
5.2 インタラクションコスト
操作で支払うコスト
認知負荷 : アタマの支払うコスト
身体的負荷: カラダの支払うコスト
アタマの負荷とカラダの負荷、 どちらを優先する?
5.3 一貫性、シンプルさ、 共通概念
インタラクションコストを低減するために
シンプルさ
一貫性
共通概念
直感的とは
実例6 スマートフォンで家電操作 (lot)
CHAPTER 6 留意すべきこと
6.1 留意事項
払った労力にとらわれない
機能を増やしすぎない。
売り手の都合を買い手に押し付けない
試してみないと分からない
人間の想像力には限界がある
謙虚になる
