web-dev-qa-db-ja.com

フィールドの番号範囲のバンドを作成するにはどうすればよいですか?

「スコア」と呼ばれるシステムに、未確定の負の数から未確定の正の数までのフィールドがあります。ユーザーがラベル付けできる数値の「バンド」を作成するためのUIを理解しようとしています。 (例:低、中、高)

バンドのカバレッジは(負および正の無限大まで)完全である必要があり、また相互に排他的(オーバーラップなし)でなければなりません。

私はスライダーで実験していますが、これはトリッキーな問題です。誰かがこれを以前にしたことがありますか?

3
Glen Lipka

GoogleインスタントサイトやStackExchangeサイトなどにさらされた世界に住んでいる人たちが、 おそらくまだ 「リジッド」で「フォームのような」アプローチを提案してください! :-/ @BobbyJackとWendyのことを言い換えて、 "Where's the beef?" と言います。

たとえば、コンピューターにそれを行わせるのではなく、なぜ数値を並べ替えなければならないのですか?分割ポイントのリストを指定して、範囲を作成することはできませんか?データが既にリストにある番号を持つソースからのものである場合はどうなりますか?

しかし、暗闇を呪うよりも、ろうそくに火をつける方がいいですよね? :)私は休暇中で、ブログを更新してからしばらく経っています。グレンは、これに関する先行技術はなかったと示唆しています。だから私は実際にオンラインで試すことができるようにそれをコード化することに挑戦すると思いました(明らかに「未完成」):

http://jquery-numband.hostilefork.com

更新:20-Mar-2015short demo video 。)

screenshot of the program in action

フリーフォームのテキストを入力できます。数値であるものすべてを取り出し、重複を破棄し、範囲を生成します。新しい番号を追加したい場合は、そこに入力するだけです(ボタンを追加するのを止めるものはありませんが、スプリットポイントのリストを個別に編集するのはいいことです)。

矢印を使用すると、範囲の包含/排他境界を指定できます。矢印をクリックすると、隣接するバンドグループにジャンプし、方向が反転します。 (したがって、上の図では、「何とか」は20より大きく40より小さいものを表します... 20は「デフォルト」に移動し、40は「次」に移動します。)

単純な履歴メカニズムを実行しましたが、もっと良いものを思い描くことができます。基本的に、新しい分割ポイントを追加するだけで、入力したマッピングが消去されてしまう場合...関連する範囲のメモリとともに、古い値が保持されます。現時点では、同じ数値範囲の範囲が戻ってきた場合にのみ、履歴エントリを自動的に引き戻します。履歴から提案したり、履歴からドラッグアンドドロップしたりすることもできます。

それはオープンソースであり、MITライセンスされており、それをより良くすることは読者への練習問題として残されています:)

https://github.com/hostilefork/jquery-numband

まず、ユーザーは無限大のシンボルをどの程度知っていますか?それは小さなポイントであり、私は彼らが推測していると思いますwillそれで大丈夫ですが、それでもチェックする価値があります。

第二に、一端に無限大(正または負)があるスライダーがどのように機能するかがわかりません。例では、中央付近に20が示されています。一端近くで使用される値は何ですか? 100万? 1兆?グーゴル1個?

値が本当に無制限である場合、値を入力するための高速なメカニズムが必要であり、あらゆる種類のスライダーや「+」/「-」ボタンは、実際には巨大な数値には適していません。自由形式のテキストは唯一の選択肢のように見え始め、最も魅力的ではないとしても、確かに最も柔軟です。

バンドのセットの例を挙げられますか?私は本当にそれらが次のようなものであるかどうかを感じたいです:

-INFINTY - -100
-100 - 100
100 - INFINITY

または:

-INFINITY - -1,000,000,000,000
-1,000,000,000,000 - -500,000,000,000
...

または本当に何が可能かどうか。

2
Bobby Jack

HostileForkのテキストボックススタイルのエントリのアプローチに100%同意します。質問を読んでいると、すぐに、どのページをプリンターにするかを入力するための従来の印刷ダイアログUIが思い浮かびました。これも同様の問題であり、テキストボックス入力は依然として私が見ることができる最良の解決策です。

他にも考慮すべき点がいくつかあると思います。

  • ユーザーはすべてのバケット境界を手動で入力する必要があるため、テキストボックスUIではかなり苦痛です(バンドがデータの値の範囲と比較して小さい場合は非常に苦痛です)。
  • バンドを視覚化して、ユーザーが等しくないサイズのバンドを作成している可能性があることをユーザーが理解できるようにすることが重要だと思います
  • バンドに手動で名前を付けるのはEdgeケースだと思います。アプリは、標準のバンド命名規則を使用してこれを行うことができます(ユーザーが希望する場合にのみ名前を変更することをユーザーが選択します)

