it-swarm-eu.dev

Wie erstelle ich Bänder mit Nummernkreisen für ein Feld?

Ich habe ein Feld in einem System namens "Score", das von einer unbestimmten negativen Zahl bis zu einer unbestimmten positiven Zahl reicht. Ich versuche, eine Benutzeroberfläche für den Benutzer zu finden, um "Bänder" von Zahlen zu erstellen, die beschriftet werden können. (Beispiel: Niedrig, mittel, hoch)

Die Abdeckung der Bänder muss vollständig sein (bis zur negativen und positiven Unendlichkeit) und sich auch gegenseitig ausschließen (keine Überlappung).

Ich habe mit Schiebereglern experimentiert, aber das ist ein heikles Problem. Hat das schon mal jemand gemacht?

3
Glen Lipka

Ich bin ein bisschen besorgt darüber, dass Menschen, die in einer Welt leben, die Dingen wie Google Instant und StackExchange-Websites ausgesetzt ist, dies könnten möglicherweise noch Schlagen Sie "starre" und "formähnliche" Ansätze vor! : -/Ich werde @BobbyJack und Wendy's umschreiben, indem ich sage "Wo ist das Rindfleisch?"

Warum sollte ich zum Beispiel die Zahlen sortieren müssen, anstatt den Computer das für mich tun zu lassen? Kann ich nicht einfach eine Liste von Split-Punkten geben und die Bereiche bestimmen lassen? Was ist, wenn meine Daten aus einer Quelle stammen, deren Nummern bereits in einer Liste enthalten sind? Wie kann die automatisierte Verarbeitung helfen?

Aber es ist besser, eine Kerze anzuzünden, als die Dunkelheit zu verfluchen, oder? :) Ich bin im Urlaub und es ist eine Weile her, seit ich meinen Blog aktualisiert habe, und Glen schlägt vor, dass es keinen Stand der Technik dazu gibt. Also dachte ich, ich würde einen Riss beim Codieren machen, den Sie tatsächlich online ausprobieren können (offensichtlich "unvollendet"):

http://jquery-numband.hostilefork.com

( Update: 20.03.2015 Ich habe ein kurzes Demo-Video hinzugefügt. )

screenshot of the program in action

Sie können Freiformtext eingeben. Es wählt alles aus, was eine Zahl ist, verwirft Duplikate und generiert die Bereiche. Wenn Sie eine neue Nummer hinzufügen möchten, können Sie sie einfach dort eingeben (nichts hindert Sie daran, weitere Schaltflächen zu verwenden, aber es ist nett, die Liste der Teilungspunkte unabhängig voneinander zu bearbeiten).

Mit den Pfeilen können Sie die Inklusiv-/Exklusivgrenzen des Bereichs angeben. Klicken Sie auf einen Pfeil und er springt in die benachbarte Bandgruppe und in die Flip-Richtung. (Im obigen Diagramm steht "bla" für alles, was größer als 20, aber kleiner als 40 ist ... während 20 auf "Standard" und 40 auf "Weiter" geht.)

Ich habe einen einfachen Geschichtsmechanismus gemacht, aber man kann sich etwas viel Besseres vorstellen. Wenn Sie nur einen neuen Teilungspunkt hinzufügen und eine von Ihnen eingegebene Zuordnung löschen, bleibt der alte Wert zusammen mit dem Speicher des Bereichs, dem er zugeordnet wurde, erhalten. Im Moment ziehe ich Verlaufseinträge nur dann automatisch zurück, wenn ein Bereich mit denselben numerischen Grenzen zurückkommt. Es wäre auch möglich, Vorschläge aus dem Verlauf zu machen oder per Drag & Drop daraus zu ziehen.

Es ist Open Source, MIT lizenziert, und es besser zu machen, bleibt dem Leser als Übung überlassen :)

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

Wie gut werden Ihre Benutzer mit dem Symbol für Unendlichkeit vertraut sein? Es ist ein kleiner Punkt, und ich vermute, sie werden damit einverstanden sein, aber es lohnt sich immer noch, ihn zu überprüfen.

Zweitens kann ich nicht sehen, wie ein Schieberegler mit unendlich (positiv oder negativ) an einem Ende jemals funktionieren kann. Ihr Beispiel zeigt 20 in der Nähe der Mitte; Welcher Wert würde in der Nähe eines Endes verwendet? 1 Million? 1 Billion? 1 googol?

