入力フォーム ＝ 受付嬢/店員

突然ですが質問です。Webサイトの顧客満足度を決めるのは、いったいなんでしょう？
もちろん一つではなく、いろいろな要素が考えられるでしょう。なにより、そのWebサイトが扱う商品やサービスの充実度なども影響するでしょうし、サポートの質、ページ構成、デザイン、などなど…。

最も大きく影響するものの一つに、入力フォームすなわちユーザーインターフェイスがあります。
思い出してください。どんなに高性能で多機能なシステムを作ったとしても、利用者が直接触れたり見たりするのは入力フォームであることを。また、これらを介してでなければ、Webサイト（システム）と「会話」することすらできない、ということも。
お客さまの声を聞いたりメッセージを伝えたり…、いわばWebサイトの口であり耳であり目であり顔であるともいえます。

そうです。ここで、標題の図式が成り立つわけです。
おいしいレストランや、おしゃれな靴を売るショップ…、基本的にお客さまはシェフや靴職人に直接注文することはありません。注文を受けるのは、つまりお客さまに直接応対するのは、ウェイターや店員です。料理の味だけでなくウェイターのもてなしの質がレストランの評価につながったり、さわやかな店員の笑顔は店の印象に大きく影響するでしょう。

Webサイトでは、その位置にあるのが入力フォームなどのユーザーインターフェイスです。これの使いやすさが、イコールWebサイトの使いやすさ、これの印象が、イコールWebサイトの印象…、といっても決して言い過ぎではありません。

利用者が最もストレスを感じる要因 利用者が最もミスを犯しやすい要素

最もクレームの対象になりやすい要素 最も（データなど）トラブルの原因になる要素

これらすべてにわたり、入力フォームすなわちユーザーインターフェイスが大きな部分を占めています。
これは裏返して言えば、このように極めて重要である入力フォームを、使い勝手のよさや見やすさなどを考慮して作りこみ、少しでも良い印象にすることで、まさしくWebサイトそのものの印象や満足度を高めることができる、ということになります。
これは大げさな話ではありません。実際の例として、使いにくい入力フォームが原因で購入をためらうユーザーや、そもそも難しくて使うことすらできない初心者の人、入力したデータが曖昧なためにトラブルの原因となるケース、などなど、きりがありません。

理屈はこのぐらいにして、それではここで、ひとつサンプルをご覧ください。

これはサンプルですので、ご自由に操作してください。
もちろん入力するのは適当なデータで構いませんが、なるべく「それらしい」データ、たとえば「名前」には「123」などではなく「坂本 竜馬」というように、名前と判るようなデータを入れることで、機能などをよりチェックしやすくなります。

ポイント

勘違いされがちなのですが…、
入力フォームの機能や性能を高める目的は、より便利に、より楽にするためだけではありません。
重要なことの一つに、データの安全性、整合性、確実性などといった、システム自体の運用に大きく影響する点があります。データに問題があれば、クレームの原因だけでなく、もっと深刻なトラブルの原因にもなります。そこで、入力フォームにはデータのエラーチェック、エラーデータのリカバリーなどの機能を持たせます。いわゆるヒューマンエラーというのは決して避けられるものではありませんから、それを何とかしようと考えても仕方がありません。むしろ逆に、「人間は必ず間違える」と割り切り、それをいかに補うかが重要です。そもそもコンピューターという道具が発明されたのも、人間が苦手な仕事や間違えやすい作業をさせるためです。

このフォームには、主に以下のような機能があります。

エラーデータのリカバリー

単純な入力ミスを自動的に補正します。たとえば、長音記号「ー」とハイフン「-」は大変よく似ていて間違えやすいですが、「電話番号」のような項目に入力された長音記号を自動的にハイフンに置き換えて修正します。その他、カッコの混在や、数字に挟まれたカンマや小数点などを半角文字に統一させたり、「メールアドレス」に混入した全角文字を半角に、など様々な目的に応じた修正を行います。
このような違いは大差は無いと思う人もいるかもしれませんが、コンピューターの世界では、特に対処しない限り、すべて「別の文字」として扱われてしまうため、後でデータを検索したり利用したりするときに問題になります。

データのエラーチェック

