web-dev-qa-db-ja.com

テーブルチェックボックス側のベストプラクティス

チェックボックスをテーブルの左/右と横に表示できるようにするのはいつベストプラクティスですか?

ワイヤーフレームは私の机に出会い、下のワイヤーフレームに似ています。チームが配置のために与えた正当化は、右側のチェックボックスなので、下部のアクションボタンの近くにあります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これをGmail、Yahoo、Hotmailなどのシステムと比較すると、左側にチェックボックスを配置する傾向があります。これらのチェックボックスを左側に配置する方が良いですか?または、右側の対応するボタンの近くに置いたほうがよいでしょうか?

12
JeffH

ほとんどの人が慣れているのパターンは、チェックボックスがにあるパターンです。右側に配置することが有益である理由は特にありません。左側のチェックボックスをオンにしてください。

一般的には、チェックボックスで使用するボタンに近づけた方がよいと思いますが、ここでも、右側ではなく左側にボタンを配置することを妨げるものはありません。

8
JohnGB

それらを右側に配置する非常に良い理由は、スクリーンリーダーを使用しているユーザーのためです。これらのユーザーは、行の内容を聞いてチェックボックスを継続するのか、行の内容を知らなくてもチェックボックスを聞くのです。行を選択する必要がある場合は、コンテンツを聞いてチェックボックスにバックアップする必要があります。これらのユーザーにとっては、はるかに優れたデザインであり、スクリーンリーダーを使用していないユーザーにはほとんど影響がありません。

1
Bruce S.

@JohnGBの回答に賛成票を投じましたが、それでも回答したかったのです。

何らかの理由ですべての「アクションボタン」が正しく配置されていて、ユーザーがそこにいることに慣れている場合。あなたがユーザーに教えたスタイルを使い、右側にチェックボックスを付けることをお勧めします。しかし右揃えの実装の場合、行全体にホバー効果を付けることをお勧めします。これは、チェックボックスの「ラベル」がの反対側にあるためです。テーブル、そうでなければ正しいチェックボックスをチェックするのは難しいかもしれません。 (またはチェックボックスのクリック可能なセレクターとして行全体を作成します。)

しかし、既存のボタンが右揃えされていない場合は、@ JohnGBが言ったように、選択の「ラベル」の前に、使用する必要があるチェックボックスを使用することをお勧めします。

1
Samuel M

フィッツの法則 は基本的に、ユーザーがタスクを完了するのにかかる時間は、ユーザーがマウスの矢印を移動する必要がある距離に基づいていると述べています。したがって、チェックボックスの真上または真下にアクションを配置する方が人間工学的に高速です。ユーザーがブラウザのスクロールバーを使用している場合、無駄なマウスの動きを減らすためにすべてを画面の右側に配置するのが最も効率的です。これは、エンタープライズ製品で特に悪化します。画面全体を移動すると、何時間もの時間を浪費する可能性があります。

したがって、経験則(ベストプラクティス)では、アクションはチェックボックスの真上または真下にあります。

最近では、行全体を選択でき、行ホバー状態にすることができます。したがって、チェックボックスはどちらの側にも配置できます。左側にある必要があるという慣習は古いものです。

元の質問への答えは「依存する」です。そして、それが依存するのはユースケースです。

1
Houshang Livian

すべてのUIガイドラインは、チェックボックスのラベルを右側に配置する必要があることを示しています。このルールはテーブルにも使用します。メールクライアントを調べて、このルールが実行されることを確認します。

また、選択したアイテムに影響を与えるボタンも右側に配置する必要があります。

しかし、テーブルのチェックボックスには2つの問題があります。実現時にそれを忘れないでください。1.小さなチェックボックスを狙うのは難しい。クリックして行をチェックするチェックボックスをオンにします。 2.ユーザーは複数の行を選択できます。ユーザーは、結果的にチェックボックスを1回クリックするだけで行を選択できます。遅かれ早かれ彼は間違いを犯し、すべての行が選択解除されました。すべての行を選択し、Ctrl/Shiftキーを押して複数の行を選択するUIが提供されていることを確認してください。

Gmailを探してこれを確認します。

0
denisoid

チェックボックスは左側のラベルの近くにあるはずです。チェックボックスがラベルから離れているほど、ユーザーがそれらを視覚的に位置合わせするために必要な作業が多くなります。

代替行のスタイルを設定しても、チェックボックスを右揃えすると、チェックボックスが正しく選択されない可能性があります。対照的に、左揃えのチェックボックスが誤って選択されることはほとんどありません。悲しいことに、この慣行をサポートするための適切な参照ソースを見つけることはできませんが、これまで誰も言及していなかったことに驚いています。

0
MXMLLN