Wenn die Werte wirklich unbegrenzt sind, benötigen Sie einen schnellen Mechanismus, um sie einzugeben, und jede Art von Schieberegler oder '+'/'-' - Schaltflächen sind für große Zahlen nicht wirklich geeignet. Freiformtext scheint die einzige Option zu sein, und er ist sicherlich die flexibelste, wenn nicht die attraktivste.

Kannst du ein Beispiel für eine Reihe von Bands geben? Ich möchte wirklich ein Gefühl dafür bekommen, ob sie so etwas wie:

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

oder:

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

oder ob wirklich alles möglich ist.

2
Bobby Jack

Ich stimme zu 100% dem Ansatz von HostileFork zu, einen Eintrag im Textfeldstil zu erstellen. Als ich die Frage las, fiel mir sofort die klassische Benutzeroberfläche des Druckdialogs für die Eingabe der zu druckenden Seiten ein - es ist ein ähnliches Problem, und die Eingabe von Textfeldern ist immer noch die beste Lösung, die ich sehen kann.

Ich denke, es gibt noch ein paar Dinge zu beachten:

  • Benutzer möchten möglicherweise in äquidistante Bänder unterteilen. Dies ist bei einer Textfeld-Benutzeroberfläche ziemlich schmerzhaft, da der Benutzer gezwungen ist, jede Bucket-Grenze manuell einzugeben (sehr schmerzhaft, wenn die Bänder im Vergleich zum Wertebereich der Daten klein sind).
  • Ich denke, es ist wichtig, die Bänder zu visualisieren, damit der Benutzer erkennt, dass sie möglicherweise nicht gleich große Bänder erstellen
  • Ich denke, das manuelle Benennen der Bänder ist ein Edge-Fall. Die App kann dies unter Verwendung einer Standardkonvention zum Benennen von Bändern tun (wobei der Benutzer nur dann umbenennen möchte, wenn er dies wünscht).

Hier ist ein Modell: enter image description here

  • Sie können sich vorstellen, dass die Visualisierung des blauen Bereichs die Unterteilungen animiert, während Sie die Werte in das Textfeld eingeben
  • Da die Bereichsvisualisierung maßstabsgetreu ist, besteht das Problem, dass Eimer erstellt werden, die zu klein sind und keinen Platz für Etiketten bieten. Die Etiketten werden dort angezeigt, wo sie können, werden jedoch gelöscht, wenn kein Platz vorhanden ist. Der Benutzer kann mit der Maus über die Blöcke fahren und diese Informationen (und mehr) über einen Tooltip abrufen.


Das Problem der gemischten Einheiten:
Für hierarchische kontinuierliche Dimensionen (wie z. B. Zeit) besteht das Problem der Eingabe von verschiedenen Hierarchieebenen. Im Fall einer Amtszeit möchten Benutzer beispielsweise die ersten paar Amtszeitbänder in Monaten und den Rest in Jahren angeben. Die Textfeld-Benutzeroberfläche erfordert jedoch, dass sich alle Eingaben in derselben Zeiteinheit befinden (z. B. Jahre). Eine Option besteht darin, einen Dezimaljahresansatz zu verwenden, bei dem die Eingabe auf den nächsten Monat gerundet wird (z. B. wenn der Benutzer 0,27 eingibt, wird auf 0,25 gerundet, was 3 Monaten entspricht). Natürlich ist dies keine großartige Benutzerfreundlichkeit - ich kann nur Benutzer sehen, die dort mit einem Taschenrechner sitzen und versuchen, herauszufinden, was 5 Monate im Dezimalformat von Jahren sind. Ein anderer Ansatz wäre, eine Zeiteinheit neben dem Textfeld umzuschalten (Modell unten). Unabhängig davon denke ich, dass die automatische Benennung der Bänder die Einheitenumrechnung durchführen und Dezimalstellen vermeiden sollte! enter image description here

2
M.A.X

Eine Möglichkeit, die sich ein Freund ausgedacht hat.

alt text

1
Glen Lipka

Ich denke, Sie sind auf dem richtigen Weg, wenn Sie die Bereiche grafisch darstellen. Mein erster zu testender Gedanke ist so etwas, wobei die Bereichsnamen klar zwischen den Bereichsgrenzen liegen:

