デザイニング・インターフェース

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン

所感

UIデザインにおける「パターン」の辞書とも言うべき一冊。基礎的なものも多いが、これが体系的にまとめ上げられているところに価値がある。これにより、業務においても共通の言葉を使ってのやりとりができて、スムースに事が進みやすくなりそう。またあまり親しみのなかったパターンについても網羅されており、UIモデリング時に使える道具が増えた感じがする。


中身はビジュアルが多く、各パターンがどのように実際利用されているかが非常にイメージしやすくて助かった。インタラクションのパターンにおいて特によく参照されていたのは、当然ながらWindowsMac OS、Office各製品、Adobeなどのローカルアプリ、そしてGmailGoogle Map、AmazonなどのWebアプリ。


普段何気なく使っているものでも、ミクロな視点で改めて見ると認知科学的に非常によく考えられた上でデザインされているのがわかる。


今でこそこうしたパターンを使って最小工数でのデザインが可能になっているが、もともとのパターンを0から生み出すのは相当に気を遣う作業だったろう。そしてiPhoneWiiのUIなどからは、これから新しいパターンが生まれて定着してきそう。


この本を翻訳したソシオメディアだが、どおりでUIパターンのサイトが充実しているわけだ。本にはないパターンも加えられており、一覧性も高いので普段はこちらも参照する。
https://www.sociomedia.co.jp/category/uidesignpatterns


キーフレーズ

グローバルナビゲーション

利用場面
・セクション間を直接移動したがる場合が多い
・十分なスペースがある

ハブとスポーク

利用場面
・サブアプリケーションの独立性を強めたい
・タスクを確実に完了できるようにフローを制限したい
・物理的なスペースの限界がある(モバイル等)
1ウィンドウのドリルダウンと共に用いられる
 ⇒iPhoneは中間?基本はハブでGNBもカスタマイズ可

ピラミッド
モーダルパネル

・ダイアログボックス、ライトボックスなどによるNavi
 ⇒Ajaxの発達とともにモードレス化が進んでいる
  (はてなブックマークレットなど)

シーケンス表示
カードスタック(タブ)
開閉可能パネル

・大きさが不揃いでも対応できる
・複数のセクションを開いておける
・開閉の仕組み=ツイストダウン
・カードスタックとの入れ子構造も可能

反応的な追加表示、イネーブル
アクションパネル(タスクペイン)

・多数のアクション表示する必要がある場合
・メニューよりもっと目に付きやすくしたい場合
・長いテキストラベルが使用可能⇒動詞の表現がしやすい
・開閉可能パネル、動的な変化と相性がよい

インフォメーショングラフィックス

・組織化モデル
・前注意的変数と符号化
・スクロールとパン(ゼロイン

動的なクエリ
データのブラッシング
カスケーディングリスト
ツリー表示テーブル
入力ヒント
入力プロンプト
リストビルダー
タブの頭形状
ヘアライン処理