[ 前のページ ] [ 次のページ ] [ 目次 ] [ 索引 ]


1 ダイアログ・ボックスの設計

ダイアログ・ボックスはメッセージを表示したり,ユーザの入力を促したりします。 この章では,有効なダイアログ・ボックスを設計するためのガイドラインを示します。

次のような場合にはダイアログ・ボックスを使用するのが有効です。

効果的なダイアログ・ボックスを設計するためには,次のことを理解しておく必要があります。

この章では,またダイアログ・ボックス作成の実施に関連した以下のトピックについても取り扱います。

1.1 ダイアログ・ボックスの種類と位置の決定

DECwindowsのアプリケーションは1つ以上の1次ウィンドウとそれに関連するダイアログ・ ボックスで構成されます。ダイアログ・ボックスは2次ウィンドウとも呼ばれます。Motif ウィンドウ・マネージャのもとでは,2次ウィンドウは次の特徴を持っています。

ダイアログ・ボックスの特徴はすべてDECwindows Motifツールキットによって与えられています。 つまり,ダイアログ・ボックスがBulletinBoard またはFormウィジェットの サブクラスである限り,2次ウィンドウを親によって最小化したり復元したりするためのコーディングを行う必要はありません。

1.1.1 ダイアログ・ボックスの種類

ダイアログ・ボックスにはモードなしとモード付きの2種類があります。

モードなし

モードなしの場合,ダイアログ・ボックスが表示されている間も,アプリケーションの他のウィンドウで作業することができます。 たとえば,図 1-1はダイアログ・ ボックスが表示されていても, ユーザが1次ウィンドウに文字入力できることを示しています。 モードなしダイアログ・ボックスにより,ユーザの作業環境は柔軟性に富んだものになります。

ダイアログ・ボックスの大部分はモードなしで作成する方が良い結果が得られます。

図 1-1 モードなしダイアログ・ボックスの場合は他のウィンドウでも作業できる


プログラミングのヒント

省略時のダイアログ・ ボックスの設定は「モードなし」です。モードなしのダイアログ・ ボックスを使用するには,XmDialogStyleをXmDIALOG_MODELESSに設定します。

ダイアログ・ボックスをモード付きにするには, XmFormまたはXmFormのサブクラスを使用してXmDialogStyle を次の値の1つに設定します。

また,ダイアログ・ボックスをXmBulletinBoardを使用してモード付きに設定することもできます。 しかし,XmBulletinBoardは,特別なジオメトリ情報の取り扱いが必要な場合にのみ使用すべきです。

Note that XmDIALOG_PRIMARY_APPLICATION_MODALがXmDIALOG_ APPLICATION_MODALに置き替わっていることに注意が必要です。新しいアプリケーションでは,XmDIALOG_PRIMARY_APPLICATION_MODAL だけが使用されます。


モード付き

モード付きの場合,ダイアログ・ボックスが表示されている間は特定のウィンドウに対する処理を禁止します。 モード付きダイアログ・ボックスは,1 次アプリケーション・モード付きとフル・アプリケーション・モード付きの2種類があります。 どちらを使用するかは,アプリケーションと表示するダイアログ・ ボックスの性質によって決まります。次にそれぞれのモード付きダイアログ・ ボックスについて説明します。

1.1.2 ダイアログ・ボックスの配置

ダイアログ・ボックスのモードを決定したら,各ダイアログ・ボックスを画面上のどこに配置するか, またネストするかどうかを決めなければなりません。

1.1.2.1 1つのダイアログ・ボックスを配置する

親ウィンドウ(1次ウィンドウ)の情報を見たり使用したりする必要のないようなダイアログ・ ボックスの場合は,図 1-3に示すように, 親ウィンドウの作業領域の中心にダイアログ・ ボックスを表示させてください。こうすることにより,マウスの移動とユーザの視線の移動を最小限に抑えることができます。

しかし,親ウィンドウにある情報を見たり使用したりできるようにする必要のあるダイアログ・ ボックスの場合は,ダイアログ・ボックスを親ウィンドウの横または下に配置してください。 ダイアログ・ボックスに最適な位置は, アプリケーションによって異なります。

図 1-3に示すように, 画面の左上,すなわち(0,0) にはダイアログ・ボックスを配置しないでください。この位置に配置すると, ユーザの観点からみて,アプリケーションの1次ウィンドウの位置とはほとんど関係を持たない意味のない配置となります。

図 1-3 ダイアログ・ボックスを適切に配置する


プログラミングのヒント

ウィンドウがXmBulletinBoardDialog またはXmFormDialogの場合,ツールキットによってダイアログ・ ボックスは親ウィンドウの中心に配置されます。ウィンドウがXmBulletinBoard のサブクラスでない場合は,ダイアログ・ボックスは画面の左上の(0,0) に配置されます。この場合は,ダイアログ・ボックスのX 座標とY座標の値を指定してください。


ダイアログ・ボックスをユーザが移動した後そのダイアログ・ボックスをもう一度表示させる場合は, 必ず移動した位置を尊重してください。たとえば, 省略時にダイアログ・ボックスを親ウィンドウの中心に表示し,ユーザがそれを親ウィンドウの下に移動させたとします。 ユーザがそのダイアログ・ ボックスを次に呼び出した時はユーザが最後に移動させた場所, つまり1次ウィンドウの下に表示させるようにしてください。

ダイアログ・ボックスの位置を保管する場合は,親ウィンドウに対しての相対的な位置ではなく, 画面上の座標の位置で保管するようにしてください。 たとえば,前の例で親ウィンドウを画面の中心から右上に移動させ, その後ダイアログ・ボックスをもう一度呼び出したとします。この場合, 親ウィンドウの真下ではなく,画面の中心の下側,つまりユーザが最後に配置した場所にダイアログ・ ボックスを表示するようにしてください。

1.1.2.2 複数のダイアログ・ボックスをネストする

1つのダイアログ・ボックスに含めるには情報量が多すぎる場合,複数のダイアログ・ ボックスを作成します。これをダイアログ・ボックスをネストするといいます。 最初のダイアログ・ボックスには必須でかつ共通の機能を入れ, 以降のダイアログ・ボックスには共通性の低い機能を入れて, ネストしたダイアログ・ボックスを編成します。

