web-dev-qa-db-ja.com

チェックボックスのラベルは右に置くべきですか、それとも左に置くべきですか?

さまざまな長さのテキスト値(たとえば、5文字から約60文字まで)のチェックボックスがあります。どちらが望ましいレイアウトですか?左側に値、右側にチェックボックス、またはその逆ですか?

87
Becskr

MicrosoftとAppleはこの問題について明示されていませんが、Java Swing Look and Feelガイドラインでは label/value to be toコントロールの右側 左から右に読む言語用同じ ラジオボタンに適用

古代のOSF Motifスタイルでは、ラベルはチェックボックスとラジオボタンの右側にあると明示されています(pg9-133)。また、考古学を行っている間、IBM Common User Access標準では ラベルはチェックボックスの右側 と記載されていますが、 ラジオボタンではサイレント です。

明確な基準が何であれ、設計者がラベルをコントロールの右側に配置することはかなり明白です。理論的根拠はおそらくあなたが本能的に考えているものです。さまざまな長さのラベルが付いたチェックボックスの列がある場合、この配置により、チェックボックスとラベルの先頭の両方を一貫して配置でき、ラベルとコントロールの間に大きなギャップがなく、ラベルの配置の問題を適切に回避できます。テキストボックスとドロップダウンリストにあります。枯れ木の世界では、ラベルは多くの場合、チェックボックスとラジオボタンに相当するもの(たとえば、光学的にスキャンされたフォーム上の泡)の右側にあるため、ユーザーをスローしません。

66

1つ以上の選択肢を選択するには、右側にラベルを付けます。これにより、視覚的なスキャンが簡単になり、ユーザーのマウス/指の流れを直線的にすることができます。

[ ] option 1

[ ] this is option 2

[ ] #3

ラベルが左側にある場合は、少し混乱します。

option 1 [ ] 

this is option 2 [ ] 

#3 [ ] 

さらに、多くの場合、「グループ」ラベルがあり、それは確かに上に配置できますが、多くの場合、左側にあります。

Pick one or more options:   [ ] option 1

                            [ ] this is option 2

                            [ ] #3

配置に関係なく、ラベルもクリック可能でなければなりません(適切なFOR属性を使用してください)。問題は、誰もがこれを知っているわけではなく、チェックボックス自体を目的としていることです。

ただし、チェックボックスが1つしかない場合(通常、明示的なオプトインまたはオプトアウトプロセスに使用されます)、後でそれをわずかなタスクにするために配置しても問題ないと思います(本当に完全に人々にラベルを読む):

To opt in to our incessant spam emails we ask that you click this checkbox: [ ]
17
DA01

(一部の言語で使用される)右から左への読み取り順序の可能性を無視する場合、ラベルはalwaysがチェックボックスの右側にあると考えられます。

Windowsでは、技術的な観点から、チェックボックスの左側にラベルを配置することは実際には不可能です。 Windowsソフトウェア開発環境では、チェックボックスのラベルがチェックボックスの右側に自動的に表示されます。これを変更する方法はありません。一部のプログラマーが難しいことは、ラベルをまったく付けずにチェックボックスを作成し、静的ラベルをその左側に個別のコントロールとして配置することです。醜いだけでなく、市長の欠点もあります。ユーザーがラベルをクリックしてチェックボックスの状態を編集することはできません。

したがって、常にチェックボックスの右側にある必要があります。しかし...私は一部の人々(そして私はそれらに同意しません)が例外があると感じていることを知っています:チェックボックスが他のコントロールのリストの一部である場合。この例を見てください:

enter image description here

したがって、配置が見栄えがよくなるため、これが正しいと感じる人がいます。私はしません。チェックボックスの位置は正しいと思いますが、ラベルの位置が正しくありません。これは例外だと思いますか?

16
Bart Gijssens

基本的な前提は、ほとんどの読み取り可能オプションを使用することです。

1つの重要な側面はスキャン可能性であり、各アイテムを完全に考慮することなく、簡単に概要を把握することができます。このためには、チェックボックスの幅が一定であることが重要です。そのため、チェックボックスの片側を垂直に配置すると、反対側も垂直に配置されます。テキストは可変幅であるため、通常、これはテキストを引き伸ばさないと実現できません(これは非常に読みにくくなる可能性があります)。重要な単語は文の最初に置くことをお勧めします。そのため、LTRテキストでは、右揃えよりも左揃えを優先する必要があります。

別の問題はproximityであり、関連情報がどれだけ近いかです。チェックボックスをラベルの右側に配置して垂直に配置すると、左側に配置する場合よりもラベルから離れます。だから、答えは左側に置くことです。

一方、フォーム内でconsistencyを考慮する必要があります。ほとんどのフォームコントロールは一定の幅ではなく、ラベルの左側に置くと、ユーザーが前後に移動しなければならない場合に、厄介なフローが発生する可能性があります(たとえば、誕生日入力フィールドをラベルの左側に置く)。フォームをスキャンします。妥協案は、すべてが一定で幅が等しい場合にのみ、左揃えのコントロールを使用することです。

考慮すべきもう1つの点は、ラジオボタンのセットはデフォルトのHTML <select>リストと同等であり、チェックボックスは<select multiple="multiple">と同等であることです。

8
l0b0

私の即座の答えは、チェックボックスがラベルの左側にあるはずですが、答える前に、推奨事項を検証したかったのです。

