skillup

技術ブログ

デザイン

フォーム入力のポイント

投稿日:

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

選択肢は横よりも縦で

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

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

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

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

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

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

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

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

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

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

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

-デザイン

執筆者:


comment

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

関連記事

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-656b5 …

no image

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

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

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

アーカイブ