web-dev-qa-db-ja.com

チェックボックスとアイコン

何百ものレコードがあるテーブルがあります。各行には1つまたは複数のチェックボックスがあります。次のようなもの:

mockup

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

問題は、例とは異なり、行が非常に狭いであり、チェックボックスが各行にかなり近いということですその他の垂直方向

視覚的な混乱を減らすために、次のアプローチを提案されました。

mockup

bmmlソースをダウンロード

アプローチ番号2(この段落の上のもの)の問題は、ユーザーがテーブルが編集可能であると感じず、行をクリックして目盛りとXを切り替えることができない場合があることです。

それから私は何か他のことができると思いました:

mockup

bmmlソースをダウンロード

しかし、それをクリックすると、チェックボックスの上にチェックマークまたはXマークが付いたtrueまたはfalseに切り替わるので、そのようなコントロールを作成する全体の要点がわかりません。

だから基本的に:

  1. チェックボックスがクリックするように誘っているのがわかります(これは標準です)
  2. 行間で視覚的に煩雑になっている(色が交互になっていても)ので、色を追加するのは理にかなっています
  3. 色を追加している間は、チェックボックスがあることは意味がありません。trueとfalseを識別するための確かな方法だからです。
  4. チェックボックスがない場合、ユーザーがセルをクリックしないのではないかと心配しています。
  5. 1に移動します。

アプローチしたものすべてに長所と短所があり、どちらかを決定することはできません。良い習慣はありますか?

2
edgarator

チェックボックスを明るくします。マウスをホバーすると黒に変わり、クリック可能であることをより明確にすることができます。

mockup

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

5
Sam Hasler

チェックボックスの垂直方向のパディングを増やします。ユーザーがアイコンがクリック可能であることをおそらく推測しないだろうと思うのは当然だと思います。

これらの色は非常に人目を引くものであり、真/偽の値を読み取る以外に、リストを解析することが困難になると思います。

ちなみに、Balsamiqはルックアンドフィールの決定に最適なツールではないと思います。 Balsamiqは、ワークフローと幅広い相互作用をすばやくスケッチするのが得意ですが、何がグラフィカルに機能しているかを確認するのに十分な視覚的忠実度はありません。 BMMLでうまくいくいくつかのものは実際には機能しません。逆もまた同様です。代わりに、PhotoshopまたはFireworksでオプションを使用します。

5