デザイニング・インタフェース とデザイニング・ウェブインタフェース
デザインについて、ざっと勉強するために読んだ。
デザインがパターンとして整理されているだけでなく、様々な事例がカラーで紹介されているので、パラパラと眺めているだけでも勉強になる。
実際のサイトに対してアンチパターンとして「ダメだし」をおこなっているなど、説明がわかりやすい。
開発チーム全員が読んでいると、コミュニケーションがスムーズにできる効果もありそう。
ウェブでのリッチインタラクションデザインをテーマにした本だが、情報アーキテクチャやビジュアルデザイン、アクセシビリティも関係している。
6つのデザイン原則をおぼえておくだけでも役に立つ。
- 直接的なインタフェースを作ろう
- 軽快さを心がけよう
- 1ページで完結させよう
- インビテーションを仕掛けよう
- トランジションを利用しよう
- すばやく反応しよう
宣伝文句にあるように、Flickr、37signals などのサイトのカラー写真で説明しているので非常に分かりやすい。
注意点としては、あくまでデザインに関する本なので、コードレベルの実現方法には言及されていない。
デザイニング・インタフェース目次
01 ユーザの行動
目標達成の手段
ユーザ調査の基礎
ユーザの学習意欲
パターンの解説02 コンテンツを整理する
情報アーキテクチャとアプリケーション構造
情報アーキテクチャの基本:分類すること
物理的構造
パターンの解説03 動き回る
ナビゲーション、標識、経路探索
いつでも居場所が分かるということ
ナビゲーションのコスト
パターンの解説04 ページを構成する
ページ要素のレイアウト
ページレイアウトの基礎
パターンの解説05 事を行う
アクションとコマンド
限界を広げる
パターンの解説06 複合的なデータを表示する
ツリー、テーブル、その他、
インフォメーショングラフィックス
インフォメーショングラフィックスの基礎知識
パターンの解説07 ユーザからの入力を受け取る
フォームとコントロール
フォームデザインの基礎知識
コントロールの選択
パターンの解説08 制作ツールと編集ツール
編集ツールをデザインするための基礎
パターンの解説09 よい見た目にする
視覚的なスタイルと美学
同じ内容、違うスタイル
ビジュアルデザインの基礎
デスクトップアプリケーションにおけるビジュアルデザインの意義
パターンの解説参考資料
索引
監訳者あとがき
訳者あとがき
デザイニング・ウェブインタフェース目次
序文
はじめに第1原則 直接的なインターフェースを作ろう
1章 ページ内編集
単一フィールドのインライン編集
複数フィールドのインライン編集
オーバーレイ編集
テーブル編集
グループ編集
モジュール設定変更
適切な編集パターンを選ぶためのガイドライン2章 ドラッグアンドドロップ
気になる瞬間
ドラッグアンドドロップの目的
モジュールのドラッグアンドドロップ
リストのドラッグアンドドロップ
オブジェクトのドラッグアンドドロップ
アクションのドラッグアンドドロップ
コレクションのドラッグアンドドロップ
ドラッグアンドドロップの課題3章 直接的な選択
トグル型選択
コレクション型選択
オブジェクト型選択
ハイブリッド型選択第2原則 軽快さを心がけよう
4章 コンテキスト連動型ツール
コンテキストに応じたインタラクション
フィッツの法則
コンテキスト連動型ツール
常時表示型ツール
ロールオーバー表示型ツール
トグル表示型ツール
段階的表示型ツール
サブメニュー第3原則 1ページで完結させよう
5章 オーバーレイ
ダイアログ用オーバーレイ
詳細表示用オーバーレイ
入力用オーバーレイ6章 インレイ
ダイアログ用インレイ
リスト用インレイ
詳細表示用インレイ
タブ
インレイとオーバーレイ、どちらにすべきか?7章 バーチャルページ
バーチャルスクロール
インラインページング
スクロール型ページング:カルーセル
バーチャルパンニング
ズーム型ユーザーインターフェース
ページングとスクロールの使い分け方8章 プロセスフロー
Google Bloggerの事例
魔法の定理
インタラクティブページ型プロセス
インラインアシスタント型プロセス
ダイアログオーバーレイ型プロセス
コンフィギュレータ型プロセス
非インタラクティブページ型プロセス第4原則 インビテーションを仕掛けよう
9章 静的インビテーション
アクション喚起型インビテーション
ツアー型インビテーション10章 動的インビテーション
ロールオーバー型インビテーション
アフォーダンス型インビテーション
ドラッグアンドドロップ型インビテーション
推定型インビテーション
「もっと見る」型インビテーション
インビテーションの利点第5原則 トランジションを利用しよう
11章 トランジションのパターン
明度/濃度の増減
展開/折りたたみ
回復型フェード
アニメーション
スポットライト12章 トランジションの目的
エンゲージメント
コミュニケーション第6原則 すばやく反応しよう
13章 情報探索のパターン
オートコンプリート
