JPH113198A - 画面設計方法 - Google Patents

Abstract

(57)【要約】 【課題】 アプリケーションの操作に不慣れなオペレー
タでも、操作マニュアルを参照することなく、ある程度
の操作が出来るような画面、つまり、画面構成が視覚的
に操作を誘導する画面を設計する方法を提供すること。 【解決手段】 ＧＵＩを有し、ポインティングデバイス
によるオペレーションを行うアプリケーションプログラ
ムの画面設計方法において、ポインティングデバイスの
指示対象となる部品の種類を予め定められた部品群から
部品に対応する機能に基づいて選択して定義する種類定
義段階と、選択された部品の形状及び色彩を定義する形
状・色彩定義段階と、選択された部品の配置を定義する
配置定義段階とを含むことを特徴とする画面設計方法を
提案する。

Description

【発明の詳細な説明】

【０００１】

【発明の属する技術分野】本発明はグラフィカルユーザ
インタフェース（以下、ＧＵＩと略記）を持ち、マウ
ス、ライトペン、タッチパネル等のポインティングデバ
イスによる選択機能をもつアプリケーションプログラム
の画面設計方法に関し、特に、特定ユーザ向けに作成さ
れる業務用アプリケーションプログラムの画面設計方法
に関する。

【０００２】

【従来の技術】ＧＵＩを採用するＯＳの普及に伴って、
ヒューマンインタフェースをもつアプリケーションにお
いてもＧＵＩが採用されているものが多くなっている。
この傾向は、不特定多数の一般ユーザを想定する一般ア
プリケーションだけではなく、特定ユーザ向けに作成さ
れる業務用アプリケーション（以下、業務ＡＰと略記）
においても顕著になりつつある。

【０００３】業務ＡＰにおいては、ユーザの利用形態に
応じて操作手順にある程度決まった流れがあるのが普通
である。従来の業務ＡＰでは、業務ＡＰ担当の専用オペ
レータを配属するのが一般的であった。これは、従来の
業務ＡＰの操作に習熟するためには操作マニュアルを熟
読する必要があり、一般のオペレータには簡単に利用出
来ないからである。

【０００４】従来、ＧＵＩを利用してアプリケーション
を作成するためのツール等が多数開発されている。

【０００５】このようなツールの例が特開平７−２８６
３６号公報（以下、引用例１と記す）に記載されてい
る。これらのツールはツールを利用する人によって多種
多様な画面構成をもつアプリケーションを設計すること
が可能である。

【０００６】また、別の例として、特開平４−３２９４
２１号公報（以下、引用例２と記す）では操作の頻度に
よって操作キーの色彩を変更する方法を提案している。

【０００７】

【発明が解決しようとする課題】引用例１によれば、多
種多様な画面の設計が可能であるため、多数の画面をも
つアプリケーションでは、画面毎に様々なレイアウト
（部品の配置、色彩など）にて作成することが出来る。
このことは、アプリケーションを作成する開発者にとっ
ては画面設計の自由度が大きいことを意味する長所とな
る。

【０００８】しかし、アプリケーションを利用するオペ
レータから見れば、同じ機能をもつ部品であるにもかか
わらず画面によって形状や位置が違うことになり、操作
に混乱を生じる原因となる。

【０００９】また、引用例２では、色彩が変化するまで
の操作がわからないため、アプリケーションの操作に不
慣れなオペレータに対しての効果が低い。

【００１０】本発明が解決しようとする課題は、アプリ
ケーションの操作に不慣れなオペレータでも、操作マニ
ュアルを参照することなく、ある程度の操作が出来るよ
うな画面、つまり、画面構成が視覚的に操作を誘導する
画面を設計する方法を提供することである。

【００１１】

【課題を解決するための手段】以上のような課題を解決
するために、ＧＵＩを有し、ポインティングデバイスに
よるオペレーションを行うアプリケーションプログラム
の画面設計方法において、ポインティングデバイスの指
示対象となる部品の種類を予め定められた部品群から部
品に対応する機能に基づいて選択して定義する種類定義
段階と、選択された部品の形状及び色彩を定義する形状
・色彩定義段階と、選択された部品の配置を定義する配
置定義段階とを含むことを特徴とする画面設計方法を本
発明は提案する。

【００１２】形状・色彩定義段階は選択された部品によ
り表示されるメッセージの種類に対応して色彩を定め
る。

【００１３】アプリケーションプログラムは複数の画面
を切り替えて表示し、配置定義段階は同一の部品を画面
内の同じ位置に配置する。

【００１４】ポインティングデバイスの現在の指示対象
であることを示すフォーカスポイントは予め定められた
表示順に従って画面内の部品のいずれかと共に表示さ
れ、表示順はアプリケーションプログラムの利用者によ
って変更可能である。

【００１５】本発明は特に特定のユーザの特定の業務を
対象として開発されるアプリケーションプログラムの画
面設計に有効である。

【００１６】

【発明の実施の形態】本発明の１実施の形態の画面設計
方法について説明する。本発明の画面設計方法は、特に
部品レイアウトとフォーカスポイントの制御に特徴があ
る。図１は、本実施の形態に基づいて設計された画面構
成の例である。

【００１７】１．部品レイアウト 部品とは、ボタン、ラベル、表などの画面の構成要素で
あり、ポインティングデバイスの対象となる。画面内に
これらの部品の種類、形状、色彩、配置位置の
規約を取り決める。更に、色彩については各部品の特徴
を考えて何色にするかを決定する。また、配置位置につ
いては画面の遷移前後の位置も考慮する。

【００１８】これにより、画面を開いた時、オペレータ
がまず画面のどこを見るかが自然と決まってくる。どの
操作をするかによっても、どこにポインティングデバイ
スを動かせば良いのかもわかりやすくなる。

【００１９】また、遷移前後の画面構成を考えて部品の
配置を取り決めることにより、オペレータに次の操作を
誘導する。

【００２０】部品の種類 ある一つのものを表現する場合、使用可能な部品がいく
つか候補にあがる。各画面の仕様を考慮し、各目的ごと
に使用する部品を業務ＡＰ内で統一する。

【００２１】部品の形状 使用する部品が決まると次はその形状と色彩について共
通規約を決める必要がある。現在のＧＵＩ構築ツールで
は、各部品ごとに様々な形状や色彩を定義することが可
能だからである。部品の種類及び形状からオペレータは
画面上に何が表現されているかを、画面を見るだけで、
おおよそ知ることができる。

【００２２】部品の色彩 画面において、オペレータが一番最初に注目する必要が
ある部品は視覚にうったえるような色を定義し、参照程
度の部品は抑えた色を定義する。

【００２３】部品の配置位置 上記の３点を決定したら次にその部品の配置位置を決め
る。業務ＡＰ内の全画面について部品の配置位置を定義
しておけば、オペレータは画面を開いた時すぐに自分が
得たい情報に焦点をあわせることができる。また、画面
内での業務の流れを考慮して配置を決めたり、画面遷移
を伴う業務では、画面から次画面に遷移したポインタが
次のオペレーションにつながるような配置にする。

【００２４】２．フォーカスポイント フォーカスポイントは操作対象の部品を示す目印であ
り、部品の外周部に着色などを施して他の部品と区別出
来るようにする表示である。従来は、オペレータが操作
対象となる部品をポインティングデバイスで選択し、そ
れによって部品にフォーカスポイントが当たる。ここで
はこれを逆の観点から考えて、次の操作の対象となる部
品に対して先にポインタを当てる。

【００２５】業務ＡＰ実行中のフォーカスポイントは操
作を誘導する上で重要なポイントとなる。画面の初期表
示時にフォーカスを当てる部品（デフォルトフォーカ
ス）は、オペレータが最初にしなければならない操作を
示すことができる。

【００２６】また、各部品に対するアクションはほぼ決
まったものが予想できるので、アクションが行われた時
は、業務ＡＰ内で次の操作を行うための部品にフォーカ
スを移動するなどの制御を行う。

【００２７】フォーカスがどこにあるかによっても次の
操作を誘導することができる。例えば、画面のデフォル
トフォーカスを設定しておけば、この画面を開いた時、
まずしなければならない操作は何かを予想することがで
きる。また、カーソルをアプリケーションの中で制御す
ることにより入力を促すこともできる。

【００２８】

【実施例】以下、本発明の一実施例について図面を参照
して説明する。

【００２９】１．部品の定義 業務ＡＰは図２の上下２画面から構成する。上部の画面
１０を初期画面、下部の画面２０を次画面とする。

【００３０】画面１０に、一覧表１、メッセージ域２、
画面遷移ボタン３、次の情報を検索するのに必要となる
引数を入力するための入力域４を定義する。

【００３１】画面２０に、詳細情報表示域１１、１２及
び１３、メッセージ域１４、画面遷移ボタン１５を定義
する。

【００３２】業務内容は、ある情報を初期画面にて一覧
表示し、その中のーつの詳細情報を次の画面で参照しよ
うというのものである。

【００３３】初期画面から考える。画面上に必要な情報
は、一覧表、オペレータヘの説明、次画面ボタ
ン、次の情報を検索するために必要な引数を入力する
ための入力域である。

【００３４】まず、ここでメインとなる一覧表１につい
て考える。一覧表１を表示することができる部品は、グ
リッド、リストボックス、シートなど、ＧＵＩ構築ツー
ルにより様々であるが、何種類か考えられる。この業務
ＡＰではリストボックスを採用するものとする。

【００３５】次にリストボックスの形状と色彩を定義す
る。この業務で一覧表１の表示はメインとなることか
ら、形状は画面にあわせて横長とし、画面上に広く配置
することにする。色彩については、リストボックス内に
文字を表示することから白を定義する。

【００３６】配置位置は、この業務のメインとなること
から画面中央の上部に広く配置する。同様にして、オペ
レータに対するメッセージ域２、画面遷移ボタン３、次
の情報を検索するために必要な引数を入力する入力域４
について部品の種類、形状と色彩、配置位置を決める。
ここでの各部品の特徴はメッセージ域２はオペレータが
見なければならない部品（ここでは一覧表１）と、オペ
レータが入力しなければならない部品（ここでは入力域
４）の間に配置することで、より操作しやすい画面を設
計している。なお、画面遷移ボタン３を入力域４のすぐ
隣に配置することも更に効果を上げている。

【００３７】画面２０についても画面１０と同様に各部
品を定義する。ここでの特徴は、メッセージ域１４は画
面１０と同じ種類、形状、色彩にすることである。これ
により、オペレータは画面２０での操作がわからない場
合も、画面１０と同じところにメッセージがあることが
予想できるので、自然と視点を合わせるはずである。画
面２０のメインである詳細情報は画面の中央に表示す
る。また画面遷移ボタン１５は画面１０における画面遷
移ボタン３と同じ場所に配置する。

【００３８】画面遷移ボタン３及び１５の配置について
は、第１点として「各画面共通の場所に配置することに
よって、オペレーションをわかりやすくする」という利
点があげられる。この業務ＡＰについていえばもう１点
以下の利点があげられる。画面１０上での最後のオペレ
ーション対象部品は画面遷移ボタン３である。つまりマ
ウスはディスプレイの右下に位置した状態で画面２０に
遷移する。画面２０でオペレータは、各詳細情報を確認
し、画面遷移ボタン１５を押下し画面１０に戻る。画面
２０での最初のオペレーションはディスプレイの右下で
ある。つまりこの位置は画面１０での最後のマウスポイ
ントとなり、オペレータはマウスを移動する必要がな
い。

【００３９】色彩について考えれば、画面内の部品に限
らず、画面自体に色をつけることも有効である。

【００４０】例えば、メニュー画面は水色、一覧機能と
その中からの選択を必要とする画面は黄色、選択により
展開した詳細情報（つまり各画面の関連をツリー状にし
た時にその先の画面がない）はオレンジ色、というよう
に取り決めておく。こうすることでオペレータは、この
画面が何をするための画面なのかを即座に知ることがで
きる。

