web-dev-qa-db-ja.com

チェックボックスの列の問題をどのように解決しますか?

だから私の質問は少し自由回答です。基本的に、チェックボックスを使用した多くの表形式データの問題に対する可能な解決策を探しています。たとえば、Facebookの[アカウント通知]ページを見ると、次のようになっています。

Facebook with overwhelming number of check boxes

Facebookが意図的にこれを難しくしているのは通知を停止したくないためです。列ヘッダーをすべてチェック/チェック解除として動作させると問題の多くは解決されますが、それでもかなり醜く見えます。

それらを展開可能/折りたたみ可能なセクションにすることも役立つかもしれませんが(ページの4番目のみが表示されます-これらの行はエナジャイザーバニーのように動き続けます)、そのオプションに加えて、もっと実行可能なことがあるはずです。 。

チェックボックスのみを表示し、チェックされていないボックスのみを行のホバーに表示するという考えをあきらめましたが、それがユーザーを混乱させるかどうかはわかりません。

とにかく、皆さんがこの問題について持つかもしれないアイデアを楽しみにしています。

13
Matt Lavoie

37Signalsが to-doリストをBaseCampHQで行うのと同じようなルートをたどります :重要な情報をアイテムの近くに表示します(上のOPのスクリーンショットでは遠すぎます)、だからあなたは整然とした外観を得るでしょう、そしておそらく私はさらに一歩進んでダニの周りの箱なしで行くでしょう。次に、カーソルを合わせると、左のインタラクティブなチェックボックスが表示され、以下のモックアップのように設定を変更できます。

enter image description here

8
Roger Attrill

各セクションにマスター(トライステート)チェックボックスを設けるというアイデアが気に入っています。ツリービューを使用して、チェックボックスを左に移動することを検討してください。

2
Jaco Briers

私が過去に使用したソリューションは、Webアプリのデスクトップ機能を複製し、次のように機能します。

  1. 行をクリックして選択します
  2. 複数の行を選択するには、Shiftキーを押しながらクリックします
  3. テーブルの上部にあるアクションボタンまたはアクションメニューを使用して、選択した行のアクションを選択します(電子メール通知を有効にするなど)。

このソリューションは、より多くのアクションを簡単に追加できる点でよりスケーラブルであり、チェックボックスの乱雑さを確実に減らします。不利な点は、Shiftキーを押しながら複数の行をクリックすることがオプションであることにユーザーが気付かない可能性があることですが、この機能についてヒントや説明テキストを使用してユーザーを教育することができます。

1

Facebookの例のように複雑な表形式データの場合、2つではなく6種類の通知がある場合、1つのオプションは、デフォルトでチェックボックスを非表示にすることと、「行」または「列」を編集する機能を組み合わせることです。

Roger's answer のように、チェックボックスにカーソルを合わせると、チェックボックスが表示され(必要に応じてチェックされているかどうかにかかわらず)、ユーザーがその設定を変更できるようになります。 「アクティブな」行と列を強調表示して、変更されている設定をユーザーが理解しやすくすることができます。

行にカーソルを合わせると、「編集してクリック」というテキストが付いた行全体のチェックボックスが表示されます。行をクリックすると、行のすべてのチェックボックスが表示されます。左端にマスターチェックボックスがあり、行のすべてのボックスをオン/オフにします。行の最後にある保存ボタンでユーザーを通常のビューに戻し、キャンセルボタンで戻ります。保存せずに。多くの行があるセクションの場合、他の行を非表示にして、列ヘッダーをチェックボックスの真上に表示することもできますが、行がテーブル内で上下に移動している場合、ユーザーを少し混乱させる可能性があります。 (アクティブな列を強調表示するだけで十分な場合があります。)

列ヘッダーにカーソルを合わせると、「クリックして編集」というテキストの列のチェックボックスが表示されます。行と同様に、列のすべてのチェックボックスが表示されます。列の下部に保存ボタンとキャンセルボタンがあり、上部にマスターチェックボックスがあり、行のすべてのボックスをオン/オフにします。

0
Dave DuPlantis