skillup

技術ブログ

UI

フォームとコントロール

投稿日:

今回はフォームについて

基本原則となる考え方

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

寛容な入力形式

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

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

構造化された入力形式

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

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

穴埋め

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

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

入力ヒント

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

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

入力プロンプト

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

オートコンプリート

入力補完。

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

ドロップダウン式の選択

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

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

画像による選択肢

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

リストビルダー

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

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

よいディフォルト値

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

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

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

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

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

-UI

執筆者:


comment

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

関連記事

no image

検索ページの遷移に関して

検索ページの遷移に関してメモ。 基礎だが実際全部完全に網羅できているかというと不安な部分が多い。 Contents1 基本仕様: 以下のようなページ構成を想定2 想定しないといけない遷移状態3 よくあ …

no image

情報アーキテクチャの分類

今回は情報の分類に関して。 ようはソフトウェア上に情報をどのように配置するかということについてです。 参考書では情報を大きく4つに分けています。 Contents1 オブジェクトのリスト2 アクション …

no image

アプリケーションの画面構成に関して

アプリケーションの画面の設計スタイルに関してよく使われるものを。 Contents1 2パネルのセレクタ2 カンバスとパレット3 1ウィンドウでのドリルダウン4 代替表示5 ウィザード6 オンデマンド …

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …

no image

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

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

アーカイブ