悲しいことに、Microsoft、Sun、IBMのUIガイドラインはこの点について明確ではありません(ラジオボタンなどのチェックボックスをいつ使用するかについて話しがちです)が、すべての例ではcontrol-then-labelの規則を使用しています。

だから私はそれを選びます。

7
Matt Goddard

プログラマーの観点からすると、テキストの前にボックスを配置する必要があります。これは、配置しやすいからです。ユーザーの観点からは、1)このチェックボックスの内容を読む2)クリックするかどうかをこの順序で決定するため、テキストが最初に来る必要があります。したがって、レイアウトはユーザーの一連のアクションを反映する必要があります。

3
Boris

チェックボックスの使用状況により異なります。

選択チェックボックス(たとえば、アイテムのリスト内)は、テキストの「前」にある必要があります(つまり、英語のような左から右への言語では左に)。これにより、アイテムを左揃えにし、不要な空白なしでチェックボックスを揃えることができます。また、選択メカニズムをラベルの先頭近くに配置します。ラベル全体を読み取る傾向はありませんが、スキャンする代わりに、左中央から開始します。

チェックリスト内、チェックボックスはテキストの前に来る必要があり、質問はありません。ユーザーはチェックボックスでアクションを実行しようとしているため、上記のようにスキャンしています。

オプションのチェックボックスは、他のオプションのコンテキストでは、ラベルの後にある場合があります。ただし、オプションのチェックボックスはコミュニケーションが取れないため、通常はチェックボックスを避けます。 iPhoneのスライダーボックスのような新しいコントロールはより伝達的です。または、バイステートボタン、ドロップダウン、または他の方法を使用して、単純な「チェック済み/チェックなし」よりもユーザーに洞察を与えることができます。

3
Alex Feinman

SWTのようなデスクトップGUIツールキットは、チェックボックスをボタンウィジェットバリアントとしてカプセル化し、ボタンのテキストプロパティがラベルになります。これは、少なくとも私が認識しているシステムでは、チェックボックスの右側に表示されます。したがって、htmlとは異なり、選択する必要はありません。

3
Jörn Zaefferer

LTR言語で「ラベルが後に来る」に投票するのは簡単です。人々は選択肢をスキャンして、ラベルの先頭をクリックしてチェックします(サポートされているはずです)。ラベルの長さが異なる5つのチェックボックスがある場合、チェックボックスをクリックして、手と目と頭脳がラベルから同等のチェックボックスに移動しなければならないことを想像してみてください。したがって、このトリップを最小限に抑えるには、チェックボックスがラベルに最も近いものでなければなりません

2
Ayyash

したがって、WindowsまたはAppleソフトウェアの場合、左にチェックボックスを配置することは明らかであるようです。右にある場合、Gelstatプリンシペを尊重するために、チェックボックスを揃えるためにラベルを右に揃える必要があります。垂直に.

しかし、モバイルデバイスソフトウェアの場合は、ラベルの右側にあるチェックボックスがアクセシビリティに優れているようです。 ..

一部のメッセージを削除する場合は、SMSスマートフォンのマネージャー)を確認してください...

2
pierre lebailly

私はまた、誰かが参照した "control-then-label"モデルに従うことにも投票しますが、そのコンテキストは慣例よりも優先される必要があるという警告があります。

例:開始する前にユーザーにいくつかの文書を収集するように求めるオンラインの政府支援フォームがあります。システムは、ユーザーがリストの各項目をチェックオフした場合にのみ、フォームのステップ1に進むことを許可します。この場合、チェックボックスはチェックリストを形成し、その圧倒的多数がボックスを左側に配置します。

一方、従業員管理セクションを備えたある種の小売/販売アプリケーションがあり、何らかの理由で次のようにチェックボックスを使用して複数のユーザーを選択できるとします。

Name         Title               Hire Date         Select
--------     ---------------     ---------         ------
John Doe     Sales Associate     9/12/03           [x]
Jane Doe     Regional Manager    12/3/01           [x]

この場合、意味合いが異なるため、チェックボックスは右側にあるはずです(リストからの削除ではなく、さらにアクションを行うためにアイテムを選択しています)。 iOS(変なHIGで特定のものはありません)とAndroid( http://developer.Android.com/guide/topics/ui/controls/checkbox.html =)右側のチェックボックスをフロートさせます。私にとって、これはチェックボックスに視覚的な違いを与えるため、このタイプのアプリケーションにとって最も理にかなっています。この場合、それらを左にフロートさせると、少し不快な整列になります賢い。

1
Brian

1つのサイズですべてに対応できるわけではありませんが、一貫性を確認する必要があります。左側にチェックボックスがあり、ラベルが右側にあると偽装する人もいますが、編集ボックスコントロールを説明ラベルの左側に表示することは推奨されません。調整が非常に重要である場合、彼らもそのためにそれを行います。

ラベルの左側にチェックボックスがあることと関連があると左から右に読むことに言及している人もいます...テキストを最初に読んでチェックボックス(そのテキストに答える)を直接たどるのは、チェックボックス...スキップしてラベルを読み取り、次に左にスキャンして入力(基本的にはラベルへの返信)を入力します。質問の前に答えを提供しなければならないほうが、根本的にはより直感的であることがわかりません。

したがって、少なくとも多くの入力を持つフォームタイプのインターフェイスでは、他のすべての入力コントロールと同様に、チェックボックスが右側にあることは明らかです。

0
Jack Lewis