BPM グラフィカル ユーザ インタフェース スタイル シート

この付録では、Java Swing クラスに基づいてカスタム プラグインを設計する際に役立つ情報を示します。この付録の内容は以下のとおりです。

• プラグインの設計

• 対話式コンポーネントの操作

• プレゼンテーション コンポーネントの操作

• 推奨参考文献

 

---

プラグインの設計

ユーザの学習ニーズや情報ニーズに合うプラグインを設計するには、対話式コンポーネントの操作やプレゼンテーション コンポーネントの操作に説明した原則を、慎重にプランニングし、系統的に適用する必要があります。

プラグイン パネルを設計する手順は、次のとおりです。

1. BPM の機能をどのように拡張するかを決定します。たとえば、次のプログラミング構成要素の定義と実行時動作をプラグインにより変更できます。

   • アクション

   • 完了ノード

   • イベント ノード

   • 関数

   • メッセージ タイプ

   • 開始

   • テンプレート プロパティ

   • テンプレート定義プロパティ

   • 変数タイプ

2. 構成要素を変更するために必要なタスクを調べます。この場合、各構成要素には個別のパネルが必要です。たとえば、テンプレート プロパティを変更する場合、パネル タスクとして、新しいプロパティの追加、更新、削除の機能（デフォルトでは利用できない機能）を含めることができます。

3. 各タスクを表すコントロールを選択します。次の表に、タスク カテゴリの各タイプの推奨コントロールを示します。

   表 C-1 タスク カテゴリの推奨コントロール

   タスク カテゴリ	コントロール
   相互に排他的なオプションの選択	ラジオ ボタン
   排他的でないオプションの選択	チェック ボックス
   アクションの実行	コマンド ボタン
   セットからの項目の選択	リスト ボックスまたはドロップ ダウン リスト ボックス
   同時に大量の情報の入力または表示	テーブル
   属性値の設定	テキスト入力フィールド

   
    

4. 次のプレゼンテーション要素を適切に使用して、パネル コントロールを表示する方法を決定します。

   • コントロール タイプを区別したり、視覚的に変化を付けるには、カラーを使用します。たとえば、テーブルの行を 1 行おきに目立たせるには、補色関係の 2 色を使用します。このテクニックにより、視覚的に変化がついて、読みやすくなります。

   • すべてのコントロール ラベルに 12 ポイント Arial のレギュラー フォントを使用します。

   • パネル情報の流れは横または縦のいずれかにします。たとえば、項目間を移動できるリスト ボックスでは、横のレイアウトが適しています。一方、縦のレイアウトとしては、テキスト入力フィールドを縦に並べて配置する場合が最適の例です。

   • パネルの垂直、水平、対角線の軸に対して、各コントロールをバランス良く配置します。たとえば、パネルの右下にコマンド ボタンを置いたら、他のコントロールは対角線に沿って配置してバランスを取ります。

5. デフォルトのグラフィックを使用しない場合は、タスクに割り当てたプラグイン アクションを表す 32×32 ピクセルのアイコンを作成します。

6. 各コントロールの値を検証し、構文とデータ型のエラーをチェックします。各エラー条件ごとに、問題を明確に指摘し、解決方法を示唆するエラー メッセージ ダイアログ ボックスを作成します。

 

---

対話式コンポーネントの操作

対話式コンポーネントにより、ユーザはプラグイン パネルと対話できます。適切なコンポーネントを選択するには、単に原則に従うのではなく、業界標準、会社標準、ユーザ ニーズの間のバランスを取る必要があります。

次の節では、対話式コンポーネントを設計するためのガイドラインを示します。

• チェック ボックス

• コマンド ボタン

• リスト ボックス

• ラジオ ボタン

• テーブル

• テキスト入力フィールド

チェック ボックス

チェック ボックスは、データ入力フィールドの代わりとして使用でき、複数の項目を迅速に選択する方法を提供します。次の BPM の例で、適切なチェック ボックスの設計を示します。

図 C-1 チェック ボックスの設計

 

チェック ボックスを設計するには、次のガイドラインに従ってください。

• ユーザがグループから複数の項目を選択できるようにしたり、機能のオン/オフを切り帰られるうにするには、チェック ボックスを使用します。

• グループ ボックスを使用して、複数のチェック ボックスをまとめて表示します。グループ ボックスには、分かりやいラベルを付けます。

• チェック ボックスは縦に並べます。

