| 出題者 | カテゴリ | 作成日 |
|---|---|---|
 坂本 邦夫 |
ユーザビリティ・デザイン担当 | 2015-07-30 10:22:08 |
| 問題 | ヒント | 回答数 |
|---|---|---|
| ■エントリーフォームの改善
申し込みフォームやお問い合わせフォームには使い勝手が重要です。フォームにたどり付くまでの流れがよくても、フォームが使いにくい、申し込みにくいことで、多くの人が最後まで進めずに離脱することも多いのです。 そこで今回はフォームの改善について考えてみることにしましょう。 下の図は同じ内容のフォームをパソコンやタブレットの大きな画面で見た場合とスマートフォンで見た場合の両方を並べています。 http://webtan-tsushin.com/wp-content/uploads/2015/07/diagram.fw_.png このフォームをより使いやすくするために、必要なことを思いつくままにご回答ください。入力しやすいこと、何を入れればいいかわかりやすいこと、誤操作を防ぐこと、入力を減らすことなど、様々な課題が潜んでいます。 質問1 両方のフォームに共通する改善ポイントはどこでしょうか? 質問2 スマートフォンのフォームで特に気を付けるべきことは何でしょうか? |
4 |
メンバーの回答一覧 お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。
| なるほど 票数 |
回答 | 講師コメント |
|---|---|---|
| 1 | yukko質問1 両方のフォームに共通する改善ポイントはどこでしょうか?
・入力項目は極力絞った方がよいのでふりがななどの項目は不要。 ・入力ボックスが分割されている。ボックスが増えるとカーソルを移動する行為が増えるので離脱に繋がる。姓名は氏名で1ボックスに改善。 ・郵便番号欄を設けて住所を自動検索にする。 ・お問い合わせ件名などは選択式に変更 ・リセットと確認ボタンの色が同じなので色を変える ・問い合わせをする人たちはライトユーザーが多いので、お問い合わせをした後のメリットを打ち出して不安を取り除く最後の一押しが必要。問い合わせ後の返信対応をどのような形でどのぐらいの期間で行うかを明記をする。 質問2 スマートフォンのフォームで特に気を付けるべきことは何でしょうか? ・スマホは画面が小さく入力が面倒なので極力シンプルでわかりやすくする。 ・ボタンや入力ボックスを大きくしたり、自動入力ができるものは極力自動入力機能を活用する。 ・入力エリアではスクロールさせずに次のステップに進めるように一画面でおさまるように配置する。 ・フォームが縦に長くならないように例記は横がボックス内に配置する。 ・スマホは電話なので電話CVが取りやすいので電話番号を明記しておく。 |
金 (坂本 邦夫) 大変細かく改善点を書いていただきましたが、特に「スマホは電話なので電話CVが取りやすいので電話番号を明記しておく」の一文で金とさせていただきました。 入力や見やすさだけでなく、問い合わせをする人のことを想定した回答で、素晴らしいと思いました。 |
| 0 | chichichi1.両方に共通
・赤い※が必須項目のようですが、何が「必須」か分かりにくいので マークでなく、日本語で「必須」とする表記に変更し、赤字もしくは赤背景で白抜き等にして目立たせる。 ・自由項目に「任意」の記載をプラスするとより親切だと思います。 デザインは「必須」ラベルと同じようにして赤系以外の色で。 ・項目名と入力ボックスの距離。 PCではやや離れて見づらく、「この問に対する入力欄」のまとまりが弱い気がします。 スマホで不自然な折り返しになっているため、 項目名と入力ボックスの段を2段に切り替える。 名前の項目も、姓で1行・名で1行になるように。 ・項目名は太字、入力ボックスは細字などにしてメリハリをつける。 ・ふりがな欄の姓・名という表現だと漢字を入力するようにみえそうなので、かな表記にする。 ・プレースホルダ―で各々に入力例を入れる。 (プレースホルダ―は入力すると消えてしまうので、入力例を忘れてしまう問題もありますが…) ・<input type="tel">や<input type="email">など、 半角入力が切り替えられるよう記述しておく。 なるべくお客様自身が切り替えしなくて良いように。 ・リセットボタンは大抵使わないので外す。 ・確認ボタンを押しやすくするため、余白と幅のあるボタンに。 ・単なるお問い合わせなら、住所・電話番号は不要なことが多いので、削除してもいいように思います。 2.スマートフォンのフォームで特に気を付けるべきこと? ・入力ボックスに余白をとる。 ・項目名に背景色などをつけると、くっきりして、見やすくなりそうです。 |
銀 (坂本 邦夫) chichichiさんにも大変細かく丁寧なご回答をいただきました。銀とさせていただきます。 具体的な指摘で、ここに書かれていることをきちんとやれば、一般的なフォームであれば、まず及第点のフォームになるはずです。 その上で「単なるお問い合わせなら、住所・電話番号は不要なことが多いので、削除してもいいように思います」のように、そのフォームの置かれている状況も想像しての回答でした。 |
| 0 | ロンチ質問1 両方のフォームに共通する改善ポイントはどこでしょうか?
・「*」ではなく「必須」と分かりやすく入れる ・半角入力を強制で求めることによって、全角で入力してしまった際のエラーがストレスになるため 半角・全角の両方を許容できるようにする ・リセットボタンは、誤って押してしまった場合に再入力のストレスになるので不要 ・住所は、郵便番号を入れれば市区まで自動入力となる仕組みを入れた方がよい 質問2 スマートフォンのフォームで特に気を付けるべきことは何でしょうか? ・姓名は入力スペースを分けない(入力項目をタップしないといけない回数が増えるため) ・入力スペースはパソコンよりも幅を広くする |
銅 (坂本 邦夫) ユーザーがストレスなく入力出来るという視点でまとめていただいたロンチさんを銅とさせていただきました。 「半角・全角の両方を許容できるようにする」のように、Javascriptやシステムなどの実装側で解決できる問題は、ユーザーに負担をかけないように実装していくことで、離脱を減らすことができます。 |
| 0 | kamino質問1 両方のフォームに共通する改善ポイントはどこでしょうか?
全てのフォームの縦幅を倍ぐらいにする 入力例を横か下に出す メールの入力欄は2つに分け、間に「@」を入れておく 住所入力は県、市、番地など入力欄を分ける 郵便番号の入力欄を設ける、郵便番号で住所検索&自動入力 電話番号の入力欄を3つに分ける 問い合わせ件名を選択式にして入力しやすくする リセットと確認ボタンの色を変える、大きさを変える、ボタンとボタンをもう少し離す 質問2 スマートフォンのフォームで特に気を付けるべきことは何でしょうか? とにかく入力が面倒なので、入力補助を活用する ボタンなど指で押しやすい大きさにする お客様ができるだけ入力しなくてもすむようにする 入力しなくてもすむように選択で出来るところは選択式にする ページを分ける、ステップ式にする |
なし (坂本 邦夫) kaminoさんは他の3名の方とは異なり入力項目を増やすという回答をいただきました。 あえて分けなければならないという状況もあるのですが、その辺りの増やす背景がもう少し書かれているとよいなと思いました。 |