ここにモックアップがあります: enter image description here

  • テキストボックスに値を入力すると、サブディビジョンをアニメーション化する青い範囲の視覚化を想像できます
  • 範囲の視覚化はスケーリングするため、小さすぎてラベル用のスペースを確保できないバケットが作成されるという問題があります。ラベルは可能な場所に表示されますが、スペースがない場合は削除されます。ユーザーはブロックにカーソルを合わせると、ツールチップからこの情報(およびその他)を取得できます。


混合単位の問題:
階層的な連続次元(時間など)の場合、さまざまな階層レベルからの入力の問題があります。たとえば、在職期間の場合、ユーザーは最初の数年間の在職期間を月単位で指定し、残りを年単位で指定することができます。ただし、テキストボックスUIでは、すべての入力が同じ時間単位(年など)である必要があります。 1つのオプションは、小数年のアプローチを使用することです。入力は最も近い月に丸められます(たとえば、ユーザーが0.27を入力した場合、0.25に丸められます。これは3か月に相当します)。もちろん、これは優れた使い勝手ではありません。ユーザーが計算機に座って、5か月が10進数形式で何であるかを理解しようとしているのを見ているだけです。別のアプローチは、テキストボックスの横にある時間単位の切り替え(以下のモックアップ)を持つことです。とにかく、バンドの自動命名は単位変換を行い、小数を避けるべきだと思います! enter image description here

2
M.A.X

友人が思いついた一つの可能​​性。

alt text

1
Glen Lipka

範囲をグラフィカルに表現して、順調に進んでいると思います。私が最初にテストしようと思ったのは次のようなもので、範囲名が範囲の境界の間にあることは明らかです。

[img

プラスボタンは、範囲を分割して、デフォルトの境界(おそらく途中)とデフォルトの名前を追加し、調整のために新しい境界にフォーカスを置きます。ユーザーは、必要に応じて、いずれかの範囲名をクリックまたはタブで変更できます。

alt text

範囲ごとに2つの削除が必要です。1つは名前と上限を削除するためのもので、もう1つは名前と下限を削除するためのものです。

[ing

境界間の間隔は、それらの分離に比例する場合があります。その場合、おそらくズームインとズームアウトもサポートする必要があります。ユーザーが境界をドラッグアンドドロップしてその値を変更できるようにすることもできます。ただし、ユーザーが数値だけで範囲のサイズを適切に把握できる場合は、単純にするために、境界を(私が行ったように)まとめて、序数のランキングのみを表すことができます。 。その場合、値を入力する代わりに、境界コントロールをスピナー(私がやったように)にしたい場合があります。

上記のデザインはかなり自己文書化されていますが、特に2つの[削除]ボタンがどのように異なるかを伝えるために、グラフィックデザインをいじる必要があるかもしれません(私の粗雑な図面では十分ではない可能性があります)。ただし、デザインも比較的スペースを消費し、雑然としています(ただし、より優れたグラフィックデザインが役立つ場合があります)。スペースが限られている場合は、自己文書化を犠牲にして、オブジェクト選択アクションモデルを検討してください。各範囲名には、選択をサポートするアイコンと、オプションを提供するメニュー(プルダウンとコンテキストの両方)があります。 。オプションとして、範囲を別のスコアラインにコピーすることもできます:

[img

これは、通常のイディオムによる複数選択をサポートすることを意味します。

ユーザーが境界値を変更して別の境界を跳躍するように処理する2つの実行可能な方法を考えることができます。

  • 防止。許可しないでください。ユーザーがうるうフロッギング値を入力すると、エラーメッセージがスローされます。ユーザーが別の境界までドラッグまたはスピンアップする場合は、ユーザーが限界に達していることを示すグラフィックフィードバックを提供します(たとえば、限界境界が太字と赤に変わります)。これは、うるうカエルがエラーになる傾向がある場合(たとえば、ユーザーが余分な数字を入力した場合)に最適です。これからの回復は簡単です。

  • スキッシュ。うるうカエル境界(または境界)を変更して、うるうカエル境界と等しくします。これは、うるうカエルが意図的である傾向がある場合に最適です。つまり、うるうカエルの境界または範囲は、準備が整ったときに調整または削除することをユーザーが計画します。いくつもの境界の値が変更されるため、エラーの場合は特に柔軟性が高くなりますが、元に戻す機能がサポートされていない場合(特に、元に戻す機能はありますか?)

1

指数関数的に上昇する各軸の後に、0、-[大きな数]、+ [大きな数]の軸を尾でラベル付けすることをお勧めします

0
Schuyler