• チェック ボックスの数は 10 個以下にします。

コマンド ボタン

コマンド ボタンは、ユーザがダイアログ ボックス内での作業を完了するときに最もよく使用される対話式コンポーネントです。次の BPM の例で、適切なコマンド ボタンの設計を示します。

図 C-2 コマンド ボタンの設計

 

コマンド ボタンを設計するには、次のガイドラインに従ってください。

• コマンド ボタンは、[OK]、[取消し]、[ヘルプ]のような頻繁に使用されるアクションに対してのみ使用します。

• コマンド ボタンのラベルは慎重に選定します。アクションの意味を伝える必要がある場合は、複数の単語を使用します。

• コマンド ボタンのサイズは、互いに対応の取れるようにします。一連のボタンのラベルの長さがほぼ同じである場合、すべてのボタンのサイズを最大のボタンに合わせます。一連のボタンのラベルの長さに違いがある場合、2 種類のボタン サイズを使用し、1 つは短いラベル用、1 つは長いラベル用とします。

• 類似した機能を持つコマンド ボタンはグループにまとめます。

• 他のコントロールとコマンド ボタンとの間は余白で分離します。

リスト ボックス

リスト ボックスは、データ入力の代わりの手段を提供します。次の BPM の例で、適切なリスト ボックスの設計を示します。

図 C-3 リスト ボックスの設計

 

リスト ボックスを設計するには、次のガイドラインに従ってください。

• 7 個以上の項目がある場合は、できる限りラジオ ボタンではなくリスト ボックスを使用します。

• 少なくとも 3 個、ただし 7 個以内の項目を同時に表示します。9 個以上の項目がある場合は、縦スクロール バーを追加します。

• リストの項目を説明するようなラベルを選択します。リスト ボックスの上部のラベルは、左詰めにし、最後にコロンを付けます。たとえば、前の図では、ラベル [割り当てるタスク] がリストの上に表示されています。

• 大部分のユーザがリストの最初の項目を選択するような場合は、ドロップ・ダウン リスト ボックスにして、縦方向のスペースを節約します。

ラジオ ボタン

ラジオ ボタンは、多くのデータ入力フィールドの代わりに使用できます。次の BPM の例で、適切なラジオ ボタンの設計を示します。

図 C-4 ラジオ ボタンの設計

 

ラジオ ボタンを設計するには、次のガイドラインに従ってください。

• ラジオ ボタンは、複数の項目から 1 つのみをユーザに選択させる必要がある場合に使用します。

• 各ラジオ ボタンに対して分かりやすいラベルを付けます。

• グループ ボックスを使用して、ラジオ ボックスをまとめて表示します。グループ ボックスには、分かりやいラベルを付けます。

• ラジオ ボタンは縦に並べます。

• ラジオ ボタンの数は 6 個以下にします。

テーブル

テーブルにより、同時にかなりの量の情報を入力したり表示したりできます。次の BPM の例で、適切なテーブルの設計を示します。

図 C-5 テーブルの設計

 

テーブルを設計するには、次のガイドラインに従ってください。

• ユーザがデータの複数の部分を比較する必要がある場合は、テーブルを使用します。

• データの内容を正確に表すカラム ラベルを選択します。

• カラム ラベルは、すべて左詰めで表示します。カラム ラベルの後にコロンを使用しないでください。

テキスト入力フィールド

テキスト入力フィールドは、データ入力時に最もよく使用される対話式コンポーネントです。次の BPM の例で、適切なテキスト入力フィールドの設計を示します。

図 C-6 テキスト入力フィールドの設計

 

テキスト入力フィールドを設計するには、次のガイドラインに従ってください。

• ユーザがデータの入力や編集を行えることを示すために、枠付きのテキスト ボックスを使用します。たとえば、前の図では、[名前] というラベルのボックスがテキスト ボックスです。

• 適切なデータの長さを表すようなフィールド長にします。

• マージンが不統一にならないように、フィールドの左端を合わせて配置します。

• 類似した情報に関係するフィールドはグループ ボックスにまとめます。グループには、分かりやいラベルを付けます。

• 各フィールドに対して分かりやすいラベルを付けます。ラベルはフィールドの左に置き、左揃えにします。

 

---

プレゼンテーション コンポーネントの操作

プレゼンテーション コンポーネントは、ダイアログ ボックスにデータがどのように表示されるかを制御します。プラグインを設計するときには、ユーザがデータを使用して何を行う必要があるかを考慮してください。たとえば、いくつかの情報を比較したり、特定の基準に基づいて選択を行ったりする必要があるかどうかを検討します。情報を適切に表示できるかどうかにより、ユーザがアプリケーションの有用性をどのように感じるかに大きな影響を与えることがあります。

次の節では、プレゼンテーション コンポーネントを設計するためのガイドラインを示します。

• カラー

• ダイアログ ボックスのレイアウト

• フォント

• アイコン

• メッセージ

• 視覚的バランス

カラー

カラーは、ユーザの注意を引くための重要な要素です。カラーを上手に使用し、ダイアログ ボックスの使い勝手を向上させることができます。

カラーを決定する際には、次のガイドラインに従ってください。

• 見た目の美しさ以外にも、カラーを使用する適切な理由を検討します。たとえば、カラーを使用して、サーバの状態が起動中（緑）であるか停止中（赤）であるかを示すことができます。

• 彩度の低い、純色でない色合いを選択します。純色は、画面で明るすぎることが多く、目を疲れさせます。

• 色覚障害のユーザに配慮します。色覚障害では、赤/緑と青/黄は茶色に見えます。したがって、重要な視覚的サインの提供をカラーだけに頼らないでください。

• 対象ユーザの文化における色の意味を考慮します。たとえば、米国では、赤は熱い、危険、停止を意味します。一方、中国では、赤は喜びやお祝いを意味します。

• 似た色、すなわち、緑と青、紫と青のような色環で隣り合うカラー、あるいは灰色と黒のような中性色を使用します。くすんだ色合いは他のどのカラーとも良く調和します。

ダイアログ ボックスのレイアウト

ダイアログ ボックスのレイアウトは、アプリケーションの使いやすさを左右する重要な要素です。レイアウトは、顧客がアプリケーションを使いやすいと感じるかかどうかに影響を与えることがあります。

ダイアログ ボックスのレイアウトを作成するには、次のガイドラインに従ってください。

• ダイアログ ボックスは、ユーザのワークフローに合うように構成します。たとえば、プラグイン機能をサポートする場合、どのようなダイアログ ボックスが必要であるか、どのような順序で表示するか、などを検討します。

• ダイアログ ボックスに複数のタスクのためのコントロールを詰め込まないようにします。各ダイアログ ボックスは、ユーザのワークフローの 1 つのタスクを表すようにしてください。

• 情報の流れは、横または縦のいずれか一方を選択します。各ダイアログ ボックスで同じ流れを使用する必要はありません。ただし、同じダイアログ ボックスに横の流れと縦の流れを混在させないでください。

  横の流れにすると、一般に、ダイアログ ボックスは横に長くなります。この場合、ユーザは、左上すみから情報の処理を開始し、左から右へ移動します。

  縦の流れにすると、一般に、ダイアログ ボックスは縦に長くなります。この場合、ユーザは、左上すみから情報の処理を開始し、上から下へ移動します。次の BPM の例で、縦の情報の流れを示します。

  図 C-7 縦の流れ

  
   

フォント

フォントを適切に選択すると、ダイアログ ボックスのコントロール ラベルが読みやすくなります。次の BPM の例で、適切なフォントの選択を示します。

図 C-8 フォントの選択

 

フォントを選択するには、次のガイドラインに従ってください。

• すべてのコントロール ラベルに 12 ポイント Arial のレギュラー フォントを使用します。

• テキストでのカラー フォントの使用は避けます。もっとも読みやすいテキストは、白地に黒文字です。

• 強調目的での斜体や下線の使用は避けます。

アイコン

アイコンは、プラグイン設計で重要な役割を果たします。プラグインがロードされると、インタフェース ビューの開始ノードとイベント ノードの右上すみに、ワークフローがプラグイン定義されたトリガを持っていることを示す 16×16 ピクセルのアイコンが表示されます。

アイコンは、インタフェース ビューでプラグイン アクションをタスクに割り当てるときにも表示されます。この場合、プラグイン アクションのために用意されているデフォルトのアイコンを使用することも、独自の 32×32 ピクセル アイコンを作成することもできます。次の BPM の例に、Inventory という名前のワークフローで、[開始]、[タスク]、[イベント]、[分岐]、[完了] 表す各アイコンを示します。

図 C-9 [開始]、[タスク]、[イベント]、[分岐]、[完了] を表す各アイコン

 

