skillup

技術ブログ

UI

フォームとコントロール

投稿日:

今回はフォームについて

基本原則となる考え方

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

寛容な入力形式

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

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

構造化された入力形式

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

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

穴埋め

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

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

入力ヒント

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

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

入力プロンプト

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

オートコンプリート

入力補完。

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

ドロップダウン式の選択

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

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

画像による選択肢

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

リストビルダー

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

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

よいディフォルト値

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

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

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

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

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

-UI

執筆者:


comment

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

関連記事

no image

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

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

no image

ナビゲーション

本日はソフトウェアのナビゲーションについて。 要は「いかにユーザーに目的の操作まで少ない経路でたどり着いてもらうか」に関してです。 Contents1 移動距離は常に短く&クリック回数は少なく2 ナビ …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

ソフトウェアデザインの目的

本日からのお勉強のお題は、UIの設計などについて。 参考図書:デザイニングインターフェイス Contents1 ソフトウェアとは目的達成の手段である2 ユーザー調査の基礎3 ユーザーの学習意欲・リテラ …

no image

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

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