skillup

技術ブログ

UI

フォームとコントロール

投稿日:

今回はフォームについて

基本原則となる考え方

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

寛容な入力形式

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

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

構造化された入力形式

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

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

穴埋め

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

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

入力ヒント

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

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

入力プロンプト

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

オートコンプリート

入力補完。

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

ドロップダウン式の選択

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

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

画像による選択肢

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

リストビルダー

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

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

よいディフォルト値

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

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

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

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

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

-UI

執筆者:


comment

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

関連記事

no image

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

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

no image

ナビゲーション

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

no image

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

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

no image

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

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

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …