業務系システムでは、インプットとなるデータを登録するための入力画面を設計することも多いです。例えば会員情報を登録する画面だったり、売上データを登録する画面だったり。その他にも検索画面などでは、検索条件を指定するために、入力項目を設けるのが一般的。

使い勝手の良いシステムを設計するなら、登録画面や検索画面の入力項目では、いかに入力操作が楽になるか、ストレスを与えないかということを考えなければなりません。今回は登録画面や検索画面において、お客様の入力操作を快適にさせるための設計について、ご紹介していきます。

日付入力はスラッシュを自動付与する

データ検索をかけるときなど、なにかしらの基準日となる日付情報を入力することは頻繁に発生します。検索だけでなく、データ登録時においても日付データを入力することは多いです。頻度としては高いのですが、日付入力は結構面倒なので、できるだけ入力時の負担を減らしたいものです。

そこでどうするかと言うと、スラッシュを自動付与します。通常、西暦で日付を入力するには「2018/01/01」というように、10回はキーボードをタイプしなければなりません。そこを「20180101」と入力するだけで、フォーカスが離れたときにスラッシュが自動で付与されれば入力が楽になります。

「たったスラッシュの2文字だけ」と思われるかもしれませんが、キーボードの数字領域から目を離してスラッシュを入力するのは結構ストレスがかかるもので、数字入力だけで済むのは大きな違いとなるのです。

本日の日付を初期表示

登録画面などで、もし登録日当日をデータ登録する場合は、本日の日付を初期表示することでも、作業負荷を軽減することができます。

入力をスムーズに行えるようにする、ということも大事ですが、そもそも入力しないでも済むような仕組みを考えることも大事なのです。

和暦入力は独自ルールを定めてもよい

先ほどは西暦の日付入力について話をしましたが、和暦の場合はもっと厄介です。「平成」や「昭和」などの漢字を入力してもらうのか、「H」や「S」などのアルファベットを入力してもらうのか、という問題はありますが、いずれも入力が面倒になることは間違いありません。

だから和暦入力の場合は、独自の入力ルールを決めてしまえばよいと思います。

たとえば「H29.01.01」と表示してもらいたいなら、「4290101」と入力してもらうようにします。つまりキーボードの数字領域だけで入力を完結できるように、「H」や「S」などのアルファベットも数字に変換して入力するのです。

  • 「H(平成)」→「4」
  • 「S(昭和)」→「3」
  • 「T(大正)」→「2」
  • 「M(明治)」→「1」

というような独自変換ルールを決めておけば、和暦入力もスピーディに行うことが可能になります。特にテンキーを使用する人にとってはなおさらです。

固定桁数はゼロ埋め対応

たとえばお客様の会員番号など、固定桁数のデータってありますよね。会員番号1番だとしてもデータ上では「000001」というように6桁でデータ管理するなど。

こうした固定桁数の項目については、わざわざ「000001」と6回タイプしてもらうよりも、「1」と入力すれば自動的に「000001」となるように6桁でゼロ埋めしてくれると、お客様にとって優しいシステムとなります。

これも入力ボックスからフォーカスが離れたときに、任意の桁数でゼロ埋めする処理を組み込んでおきましょう。

タブキーで次項目にフォーカス

コンピュータ操作でマウスを使用する人は多いですが、マウスでの操作に頼らない人がいることも忘れてはいけません。

入力項目が複数あった場合、一つ目の入力を完了させたら、次の入力ボックスに移ると思いますが、マウスで次の項目にフォーカスを移すのではなく、タブキーを使用する人もいるのです。そうした人は、次の入力ボックスに移ろうとタブキーを押したときに、全然違う項目にフォーカスが移ってしまえば、非常に使いにくいシステムとなってしまいます。

お客様もコンピューター操作に慣れている人もいれば、仕事以外ではまったく触りませんという人など、PCの扱い方も人それぞれ。システムを設計するSEも、自分基準で使いやすさを考えるのではなく、どんな人が使うのかということを意識しなければなりません。

入力画面を設計する際には、タブキーを押すことで次の入力項目にフォーカスが遷移されるようになると、より使いやすいシステムとなります。

 

おわりに

新米エンジニアの頃は「どのようにしたら使い勝手が良くなるか」ということが分からないかもしれません。しかし多くのシステムに触れていくうちに「この機能はいいな」と感じて、自分の技として取り入れていくようにしましょう。

今回ご紹介したことも当たり前なことではあるかもしれませんが、入力項目を設計する際に参考にしていただければと思います。

 



【X(旧twitter)でも情報発信中】

Xを最近始めたので、フォローしてもらえると嬉しいです(エンジニア界隈の方はフォローバックさせていただきます)! システム開発に関することや、最新テクノロジーのことなど、世のエンジニアにとって有用な情報を発信してます!

"X" @TECH_KEYSYS