skillup

技術ブログ

UI

フォームとコントロール

投稿日:

今回はフォームについて

基本原則となる考え方

  • 何を要求されているのか、何のためなのかを、ユーザーが理解できるようにする
  • 可能なら、何も質問しないでおく(オートコンプリートやディフォルトを使用するなど)

寛容な入力形式

ユーザーがテキストを様々な形式や構文で入力することを認め、それをアプリケーション川で理知的に解釈する

ハイフン有り無し、全角半角などをすべて許可し、システム側で変更を行う

構造化された入力形式

単一のテキストフィールドではなく、要求されるデータの構造を反映したテキストフィールドの集合を用いる

電話番号など、一定の形式に整形された特定の種類のテキスト入力をユーザーに要求する場合。

穴埋め

1つまたは複数のフィールドを散文またはフレーズの形式をなすように並べ、各フィールドはユーザーが埋める空白としておく。

組み合わせのデータ入力形式など。

入力ヒント

空白のテキストフィールドの近くに、必要な入力内容を説明する文章や入力例を配置する。

インターフェース上での入力例が誰にでも一目でわかるというのではない場合。テキストフィールドのラベルに2~3語を超える言葉を入れたくない場合

入力プロンプト

どんな操作をすればよいか、または何を入力すればよいかをユーザーに知らせるものをテキストに入力しておく。

オートコンプリート

入力補完。

テキスト系全般に必要だが、URLやメールアドレスとくに入力内容が長く打ち込みにくいもの。

ドロップダウン式の選択

複雑な値選択のためのUIを含むドロップダウンまたはポップ

カラーパレット、ディレクトリ、カレンダー、計算機、デザイン系ソフトの形状の選択など

画像による選択肢

主にデザイン系のソフトにて、テキストの代わりに、画像を用いて用意された選択肢を示す

リストビルダー

選択元と選択先の両方のリストを同じページ上に表示し、ユーザーがそれらの間で項目を移動できるようにする

複数の選択肢から複数の項目を選ぶ場合

よいディフォルト値

フォーム上の適当なフィールドすべてに、ユーザーが望む値として最もふさわしいと推測されるものを呼び入力しておく

同一ページ内でのエラーメッセージ

フォームのエラーメッセージを、フォーム自体があるページ上に直接配置する。

ページの上部にエラーメッセージを表示して目立たせ、可能ならばエラーの原因となったコントロールの横にも目印をつける。

決定ボタンを押す前に入力した瞬間にエラーがでればなおよい。

-UI

執筆者:


comment

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

関連記事

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

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

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

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

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

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