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

44_ボタンのグループ(button groups)

関連のあるアクションを、縦か横に整列した小さなボタンの集まりとして表現する。3つか4つより多いアクションがある場合には、その集まりを複数作る。例)アプリケーションの設定ダイアログボックスの、右の「上に移動」「下に移動」「削除」、右下の「OK」「キャンセル」

利用場面

「OK」「キャンセル」「適用」「閉じる」などのボタンがグループ化されているのと同様に、「上に移動」「下に移動」「削除」などを扱うボタンもグループ化すべき。

45_アクションパネル(action panel)

メニューを用いる代わりに、リッチな構成で常時表示させるUIパネルの中に、関連するアクションを含む大きなグループを表示する。例)Office の右側にあるアクションパネル

利用場面

46_目立つ「完了」ボタン(prominent “done” button)

視覚的な流れの終了地点に、処理を完了するためのボタンを配置する。ボタンは大きく、分かりやすいラベルの付いたものにする。例)パネルの右下の「完了」ボタン

利用場面

インターフェースに「完了」「送信」「OK」などのボタンを置く必要がある際には必ずこのパターンを利用する。

47_動的なメニュー項目(smart menu items)

あるメニュー項目を呼び出すと何が起こるのかを正確に示すため、メニューのラベルを動的に変更する。例)ファイルのメニュー項目の、「取り消し」「カット」「コピー」「ペースト」など

利用場面

何をすることになるのかを正確に示すメニュー項目は、UIを説明不要なものにする。

48_プレビュー(preview)

あるアクションを実行したら何が起こるかについて、プレビュー画面または概要をユーザに示す。例)印刷プレビュー画面

利用場面

大きなファイルを開いたり、10ページ分の文書を印刷したり、ユーザがヘビー級のアクションを実行しようとしている場合。もし操作を誤ると、時間の浪費や損失が大きくなってしまう場合。

49_プログレス表示(progress indicator)

時間を要する処理について、どれくらい進行したかをユーザに示す。例)アプリケーションの実行中に表示されるプログレスバー

利用場面

時間を要する処理が、約2秒以上UIに割り込んだり、バックグラウンドで実行されたりする場合。

50_キャンセル機能(cancelability)

時間を要する処理を、副作用を起こすことなく即座にキャンセルする方法を用意する。例)「読み込みを中止します」などのボタン

利用場面

システムとの他のやりとりをほとんど遮断するような作業にユーザが従事している場合。

51_マルチレベルのアンドゥ(multi-level undo)

ユーザが実行した一連のアクションを、逆の順序で簡単に元に戻せる方法を用意する。例)Photoshopのヒストリ

利用場面

簡単なナビゲーションやフォーム入力よりも複雑な、インタラクティブ性の高いUIをデザインしている場合。

52_操作の履歴(command history)

ユーザがアクションを実行するのに従い、何が実行されたのか、何に対していつ操作が行われたのかを視覚的に記録しておく。例)コマンドログの表示

利用場面

ユーザがGUIまたはコマンドラインを用いて、長く複雑な一連のアクションを実行する場合。

53_マクロ(macros)

マクロは、より小さな別々のアクションで構成された、単一のアクションである。ユーザは、連続するアクションをまとめることによってマクロを作成できる。例)Photoshopのアクション

利用場面

ユーザが長く連続するアクションやコマンドの実行を繰り返したいと考えている場合。

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

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

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

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