上記のようなリカバリーが可能なのは単純な入力ミスなどの場合です。リカバリーし切れないような間違いの場合は、エラーチェック機能によりそれらの間違いを見つけ出し、エラーメッセージを表示して修正を促します。

メールアドレス

入力されたデータが、メールアドレスとして妥当かどうか、ありえるアドレスなのかどうか、などについてチェックします。インターネット標準、つまりインターネットでの「約束ごと」は「RFC」という文書にて規定されています。このRFCに基づいたチェックを行います。

日付

入力されたデータが、日付として妥当かどうか、つまり、存在する日付なのかどうかチェックします。たとえば、
「6月31日」は存在しません
「2008年2月29日」は存在します（うるう年）
「2009年2月29日」は存在しません
というようにカレンダーに基づいてチェックします。

その他フォーマット

たとえば電話番号などは、ハイフンは必ず数字に挟まれており、かつ、2つ連続することはありません。このような決まったパターンに基づいて、うっかりミスしてしまった場合のチェックを項目ごとに適切に行います。

入力ナビゲーション

吹き出しのようなボックスが表示され、これによって現在入力中の項目について解説したり補足したり注意を促したりします。一度にすべての注意事項を表示させてしまうことで、煩雑なイメージを与えてしまう、というようなことを避ける効果もあります。

グレーアウト

「次へ」ボタンなどをクリックすると、次の画面の準備が完了するまで操作をさせないように、画面全体の表示が薄れ、ボタン操作などを禁止します。
これにより、ダブルクリックによる二重送信を避けることができます。いくら文字で「何度もクリックしないでください」と表示していても、やってしまう人は意外に多く、その結果データが重複してしまうトラブルを招きますが、これは、そもそもクリックをできなくしてしまう機能です。
また、人間の心理として、待たされる時間というのは「何もない」よりも「何かが動いている」という状態のほうが、いかにも「今、処理をしている」という印象を直感的に与えるので、イライラを緩和させる効果があります（なお、サンプルは意図的に数秒間待たされるように作られています）。

再入力項目のハイライト

視覚効果の一つとして、データエラーによって再入力または修正が必要な項目を際立たせて表示します。
とても小さな事と思われがちですが、実はこれは人間の心理に大きな効果があります。項目のブロックと、完了・未完了を明確にすることで、どこが間違えていたのかなどが直感的に自然に理解できると、入力完了までの作業がよりスムーズに進みます。

郵便番号検索

入力された郵便番号または住所をデータベースから検索し、該当する住所または郵便番号を自動的に入力します。操作負荷の軽減だけでなく、郵便番号が正しいかどうかのチェックも兼ねます。

これらを踏まえた上で、ぜひとも、もう一度サンプルをお試しください。そして、わざと間違えてみてください。

以上、ここでご紹介した入力フォームは、あくまでもサンプルです。入力項目はもちろんビジュアルのデザインなどはカスタマイズ可能です。また、このサンプルにはない機能を追加したり、ショッピングカートと組み合わせることも可能ですので、お気軽にご相談ください。

いったい何が問題であり、どうすれば解決するのか

ユーザーインターフェイスがいかに重要であるか、ということ自体が認識されるようになってきたのは最近のことです。技術者たちにはおなじみのアラン・クーパー氏（ユーザーインターフェイス研究の第一人者であり、この人を知らないプロの技術者はいないとも言われるカリスマ技術者）は、「そもそも作り方に問題がある」のだと言っています。先端テクノロジは加速度的に進歩を続けますが、それによる性能や機能の向上がそのまま「良い技術」となるわけではありません。真に優れた技術は、誰にとっても使いやすいものでなければならない、テクノロジはそのために生まれたのだから、という理念が根底にあります。
このような考え方や理念を具現化するために、まず具体的にどうすれば良いのか、それは何よりもユーザビリティ・テスト（ユーザー・テストに似ているが測定対象が異なる）、すなわちユーザー行動の観察調査を積み重ねることが重要になります。人間工学や心理学、デザイン学などなどの分野からの視点で、なおかつセキュリティやデータ整合性なども絶対条件としながら、これらを研究して分析・要点抽出を行っていきます。
もちろん、このようなことに「絶対的な正解」など存在しませんから、これは継続的なものであり、ユーザーインターフェイスも進化を続けるということを意味します。

(C) 2008 Yeti PaPa. All rights reserved.