フォームのリセットボタンを考える

フォームによくあるリセットボタンは本当に必要なのでしょうか?そんな点をじっくりと考えてみましょう。

独学!未経験からWebデザイナーになる!! > Web制作Tips > フォームのリセットボタンを考える

フォームのリセットボタンを考える

Webページの送信フォーム。きっとあなたも、ネットショッピングや問い合わせなどで使ったことがあるのではないでしょうか。

今回焦点をあてたいのは、そのフォームの中でも脇役とも言えるリセットボタン。つまり、フォームの入力内容を初期化するボタンです。

リセットボタンは大抵のHTMLの本を見ると、送信ボタンと併せて説明されています。それはなぜか……と言えば基本中の基本だからだと思うのですが、このリセットボタン、時にユーザーをいやな気持ちにさせてしまうこともあるのです。

今までは何も考えずに送信ボタンのとなりにリセットボタンを置いていた……という方もいると思いますが、このページではデメリットについても考えてみたいと思います。

リセットボタンは何のためにある!?

そもそも、リセットボタンは何のためにあるのでしょうか。いったいどういった時にユーザーはこのボタンをクリックするのでしょうか。

使用するシーンを推測してみると、「送信フォームを途中まで入力したけれど、やっぱりやーめた!」という時に押すことが考えられます。具体的にはリセットボタンを押して入力内容を削除し、そして他のページに移動するorブラウザを閉じる、というのが一般的な使い方と言えるでしょう。

他には、データベースなどから読み込んだデータがフォーム内に初期表示されているようなシーン。例えば会員情報変更画面で、途中まで入力した情報をリセットして、初期状態に戻す際などにも使うかもしれません。(リセットボタンでなくてもできるので、あくまで例としてです)

いずれにしても共通しているのは、当たり前ですが初期化するということですね。ただ、今挙げたものは、リセットボタンが無くてはならないという訳ではありません。最も一般的な使い方とも言える前者の例なども、別にリセットボタンを押さなくても他のページに移動すればいいだけ、とも言えます。つまり絶対にリセットボタンを設置しなければならないというシーンはそう多くないのです。

リセットボタンが招くヒューマンエラー

さて、冒頭で「リセットボタンがユーザーをいやな気持ちにさせてしまうこともある」と言いましたが、あなたは想像できますか?

実はユーザーが「送信ボタン」を押そうとして、「リセットボタン」を押してしまうということがまれに発生するのです。もしかしたら、過去にやってしまったことがある方もいるかもしれませんね。ちなみに私はやったことがあります(押した瞬間に気がついて、あ"~、しまった!という感じでした)。

「リセット」などとラベルがあるのにどうして間違えてしまうのだろうと思いますが、こういった“うっかり”は、人間はだれでもやってしまう可能性があります。それらはヒューマンエラーと呼ばれ、ウェブに限らず、日常でも人間はこういったエラーを日々起こしているのです。

エラーをしたのはユーザーですからちゃんと使わなかった方が悪いと思われるかもしれませんが、ユーザビリティの観点から考えると、ヒューマンエラーを起こした人を悪者にはできません。それよりも、その発生源を解消することが大切です。

それに、個人のサイトならまだしも、商用サイトでそのようなことが発生してしまうと損失に繋がる可能性もあります。間違ってリセットしてしまい、入力が面倒くさくなってやめてしまう人もいるかもしれないからです。そのようなことが発生しては、“売れるサイト”を作らなければならないWebデザイナーとしては大問題。よく考え、対処する必要があるでしょう。

本当にリセットボタンは必要なのか!?

ここで大事なのは、このフォームにリセットボタンは本当に必要なのだろうか?と設置する前に考えてみる事だと思います。合理的な意味があってリセットボタンが設置してあるのなら、それはきっと必要なのでしょう。

大事な点は、それを考えた上で設置しているかどうかだと思います。まあ実際は必要でない場合が多いでしょうね。私もいままで数々のウェブサイトを作ってきましたが、必要だったケースはすぐには思いだせません。

ヒューマンエラーを防ぐために、必要でないと判断したときはリセットボタンを置かない方がいいでしょう。

どうしても設置したい場合は!?

ただし、どうしても設置したい場合もあるでしょう。そういったときには、JavaScriptによる確認を挟むのも一つの手です。意味がわからない方もいると思いますので、実際にやってみますね。下記のフォームに適当に文章を入れてリセットボタンを押してみてください。(テストなので送信ボタンはつけていません)

テストフォーム

 

きちんと確認画面が挟まれたでしょうか?「入力内容を削除してもよろしいですか?」という確認が表示され、「OK」を押すとリセット「キャンセル」を押すとリセットがキャンセルされます。(※OSにより多少表記が異なる場合があります)

このフォームのコードは下記のような短いものです。

JavaScriptを書いたことがない方でも比較的直感的にわかりやすいと思います。細かく言えば、全て空だった場合は何もしないなどの処理をしてもいいでしょう。JavaScriptができればいろいろな実装方法が考えられますね。

以上が設置する場合のベターな策だと思います。繰り返しますが、設置の際はよく考えたいものです。とはいっても数年前に比べてだいぶリセットボタンは減ってきた気はしますけれどね。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

コメント

この記事へのコメントはまだありません。

Web制作Tips
デザイン
フリーの写真素材を有効活用しよう
デザイナーならこだわりたいカーニング(文字詰め)
文字のジャンプ率で適切なサイトイメージを演出する
TPOを考えてハズさないフォントを選ぶ
失敗しない配色の基本
ユーザビリティ
そのフォントサイズ、適切ですか?
リンクテキストをわかりやすくする
├フォームのリセットボタンを考える
リンク切れ時に適切な404ページを表示をする
フォームの確定ボタンは右?左?
コーディング
文法チェッカーで正しい(X)HTML/CSSを書こう
インデントで読みやすいソースコードを
文字化けを防ぐ&解消する方法
背景画像ありのボックスの文字をはみ出させない方法
その他
ディレクトリ構造は適切に
絶対パス?相対パス?ファイルの指定方法いろいろ