最初のダイアログ・ボックスに最も重要でよく使う制御ボタン類を入れて, ほとんどの場合に最初のダイアログ・ボックスだけを使用すればいいように設計します。 どの制御ボタンを最もよく使用するかを理解するために, ダイアログ・ボックスの設計には実際にアプリケーションを使用するユーザにも参加してもらうとよいでしょう。 基本操作は最初のダイアログ・ ボックスのみで終了でき,2次ダイアログ・ボックスを開く必要がないように設計するべきです。 ただし,オプションが使用可能であることがユーザにわかるように設計してください。

ダイアログ・ボックスに,プッシュ・ボタンを押す操作以外に5〜7つの操作が含まれる場合は, ネストすることを考えます。たとえば,テキストを入力する, ラジオ・ボタンを選択する,リスト・ボックス内のアイテムを1 つ選択する等の操作が考えられます。ただし,ダイアログ・ボックスのネストのレベルは3 段階までにします。

1次ダイアログ・ボックス上のプッシュ・ボタンを選択して,2次ダイアログ・ ボックス(ネストしたダイアログ・ボックス)を起動します。1つの2 次ダイアログ・ボックスしか起動しない場合は,プッシュ・ボタンのラベルに「オプション... 」を使用します。図 1-4に例を示します。

図 1-4 2次ダイアログ・ボックスの存在を示す「オプション...」プッシュ・ボタン

反復記号(...)はボタンを押すとダイアログ・ボックスが起動することを示します。 ただし,反復記号は「ヘルプ」ボタンには使用しません。

1次ダイアログ・ボックスから複数の2次ダイアログ・ボックスを起動することもできます。 ただし,その場合はプッシュ・ボタンに操作の内容を明確にラベル表示してください。 たとえば,1つを「パターン...」とし,もう1 つを「テンプレート...」とします。

どの制御ボタンをネストするかを決める場合,サンプルのダイアログ・ボックスを設計し, どれが最良の配置か,またどの制御ボタンを1次ダイアログ・ ボックスに入れるのがよいかをユーザにたずねてみるとよいでしょう。 たとえば,図 1-5はプッシュ・ ボタンを押すステップの他に7 つのステップをもつダイアログ・ボックスの例です( 「性別」の3つのラジオ・ボタンがそれぞれ1つのステップを構成します) 。このダイアログ・ボックスは非常に煩雑で,多くのユーザはその複雑さゆえに尻込みしてしまうでしょう。

図 1-5 ステップの多すぎるダイアログ・ボックス

このような場合,1次ダイアログ・ボックスにはユーザが頻繁に実行するステップだけを入れ, 頻度の低いその他のステップは2次ダイアログ・ ボックスに入れて,ネストしたダイアログ・ボックスを作成します。図 1-6 に再編成したダイアログ・ボックスの例を示します。

図 1-6 ステップの多すぎるダイアログ・ボックスのネスト

ネストしたダイアログ・ボックスの配置には,次の2つのテクニックがあります。

これらの2つのテクニックは,ネストしたダイアログ・ボックスは1次ダイアログ・ ボックスよりも小さくなるという想定のもとに同時に使用することができます。 ネストしたダイアログ・ボックスを最初のボックスよりも小さくできない場合は, ネストしたボックスのプッシュ・ボタンを最初のボックスのプッシュ・ ボタンにできるだけ近づけて配置してください。

図 1-7 ダイアログ・ボックスをネストする


プログラミングのヒント

2次ダイアログ・ ボックスがXmBulletinBoardのサブクラスでない場合はダイアログ・ ボックスのX座標とY座標を指定する必要があります。


1.2 ウィンドウの装飾

ウィンドウ・マネージャはどのウィンドウに対してもいくつかの種類の装飾を与えます。 すべてのウィンドウには次の装飾が自動的に設定されます。

ダイアログ・ボックスには次の装飾のみを指定してください。

これらの装飾は省略時の設定です。図 1-8 は,1次ウィンドウの装飾と2次ウィンドウの装飾を比較したものです。

図 1-8 1次ウィンドウおよび2次ウィンドウの装飾

1.2.1 ダイアログ・ボックスのタイトル

各ダイアログ・ボックスにはタイトルをつけてください。タイトルを構成する要素には次のものがあります。

図 1-9に例を示します。

ダイアログ・ボックスのタイトルとしてメニュー項目と共にメニュー名を含めることもできます。 たとえば,ユーザがオプション・メニューをプル・ ダウンし,メニュー項目から「ウィンドウ」を選択したとします。この場合, 次のようなタイトルをダイアログ・ボックスに付けます。

           メール: ウィンドウ オプション

この場合,「メール」はアプリケーション名,「ウィンドウ」はメニュー項目名, 「オプション」はメニュー名となります。

図 1-9 ダイアログ・ボックスの適切なタイトルと不適切なタイトル

図 1-9には不適切なタイトル例も示しています。 この例では不適切なタイトルとしてウィジェット名を使用しています。 ウィジェット名はユーザにとって何の意味もありません。したがってダイアログ・ ボックスのタイトルには使用するべきではありません。


プログラミングのヒント

ダイアログ・ ボックスのタイトルの設定には,XmNdialogTitleリソースを使用してください。


1.2.2 ダイアログ・ボックスのサイズ変更

ダイアログ・ボックスにサイズ変更枠を組み入れるかどうかについては, 次のガイドラインを参考にしてください。

図 1-10 テキスト入力フィールドやリスト・ ボックスを含むダイアログ・ボックスにはサイズ変更枠を使用する

サイズ変更枠をつける場合は,次のガイドラインを守ってください。


プログラミングのヒント

ダイアログ・ ボックス内のコントロール類のサイズやレイアウトを拡大するには,XmForm ウィジェットもしくはXmFormDialogウィジェットを使用して, 拡大,縮小する必要のあるコントロールの左右アタッチメントを指定してください。 プッシュ・ボタンを適切に拡大,縮小させるには, DXmFormSpaceButtonsEquallyを使用してください。