[img

Eine Plus-Schaltfläche teilt den Bereich auf und fügt eine Standardgrenze (möglicherweise in der Mitte) und einen Standardnamen hinzu, wobei der Fokus auf der neuen Grenze zum Anpassen liegt. Der Benutzer kann auf einen der Bereichsnamen klicken oder auf eine Registerkarte klicken, um sie bei Bedarf zu ändern.

alt text

Sie benötigen zwei Löschvorgänge pro Bereich, einen zum Löschen des Namens und der Obergrenze und einen zum Löschen des Namens und der Untergrenze:

[ing

Der Abstand zwischen den Grenzen kann proportional zu ihrer Trennung sein. In diesem Fall müssen Sie wahrscheinlich auch das Vergrößern und Verkleinern unterstützen. Möglicherweise möchten Sie Benutzern auch erlauben, eine Grenze zu ziehen und abzulegen, um ihren Wert zu ändern. Wenn Ihre Benutzer jedoch nur anhand der numerischen Werte ein angemessenes Gefühl für die Größe eines Bereichs erhalten können, sollten Sie der Einfachheit halber die Grenzen (wie ich es getan habe) zusammenfassen, damit sie nur ihre Ordnungsrangfolge darstellen . In diesem Fall möchten Sie möglicherweise die Grenzsteuerelemente drehen (wie ich es getan habe), um eine Alternative zur Eingabe eines Werts zu ermöglichen.

Das obige Design ist ziemlich selbstdokumentierend, obwohl Sie wahrscheinlich mit dem Grafikdesign herumspielen müssen, insbesondere um zu kommunizieren, wie sich die beiden Schaltflächen zum Löschen unterscheiden (meine groben Zeichnungen sind wahrscheinlich nicht ausreichend). Das Design ist jedoch auch relativ platzintensiv und unübersichtlich (auch hier kann ein besseres Grafikdesign hilfreich sein). Wenn der Platz knapp ist, sollten Sie auf Selbstdokumentation verzichten und ein Objektauswahl-Aktionsmodell in Betracht ziehen, bei dem jeder Bereichsname ein Symbol zur Unterstützung der Auswahl und ein Menü (sowohl ein Pulldown als auch ein Kontext) enthält, um die Optionen bereitzustellen . Außerdem können Sie optional Kopierbereiche in eine andere Score-Zeile einfügen:

[img

Dies bedeutet, dass Sie die Mehrfachauswahl über die üblichen Redewendungen unterstützen.

Ich kann mir zwei Möglichkeiten vorstellen, wie der Benutzer einen Grenzwert so ändern kann, dass er eine andere Grenze überspringt:

  • Verhindern. Erlaube es einfach nicht. Wenn der Benutzer einen Sprung-Frosch-Wert eingibt, wird eine Fehlermeldung ausgegeben. Wenn sich der Benutzer zu einer anderen Grenze hinzieht oder dreht, geben Sie eine grafische Rückmeldung, dass sich der Benutzer an einer Grenze befindet (z. B. wird die Grenzgrenze fett und rot). Dies ist am besten, wenn Sprungfrösche dazu neigen, Fehler zu sein (z. B. hat der Benutzer eine zusätzliche Ziffer eingegeben). Es ist einfach, sich davon zu erholen.

  • Squish. Ändern Sie die Sprung-Frosch-Grenze (oder die Grenzen) so, dass sie der Sprung-Frosch-Grenze entspricht. Dies ist am besten, wenn Sprungfrösche dazu neigen, absichtlich zu handeln - der Benutzer plant, die Grenzen oder Bereiche mit Sprungfröschen anzupassen oder zu löschen, wenn sie gut und bereit sind. Es ist flexibel, aber schwieriger zu beheben, wenn es sich um einen Fehler handelt, da es die Werte einer beliebigen Anzahl von Grenzen ändert, insbesondere wenn Sie "Rückgängig" nicht unterstützen (aber Sie haben "Rückgängig", nicht wahr?).

1

Ich schlage vor, die Achse mit 0, - [große Zahl] und + [große Zahl] mit einem Schwanz nach jedem zu kennzeichnen, der exponentiell ansteigt

0
Schuyler