独自の 32×32 ピクセル プラグイン アクション アイコンを作成するには、次のガイドラインに従ってください。

• 識別のために必要な最低限の情報のみを含めます。写真のように見えるアイコンは避けてください。必要以上に詳細なアイコンは、理解しにくくなります。

• 同じコンセプトを表すには 1 つのアイコンのみを使用します。たとえば、インタフェース ビューの別の部分で、同じプラグイン アクションに対して異なるプレゼンテーションを使用しないでください。

• 意味が明確でないアイコンは作り直します。視覚的イメージを強化するには、ツール ヒントを追加します。

• 国際的に通用するアイコンを設計します。設計の焦点をユニバーサルに受け入れられるプレゼンテーションに置いてください。不快なジェスチャーを使用しないでください。たとえば、文化によっては、指で指すことは不快なこととみなされます。

メッセージ

アプリケーション メッセージは、さまざまなコンテキストで表示され、重大度により分類されます。次に例を示します。

• 通知メッセージは、決定に役立つヒントをユーザに提供します。

• 警告は、失敗につながる可能性のある状況をユーザに警告します。

• エラー メッセージは、1 つまたは複数のコンポーネントが失敗したことを示します。

次の BPM の例で、適切なメッセージの設計を示します。

 

図 C-10 エラー メッセージ

 

メッセージ テキストを書く場合、ユーザがどのような対応を取るかを予測し、それを理解することが重要です。ユーザにとって意味のあるメッセージを作成するには、次のガイドラインに従ってください。

• ユーザがよく知っている用語を使用します。暗号のようなテキストや理解しにくいテキストは避けます。

• 簡潔で明確なメッセージを作成します。テキストは 2〜3 文の短いものにします。

• エラー メッセージは、2 つの部分に分けます。最初の部分では、どのようなエラーが発生したかをユーザに伝えます。2 番目の部分では、エラーの解決方法をユーザに示します。

視覚的バランス

バランスとは、水平、垂直、対角線の軸に対して、設計の中で要素の比重がどのように構成されているかを表します。軸のどちらの側にあるコントロールも、サイズ、カラー、類似性、配置などの点で、互いにバランスよく見えるようにします。

ダイアログ ボックスにコントロールをバランスよく配置するには、次のガイドラインに従ってください。

• コマンド ボタンは、他のコントロールとバランスが取れるようにダイアログ ボックスに配置します。

  情報の流れが横である場合、コマンド ボタンを縦に並べ、ダイアログ ボックスの右側に置きます。ボタンをダイアログ ボックスの上部、中央、下部にボタンを移動しながら、左側のもっと大きなコントロールや暗いコントロールとのバランスを確認します。ボタンと他のコントロールが垂直軸に対して対称になるように調整を続けてください。

  情報の流れが縦である場合、コマンド ボタンを横に並べ、ダイアログ ボックスの下部に置きます。この場合、ボタンをダイアログの左端または右端に移動しながら、上部のもっと大きなコントロールや暗いコントロールとのバランスを確認します。ボタンと他のコントロールが水平軸に対して対称になるように調整を続けてください。

• ダイアログ ボックスのサイズは、できるだけ黄金比（1:1.6）になるようにします。この比率は、特に芸術、建築、数学（フィボナッチ数列）で使用されてきたもので、すべての図形の中で最も視覚的満足感のあるものの 1 つです。

• 情報の流れが横のダイアログ ボックスでは、2 列に並べたレイアウトを使用します。それぞれの列で、各コントロールの上と下のラインができるだけ揃うように、バランスよくコントロールを配置します。次の BPM の例で、2 列に構成した横の情報の流れを示します。

  図 C-11 横のレイアウト

  
   

  
   

  
   

 

---

推奨参考文献

直感的で使いやすいインタフェース設計の詳細については、次の文献を参考にしてください。

• 『About Face: The Essentials of User Interface Design』（Alan Cooper、1995年）

• 『GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers』（Jeff Johnson、2000年）

• 『The Elements of User Interface Design』（Theo Mandel、1997年）

• 『The Usability Engineering Lifecycle: A Practioner’s Handbook for User Interface Design』（Deborah Mayhew、1999年）

• 『Usability Engineering』（Jakob Nielsen、1994年）

• 『User and Task Analysis for Interface Design』（Joann Hackos and Janice Redish、1998年）