Firebaseの技術情報サイト

Firebaseの技術情報サイト

Firebase活用の為の技術情報サイトです

親切なユーザーインターフェースとは?

親切なユーザーインターフェースとは?

前回は、コマンドラインより使いやすい、グラフィックベースのユーザーインターフェースを紹介しました。しかし、前回の例はシンプルなものでした。実は、GUI(Graphical User Interface)を利用すると、もっと利用者に親切なインターフェースを提供する事ができます。今回はその例を紹介します。

目次
タイプした文字をチェックする
これまでの例では?
より親切な方法は?
実装の方法は?
まとめ

タイプした文字をチェックする

プログラムに必要なデータをタイプして入力する場合には、いずれにしてもプログラムが意図しないデータを入力してしまうことは避けられません。人間がタイプする以上、誤ってデータを入力する可能性をゼロにすることはできないからです。

ただし、親切なユーザーインターフェースを設計する事は可能です。

今回は、より親切なユーザーインターフェースの例を紹介します。

期待しないデータが入力された場合に、それを利用者に伝えるようなエラー処理が必要な事は紹介してきた通りです。何がおかしいのかを利用者に伝えるために、実際に入力された(タイプされた)データをチェックすることで、エラーの詳細を利用者に伝えることが可能です。

ポイントは、そのチェックを「いつ」、「どこで」するかで利用者の印象が変わってきます。

これまでの例では?

これまでに紹介した例では、入力が完了した後にデータをチェックする方法を使っていました。

コマンドラインから必要なデータをプログラムに渡す場合には、全てのタイプが終わった時点でプログラムが起動されるので、データの入力完了後以外でのチェックが難しくなります。もちろん、改善する方法はあって、プログラムを起動した後にデータを入力できるようなプログラムに変更すれば実現は可能です。

コマンドラインの例は、シンプルなプログラムの例のために紹介しましたが、最近のプログラムでコマンドラインを利用するような例は一般的な利用者を対象にしたプログラムでは殆ど使われていません。したがって、今回は、GUI(Graphical User Interface)を利用する場合を考えてみます。

前回の例では、HTML で作成したフォームのデータを計算を行う関数に渡してその関数の中で、受け取ったデータのチェックを行なってエラーメッセージを出すようになっていました。

この方法では、入力フォームの入力が完了した時点で、計算する際に入力されたデータを取り込んでチェックを行う様になっているため、実際に計算の処理を実行するまでデータのチェックが行われない実装になっていました。

より親切な方法は?

今回紹介する、より親切な方法は、入力をしている際にチェックをするという方法です。 今回の、足し算を行うプログラムの場合には、入力されるデータは、「整数」を想定しています。 したがって、数字以外の文字が入力された場合は、その時点でエラーということになります。

要は、より早い段階で入力されるデータをチェックすることで、入力の間違いを早い段階で修正できるようにするとより親切なプログラムになります。 あるいは、数字以外のデータを入力できないようにすれば、実際に計算する際には、数字以外のデータではない状況をプログラムで作れれば、入力のミスを最小限にすることが可能です。

こうした工夫をすることで、プログラムは格段に使いやすいものにすることができます。

実装の方法は?

では、どのように実装すればよいでしょうか? 前回は、「計算をする」事をプログラムに伝えるために、ボタンをクリックした時に、入力されたデータを取り込んで、データをチェックして処理する方法を採用しました。

より早い段階でチェックするには、このタイミングでチェックする場合限界があります。この時点では、データの入力は終了している場合が殆どだからです。データが入力されていないというエラーの可能性もありますが、このエラーは計算する時点でしか検出できません。

そこで、データ入力中にチェックするためには、キーボードが押された、離されたなどのイベントを使ってデータをチェックする必要があります。最新の HTML のフォームでは、Javascript と連携してこのイベントを検出して処理を呼び出す事ができます。詳細は、次回の記事で紹介する予定ですが、この方法を使えば入力中にデータのエラーをチェックしてエラーメッセージを出したり、その入力を無効にするなどの処理をする事が可能になります。

こうした実装を取り入れることで、より使いやすいプログラムが実現できます。

まとめ

今回は、より親切なプログラムの実装の例として、より早い段階で入力のエラーを見つけることで、利用者により親切なプログラムを実装するコンセプトを紹介しました。

この方法を使えば完全に誤った文字が入力される可能性をほぼ取り除く事が可能です。 もちろん、入力のミスはこのようなミスだけではなく、誤った数値を入力するなど他の可能性があるのも事実です。こちらのエラーはプログラムの利用者が気をつけるなり、データの確認をするなどして避ける必要があります。

完璧な入力データの誤りをプログラムで検出するのには限界がありますが、ある程度は見つけることは可能です。このような利用者の立場に立った実際の処理手順は処理方法の検討はよりよいプログラムを定挙する上ではとても重要です。

次回は具体的な実装方法を紹介予定です。