Webアプリケーションのユーザインターフェイスは、通常HTMLで作成されます。ご存じの通り、HTMLは情報を提供する媒体としては優秀ですが、情報を入力するような場合は、とうてい優秀なインターフェイスとはいえません。
作っている側が言うのも何ですが、「よくこんなインターフェイスに、我慢できるなあ。」と思うくらいです。
実際の例で見てみましょう。簡単な伝票入力画面です。
全てのボタンはダミーです。押してもなにも起きません。
ちなみに、HTMLやJavaScriptのソースは、特に表記しません。適当にダウンロードして、解析してください。
簡単に、インターフェイスを説明します。よくありがちなインターフェイスなので、何となく分かるとは思いますが。
かなり酷いインターフェイスですが、Scriptを使わない(使えない)場合は、この程度で我慢するしかない事が多いですね。
なにが悪くて、どう改良すれがよいのでしょう。少しずつ見ていくことにしましょう。
もし、このコンテンツを読んでいるあなたが、Webアプリケーションのユーザインターフェイスを、少しでも使いやすいものにできないか、調べている最中だとすれば、多少はお役に立てるかもしれません。
但し、作らなければ(改修しなければ)ならないWebアプリケーションのサポート対象に、ネットスケープナビゲータ4.xという文言が存在した場合、当コンテンツの内容は、全く役に立ちません。
なぜなら、ネットスケープナビゲータ4.xで満足できるインターフェイスなど、到底実現不可能だからです。
中途半端なスタイルシートのサポートや、マイナーバージョン毎に異なる、スクリプトのインターフェイスなど、到底受け入れられるはずのない実装をリリースしてしまった、ネットスケープ社がWebの表舞台を去ったのは、当然といえるでしょう。
ネットスケープナビゲータ4.xという、負の遺産を残して。
未だに、企業ユーザでは、サポートしなければならないところもあるようです(というかあります、しくしく)。
さて、なぜHTMLのインターフェイスを利用した、Webアプリケーションは使いにくいのでしょう。
一つには、キーボードとマウスの併用を強いる、という部分にあるのではないでしょうか。入力はキーボードですが、ボタンは必ずマウスでクリックしなければならないインターフェイスは、結構いらいらさせられます。
最近のアプリケーションには、殆どの操作をマウスだけでできる、優れたユーザインターフェイスを持つものも少なくありませんが、流石にHTMLでそれを実現することは困難です(不可能です!)。
であれば、逆にキーボードだけで、実現するのはどうでしょう。コンピュータになれていないユーザには、未だにキーボードアレルギーの人も多いと言われていますが、マウスとの併用もありならば、受け入れてもらえるのではないでしょうか。
特に、多量のデータを入力しなければならない場合は、キーボードだけのインターフェイスの方が、マウスを使うより、遙かに効率よく入力できます。
幸い、HTML4には、accesskeyという機能が備わっています。
accesskeyを使えば、キーボードによるショートカットキーを、簡単に実現できます。
ショートカットキーの実現方法は、Webブラウザによって異なりますが、[Alt]キーとの組み合わせが多いようです。
上記の例では、Alt+k([Alt]キーを押しながら、同時に[k]キーを押下する)で、商品検索のサブ画面が表示され(ダイアログで代用していますが)、Alt+gで商品番号入力エリアにカーソルが移動します。
多少よくなりました、商品検索を必要としない場合は、ショートカットと[Tab]キーの組み合わせで、それなりに効率よく入力できるはずです。
しかし、これでは商品を一つ登録するたびに、サーバへのアクセスが発生してしまいます。それどころか、画面に表示しきれない商品を表示するためだけに、サーバにアクセスしなければならないことになります。
確かに、千や万の単位の商品を表示するのであれば、一度にクライアントに取り込むのは無謀かもしれませんが、100や200の商品ならば、特に問題はないでしょう。上の画面の例であれば、一行分を300バイトとしても、200件で60Kバイト程度です。
それ以上に、内容の変更を行うために、明細から変更エリアにデータをコピーするだけでも、サーバへのアクセスを必要とします。クライアント側に存在する情報を、移動するだけであるにも関わらずです。
これは、サーバへのアクセス回数を増やして、高いサーバマシンを買わせようとする、ベンダーの陰謀です。間違いない!(^_^;
サーバへの負荷(アクセスの回数や、データ転送量)も含めて、Webシステムで、C/Sシステム並のインターフェイスを目指してみましょう。くどいようですが、Webブラウザは限定されます。DOM Level1は、最低サポートしていないと、話になりません。ネスケ4.xはサポート対象外です。IE4も同様です。IE5もCSSのサポートが甘いので、忘れたい存在です。