図 1-15 ダイアログ・ボックスのサイズと比例してレイアウトを変化させる

1.3 プッシュ・ボタンの作成

この節では,ダイアログ・ボックスのプッシュ・ボタンの作成と配置についてのガイドラインとプログラミングのヒントについて説明します。

1.3.1 省略時のプッシュ・ボタン

すべてのダイアログ・ボックスには省略時のプッシュ・ボタンを設定してください。

省略時のプッシュ・ボタンとは,ユーザがリターン・キーを押すことによって選択されるボタンです。 ユーザはリターン・キーを押し,作業を続けることができます。 省略時のプッシュ・ボタンを指すと,図 1-16 に示すように,Motifが強調表示を加えて自動的に表示されます。


プログラミングのヒント

省略時のプッシュ・ ボタンを使用可能にするには,UILファイル内の省略時のボタン・ ウィジェットの名前にXmNdefaultButtonを設定します。F11(エスケープ・ キー)を取消しキーとして使用可能にするには,UILファイル内の取消しボタン・ ウィジェットの名前にXmNcancelButton を設定します。


1.3.2 取消ボタン

必要な場合には,ダイアログ・ボックスに「取消」プッシュ・ボタンを与えてください。


プログラミングのヒント

F11(エスケープ・ キー)を取消しキーとして使用可能にするには,UILファイル内の取消しボタン・ ウィジェットの名前にXmNcancelButtonを設定します。


1.3.3 プッシュ・ボタンのラベル

プッシュ・ボタンのラベルは図 1-16 に示すようにセンタリングしてください。省略時の設定でセンタリングされますので, それを無効にしないようにしてください。

ダイアログ・ボックスの標準プッシュ・ボタンを使用するときは,次に示す順のいずれかに従うようにしてください。

つねに,「了解」ボタンが一番最初に,「ヘルプ」ボタンが一番最後となるように配置してください。 「取消」ボタンは,次の唯一の例外を除いて, 最後のボタンの一つ前に配置します。「オプション...」ボタン,または他のダイアログ・ ボックスを表示する別のボタンがある場合が例外で, この場合は、そのボタンを「取消」と「ヘルプ」ボタンの間に配置する必要があります。

1.3.4 プッシュ・ボタンの配置

プッシュ・ボタンは,図 1-16 で示すように, 下部全体にわたって横に配置するか,図 1-17 で示すように,ダイアログ・ ボックスの右上付近に縦に配置してください。

1.3.4.1 プッシュ・ボタンの横配列

ボタンを横に配置する場合の好ましい方法は次の2つです。

ダイアログ・ボックスが細長い,あるいはボタンの数が多い場合は,どちらも方法も効果的です。 ただし,ダイアログ・ボックスの幅が広い,あるいはボタンの数が少ない場合には, 左右のマージンを等しくして,ボタン全部を中央に配置する必要があります。 このように配置すると,ボタン間で必要なマウスの移動が最小限に抑えられます。

一番目の方法では,ボタンの間隔とマージンを等間隔にしてください。つまり, 左端から最初のボタンまでの間隔と各ボタン間の間隔を等しくし, さらに最後のボタンと右端までの間隔も他の各ボタンの間の間隔と等しくなるようにしてください。 ダイアログ・ボックスの下部に等間隔に並べたプッシュ・ ボタンの例を図 1-16に示します。

図 1-16 ダイアログ・ボックスの下部に等間隔に配置したプッシュ・ ボタン


プログラミングのヒント

DECでは, プッシュ・ボタンを等間隔で等サイズになるように,フォーム・ウィジェットにプッシュ・ ボタンを設定するルーチンDXmFormSpaceButtonsEqually を提供しています。次のコード例を利用してください。

         DXmFormSpaceButtonsEqually (parent,widget_list,num_widgets)
             Widget     my_form;
             Widget     *widget_list;
             Cardinal   num_widgets;
ここで

二番目の方法では,中央にボタンを配置するために,アタッチメントを使用して真ん中のボタンをダイアログ・ ボックスの相対的な位置にアタッチしてください。

ボタンの数が奇数または偶数の場合のセンタリングには、次のプログラミングのヒントを使用してください。


プログラミングのヒント

このプログラミングのヒントはボタンが奇数個の場合に役立ちます。 この例では、 「了解」,「適用」,「リセット」,「取消」,「ヘルプ」の5個のボタンが配置されています。

ボタンのセンタリングをするには,最初に,「リセット」ボタンの左側をダイアログ・ ボックス幅の中間点にアタッチします。その後で, XmNleftOffsetをボタンのサイズの半分に設定します。

             reset_args : arguments
                 {
                     XmNlabelString = "Reset";
                     XmNwidth = 1500;
                     XmNleftAttachment = XmATTACH_POSITION;
                     XmNleftPosition = 50;
                     XmNleftOffset = -750;     /* font units */
                 };
ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は, 実行時にレイアウトを修正がすることが可能です。次のステップに従ってください。

  1. ボタン全部を見て/調べて,一番大きなボタンのサイズを計算します。

  2. すべてのボタンの幅を,最大のボタンに少しスペースを加えたサイズに設定します。 この追加スペースをつけることによって,テキストがボタンの枠に入り込むことがなくなります。 ボタン全部のテキストが短い場合は, ボタンの最小のサイズを「取消」ボタンの幅にだいたい等しく設定します。

  3. 真ん中のボタンのXmNleftOffsetをボタンのサイズの半分に設定します。

  4. 必要に応じて,他のボタンを「リセット」ボタンの左または右側にアタッチします。 各々のボタンに間に約200フォント・ユニット分のオフセットを置きます。
                 left_button_args : arguments
                     {
                         XmNwidth = 1500;
                         XmNrightAttachment = XmATTACH_WIDGET;
                         XmNrightOffset = 200;     /* font units */
                     };
    
                 right_button_args : arguments
                     {
                         XmNwidth = 1500;
                         XmNleftAttachment = XmATTACH_WIDGET;
                         XmNleftOffset = 200;     /* font units */
                     };
    
    使用ボタンが大体同じサイズでない場合は,第1.3.5項の長いプッシュ・ ボタンのプログラミングのヒントを参照してください。


プログラミングのヒント

このプログラミングのヒントはボタンが偶数個の場合に役立ちます。この例では、 「了解」,「リセット」,「取消」,「ヘルプ」の4個のボタンが配置されています。

ボタンのセンタリングをするには,最初に,「リセット」を中央に近くに配置し, ボタンの右側をダイアログ・ボックス幅の中間点にアタッチします。 その後で,XmNrightOffsetをボタンの間のスペースのサイズの半分に設定します。

             reset_args : arguments
                 {
                     XmNlabelString = "Reset";
                     XmNwidth = 1500;
                     XmNrightAttachment = XmATTACH_POSITION
                     XmNrightPosition = 50;
                     XmNrightOffset = 100;     /* font units */
                  };
ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は, 実行時にレイアウトを修正がすることが可能です。次のステップに従ってください。

  1. ボタン全部を見て/調べて,一番大きなボタンのサイズを計算します。

  2. すべてのボタンの幅を,最大のボタンに少しスペースを加えたサイズに設定します。 この追加スペースをつけることによって,テキストがボタンの枠に入り込むことがなくなります。 ボタン全部のテキストが短い場合は, ボタンの最小のサイズを「取消」ボタンの幅にだいたい等しく設定します。

  3. 必要に応じて,他のボタンを「リセット」ボタンの左または右側にアタッチします。 各々のボタンに間に約200フォント・ユニット分のオフセットを置きます。
                 left_button_args : arguments
                     {
                         XmNwidth = 1500;
                         XmNrightAttachment = XmATTACH_WIDGET;
                         XmNrightOffset = 200;     /* font units */
                     };
    
                 right_button_args : arguments
                     {
                         XmNwidth = 1500;
                         XmNleftAttachment = XmATTACH_WIDGET;
                         XmNleftOffset = 200;     /* font units */
                     };
    
    使用ボタンが大体同じサイズでない場合は,第1.3.5項の長いプッシュ・ ボタンのプログラミングのヒントを参照してください。

1.3.4.2 プッシュ・ボタンの縦配列

プッシュ・ボタンを縦に配置した場合は,省略時のプッシュ・ボタンを一番右上の位置に配置し, 他のプッシュ・ボタンをその下に並べてください。 上下のプッシュ・ボタンの間隔は,省略時メニュー・フォントの45 フォント・ユニット分としてください。図 1-17 は縦に配置したプッシュ・ボタンの例です。

図 1-17 ダイアログ・ボックスの側面に縦に配置したプッシュ・ ボタン

1.3.5 プッシュ・ボタンの寸法

各プッシュ・ボタンのラベルの長さが異なる場合であっても,すべてのプッシュ・ ボタンは同じ寸法にしてください。ただし,1つのラベルだけがとくに長い場合, 他のボタンはすべて同じ寸法にするのであれば,そのボタンだけ大きくしても構いません。

ボタンが横に並んでいる場合は,大きいボタンは他のボタンよりも幅が広くても構いませんが, 他のボタンより高くなってはいけません。ボタンが縦に並んでいる場合は, 大きいボタンは他のボタンよりも高くても構いませんが, 他のボタンより幅を広げてはいけません。図 1-18 を参照してください。


プログラミングのヒント

アプリケーションが各国語対応された場合, 長いプッシュ・ボタンのラベルが翻訳されて短くなる場合もあります。

各国語対応されるアプリケーションの場合は,簡単に変換できるよう,サイズ決めと位置決めのリソースをUIL インクルード・ファイルに入れておいてください。 たとえば,プッシュ・ボタンのサイズを固定して使用している場合, そのサイズをUILインクルード・ファイルの中で定義し,コメントを付けておきます。 ほとんどのボタンは

         normal_width
のような文字に定義できるでしょう。 また,サイズが大きいものは
         long_width
のような文字に定義できるでしょう。

そしてそれらの値を次のように設定します。

         value
             normal_width = 50;
             long_width = 100;  /* width of the longest button*/
プッシュ・ボタンのXmNwidthリソースを定義するときにこれらの文字を参照します。 各国語対応にする時点でボタンのラベルの幅を変える場合は, これらの文字の値を変更するだけで済みます。

図 1-18 他よりも大きいプッシュ・ボタンの扱い方

1.3.6 「ヘルプ」プッシュ・ボタン

「ヘルプ」プッシュ・ボタンを含める。

ユーザが「ヘルプ」プッシュ・ボタンを押すと,ダイアログ・ボックスについての概要の説明が表示されます。 追加トピックを入れ,ダイアログ・ ボックス内の各制御ボタンの使い方に関する詳しい説明を加えても構いません。 ただし,ユーザに対する簡単なメッセージの場合は「ヘルプ」プッシュ・ ボタンを使用する必要はありません。オンライン・ヘルプの設計についての詳しい説明は, 第5章を参照してください。

警告またはエラー・ダイアログ・ボックスで,1〜2行の文でエラーの説明とその解決方法を示すことができない場合は, そのダイアログ・ボックスに「ヘルプ」プッシュ・ ボタンをつけてください。ダイアログ・ボックス内に表示したエラーまたは警告メッセージに関する説明をヘルプ・ ウィンドウに表示し, トラブルの解決方法を示します。

1.4 標準メッセージ・ダイアログ・ボックスの使用

メッセージ・ダイアログ・ボックスは,エラー・メッセージ,警告,アプリケーションの状態といった情報をユーザに提供します。 また,ユーザに質問するものもあります。

他のダイアログ・ボックスと同様に,メッセージ・ボックスにもウィンドウ・ メニューとタイトル領域があります。各メッセージ・ボックスには対応するアイコンがあり, そのボックスの目的を示します。

メッセージ・ダイアログ・ボックスを作成する際には,デザインについての以下の事項を配慮してください。

標準メッセージ・ダイアログ・ボックスのタイトルは次の要素から構成されます。

タイトルで操作を指定して,ユーザがメッセージ・ボックスのコンテキストに関してできるだけ詳しい情報が得られるようにします。 たとえば,メッセージ・ ボックスに次のタイトルの2つのいずれかを使用して,電子メール・ ホルダの削除を希望するかを問うことができますが,最初のものの方がユーザに多くの情報を伝えることになります。

         Mail: Delete Folder

         Mail: Question

メッセージ・ダイアログ・ボックスでは完全な文または文に準じた語順を使う必要があります。 実際の文章で使用すると同じように句読点を加えてください。 メッセージは簡潔になるように心掛け,素早く,簡単に読めるようにします。 ただし,冠詞のthea,接続詞の andなどを省かないようにしてください。テキストを作成する際には, 他の言語に翻訳される場合があることに留意してください。

一般的には,システムのエラー・コードをメッセージに使用することは避けます。 その代わりに,ユーザが実行できる動作の記述を組み込みます。 これ以外の情報は該当するメッセージ・ボックスの「ヘルプ」テキストに配置します。

ダイアログ・ボックスに文を1つ以上を含める必要がある場合は,最後の文または質問の前に空白行一行を追加してください。 この空白行の追加により, ユーザがボタンの1つを押したときに,どのようになるかに直ちに集中することができます。

ダイアログ・ボックスでは,用語「中止(Abort)」ではなく,「取消(Cancel )」を使用することに注意してください。

ユーザがメッセージ・ボックスを表示させる同じ操作を実行した場合は, 二番目のメッセージ・ボックスは表示しないでください。その代わりに, 同じメッセージ・ボックスを再使用します。ただし,画面の一番上にそれを配置してください。 同一ボックスの再使用により,画面に多くのメッセージ・ ボックスが表示されて煩雑な状態になることが避けられます。

一般的には,アプリケーションのメッセージ毎に新しいダイアログ・ボックスを表示することはしないでください。 含まれているテキストを交換して, 1個または数個の標準メッセージ・ウィンドウを再使用するように心掛けてください。 ユーザがその前のメッセージを表示できることが重要である場合は, スクロールしたウィンドウに新しいメッセージを付加してください。

DECwindowsアプリケーションを作成する場合は,次の5種の標準メッセージ・ ダイアログ・ボックスのなかから1個以上を選んで使用してください。

1.4.1 質問ダイアログ・ボックス

ユーザに質問する場合には,質問ダイアログ・ボックスを使用してください。 たとえば,図 1-19に示すように, エラーや警告を表示した後で質問をする場合は質問ダイアログ・ ボックスを使用します。質問メッセージ・ボックスはアプリケーション・ モード付きにします。

図 1-19にあるように, 質問ダイアログ・ ボックスは,質問であることを示すアイコンとともに表示します。 ボックスのタイトル,質問内容,そして適切なラベルのプッシュ・ボタンで構成します。

図 1-19 質問ダイアログ・ボックスの例


プログラミングのヒント

メッセージ・ ボックスをアプリケーション・モード付きにするには,XmNdialog StyleリソースをXmDIALOG_FULL_APPLICATION_MODALに設定します。


リターン・キーを押したときに選択される省略時のプッシュ・ボタンは, ユーザが選択する可能性の最も高いものを設定します。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

1.4.2 エラー・ダイアログ・ボックス

ユーザがエラーを引き起こした場合には,エラー・メッセージ・ボックスを表示させます。 たとえば,存在しないディレクトリにファイルを書き込もうとした場合などです。 メッセージ・ボックスでエラーを伝えた後に質問をする場合は, 質問ダイアログ・ボックスを使用します。ユーザの操作以外の原因でエラーが発生した場合は, 情報ダイアログ・ボックスを使用します。 エラー・ダイアログ・ボックスはアプリケーション・モード付きに設定します。

エラー・ダイアログ・ボックスにはエラーであることを表わすアイコンがついています。 エラー・ダイアログ・ボックスは図 1-20に示すように, タイトル,エラーの内容,適切にラベル表示したプッシュ・ ボタンで構成します。ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定します。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

図 1-20 エラー・ダイアログ・ボックス

Motifではエラー・ダイアログ・ボックスの中でも「取消」ボタンを使用することができます。 ただし,「了解」プッシュ・ボタンを押した場合と結果が異なる場合だけ「取消」プッシュ・ ボタンを使用してください。

1.4.3 情報ダイアログ・ボックス

エラー以外の情報を表示する場合,あるいはユーザの操作以外の原因でエラーが発生した場合には, 情報ダイアログ・ボックスを使用します。この情報は平叙文で記述しなければなりません。 質問文で記述する場合は,質問ダイアログ・ ボックスを使用します。情報ダイアログ・ボックスはモードなしに設定します。

情報ダイアログ・ボックスには情報であることを表わすアイコンがついています。 情報ダイアログ・ボックスは図 1-21に示すように, タイトル,文,および適切にラベル表示したプッシュ・ボタンで構成します。 ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定してください。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

図 1-21 情報ダイアログ・ボックス

1.4.4 警告ダイアログ・ボックス

ユーザがある操作をするとトラブルを引き起こす可能性のある場合,これを警告するために警告ダイアログ・ ボックスを使用します。警告ダイアログ・ ボックスは,アプリケーション・モード付きに設定してください。

警告ダイアログ・ボックスには警告であることを表わすアイコンがついています。 警告ダイアログ・ボックスは図 1-22に示すように, タイトル,メッセージ,および適切にラベル表示したプッシュ・ ボタンで構成します。ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定します。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

「はい」と「いいえ」のラベルが組み合わせの中に含まれています。 Motifでは,「はい」と「いいえ」のプッシュ・ボタンを使用して警告ダイアログ・ ボックスの中で質問をすることも可能ですが,質問する場合は質問ダイアログ・ ボックスを使用するのがよいでしょう。

図 1-22 警告ダイアログ・ボックス

1.4.5 処理中ダイアログ・ボックス

処理中ダイアログ・ボックスは,処理中であることを表示し,ユーザはその処理を取り消すことができます。 処理中ダイアログ・ボックスはモードなしに設定してください。 処理中ダイアログ・ボックスには処理中であることを表わすアイコンがついています。 処理中ダイアログ・ボックスは図 1-23 に示すように,タイトル,メッセージ, および適切にラベル表示したプッシュ・ボタンで構成します。ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定します。 破壊的な結果ともなう可能性のあるものを省略時のプッシュ・ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

図 1-23 処理中ダイアログ・ボックス

1.5 意味のある視覚に訴えるレイアウト

ダイアログ・ボックスは機能的であるだけでなく,それぞれの構成要素を視覚に訴えるように編成することが大切です。 ダイアログ・ボックスの制御ボタン類を上手にレイアウトすると, ユーザは作成したダイアログ・ボックスを最大限に活用することができます。

制御ボタン類の編成をする際には,グラフ用紙や,グリッドのついたオンライン作図ツール, あるいはインターフェイス設計ツール(IDT)を使用して各ダイアログ・ ボックスをスケッチしてみるとよいでしょう。

1.5.1 関連する選択肢を図形的にグループ化する

ダイアログ・ボックスは見やすい構造にするために,スペースまたはbevel を使用して関連する選択肢をグループ化します。bevel(ベベル)とは, 各グループの周りに使用する3次元のボックスまたはフレームのことです。 図 1-24に例を示します。グループ化をするために, 左のダイアログ・ボックスではスペースを使用し,右のダイアログ・ ボックスではbevelを使用しています。

図 1-24 スペースまたはbevelによる関連する選択肢のグループ化


プログラミングのヒント

bevelを作成するには,XmForm ウィジェットを使用し,XmNshadowTypeをXmSHADOW_IN に設定します。次に,制御ボタンをXmFormウィジェットの中に入れます。


1.5.2 ダイアログ・ボックスで句読点の使用を避ける場合

ダイアログ・ボックスの構成要素が適切なグループに分けられ,インデントがなされている場合は, フィールドの間にコロン「:」や他の句読記号点を入れる必要はありません。 たとえば,図 1-25で示すように, ラベルや入力フィールドの間にコロンをつけないでください。

図 1-25 ダイアログ・ボックスで句読点の使用を避ける場合

枠付きのテキスト・フィールドは,ラベルと全く異なって見えます。句読点をつけると, ただ煩雑になるだけです。

ただし,句読点はテキストがメッセージを伝えるときは必要なことに注意してください。 また,コロンは,ヘッダ情報用の出力専用のフィールドでは使用できます。 たとえば,エディタでは,現在のファイル名の表示はつぎのようになります。

1.5.3 ダイアログ・ボックスを簡略化する

コンテキストまたはダイアログ・ボックスの使用がタイトルではっきり分からない場合は, ボックスの一番上に語句または文を加えて,その目的を明確にしてください。 このようなテキストにより,ボックスの残りの内容を簡略化することができます。

図 1-26に,トラッシュ・ ウィンドウにカラーを適用する場合のダイアログ・ ボックスの良くない例と一緒に, 効果的な例の両方を示します。

図 1-26 簡略化したダイアログ・ ボックス

1.5.4 制御ボタン類の均等な配置

ダイアログ・ボックス内に制御ボタン類を配置する場合は,次の要領でスペースを使用してください。

1.5.5 ラベルとテキスト・フィールドをそろえる

ラベルとテキスト・フィールドは,縦と横の両方向でそろえることが必要です。 ラベルを縦に最も効果的に配置するには,ラベルを,テキスト入力フィールドの一番下ではなく, テキスト入力フィールド内のテキストのベースラインにそろえてください。 図 1-30に,ラベルのそろえかたの効果的な方法を, そうでないものと一緒に示します。

図 1-30 ラベルをテキストのベースラインとそろえる


プログラミングのヒント

ラベルをテキストのベースラインにそろえるには,Xm_ATTACH_OPPOSITE_WIDGET を使用して,テキスト・ウィジェットの上部をラベルの上部と結び付け, 負のXmNtopOffsetをテキスト・ウィジェットに設定します。画面に表示したときにベースラインがラベルより下がってみえる場合は, 正のXmNtopOffset を設定してください。


ラベルとテキスト・フィールドを横にそろえるときに使用する良い方法が2 つあります。一つの方法は図 1-31 に示すように,ラベルを左にそろえて配置することです。

図 1-31 ラベルとテキスト・フィールドの左そろえ配置

もう一つの方法は,図 1-32 に示すように,ラベルを右にそろえて配置することです。

図 1-32 ラベルとテキスト・フィールドの右そろえ配置

ラベルを右そろえにした場合は,ラベルの右端がそろいます。フィールドの順番は, 左ろえの場合と同じですが,その作成の実施方法が異なります。

どのスタイルを選択した場合でも,アプリケーション全体を通じて選んだスタイルを一貫して使用することと, ユーザが情報を入力するテキスト・ フィールドは常に左そろえの配置になっていることを確かめてください。

以下のプログラミングのヒントでは,左そろえラベル,続いて右そろえラベルの作成方法について述べます。


プログラミングのヒント

左そろえラベルの場合は,次のステップに従ってください。

  1. 適切なオフセット値を使用して,ラベルの左側をフォームにアタッチします。

  2. すべてのテキスト・ウィジェットの左側を最大のラベルと結び付けます。

  3. すべてのラベルが枠内に入っているかを確認します。

ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は, 次のステップに従って,実行時にレイアウトを修正がすることが可能です。

  1. 適切なオフセット値を使用して,ラベルの左側をフォームにアタッチします。

  2. 各テキスト・ウィジェットの左側をラベルの上部と結び付けます。

  3. 実行時に,すべてのラベルを調べて最大のサイズを見つけます。

  4. 一番上のラベルのXmNwidthを最大サイズに設定します。


プログラミングのヒント

右そろえラベルの場合は,次のステップに従ってください。

  1. 最初に次のどちらかを選んでください。

    • ラベルの右側を,ダイアログ・ボックス内の位置(30%など)にアタッチします。

    • 最大ラベルを決め,適切な左オフセットを値を使用して, それをフォームにアタッチします。その後で,他のラベルの右側を最大ラベルにアタッチします。 他のラベルの右オフセット値をゼロ(0) ,アタッチメントの種類をOPPOSITE_WIDGETに設定します。

  2. テキスト・フィールドの左側を最大ラベルにアタッチします。

  3. テキスト・フィールドの右側をフォームにアタッチします。 左右のアタッチメント両方をテキスト・ウィジェットに設定した場合は, そのテキスト・ウィジェットのサイズは最小サイズのどれかで無効にされ, 指定したカラムの数にはならないことに注意が必要です。

    このような問題が起きないように,次の処置を実行してください。

    • フォームのサイズを直接,設定する。

    • XtManageChildを呼び出した後で,テキスト・フィールドの右のアタッチメントを設定する。

    その後で,テキスト・ウィジェットのカラム・サイズを使用して,ダイアログ・ ボックスのサイズとテキスト・ウィジェットが決められます。 また,テキスト・ウィジェットはフォームの右側にまだアタッチされており, ダイアログ・ボックスと一緒にサイズの変更が行われます。 ダイアログ・ボックスのサイズを変更可能にする方法は,第1.2.2項を参照してください。

ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は, 次のステップに従って,実行時にレイアウトを修正がすることが可能です。

  1. 適切なオフセット値を使用して,ラベルの左側をフォームにアタッチします。

  2. 各テキスト・ウィジェットの左側をラベルの上部と結び付けます。

  3. 実行時に,すべてのラベルを調べ,最大のサイズを見つけます。

  4. 最大のものを除いて,すべてのラベルの左アタッチメントをゼロに再設定します。 ここで,最大ラベルによって,ダイアログ・ボックスの幅が決められます。

  5. 最大のものを除いて,すべてのラベルの右アタッチメントを最大ラベルに再設定します。 オフセット値をゼロ(0),アタッチメントの種類をOPPOSITE_WIDGET に設定してラベルのすべての右側をそろえます。

1.5.6 視線の動きが左から右,上から下になるようにレイアウトする

左から右への言語環境の場合,左から右,上から下へ視線が動くように制御ボタン類を編成します。 インデントを使用して,それぞれのグループ分けと相互の関係がはっきりわかるように並べ表示してください。 制御ボタンを編成する際は, 次に示すガイドラインを参考にしてください。

1.5.6.1 左上のコーナーを活用する

ダイアログ・ボックスの左上のコーナーはユーザが最初に見る領域です。 この領域を上手に使用してください。次の制御ボタンのいずれかをこのコーナーに配置します。

1.5.6.2 関連のある制御ボタンをはっきりとわかるように並べる

関連のある制御ボタンを並べて示す場合,図 1-29 のように左そろえの縦並び,または左から右への横並びを使用します。 横並びは項目が4つ以下の場合に使用します。それ以上の項目がある場合には, 縦並びを使用してください。外国語のテキストは長くなる可能性があるので翻訳では縦並びの方が簡単です。

ラジオ・ボタンを複数のグループで使用する場合は特に注意してください。 ラジオ・ボタンはいずれか1つを選択するものなので,ユーザが確実にグループ分けを理解できるようにレイアウトする必要があります。 ダイアログ・ ボックス内のすべてのボタンから選択できるのか,各グループのボタンから選択するのか, ユーザが混乱しないようにレイアウトしてください。

ラジオ・ボタンとトグル・ボタンのインデントに配慮を加え,グループ化が一層はっきりするようにしてください。 インデントの使用により,空白が増し, ダイアログ・ボックスの密集状態が緩和されてみえます。一般的には, 制御ボタン類のレイアウトは,相互の間に十分な空白と周囲にマージンをもたせ, 表示がユーザの目に優しく写るようにするとともに,ユーザが視線を注意を集中できるはっきりしたものにしてください。 図 1-29図 1-33 に,インデント付きのラジオ・ボタンとトグル・ボタンのグループ分けを示します。 図 1-33は, 適切なラベル表示をした2つのグループのラジオ・ボタンと,不適切なラベル表示のラジオ・ ボタンを比較したものです。適切なラベル表示によって, グループが異なることが識別しやすくなります。図 1-33 では,bevelが異なるグループの識別に利用されています。

図 1-33 ラジオ・ボタンの適切なラベル表示と不適切なラベル表示

1.5.6.3 構造を明確にする

構造を明確にするために,制御ボタン類は次のいずれかの順序で配置します。

図 1-29の重量測定値はアメリカ文化での使用頻度に応じて編成されており,2 つの計量単位が一緒になっています。 このような場合は,選択肢をアルファベット順にして次の順序にしてもよいでしょう。

このように並べかえても,英語圏における計量法というグループ分けは守られます。

1.5.6.4 省略時のボタンを適切に設定する

省略時のボタンを適切に設定すると,ユーザはリターン・キーを押すだけで作業を続けることができます。 たとえば,ダイアログ・ボックスに最も選択される可能性の高い制御値を表示させることによって, ほとんどの場合にユーザはリターンを押すだけでいいように設定することができます。

図 1-34はすでに選択した値の中で最もよく選択される選択肢を省略時の設定として表示したページ・ セットアップ・ダイアログ・ボックスの例です。ユーザは,「了解」をクリック, あるいはリターン・キーを押すのいずれかの操作で省略時の設定を使用することができます。

図 1-34 省略時のボタンを適切に設定する

1.5.6.5 オプション・ボタンを使用してスペースを節約する

オプション・ボタンはオプション・メニューを表示します(オプション・ ボタンを,別のダイアログ・ボックスを起動する「オプション...」プッシュ・ ボタンとは混同しないでください。また,メニュー・バーにある「オプション」メニューとも混同しないでください) 。図 1-35に示すように, ユーザがオプション・ ボタンを押すとメニュー項目が表示されます。

オプション・ボタンを使用すると表示は順次に進行し,ユーザに情報を一度に提供し過ぎることが避けられ, 一段とすっきりした,密集程度が低い, インターフェイスが可能となります。

以下の環境下では,ラジオ・ボタンの代わりにオプション・ボタンの使用を考慮してください。

図 1-35 オプション・ボタンを使用してスペースを節約する

図 1-36は,図 1-33 でユーザに与えられた同じ選択肢を, どのように2個のオプション・ボタンを使って並べるかを示しています。

図 1-36 2個のオプション・ボタンを使用する

1行または1列のいずれかで,1組のオプション・ボタンを一緒に作成する場合は, 必要に応じてそれらを横または縦に配置して,好ましいレイアウトを提供してください。 ボタンのサイズが大体同じ場合には,オプション・ ボタンは同じ幅にする必要があります。

1.5.6.6 ダイアログ・ボックス内の数値を初期設定する

ダイアログ・ボックスが二回目に表示された際に,フィールドすべてに対する値が保存されるようにしてください。 たとえば,ユーザが「作成」ダイアログ・ ボックスを再表示するときに,既に入力されている数値の大部分を保持したいと思う可能性があります。 これらの数値を保存することによって, ユーザがすべての情報を再入力する必要をなくすことができます。 「ディレクトリ」ダイアログ・ボックスの場合には,ユーザは二回目も同じ構成要素を表示を希望しても, 最後に修正した時間などフィールド一箇所の内容を変更したいと考える可能性があります。

1.5.6.7 複数の選択方法を提供する

必要と思われる場合は,情報を入力する方法として制御ボタン類(ラジオ・ ボタンやリスト・ボックスなど)を選択することも,テキスト入力フィールドに直接入力することもできるように設定します。 たとえば,図 1-37はユーザがテキスト・ フィールド内でサイズをタイプ入力するか, あるいはプッシュ・ボタンを選択することによってウィンドウのサイズを変更するダイアログ・ ボックスです。

図 1-37 いろいろな選択方法を提供する

ただし,様々な選択方法を使い過ぎて,煩雑にならないように注意することが必要です。 また,視覚的な機能(フラッシング,太字,下線など)を過度に使用してユーザを混乱させないように注意してください。 一般的には, ユーザの注意をそらすことになるのでフラッシングの使用は避けてください。

1.5.7 タブ・グループを作成する

タブ・グループは,タブ・キーによって移動することができるように編成されているウィジェット群から構成されるグループです。 言い換えれば, タブ・グループとは同じグループに属する制御ボタン群のことです。 たとえば,1組のラジオ・ボタンはタブ・グループになります。 タブ・キーを押すことによって,ダイアログ・ボックス内のタブ・グループ間を移動することができます( このためタブ・グループと呼びます)。

ダイアログ・ボックス内の制御ボタンは,はっきりと識別できるタブ・グループとして編成してください。 キーボードによるタブ・グループ間の移動についてツールキットは次のように区別します。

1.5.7.1 タブ・グループ間の移動

次の種類の制御ボタンをそれぞれタブ・グループとして扱ってください。

フィールド間の移動に対しては,次のルールに従ってください。

ユーザがタブ・キーを押したときに入力フォーカスがどのようにタブ・ グループ間を移動するかについては,図 1-38 図 1-39を参照してください。 ユーザがタブ・キーを押し続けると,位置カーソルは右下のタブ・ グループから左上のタブ・グループに自動的に戻ります。

図 1-38 タブ・キーによるタブ・グループ間の移動

図 1-39 タブ・キーによるタブ・グループ間の移動- 続き

1.5.7.2 タブ・グループ内の移動

タブ・グループ内の項目間を移動する場合は矢印キーを押します。たとえば, あるラジオ・ボタンのメニュー項目から次の項目に移動する場合,下矢印キーを押します。 ただし,矢印キーでタブ・グループ間を移動するすることはできません。

ユーザが矢印キーを押したときにタブ・グループ内で項目間を位置カーソルがどのように移動するかについては, 図 1-40を参照してください。 位置カーソルは自動的に最初の位置に戻ります。 つまり,下矢印キーを押してカーソルが最後の項目に進んだときに, 下矢印キーをもう一度押すと位置カーソルは最初の項目に戻ります。

図 1-40 矢印キーによるタブ・グループ内の移動

1.6 ダイアログ・ボックス内のテキストおよび画面上の他のオブジェクトを表現する

ダイアログ・ボックスで使用するラベルやテキストおよびメニューやタイトル・ バーなどの画面上の他のオブジェクトを作成するときは,次のガイドラインを守ってください。

1.7 タイトル・バーを作成する

タイトル・バーは1次および2次ウィンドウの両方で使用されます。

1次ウィンドウでは,次のようにラベルを提供してください。

2次ウィンドウでは,次のようにラベルを提供してください。

ダイアログ・ボックスの名前付けについての詳細は,第1.2.1項を参照してください。

1.8 処理中のダイアログ・ボックスと待ちカーソルを使用する

処理中のダイアログ・ボックスと待ちカーソルを使用して,ユーザに進行中の使用アプリケーションの即時フィードバックを提供してください。

大部分の状況で操作が15秒以上を要する場合は,処理中のダイアログ・ボックスを使用して作業の進行を示してください。 操作に要する時間の長さは大部分が使用システムに依存しているので, 処理中のダイアログ・ボックスの表示をオプションにするとよいでしょう。

操作に要する時間が15秒以内の場合は,カーソルをDECwindowsのウォッチ・ カーソルなどの待ちカーソルに変えて,ユーザにアプリケーションが処理中であることを知らせてください。 待ちカーソルの表示を操作が完了するまで続けます。 待ちカーソルは以下の種類の操作に対して使用してください。

ユーザがアプリケーションの操作の完了を待機しているウィンドウ全部で待ちカーソルを設定してください。 たとえば,アプリケーションがディレクトリを復元している場合は, 待ちカーソルを,ディレクトリのウィンドウばかりでなく, その復元の完了にはっきり関係していることが分かっている他のすべてのウィンドウでも設定してください。


プログラミングのヒント

以下のコードの例を使用して,稼働中のウィンドウに対して待ちカーソルを設定してください。 アプリケーションがOpenVMSシステムで稼働しているときは,#ifdef が使用されます。もう一方の取込みステートメントは, UNIXとWindows NTシステムの両方に適用されます。

         #ifdef OpenVMS
         #include <decw$cursor.h>
         #else
         #include <X11/decwcursor.h>
         #endif
         #include <DXm/DECspecific.h>

           /* Wait? */
           if ( wait )
             /* Set the wait cursor for this window. */
             waitCursor = DXmCreateCursor(widget,decw$c_wait_cursor);
           else XUndefineCursor(XtDisplay(widget), XtWindow(widget));


[ 前のページ ] [ 次のページ ] [ 目次 ] [ 索引 ]