skillup

技術ブログ

デザイン

フォーム入力のポイント

投稿日:

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。

選択肢は横よりも縦で

ラジオやチェックボックスなどで大量の選択肢を並べる場合、人間の視認性は横よりも縦のほうが勝るため、左右にずらずら並べるよりも縦に並べるようにしましょう。

エラーがすぐにわかる入力欄を

  • エラーの内容がすぐにわかる。文字だけでなく色ですぐにわかる。専門用語をつかわない。
  • リアルタイムでエラーチェックが行える
  • 入力例がある

会員登録ではメリットをわかりやすく

会員登録では基本的に煩雑なので、わかりにくい契約事項ではなく、メリットを分かりやすく述べる。

必須項目はなるべく少なくする

数項目だけで、会員登録でき、必要な項目はあとで入力できるようにする

重要な個人情報はできるだけ聞かない

Web見積もりだけなのに、住所や電話番号などをしつこく聞く

トラブル対応やカスタマーサポートなど

漠然とではなく、こちらから質問内容を絞る。商品の型番やお問い合わせの種類など具体性のある質問をする。

-デザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-610029 …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …