フォームは、ユーザーがe-commerceでの取り引きで使われる情報などの情報を入力するときに、効力を発揮します。なぜなら、フォームでは、いろいろな面で実世界の手続きに似たエクスペリエンスが提供されているからです。

フォームを使うと、次の3つの点で情報を入力しやすくなります。

• 入力する情報のタイプに応じたコントロール を利用できる。
• 構造 が提供されているため、ユーザーは必要な情報を簡単に見つけることができる。
• ナビゲーション がサポートされているため、ユーザーはフォーム間を簡単かつ効率的に移動できる。そして、最終的にフォームを実行依頼できる。

フォームは、e-businessやe-commerceで非常に大切です。フォームが備えられているおかげで、顧客はオーダーを出し、製品を購入し、それぞれの購入情報を登録し、サポートを受け、フィードバックを出せるわけです。

そうは言っても、効果的で効率のよいフォームを作ることは難題です。なぜでしょうか。その理由は、ユーザーは一般的に、他の何かをするよりもフォームの入力に時間をかけるものだからです。多くの場合、ユーザーは必要とするものをすでに決めていて、フォームをわずらわしいものとしか見ていません。加えて、フォームを入力するときに、エラーになってしまったり、理解しにくくていやなエラー・メッセージが出される可能性があります。

フォームを完成させる作業が簡単になればなるほど、顧客の満足度も高くなるわけですから、この難題を解決することは重要です。今回の記事では、フォームの各構成部品に最適なコントロールを選ぶ、という難題を解決するのに役立つガイドラインをいくつか取り上げます。また今後の記事で、フォームのレイアウトとナビゲーションについて、同じようにいくつかのガイドラインを扱います。

フォームとコントロール

フォームとは、ユーザーが情報を入力できるようにするための、コントロールの配置のことです。一方、コントロール (よく見られるテキスト・フィールドやリスト・ボックスなど) とは、人名などの何らかの情報要素を表すもので、ユーザー側で操作できるものです。このようなコントロールには、情報をビジュアルに提示する機能と、ユーザー側で情報を操作するときの何らかの操作メカニズムの両方が備えられています。こうした表現モデルのパラダイムに精通されている読者の皆さんであれば、コントロールとは、コントロールで表される情報要素の表現 にすぎないことを理解されるでしょう。ここで留意していただきたいのは、表現 という言葉は、必ずしもビジュアル を意味するわけではないということです。表現では、ユーザーが何らかの方法で認識できる情報を表せます。また、はなしことば、音、音楽も表現として使うことができます。では、なぜコントロールは特異なのでしょうか。コントロールが特異なのは、よく知られていて頻繁に使われる情報タイプを、事前に定義された表現で表すという理由があるからにすぎません。一般的に、コントロールは、プラットフォームのユーザー・インターフェースを標準化し、開発を容易にするために、開発ツールキットのコンポーネントとして提供されます。

これから説明するコントロールは、現在利用できるGUIツールキット、HTMLフォーム、Java Swingで一般的に使えるコントロール群です。名称はさまざまかもしれませんが、機能は似ているので、すべてのコントロールで一般的なガイドラインを使えます。

ガイドラインの一部は、この記事の最後に掲載されている表にまとめられていて、一覧表として参考にすることができます。このような表やガイドラインは、開発を進めるプラットフォームのUI設計ガイドラインと共に用いるようにします。この記事の目的とするところは、皆さんが、ユーザーの表現 と、コントロールを使うときの選択がその表現にどのように影響するかを、評価できるようになるということです。

上に戻る

ガイドライン

一貫したコントロールを使う

Webサイトやアプリケーションでは、特定の種類の情報に対しては、同じタイプのコントロールを使うようにします。こうした一貫したコントロールを使うようにすれば、ユーザーはあるフォームでコントロールの役割を理解したら、別のフォームでもその理解を活用できるので、エラーを最小限に抑えられます。ユーザーは、求められる情報をさらに早く見つけられますし、そのコントロールを操作して情報を提供する方法をすでに理解しているわけです。たとえば、住所に州名を入力するときにスピン・ボタン・コントロールを使うなら、Texas州のユーザーは、「t」を2回入力すると「Texas」が表示されることをすぐに理解するでしょう (最初の「t」で「Tennessee」が表示され、2回目の「t」で「Texas」が表示されます)。州を指定するフィールドのために、サイト全体で一貫してスピン・ボタンを使えば、このユーザー・ショートカットが毎回機能します。

