MS Access Tips/Sample and VBA and Blog customize etc...

入力必須項目のある入力フォームのUIを考察する

Accessでは入力必須のフィールドは、テーブルのデザインで「値要求」を「はい」にするのが一番確実な方法です。今回は、ユーザーとってやさしいインタフェースという観点から入力フォームのデザインを考えてみます。

入力必須項目のある入力フォームのUI

「値要求」を「はい」にするUI

「値要求」を「はい」にしておくと、必須フィールドに入力せずにレコード保存しようとしたり、値を削除して次レコードへ移動しようとすると「'フィールド名'に値を入力してください」と警告メッセージがでます。

値要求の警告メッセージ

これで問題はないのですが、新規レコードでユーザーが順不同で入力した場合、レコード保存操作をするまでは、必須項目が未入力と分かりません。

事前にユーザーに入力必須ということが分かるように、テキストボックスの横に「入力必須」などのラベルを配置しておくとか、「*」マークのラベルを配置するなどしておくといいでしょう。(*マークはWEBの入力フォームなどでは入力必須のマークとして定着しているようです。)

この方法は確実ですし、一般的なものなのでユーザーはそれほど違和感はないでしょう。ただ、必須項目の未入力が多数あると、何度も警告メッセージがでるのは結構鬱陶しいのではとhatenaは思ってしまいます。

入力順を固定するUI

入力必須の項目を入力するまで次の項目へ移動できないようにするという設計にする場合もあります。最初の項目が入力必須として、そこがNullの場合は、他のテキストボックスを使用不可にしておくというような設計です。(条件付き書式の設定でシンプルにできます。)

これも確実ではありますが、これはある程度入力が進んでから、前の入力必須項目のデータを削除したとき、その場合の処理をどうするかなどを考えていくとどんどん複雑になっていきます。

また、ユーザーにとっても入力順を強制されるというのはけっこうストレスです。

ユーザーにやさしいUIとは

WEBなどの入力フォームでは、最近はHTML5やCSS3を使用して非常によく考えられたUIがよく見られるようになってきました。それらを参考にして、下記のような仕様を考えてみました。

入力必須マーク(*)をテキストボックスの横に配置する。
入力必須項目で未入力状態(Null値)の場合は、背景色を変更する。
また、プレースホルダとして「入力必須」と表示する。
すべての入力必須項目が入力されるまでは、「レコード保存」ボタンを使用不可にしておく。
当然、未入力項目があるうちは「レコード保存」ボタン以外の方法でもレコード保存できないようにしておく。

※プレースホルダとは、テキストボックス内に事前にヒントや説明を表示しておくこと。入力するとそれは消える。

これなら、ユーザーは事前に何が入力必須なのかすぐにわかる。
入力順を強制されることもなく、好きな順で入力できる。
鬱陶しい警告メッセージに煩わされることがない。

というようにユーザーにやさしいと考えられます。

サンプルフォームの設計

テーブルは下記のようだとします。

テーブル1
フィールド名データ型説明
IDオートナンバー型主キー
フィールド1テキスト型入力必須
フィールド2テキスト型入力必須
フィールド3テキスト型入力必須
フィールド4テキスト型入力必須
フィールド5テキスト型入力任意

「値要求」はすべて「いいえ」。

これをもとにウィザードで単票フォームを作成します。

「ID」テキストボックスは「使用可能」を「いいえ」に設定。(オートナンバー型のなので入力不可)

フィールド1 ~ フィールド4 のテキストボックスのプロパティ

プロパティ設定値
書式@;"入力必須"

このテキストボックスの横にラベルを配置

プロパティ設定値
標題*
前景色 (赤)

コマンドボタンを2つ配置して、

プロパティ設定値
名前cmdSaveNew
標題保存して新規作成

プロパティ設定値
名前cmdSaveClose
標題保存して閉じる

フォームのデザインビュー
フォームのデザインビュー

フォームモジュール

フィールド1 ~ フィールド4 (入力必須のテキストボックス)のイベントプロパティを下記のように設定

プロパティ設定値
変更時=ctl Change()
フォーカス取得時=Ctl Enter()
フォーカス喪失時=ctl Exit()

フィールド5 (入力任意のテキストボックス)のイベントプロパティを下記のように設定

プロパティ設定値
ダーティー時=RequiredCheck()

動作確認

新規レコードで、入力必須フィールドは背景色とプレースホルダで入力必須をユーザーにアピール。

新規レコード移動時

入力必須フィールドで入力すると背景色は白になる。

新規レコードで入力開始

入力必須フィールドをすべて入力完了すると「保存」ボタンが使用可能になる。

新規レコードで入力開始

まとめ

hatenaの場合、開発するときには、ユーザーインターフェイスの検討にかなりの時間をかけます。要件、ユーザーの使用状況を調査して、いろいろなUIを検討して最適な仕様を決めます。仕様が決まればコーディングは機械的に進めていくことができます。
コーディングが完成しても、実際に使用してみて不具合の解消やこまかい調整にかなり時間を要します。また、実際にユーザーに使用させてみて本当に使いやすいのかどうかの検討も必要です。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/446-9f90edbc
該当の記事は見つかりませんでした。