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

13_2パネルのセレクタ(two-panel selector)

インターフェース上に2つのパネルを並べて配置する。1番目のパネルにはユーザが自由に選択できる項目一覧を表示し、2番目のパネルには選択された項目の内容を表示する。例)メールソフト

利用場面

ユーザが一覧全体の構造を概観でき、各自のペースで次々に項目を見ていくこともできるようにしたい場合。

14_カンバスとパレット(canvas and palette)

空白のカンバスの隣に、アイコンを用いたパレットを配置する。ユーザはパレット上の各ボタンをクリックして、カンバス上にオブジェクトを作成する。例)Photoshop

利用場面

グラフィック編集ツール全般をデザインする場合。

15_1ウィンドウでのドリルダウン(one-window drilldown)

単一ウィンドウ内でアプリケーションの各ページを表示する。ユーザがメニュー項目を選択してドリルダウンしていき、項目の詳細に入っていく場合には、ウィンドウ内のコンテンツ全体を入れ替えて新しいページを表示する。例)iPod

利用場面

携帯端末など画面サイズに厳しい制約があるデバイス向けにデザインする場合。

16_代替表示(alternative views)

見た目にも構造的にも、デフォルトの表示とは異なる代替表示を用意し、ユーザが選べるようにする。例)閲覧用フォーマット、印刷用フォーマット

利用場面

Webページなど、何らかのフォーマット化されたコンテンツを表示するものをデザインしている場合。それが色々な条件下で利用される場合。

17_ウィザード(wizard)

あらかじめ決められた順序でタスクを実行しながら、インターフェースを通じてユーザをステップバイステップで導く。例)お問い合わせフォーム

利用場面

長く複雑なタスクを実行するUIをデザインする場合。それがユーザにとってなじみのないタスクである場合。

18_オンデマンド追加項目(extras on demand)

もっとも重要なコンテンツのみをまず表示し、それ以外は隠しておく。隠れた項目は、1回のみの単純な作業で表示できるようにする。例)Wordのテキストカラー選択画面

利用場面

かなり多くのものをページ内に表示しなければならないが、中にはあまり重要でないものも含まれる場合。

19_魅力的な分岐(intriguing branches)

ユーザの興味を引くコンテンツへのリンクを意外な場所に配置し、好奇心旺盛なユーザを誘導するようなラベルを付ける。例)ニュース本文の中にある関連キーワードへのリンク

利用場面

テキスト主体のページなど、ユーザが一本道に沿って移動する場合。そのようなコンテンツでも、主な目的から外れた付加的情報を見せたい場合。

20_マルチレベルのヘルプ(multi-level help)

多様なニーズを持ったユーザをサポートできるように、軽めのヘルプと重めのヘルプを組み合わせる技法を用いる。例)Excelのツールティップ、通常のヘルプメニュー、ヘルプ検索機能、オンライン関連情報

利用場面

複雑なアプリケーションの場合。対象ユーザが中級者から上級者である場合。初心者がエキスパートになるのを手助けしたい場合。

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

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

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

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