本日届いた本。わりとウェブ業界の人に役立ちそうなのでご紹介。
Designing Interfaces – Jenifer Tidwell
O’Reilly
¥5,286 (US$49.95)
この本では、ユーザー分析、情報アーキテクチャ設計からページデザイン、ボタン等のアクションデザイン、それらをデザインするためのツールの話まで、ウェブサイトのインターフェイスデザインのために必要な要素、手順についてまとめた本です。デザイナが知っておかねばならない要素を広く取り上げているために、すでにこれらの知識を持っている人にも自分の知識の体系化のために役立つ本です。ウェブのインターフェイスを基本にしていますが、携帯やアプリケーション一般もとりあげられており、また方法論としては適応しています。
面白いのは、章をまたいでデザインパターンとしてさまざまなTipsが記載されています。これらをチェックポイントとして使うだけでも有用でしょう。
すでにウェブデザインを行っているグラフィックデザイナーから、情報アーキテクト、ディレクターにまで幅広く読んでもらえると思います。 以下、それぞれの章について簡単に抜粋します。
- What Users Do(ユーザーはなにをするか)
- ユーザーリサーチの基本
- ユーザーの動機についてしらなければならない
- ユーザーの認知や行動のパターン
- Organizing The Content: Information Architecture and Application Structure
(コンテンツの整理:情報アーキテクチャとアプリケーションの構造)- 情報アーキテクチャの基本:オブジェクト、アクション、ツールのリスト化
- 物理的な構造:単一ウインドウ、タイル上の配置
- パネル形式などのウインドウ表現のパターン
- ウイザードやパレットなどのそれ以外のパターン
- オンスクリーンヘルプ
- Getting Around: Navigation, Signposts, and Wayfinding
(歩き回る:ナビゲーション、サイン、探索)- Staying Found(なんて訳せばいいんだろ。「見つけたままで」という感じかなあ?)
- ナビゲーションのコスト(ページ間距離を最小に、ジャンプしすぎ)
- サイト構造ナビゲーションのパターン(エントリーポイント、グローバルナビゲーション、ハブ型、ピラミッド構造、など)
- 「現在地表示」のパターン(シーケンスマップ、パンくず、など)
- アニメーション表示パターン(MacOSXのDockアニメーションなど)
- 非常ハッチパターン(キャンセルなど)
- Organizing The Page: Layout of Page Elements
(ページ内の整理:ページ要素のレイアウト)- ページレイアウトの基本(視覚的な階層構造、視覚的なフロー、グループと整列、全部まとめる)
- レイアウト、視覚表現のパターン
- Doing Things: Actions and Commands
(「する」こと:アクションとコマンド)- ボタン、メニューバー、ポップアップメニュー、などなどアクション要素
- 境界のものたち(クリックできるアイコン、ボタンに見えないクリックできるテキスト、など新しい要素)
- アクションのパターン(ボタングループ、スマートメニュー、キャンセル可能性、複数アンドゥ、などなど)
- Showing Complex Data: Trees, Tables, and Other Information Graphics
(複合データを見せる:ツリー、テーブル、他のインフォメーショングラフィック)- インフォメーショングラフィックの基本
- 組織化モデル:どうやってこのデータを組織化するか
- 前注意的(*)変数:なにが何に関連するか
並列に並べた中に変化をつけるとそこが目立つ
*前注意的(preattentive):知覚心理学で用いる用語 - 並べ替えと再整理:並べ替えていいですか?
- 検索とフィルタリング:必要なものだけ見せてくれ
- 実データ:詳細のデータは?
- インフォメーショングラフィックのパターン(列表示、テーブル、カスケード表示、ツリー表示、ツリーマップ、などなど)
- Getting Input from Users: Froms and Controls
(ユーザーからの入力:フォームとコントロール)- フォームデザインの基本
ユーザーは何を、どうして聞かれているかわかっている?
できるならまったく尋ねない方がよい
などなど - 選択のコントロール
数値入力、チェックボックス、テキストエリアなどのいろいろな選択肢のパターン - 入力のパターン(入力フォーマットの提示、階層フォーマット、ドロップダウン選択肢、よいデフォルト値、などなど)
- フォームデザインの基本
- Builders and Editors(構築ソフトやエディター)
- エディターデザインの基本(WYSIWYG編集、直接操作、モード、選択方法)
- エディターUIの要素(内部直接編集、スマートセレクション、マグネット、ガイド、などなど)
- Make it Look Good: Visual Style and Aesthetics(美しく:ビジュアルスタイルと美学)
- おなじ内容で異なった見せ方
実践的なUIパターンカタログとしてだけでなく、グラフィックデザイン、情報アーキテクチャなどの基本を学ぶにもよいと思います。
今年の授業の教科書として使いたいと思います>造形大IFDのみなさん。
英語版は全文公開されていました。
http://designinginterfaces.com/