web-dev-qa-db-ja.com

チェックボックスを使用するかどうか、クリックで行を選択するか

ユーザーが注文を管理する必要があるパネルのようなCMSがあります。以下の表をご覧ください。友人(UXの経験が豊富なことで知られています)は、チェックボックスを削除し、クリックで行を選択/破棄する必要があると言っています。ユーザーが空のスペースをクリックしたいので、行から値をコピーしているときに行が選択されるため、これを行うのは適切ではないと私は言います。選択した行の背景もわずかに青色になります。 UXの観点から、何が最良のソリューションであるかを尋ねています。

A:チェックボックスを削除し、クリックで行を選択/破棄する必要があります。

B:チェックボックスを保持し、行クリックで行選択を使用します。

C:チェックボックスのみを保持し、行のクリック時に選択しないでください。

こちらが表です

data grid with check boxes

10
Hasan Gürsoy

これはアフォーダンスの質問です:-)

素晴らしいチェックボックスについてのことはeverybodyはそれらが何であるか、そしてそれらを操作するために何をする必要があるかを知っています。

行選択の操作は簡単に学習できますが、行選択はあまり知られていないため、チェックボックスのようにはっきりとはわかりません。

ただし、行選択は難しい状況になる可能性があります。説明した状況、またはセルに追加のトリガー(ハイパーリンク、ボタンなど)があり、アフォーダンスを高めるにはスタイリングが必要なため、「選択した」スタイリングスポットを確実に取得する必要がある場合。行にカーソルを合わせたときにマウスカーソルを変更すると、そのアフォーダンスもわかります。

13
SteveD

チェックボックスの選択はレガシーのようなものです... これ のようなスプレッドシートのような選択は、より優れたUXだと思います。

4

対象読者とシナリオ
CMSシステムであるため、猫の餌をオンラインで購入するぽっちゃりした女性のようなカジュアルなユーザーではなく、UIを一種の作業ツールとして何度も繰り返し使用する人々(必ずしもその女性より賢いとは限らない) 、 正しい?
また、(行を選択する方法などの)事柄は一度だけ学習する必要がありますよね?
したがって、ユーザーは最初に行を選択する方法に興味を持ち、この知識を将来何度も使用する可能性があります。
アフォーダンス
これはデスクトップアプリケーションですよね?
その後、#hover#の機能を利用できます。
regular hand pointer 幸せなユーザーがリンクにカーソルを合わせると、ポインタがリンクのよく知られた手のように見えます。
arrow with plus sign cursor pointer そうでない場合、ユーザーがクリックして行を選択できるときに行の一部にカーソルを合わせると、 プラス記号で装飾された矢印 に切り替えて、選択できることを伝えます。
さらに、ポインターが既に選択されている行の上にある場合、マイナス記号で装飾された矢印を使用して、そこをクリックすることで行を選択解除できることを示すことができます。
行全体がすぐに背景色を変更すると、ユーザーは期待するフィードバックを得て、さらに幸せになります。
使いやすさ
多くの場合、行の幅はウィンドウの幅を超えます。
行の先頭にチェックマークを付けた場合、ユーザーは水平方向にスクロールせざるを得なくなり、彼女はもうそれほど満足しなくなります。
さらに、彼女が行の開始から遠い列のコンテンツに基づいて行を選択している場合、視差エラーのためにミスをする可能性があり、上司も不幸になります。
理想的には、ユーザーは安全に(そして幸せに)過ごすためにそこを見てクリックします。
複数の行を選択する必要がある場合、理想は、次の行をクリックすることによって行うことです。Ctrlキーは押さないでください。
連続した選択イディオム(1つを選択し、次に他の保持シフト)が使用可能である必要があります。
両方を使用
ホバーするとチェックマークの背景画像を表示する最初の細い(正方形のセル)列と、「行をクリックして選択する」などのタイトルを追加して、恐ろしいユーザーを教育できます。
そのセルは、ホバーされると、その背景も変更して、選択した行の背景を模倣します(ただし、このセルのみ)。
これにより、恐竜とミレニアルユーザーの両方を幸せに保つことができます(私は恐竜です)。
また、チェックマーク列のヘッダーをクリックすると、必要に応じて、すべてを選択または選択解除できます。
最終誓約
必ず、行を選択するためにユーザーに12x12pxの小さなボックスをクリックするよう強制しないでください。
はい、チェックボックスのことです。
そして、横スクロールを強制することで、侮辱に加害しないでください!

4
Juan Lanus

行を破棄するのは選択のみの課題ですが、ユーザーがアクションの可能性を認識しているため、チェックボックスのチェックでそれをサポートすると明確になります。

また、行が完了した注文や拒否された注文などのCTAが異なる場合や異なる場合があります。これらのアクションは、チェックボックスを選択して、関連するCTAをクリックすることでも実行できます。

例:ユーザーが複数の注文を完了したい場合:行を選択して、注文完了の一般的なCTAをクリックできます。

2
Priyanka Goyal

スクリーンショットの各行には複数のハイパーリンクがあり、アプリケーション内の他のリソース(顧客、SKU、ソース、IDなど)に移動できるようです。これが正しいと仮定すると、ユーザーが行をクリックして選択できるようにすることはお勧めしません。これにより、UIが扱いにくくなり、混乱する可能性があります。

オプション「C:チェックボックスのみを保持し、行のクリック時に選択しない」は、私の観点から最もクリーンで最も簡単な方法です。

例:

ユーザーがSKUセル(リンクの周りの空白)内をクリックすると、行が選択されます。ユーザーが同じSKUセル内をもう一度クリックしたが、今回はリンクをクリックした場合、ユーザーは別のページにリダイレクトされます。

初心者ユーザーにとっては、これがなぜ起こったのか正確に理解していない可能性があります。そうする人のために、彼らは今、彼らのクリックでより正確で注意深くなければなりません。どちらの場合も、ユーザーがすぐに学習して適応するため、それが大きな問題であるとは思いません。しかし、個人的には、実装したくないというちょっとした不便さだと思います。

2
Ben Harrison