デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

21_明快な入り口(clear entry points)

インターフェースへの入り口を数カ所だけ示す。タスク別に入り口を分け、説明を添えて示す。例)Googleのトップページ

利用場面

初めてのユーザや、頻繁には利用しないユーザが使うことが多いアプリケーションをデザインする場合。

22_グローバルナビゲーション(global navigation)

全ページ共通の小さなエリアに、サイトやアプリケーション内の主要なセクションへユーザを導く。定常的なリンクやボタンの集まりを表示する。例)Webサイトのナビゲーション

利用場面

大規模なWebサイトや、複数に分かれたセクションを含むアプリケーションを作る場合。ユーザが、あるセクションから別のセクションへと直接移動したがることが多い場合。

23_ハブとスポーク(hub and spoke)

アプリケーションの各セクションをミニアプリケーションとして分離し、メインページからの入り口とメインページへ戻る出口を1つづつ用意する。例)iPhoneのインターフェース

利用場面

UIの中に、多種多様なタスクやアプリケーションが含まれる場合。

24_ピラミッド(pyramid)

一連のページを、「戻る/進む」のリンクでつなげる。この連続的な表現を、各ページから相互リンクされているメインページと組み合わせる。例)フォトギャラリーサイト

利用場面

そのサイトやアプリケーションが、通常は順番に見ていくような連続するページ郡を含む場合。

25_モーダルなパネル(modal panels)

ユーザがその場の課題を解決するまで、ナビゲーションの選択肢を省いた1ページだけを表示する。例)保存しますか?「はい/いいえ」などのダイアログボックス

利用場面

アプリケーションが、ユーザの応答なしには先には進めない状態にある場合。

26_シーケンス表示(sequence map)

連続している各ページに、「現在はここ」の表示を含んだ全ページの順序を示すマップを表示する。例)入力フォームの「1.個人情報」「2.お届け先」「3.お支払い方法」

利用場面

ユーザの経路が主に一本道である場合。

27_パンくず(breadcrumbs)

【利用場面】
階層構造に含まれる各ページに、メインページに至るまでのすべての親ページを含むマップを表示する。例)Webサイトのパンくずリスト

利用場面

アプリケーションやサイトが単純なツリー構造となっており、ツリー内の各要素にはあまり関連性がない場合。パンくずはシーケンス表示の代わりになる。

28_注釈付きスクロールバー(annotated scrollbar)

スクロールバーに、コンテンツのマップまたは「現在地はここ」の表示という、2種類の役割を持たせる。例)スクロールバーに表示されるTIPS

利用場面

スクロールが必要となる大きな仮想空間を扱う対象をデザインする場合。

29_色分けしたセクション(color-coded sections)

あるページがアプリケーションやサイトの中でどのセクションに属しているかを、色で選別できるようにする。例)カテゴリ毎に色が違うWebサイト

利用場面

複数のセクションに組織化できる場合。異なる目的や、ターゲットユーザを持っている場合。

30_アニメーションによる転換(animated transition)

ユーザを驚かせたり迷子にさせたりしそうな転換を行う際に、それを自然に感じさせるようなアニメーションを用いて、スムーズに見せる。例)Mac OS X の ジニーエフェクト

利用場面

広い仮想空間の中をユーザが動き回る場合。

31_避難口(escape hatch)

ナビゲーションの選択肢が限られている各ページに、ユーザを明示的にそのページから脱出させて既知の場所へ戻すためのボタンやリンクを配置する。例)ダイアログボックスの「キャンセル」ボタン

利用場面

ウィザードのように、ある種の連続的なプロセスを成す複数のページを扱う場合や、ハブとスポークモーダルなパネルのようにユーザを閉じこめるようなページを扱う場合。

最後までお読みいただきありがとうございます!よろしければフォローお願いします!

もしお役に立てる情報がありましたら、そのお気持ちを Bitcoin や PayPal で送金していただけると、とても嬉しく思います!

他にも、Amazonのほしい物リストからお選びいただくこともできます。

こちらの関連記事もあわせてどうぞ!