一般的に、次の原則に留意するようにします。

• 同じタイプの入力には、同じタイプのコントロールを使う。
• それぞれのコントロールのタイプごとに、その外観と働きをどこでも同じにする。
• 不正確 / 不完全なデータが入力されるときのために、表示されるメッセージとエラー回復テクニックを統一する。

たとえば、「Male/Female」を入力するときに、あるフォームではラジオ・ボタンを使い、別のフォームでは2つの値のスピン・ボタンを使うというのではなく、どのようなフォームでも常に2つのラジオ・ボタンを使うようにするということです。スペースやレイアウトの関係で最適なコントロールの使用が制限を受ける場合、スペースをあまり取らない類似のコントロールに置き換えてください。たとえば、リスト・ボックスの代わりにドロップダウン・リストを使うなどです。カーソルを合わせることと選択することのように、ほとんどの操作の意味は同じですので、どちらのフォームのリストを使っても、ユーザーにとっては難しいことはありません。

コントロールごとか関連する一群のコントロールごとに注記を付ける

ユーザーが、コントロールは何を表しているのか、また、ユーザーは何を入力し選択できるのか正確に理解できるように、それぞれのコントロールを明確にするようにします。それぞれのコントロールのそばに注記 (またはラベル) を付けます。一般的にはテキスト形式になります。関係するコントロールが (ラジオ・ボタンのグループなど) グループの一部であれば、そのグループにもラベルを付けるようにしてください。

注記は、いくつかの理由のため、コントロールの中 に置くよりも、それぞれのコントロールのそばに付けるほうが良いでしょう。

コントロールの中に注記を置くと、デフォルト値を表示できなくなります。デフォルト値が表示されるおかげで、不必要な入力をしてエラーが生じる可能性を避けられます。別の点として、注記がコントロールの中にあると、入力しなければならないフィールドを目で見ながら探す作業が複雑になります。すべてではなくても、ほとんどのフィールドで注記がコントロールのそばにあると、ユーザーは、中に注記が置かれたコントロールを見過ごしてしまい、エラーになるかもしれません。それで、フィールドにいつもデフォルト値を設定できるわけではないにしても、ある注記を外側に付け、別の注記を内側に置くことは良い方法ではありません。注記というのは便利なもので、ユーザーが設定できる項目や、選ぶことのできる選択項目についての情報を得られます。たとえば、ある注記では、全10桁の電話番号を区切らずに入力するよう指示されます。注記がコントロール内に置かれていると、ユーザーは注記に上書き入力して情報を置き換える必要があるので、このような有益な情報が消えてしまいます。最後に、ユーザーが以前に入力したユーザー・データが保持されているフォームへ戻っても、注記は表示されないため、コントロールのコンテンツなのか指示なのかを区別しにくくなります。

ユーザーが入力せずに選択できるようなコントロールを使う

フィールドに指定できる値をシステム側でいくつかまたはすべて用意している場合、ユーザーが入力しなければならないようなコントロールではなく、リストのようなオプションを表すコントロールを使うようにします。一般的に言って、特定のオプションを選ぶという作業は、応答を入力する作業よりも簡単なだけでなく、エラーが非常に起こりにくくなります。

アクションの場合には選択コントロールを使わないようにする

一般的な情報、設定、パラメーターでは、ラジオ・ボタン、チェック・ボックス、リスト等の選択コントロールを使いますが、アクションの場合には使いません。アクションは、一貫して押しボタンを使って表すようにします。アクション向けに選択コントロールを使っても、そのアクションを実際にいつ実行するのか、アクションを選んですぐなのか、それともいくらか後に (OKなどの) 押しボタンを選択してからなのかがはっきりしません。

状況に合わせた適切なコントロールを選ぶ

その状況に最も適した機能を持つコントロールを使うようにします。適切なコントロールを選ぶかどうかで、ユーザー・エクスペリエンスを満たせるか、それともフラストレーションを生む結果になるか分かれることがあります。続く部分では、いろいろな情報のニーズに合わせて最適なコントロールを選ぶ際のガイドラインをいくつか紹介します。これらのガイドラインについては、この記事の末尾でも要約します。

