このドキュメントでは、次のトピックについて説明します。
GUI アプリケーションの画面の設計には、メインフレームの 3270 画面の設計とは別の知識が必要です。 それはなぜでしょうか？
それは、GUI アプリケーションはユーザーが制御するからです。これらのアプリケーションは非モーダルで、構造化されていません。 ウィンドウおよびウィンドウ内のフィールドにアクセスする順番を決めるのは、ユーザーです。 典型的なデータベースアプリケーションは、特定の順番でオペレーションを実行するようユーザーに要求します。これらのアプリケーションはフォーム指向で、構造化されています。
GUI インターフェイスは従来のメインフレームインターフェイスとは異なる機能を持っているため、GUI 画面の設計も異なります。 プッシュボタンコントロールやリストボックスコントロールなどのダイアログエレメントが組み込まれたウィンドウを設計できます。 イベントドリブン Natural で呼び出されるダイアログである GUI ウィンドウを設計するときは、テキストのフォントタイプとサイズ、背景色と前景色、および各ウィンドウのサイズを定義します。
以下のセクションでは、効果的な GUI 設計のためのヒントについて説明します。
プロトタイプを作成する前に、ユーザーとともに数時間過ごしてください。
ユーザーのニーズ、好み、不満に対処するためにユーザーと話し合うことは、設計を開始するためのよい基盤となります。
既存の GUI 設計からアイデアを受け継ぎます。
GUI を再開発しないことで時間を節約します。 何が動作して何が動作しないかを念頭において、他の GUI を試してください。 GUI の一貫性は、ユーザーの新規アプリケーション使用の学習を支援し、効率を高めて、トレーニングコストを削減します。 既存の GUI アプリケーションに対するユーザーのフィードバックを取得します。不十分な GUI 設計を複製したプロトタイプを開発するよりも、ユーザーの好みや不満に耳を傾けます。
オンラインでのアプリケーション開発に時間を費やす前に、紙の上でアイデアを練ってください。
オンラインで複数のプロトタイプを作成して時間を費やすより、紙の上でメインウィンドウの多くの画面設計オプションに目を通す方がより迅速に作業できます。 これはコーディングより簡単で、しかも、不十分な設計にいつまでも煩わされずに済みます。
ユーザーが開発プロセスにかかわっている場合、アプリケーションをシステムにインストールする前に、ユーザーのニーズと好みについて迅速にコメントをもらうことができます。 オンラインの開発ツールを使用する前に、紙のプロトタイプを使用してみてください。
関連する主題に合わせて、複数のウィンドウを設計します。
できるだけ多くのフィールドを 1 つの画面に入れようとする 3270 モニタに対する設計と違い、GUI 画面では、サブウィンドウを使用することでより優れた設計ができます。 例えば、メインウィンドウには必須フィールドのみを配置し、任意または補足の情報はすべて 1 つ以上のサブウィンドウに格納します。 サブウィンドウには、メインウィンドウに入力する情報がわからない場合に参照する選択肢（ドロップダウンリストなど）を組み込むことができます。 メッセージおよびフィールド依存情報は、メインウィンドウよりも補足的なウィンドウに表示した方がより効果的です。
見やすい、整ったウィンドウを設計します。
3 色以上の色、複数のグラフィック、および不統一な形状の使用は避け、ウィンドウが乱雑にならないようにしてください。 乱雑な画面を見てユーザーが困惑したり、気を散らしたりすることのないよう、余白を多くして画面のオブジェクトのバランスを取ります。 異なる形状やオブジェクトの使用、および色数は最小限にすることをお勧めします。
使いやすい、すっきりしたウィンドウを設計します。
多数のフォント、フォントサイズ、フォントタイプまたはファミリ、および色を使用したアプリケーションは、ユーザーを困惑させる、使いにくいアプリケーションになります。 1 ウィンドウ当たりのフォント、フォントサイズ、フォントタイプの使用は、最大 3 つまでに抑えてください。 画面上で分割されることがよくあるため、斜体およびセリフフォントは使用しないようにします。 色は控えめに使用します。 目に最も優しい色は中間色です。 原色の赤や緑は非常に目立ちますが、ユーザーはこのウィンドウの前で長時間作業するのだということを忘れないでください。
キーボードとマウスの使用について設計します。
キーボードの使用を好み、ショートカットコマンドを記憶するユーザーもいれば、マウスを使用する方をより快適に感じるユーザーもいます。 個々のアクションは、マウスとキーボードの両方でアクセスできるようにする必要があります。
ユーザーのニーズに従ってウィンドウを設計します。
たくさんの機能を持つ見た目にもすばらしい画面を作成することには心を引かれますが、ユーザーが使用しなければ何の価値もありません。 設計者は、自分が利用できるすべての機能を実験するためにではなく、ユーザーが仕事をするためにアプリケーションを開発しているのだということを忘れないでください。 最初に、ユーザーに何が必要であるかを把握します。そして、彼らのニーズに合わせて設計を調整します。 さまざまな目的を持つ画面をさまざまな方法で設計します。 ユーザーに入力を促す必要があれば、会話型スタイルを使用します。ユーザーにフォームから値を入力させる場合は、データ入力スタイルを使用します。
フィールドプロンプトを備えた会話型画面を設計します。
会話ベースのスタイルでは、ユーザーは会話型でデータを入力します（例：旅行の予約）。 画面のプロンプトに従ってユーザーが入力する会話ベースのスタイルでは、ラベル、ヒント、指示、さらにはユーザーがクライアントに尋ねるべき質問までをも使用して、画面を充実させます。
簡潔なラベルを備えたデータ入力画面を設計します。
フォームベースのスタイルでは、ユーザーはフォームからデータを入力します。 入力画面の各行はフォームの行と一致している必要があります。また、これらの行は同じ順番にする必要があります。 行対行の一致を維持するためにラベルを簡略化できます。 ヘッダーおよび指示は最小限に抑えることをお勧めします。 ラベルの唯一の目的は、作業中断後にユーザーが元の位置を見つけられるようにすることです。
以下の 3 つの基準に基づいてメニューの設計をすることをお勧めします。
ユーザーがアプリケーションを実行するオペレーティングシステムによって定義されている規則を使用してメニューを編成します。 例えば、Microsoft Windows の場合は、特定のメニュー（、、など）、メニューオプション（メニューの、、など）、およびメニューバー上のメニューの特定の順序（は常に一番右に表示する、など）を使用することをお勧めします。
監視または有用性テストによって判断した使用頻度に基づいて、メニューを配置します。
ユーザーがより熟練することにより使用法が変わるかどうかを予測します。 使用法の変化がオペレーティングシステムの規則に違反しないよう注意してください。
メニュー項目をアルファベット順にリストします。 オペレーティングシステムの規則とユーザーの使用頻度を考慮してください。
色の使用は控えめにします。
人間は一度に 5 色（プラス／マイナス 2 色）の意味しか記憶できません。
主要な警告としてではなく、付加的な警告として色を使用します。
ユーザーに警告するには、明るい赤のテキストを使用するだけでは不十分です。警告音を追加してください。 全男性の 8 パーセントは赤緑色盲であるため、赤いテキストに気付かない可能性があります。
グラフでは、点線や下線などの補助キーなしでは、色を使用しないようにしてください。
白黒モニタのユーザーが色の効果なしでも理解できるようにする必要があります。 また、ほとんどのユーザーはカラープリンタを持っていません。
アプリケーション全体に一貫性を持たせてください。
関連する主題のフォント、色、または形状を変更しないでください。 例えば、アプリケーションのボタンはすべて同じ形、サイズ、色、およびフォントで設計します。 関連するオブジェクトが異なる方法で表示されると、ユーザーは視覚的な手掛かりを使用できないため、アプリケーションに慣れるまでにより長い時間がかかります。 関連するボタンに同じフォント、色、およびサイズを使用して、類似したアクションは類似した方法で表示します。
命名規則を採用し、アプリケーション全体で順守します。
従来のプログラムで名前を変えるには 1 つの大規模なプログラムを修正すればよかったのですが、オブジェクト指向のプログラムでは、名前を変更するたびに多数のイベントコードを個別に編集する必要があります。 GUI アプリケーションを設計するときは、より厳密に命名規則を順守する必要があります。 これにより、後で整理するための時間を大幅に節約できます。