【００４１】２．フォーカスポイントの制御 画面１０でオペレータが行わなければならない操作は、
一覧表１から項目の選択、引数の入力、画面遷移ボタン
３の押下、の３点である。業務ＡＰを起動した際、フォ
ーカスを入力域４に位置づけておけば、オペレータは少
なくとも、入力が必要であることを予想することができ
る。また、入力域４の確定をリターンキーと定義してお
けば、リターンキーの押下と同時にフォーカスを一覧表
１に移動し、一覧表１からの項目選択を促すことができ
る。項目選択と同時にフォーカスを画面遷移ボタン３に
移動すれば、ボタン押下と次画面への遷移を促すことが
できる。

【００４２】また、画面２０ではオペレーションが必要
な部品は画面遷移ボタン１５のみである。このため、画
面２０でのデフォルトボタンは画面遷移ボタン１５と定
義する。

【００４３】

【発明の効果】本発明の画面設計方法の第１の効果は、
各部品の形状・色彩にそれぞれ特徴を与え、業務内各画
面にてこれを共通にすることにより、視覚的に画面が何
を表現しているのかを表示するので、画面に対してオペ
レータは何をしなければならないのか、つまり照会する
だけでいいのか、アクションをおこさなければ行けない
のかを、操作マニュアルがなくても予想できることであ
る。

【００４４】第２の効果は、オペレータがアクションを
おこす際に画面上に発生するものであるフォーカスやカ
ーソルを業務ＡＰの中で作成し、フォーカスやマウスポ
イントを業務の流れにあわせて動くようコントロールす
ることによりオペレータにどんなアクションが必要であ
るがを知らせることができることである。つまり、画面
がオペレーションを誘導することが出来ることである。

【００４５】以上、本発明を実施の形態に基づいて説明
したが、本発明はこれに限定されるものではなく、当業
者の通常の知識の範囲内でその変更や改良が可能である
ことは勿論である。

【図面の簡単な説明】

【図１】本発明の画面設計方法による画面構成の例であ
る。

【図２】本発明の画面構成設計法による画面構成の例で
ある。

【符号の説明】

１ 一覧表 ２ メッセージ域 ３、１５ 画面遷移ボタン ４ 入力域 １１、１２、１３ 詳細情報表示域 １４ メッセージ域

Claims (6)

【特許請求の範囲】
1. 【請求項１】 グラフィカルユーザインタフェースを有
   し、ポインティングデバイスによるオペレーションを行
   うアプリケーションプログラムの画面設計方法におい
   て、 前記ポインティングデバイスの指示対象となる部品の種
   類を予め定められた部品群から部品に対応する機能に基
   づいて選択して定義する種類定義段階と、 選択された部品の形状及び色彩を定義する形状・色彩定
   義段階と、 前記選択された部品の配置を定義する配置定義段階とを
   含むことを特徴とする画面設計方法。
2. 【請求項２】 請求項１記載の画面設計方法において、
   前記形状・色彩定義段階は前記選択された部品により表
   示されるメッセージの種類に対応して色彩を定めること
   を特徴とする画面設計方法。
3. 【請求項３】 請求項１及び２のいずれかに記載の画面
   設計方法において、前記アプリケーションプログラムは
   複数の画面を切り替えて表示し、前記配置定義段階は同
   一の部品を画面内の同じ位置に配置することを特徴とす
   る画面設計方法。
4. 【請求項４】 請求項１乃至３のいずれかに記載の画面
   設計方法において、前記ポインティングデバイスの現在
   の指示対象であることを示すフォーカスポイントが、予
   め定められた表示順に従って画面内の部品のいずれかと
   共に表示されることを特徴とする画面設計方法。
5. 【請求項５】 請求項４記載の画面設計方法において、
   前記表示順は前記アプリケーションプログラムの利用者
   によって変更可能であることを特徴とする画面設計方
   法。
6. 【請求項６】 請求項１乃至５のいずれかに記載の画面
   設計方法において、前記アプリケーションプログラムは
   特定のユーザの特定の業務を対象として開発されること
   を特徴とする画面設計方法。