スピン・ボタン
スピン・ボタンは、スペースが限られている場合に、数少ない選択項目から1つの選択項目を選ぶのに使います。1つのスピン・ボタンで選択項目群を リスト として表しますが、ユーザーが一度に見ることのできる選択項目は1つだけですので、リストを表示することと同じ方式ではありません。他のいずれかのリスト・コントロールを使わずにスピン・ボタンを使う主な理由は、スペースを節約することですが、そうであればドロップダウン・リスト・ボックスを使うほうが有利な場合もあります。スピン・ボタンを使うのであれば、スペースの要件と、認識および選択のしやすさとを比較考量することになります。

頻繁に使う選択リストにはスピン・ボタンを使わないでください。その代わりに、選択項目全体か複数の選択項目を一度に表示するリスト・ボックスや、他のコントロールを選ぶようにします。スピン・ボタンを使うのは、あまり頻繁に使わない選択項目で、余分のスペースを使わなくても良い選択項目の場合にしてください。選択項目の数は、たとえば20個未満程度の少なめにしておきます。そうしないと、ユーザーはスピン・ボタンをスクロールさせることに飽きてしまい、エラーが生じるかもしれません。また、ユーザーがリストをスクロールするときに、選択項目をすぐに見つけられるように、各選択項目の長さは約20文字に制限します。この選択項目には任意の英数字テキストを使えますが、選択項目は、順番に並べられたリストの中で連続した 値を表すものでなければなりません。ユーザーは一度に一つの選択項目しか見ることができないため、ユーザー側は連続した選択項目に精通し、後に続く次の選択項目だけでなく、リストにいくつの選択項目が含まれているのかも予測できる必要があります。ユーザーが連続した選択項目を理解していれば、スクロールするときに、希望する選択項目をうっかりと通り過ぎてしまう可能性ははるかに少なくなります。たとえば、次に示されているように、スピン・ボタンを使って、アラームを鳴らす頻度を指定することができます。

ただしこの例では、指定できる値の範囲がはっきりしていません。最大で7日、99日なのでしょうか。それとも365日まで指定できるのでしょうか。この場合、別の注記テキストが示されていれば、ユーザーは最大を予測しやすくなります。

ユーザーが、選択項目のリストから選択するだけではなく、テキストを自分で入力できるようにするのであれば、入力フィールドのための標準的なテキスト選択ルールと編集ルールに従い、スピン・ボタンを編集できるように設定してください。たとえば、ユーザーがダブルクリックして文字を選択するか、マウス・ボタンを押したままずらして文字を選択するかして、その後で自分のテキストを上書きできるようにします。

チェック・ボックス
チェック・ボックスは、選択項目の数が少ないと同時に、複数の選択項目 を選ぶ対応が可能な場合に、一つのグループとして使うようにします。1つのグループに含まれるチェック・ボックスの数は、5～7程度の比較的少ない数に制限してください。そうするなら、全体を眺めて選択することが容易です。この場合の選択項目は静的なものです。つまり、ユーザーが見るたびに変わることはありません。もし選択項目が多岐にわたるのなら、チェック・ボックスではなく、いずれかのリスト・コントロールを使ってください。それぞれのチェック・ボックスに付属するラベルは、テキストでもグラフィックでも構いませんが、比較的短いものにする必要があります。グループの中でのチェック・ボックスの並べ方ですが、目で全体を容易に見ることができるように、行や列の形式で整然と並べるようにします。ひとまとまりのチェック・ボックスでは、選択項目の数とサイズに比例して、所定のスペースを使うため、選択項目の数を少なくし、ラベルを短くすることで、必要とされるスペースを最小限に抑えてください。ただし、意味がわからなくなるほど短くしないようにします。

次の例では、ユーザーは、e-mailが到着したときに、視覚と音声の両方で通知を受けることを選べます。チェックを付けると、「Audio notification」チェック・ボックスがアクティブになるか、ファイル名入力フィールドと「Browse」ダイアログが利用できるようになります。ここに示されているように、この関連をビジュアルに表現する目的で、そのための他の従属したコントロールをインデントすることは良い方法です。

相反する2つの選択を表現する1つの選択項目 を使う場合には、1つのチェック・ボックスだけを使うことができます。たとえば、指示された選択に関して、「yes/no」、「true/false」、あるいは「not」で答えられる場合等があります。この例では、値をチェックしないと、「Disable Press-to-Select」を選んだことを暗に示すものとなります。

1つのチェック・ボックスのラベルは2つの選択項目のどちらか一方を示すものですから、チェックを外したときの意味をユーザーによく理解してもらわなければなりません。「A4 Paper」などの選択項目に1つのチェック・ボックスを使うのは、恐らく不適切でしょう。なぜなら、ほとんどのユーザーにとって、チェックを外したときに表される用紙のサイズがはっきりしないからです。ユーザーが1つのラベルから2つの選択項目を理解できない恐れが少しでもある場合、1つのチェック・ボックスではなく、2つのラジオ・ボタンを使うようにしてください。これで、両方の選択項目がはっきりと区別されます。

ラジオ・ボタン (オプション・ボタン)
ラジオ・ボタンは、1つの選択項目 だけを選ぶ対応が可能で、1つの選択項目を必ず選ばなければならない場合に、グループとして使うようにします。1つのグループに含まれるラジオ・ボタンの数は、5～7程度の比較的少ない数に制限してください。そうするなら、全体を眺めて選択することが容易です。この場合の選択項目は静的なものです。つまり、ユーザーが見るたびに変わるものであってはなりません。もし選択項目が多岐にわたるのなら、ラジオ・ボタンではなく、いずれかのリスト・コントロールを使ってください。それぞれのラジオ・ボタンに付属するラベルは、テキストでもグラフィックでも構いませんが、比較的短いものにする必要があります。グラフィックの選択項目では、できれば値セットを使い、さらに魅力的なビジュアル表現を実現してください。グループの中でのラジオ・ボタンの並べ方ですが、目で全体を容易に見ることができるように、行や列の形式で整然と並べるようにします。次の例は、グループ・ボックスに囲まれた4つのラジオ・ボタンです。このグループ・ボックスには、そのグループを表す注記があります。グループ・ボックスを多用することは避けてください。視覚的に非常にうるさく感じ、選択項目を見る気がそがれてしまいます。深い入れ子になっているダイアログ、ウィンドウ、フォームでは、ラベルが記されたグループの周囲で余白を上手に用いるなら、さらに訴えるものになるかもしれません。

ひとまとまりのラジオ・ボタンでは、選択項目の数とサイズに比例して、所定のスペースを使うため、選択項目の数を少なくし、ラベルを短くすることで、必要とされるスペースを最小限に抑えてください。ただし、意味がわからなくなるほど短くしないようにします。さらに、選択項目を1つ、それも唯一の選択項目を選ぶ必要があるので、多くのユーザーの必要を満たすであろう選択項目を事前に選ぶようにしてください。このようにすれば、エラー条件を避けられると共に、特定のユーザーにとっては選択が早く終えられることになります。ユーザー側で選択項目を選ばなくてもよい状況があれば、引き続きラジオ・ボタンのグループを使い、「None of the above」のような選択項目を追加できます。

値セット (選択項目の表)
値セットは、選択項目のグループが小規模 (たとえば、20以下) な場合に、選択項目の種類とサイズに応じて、ラジオ・ボタンに代わるより魅力的なコントロールとして使えるものです。値セットは表のようなもので、それぞれのセルに1つの選択項目が入っています。この選択項目は、テキスト、グラフィック、色のスイッチなどで構いません。あまりないケースですが、選択項目が非常に似通っていて、それぞれの表現が非常に小さくなるような場合には、1つの値セットに200～300の選択項目を表示することもできます。次に示されているようなカラー・パレットは、値セットを上手に利用しています。

背景の色を選択します。

値セットは一群のラジオ・ボタンのような働きをしますが、ラジオ・ボタンのグラフィックがなくなるため、外観はより魅力的なものになります。選んだオプションをビジュアルに表現するときのお勧めテクニックは、一般的に押しボタンが押されると「押し込まれた」状態で表されるように、セルが押されたときも3-D感覚で「押し込まれた」状態を表すことです。

リスト・ボックス
リスト・ボックスは、選択項目のリストを表示するときに使うようにします。特に、内容もさまざまで何度も利用する場合に使います。リスト・ボックスが便利なのは、選択項目が広範かつ多種多様で、その数も2、3から数百、数千にも達する場合です。このときの選択項目は、テキスト、グラフィック、それらの組み合わせでよいのですが、留意すべき点がいくつかあります。テキストの選択項目の場合に、ユーザーがリストをスクロールして調べるときに、ある選択項目と次の選択項目とを区別できる言葉を付けるようにしてください。たとえば、同じ2つか3つの言葉で始まる複数の選択項目をリストしないようにします。

リストでは、カーソルが動き、ショートカットがスクロールする必要があります。たとえば、ユーザーが入力した1つの文字で始まる最初の選択項目へカーソルが移動するなどです。選択項目が固有ではっきり分かっていれば、このカーソル移動テクニックは、最高に便利です。選択項目がテキストなしのグラフィックである場合、ユーザーは必要な選択項目を目で見て探して見つける必要があるため、選択項目の数を比較的少なくし、スクロールせずに済む方が助かります。

リストは、1つの選択項目か複数の選択項目 のいずれかになります。また、最低でも1回は選択することが必要な場合もありますし、選択しなくても構わないケースもあります。たとえば、リスト・コントロールのバージョンによっては、リスト・ボックス自体の中に小規模なラジオ・ボタンやチェック・ボックスがあり、1つの選択項目と複数の選択項目を視覚的に区別しています。使っているリスト・コントロールにそのような表現がなければ、いくつの選択項目を選べるのか、または選ぶ必要があるのか、そして複数選択するときにはどのようにするかをはっきりとユーザーに示す、リストの注記かラベルを必ず付けるようにします。

一番好きな果物を選んでください。　　　　好きな果物をすべて選んでください。

リスト・ボックスのサイズは、実用的な最小選択項目数 (たとえば、6～8) が少なくとも1つは必ず表示されるように、そしてユーザーがさらに多くの画面スペースを取り分けてウィンドウに割り当てるときには、さらに多くの選択項目を表示できるように、表示する画面ウィンドウのサイズに比例するものでなければなりません。

ドロップダウン・リスト (ドロップダウン・ボックス)
ドロップダウン・リストは、スペースが限られていて、1つの選択項目 を選ぶだけの場合に使うようにします。ドロップダウン・リストは選択したらすぐにクローズするため、複数の選択項目を選ぶ場合には望ましくありません。また、あるリストの選択項目と別のリストの選択項目を比較したいようなときも、ドロップダウン・リストは避ける必要があります。

一番好きな果物を選んでください。

たとえば、カテゴリー別に表示されるセーターを比較しようとするユーザーがいる場合に、同じWebページで、ウールのセーターのリストを表示するためにあるドロップダウン・リストを使い、綿が混じったセーターのリストを表示するために別のドロップダウン・リストを使うことは、良い設計とはいえません。ドロップダウン・リストを使うときには毎回、スペースの要件と、認識および選択のしやすさとを比較考量してください。

コンボ・ボックス
入力フィールドとリスト・ボックスの組み合わせ (コンボ・ボックス) は、比較的長いリストの場合や、リストにない選択項目を入力できるリストの場合に使うようにします。リストが長い (たとえば、選択項目が数百、数千あるなど) 場合には、ユーザーが入力フィールドに文字を入力したときに、カーソルをリストの中で一番近い一致へ移動させることによって、希望する選択項目に近づけるようユーザーを助けてください。ユーザーがリストにない選択項目を入力できる場合、Enterキーを押すかフィールドを終了するときには、入力フィールドに希望する選択項目として入力したものはすべて受け入れるようにします。別の方法として、「Pick a choice not listed」のような選択項目を含む、簡単なリスト・ボックスを使うことも一案です。この選択項目を選ぶと、ユーザーは新しい選択項目を指定するためのダイアログに移動することになります。この新しい選択項目は、アプリケーションに応じて、リストへ追加してもしなくても構いません。

一番好きな果物を選んでください (リストになければ入力してください)。

コンボ・ボックスには、リスト・ボックスと同じスペースと、それに関連する入力フィールドとを足したスペースが必要です。スペースが限られている状況では、コンボ・ボックスを使うのは、ユーザーが最も頻繁に実行する作業に絞ってください。あまり頻繁に使わない作業には、ドロップダウン・リストや、スピン・ボタンを使うことを考えてください。

ドロップダウン・コンボ
ドロップダウン・コンボ・ボックスは、コンボ・ボックスの機能が必要な状況のときに使うようにします。ただその際に、スペースの使用状況と使いやすさを比較考量しながら、スペースの管理に目を配ってください。さらに重要な別のコントロールを使いやすくするために、今以上のスペースが必要になるときは、比較考量をする良い機会となります。

一番好きな果物を選んでください (リストになければ入力してください)。

そのような比較考量の意思決定をよりよく理解するためには、ユーザーとその作業についてよく理解していなければなりません。より大きな観点で考えることによって、ユーザーが実際にどの程度またどのような種類の情報を必要としているのかを理解した上で、さまざまなコントロールを表現する方法に関する意思決定を行うことができます。

入力フィールド
入力フィールドは、システム側に有効な値のリストが知らされていないか、存在しない場合に、そのままで使うようにします。可能な範囲で最も適切で有用なデフォルト値を設定してください。このデフォルト値は定数でなくても構いません。最善のデフォルト値は、以前のユーザーの入力に応じて異なったり、状況に応じて変化する場合があります。デフォルト値を決めておく目的というのは、ユーザーの入力を予測し、ユーザーに入力してもらわずに済ませることです。これは、生産性と満足度の向上に寄与します。

ユーザーが入力できる文字数 を理解していることは、とても重要になることがあります。そのための良いテクニックがいくつかありますが、それらは、使われるコントロール・セットで必ずしもサポートされているわけではありません。有用なテクニックの1つは、ユーザーが入力するときに置き換えられるプレースホルダーを使うことです。その際には、入力できる文字のそれぞれの位置に1つのプレースホルダーを使うようにします。たとえば、入力できるそれぞれの位置を示すために、下線文字を使うことができます。この方法はしばしば紙のフォームで使われるものですが、見て簡単に理解できるという別の利点もあります。しかし、一般的に利用できるいずれかのコントロール・セットを使う場合には、残念ながら、このような使いやすい特徴は恐らくサポートされていません。

米国の社会保障番号 (たとえば、123-45-6789) のように、一般的に使われているフォーマットのフィールドの場合には、区切り文字を表示すると便利です。ユーザーが入力するときに、カーソルが自動的に区切り文字を越えて移動するよう設定してください。このようなフィールドでは、ユーザー側が区切り文字を入力する必要もありませんし、削除することもできません。これが無理であれば、サブ・フィールドごとに、個別の入力フィールドを使うようにします。どのようなケースでも、目的は、入力しやすくすることと、エラーの可能性を回避することです。活用できるフィールド内のテクニックがないとしても、少なくともフィールドに注記を付けておき、入力できるまたはしなければならない文字数と、区切り文字を入力する必要があるかどうかを明示するようにしてください。

さらに、ユーザーがどの入力フィールドに入力しなければならない のか示す必要もあります。1つの有用な方法は、必須フィールドの中の背景にごく淡い影を付けることです。業界全体としての標準になっているわけではないようですが、一般的に使われている方法は、フィールドのそばにアスタリスク (「*」) 文字を付け、これらのフィールドへ入力する必要があることを示す注意書きを記述することです。どのような方法を使うにしても、その方法をサイト全体で一貫して使うようにし、フォームにそれぞれの方法の意味がはっきりと反映されるようにしてください。

複数行入力フィールド
複数行入力フィールドは、ユーザーが2つ以上のフレーズを入力するときに使うようにします。ユーザーは、フォーム・レベルで使われるいくつかのキーが、複数行入力フィールドでも機能すると期待するかもしれません。例をあげると、ユーザーはTabキーを使えることや、Enterキーを押すと改行するものと期待するかもしれません。場合によっては、複数行入力フィールドでこれらのキーをサポートする必要はありません。そうした場合、Tabキーを使うと、次のコントロールへ移動してしまいます。しかし、ユーザーが入力フィールドへ入力している間には、フォームを実行依頼するボタンにEnterキーを割り当てない一番の理由は、ユーザーは、フォーム・レベルで使われるいくつかのキーが、複数行入力フィールドでも機能すると考えているからでしょう。

フィールド内でTabまたはEnterキーをサポートするのであれば、フォーム・レベルではCtrl+TabとCtrl+Enterを機能させてください。もう一度強調しますが、フォームの指示とフィールドの注記を忘れずに付け、これらのキーについてユーザーにはっきりと知らせ、ユーザーがキーの機能を理解できるようにしてください。

押しボタン
押しボタンは、アクションを実行するために使うようにします。アクションは、オプションを選択するために使っているマウス・ボタンを放す と同時に起動します。そのため、ユーザーの考えが変わったときに、マウス・ボタンを放す前に、押しボタンからマウス・ポインターを外してアクションの実行をやめることができます。押しボタンは、アクションの起動役として機能するものなので、状態を表すためには使わないようにします。つまり押しボタンは、マウス・ボタンを放すと「急にロードされる」か、自動的に起動作業を始めることになります。それで「押し込まれた」状態で掛け金を掛けないようにします。利用できるほとんどのコントロール・セットは、掛け金を掛けることや、押しボタンの2つの状態をサポートしていますが、ユーザーはここで示された方法で使う押しボタンに混乱させられるかもしれません。1つのチェック・ボックスか2つのラジオ・ボタンを使う方法は、さらに明確で、簡単で、信頼性のある代替方式といえます。

押しボタンの順序や位置に関しては、プラットフォームの規則を固守してください。一般的に、設定やプロパティーのダイアログを実行依頼する押しボタンには、「OK」というラベルが付けられます。アクションを開始するダイアログを実行依頼する押しボタンには、「Send」や「Print」のように、アクションの名前が付けられます。

上に戻る

まとめ

アプリケーションやWebベースのフォームのユーザー・インターフェースを作る設計者と開発者は、コントロールのこまごました方法をマスターしなければなりません。コントロールは、ユーザー・エクスペリエンス を作るときの、主要な構成部品となっています。さまざまなコントロール・セットをいろいろなプラットフォームで使えますが、一般的な要素もいくつかあり、それらのコントロール・セットを使うにあたっての、良い練習の機会となるでしょう。一般的なコントロールの多くは、10年以上にわたって使い続けられているものなので、実際に毎日使うときに、実際のユーザーの豊富なエクスペリエンスを参考にできます。この記事では、ユーザーの操作を簡単かつ効率的にしてエラーをなくすために、コントロールを注意深く選ぶという基本段階に焦点を当てて確認してみました。本当に使い勝手の良いフォームやダイアログを仕上げるには、さらに多くの考慮事項が関係してきます。コントロール内でのカーソル移動や選択のテクニックが多大に関係しますが、これらは直感的に考えるべきものではありません。ナビゲーション、すなわちコントロール間でのカーソル移動も、手際を要するものになることがあります。さらにフォームやダイアログのレイアウトによって、ユーザーが行う必要のあることをどれほど簡単に認識できるか、またユーザーがそれぞれの作業をどのように効率よく完成できるかが決まりますので、それらの役割も重要です。これらのトピックはどちらも、今後の記事で触れることになるでしょう。

上に戻る

テキスト入力以外のコントロールのお勧めする使い方

上に戻る

テキスト入力コントロールのお勧めする使い方

注意

1. ・入力フィールド内のテキストは選択できます。
2. ・入力フィールド内のテキストは選択できます。
3. ・関連するオブジェクトのリストかプロパティーの設定のいずれか。

参考文献

• その他の資料 (フォームやコントロール) については、HTML 4.0、Java Swing、 GUI を参照してください。
  
  
• Dick Berry氏によるこの連載の最初の記事は、効率的なアプリケーション設計にとって、ルック・アンド・フィールが氷山の一角に過ぎない理由を説明しています。
  
  
• Dick Berry氏による2番目の記事は、GUIとWeb環境を比較し、可能な限り最高のユーザー・エクスペリエンスを実現できる効果的なアプローチを1つずつ明らかにしています。
  
  

著者について

Dick Berryは、Texas州AustinのIBM Ease of Use Architecture and Designチームの優れたエンジニアです。1980年以来、人とコンピューターのインターフェース、ユーザー・オブジェクト・モデル、および使いやすさの設計と開発に焦点を当ててきました。彼は、IBMの共通ユーザー・アクセス (CUA:1987年に初めて発表された、ユーザー・インターフェース・スタイル)のいくつかの世代の設計主任でした。ビジュアル・プログラミングの設計や、バーチャル・リアリティーの技法を使ってオフィス作業用の生産的な3Dユーザー環境 (IBM RealPlaces) を作成する点で、革新的な仕事を行ってきました。Dickがユーザー・インターフェース設計の分野において米国で取得した特許は、45に上ります。彼はIBM Academy of Technologyの選出されたメンバーであり、IBMのEase of Use Webサイトの著述家でもあります。連絡先はreberry@us.ibm.com です。

この記事を評価する

コメント

上に戻る

目次

• フォームとコントロール
• ガイドライン
• まとめ
• テキスト入力以外のコントロールのお勧めする使い方
• テキスト入力コントロールのお勧めする使い方
• 参考文献
• 著者について
• コメント