skillup

技術ブログ

デザイン

フォーム入力のポイント

投稿日:

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

選択肢は横よりも縦で

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

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

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

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

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

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

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

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

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

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

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

-デザイン

執筆者:


comment

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

関連記事

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

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

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

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

アーカイブ