skillup

技術ブログ

UI

フォームとコントロール

投稿日:

今回はフォームについて

基本原則となる考え方

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

寛容な入力形式

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

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

構造化された入力形式

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

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

穴埋め

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

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

入力ヒント

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

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

入力プロンプト

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

オートコンプリート

入力補完。

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

ドロップダウン式の選択

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

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

画像による選択肢

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

リストビルダー

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

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

よいディフォルト値

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

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

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

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

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

-UI

執筆者:


comment

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

関連記事

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

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

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

no image

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

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

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …