it-swarm.com.de

Präsentieren von Voreinstellungen für eine Datumsbereichsauswahl

Wir entwickeln einen Date Ranger Picker und sind uns nicht sicher, wie wir voreingestellte Zeiträume darstellen sollen. Das Szenario ist das folgende: Entweder verwendet der Benutzer eine voreingestellte Periode, z.

  • Nächste 7 Tage
  • Nächste 3 Monate
  • Spätestens 7 Tage
  • Spätestens 3 Monate

ODER er/sie gibt ein Von- und ein Bis-Datum an. Meine Frage lautet:

  • Wie wird die OR - Funktionalität am besten in der Benutzeroberfläche dargestellt?

Drei unserer vielfältigen Designalternativen sind:

enter image description here

Im Bild oben zeigen die "Alpha-Einstellungen" usw. nur die Datums-Ranger-Auswahl im Kontext anderer Steuerelemente.

In unserem Team sind wir bei Alternative (C) am ehesten, da es die Beziehung OR) auf standardmäßige Weise mithilfe von Optionsfeldern erklärt. Man könnte jedoch einwenden, dass es zu expliziert ist, und dass z. B. Alternative ( B) ist knapper. Aber wenn Alternative (C) der richtige Weg ist, wie sollte sich das detaillierter verhalten, z.

  • Sollte die Auswahl einer Datumsvoreinstellung automatisch die Felder Von und Bis unter der voreingestellten Dropdown-Liste ausfüllen?
    • Und wenn nicht: Wie vermitteln Sie dem Benutzer, was z. "letzte 3 Monate" bedeutet in Bezug auf das genaue Startdatum?
  • Sollte die nicht ausgewählte Option ausgegraut und zurückgesetzt werden?
    • Und wenn ja, sollte das nicht ausgewählte Feld aktiv werden, wenn Sie nicht nur auf das entsprechende Optionsfeld, sondern auch auf die Eingabefelder klicken, z. die Dropdown- oder Datumsfelder?

Wie sehen Sie das? Welche Alternative bevorzugen Sie - oder haben Sie bessere Vorschläge? Haben Sie gute Beispiele für die Präsentation von Voreinstellungen für Benutzer?

10
agib

In dieser Reihenfolge: B (mit der unten beschriebenen Handhabung), A (buchstabiert), C.

C ist für mich die "typische Techie-Lösung": Sie entscheiden zuerst, wie die Dauer angegeben werden soll, und dann geben Sie die für diesen Algorithmus erforderlichen Daten an. Es sind jedoch nur zwei zusätzliche Steuerelemente zu verwalten, und die Benutzer kennen die bevorstehenden Optionen nicht. Das heißt, wenn Ihre Benutzer Technikfreaks/analytische Denker sind und es am einfachsten zu implementieren ist, entscheiden Sie sich dafür.

B wäre vorzuziehen:

enter image description here

Mindestanforderungen:

  • Sowohl "Vorauswahl" als auch Datums-/Zeitsteuerung sind immer verfügbar (nie deaktiviert)
  • durch Ändern der Vorauswahl wird die in den Bereichssteuerelementen angezeigte Zeit geändert
  • durch Ändern der Bereichssteuerung wird die Vorauswahl auf "Andere" geändert.

Fast perfekt:

  • vergleichen Sie die manuelle Auswahl mit Ihren Voreinstellungen und zeigen Sie "Andere" nur an, wenn keine Übereinstimmung vorliegt
  • wenn der Benutzer manuell "Andere" auswählt, wird ein Hinweis wie "Start- und Enddatum hier auswählen" angezeigt.

Vorteile:

  • Benutzer mit einer vagen Vorstellung von Ihrer App haben eine Reihe typischer Optionen
  • Benutzer erhalten sofort konkretes Feedback für ihre Auswahl
  • Die Wahl kann verfeinert werden, z. "nächste 3 Wochen" kann leicht auf "4 Wochen" verfeinert werden

Varianten:

  • Generieren Sie anstelle von "Sonstige" geeignete Textdarstellungen (z. B. "Nächste 17 Tage").
  • Wenn die App hauptsächlich von normalen, häufigen Benutzern (wenige Gelegenheitsbenutzer) verwendet wird, sollten Sie eine Freitexteingabe in Betracht ziehen, wie sie Hisham vorgeschlagen hat: Das Klicken, um drei Zeitspannen an einem bestimmten Tag einzugeben, ist in Ordnung, denn die Eingabe von 30 in einer Stunde ist schmerzhaft und Freitext Gewinnt.
    (Ich kann mir keine einfache kombinierte Oberfläche vorstellen, die unerfahrene Benutzer nicht bestraft, aber wenn Sie eine breite Palette von Benutzern erwarten, müssen Sie möglicherweise einige Lösungen dafür in Betracht ziehen.)

Layouthinweise:

  • Ich würde das "von" nur für einen sauberen Look weglassen, aber es gibt einen Kompromiss. Im Allgemeinen versuche ich, Steuerelemente gleich groß zu machen und sie in wenigen Zeilen anzuordnen, um ein "unruhiges Formular" zu vermeiden.
  • Gruppenvoreinstellung und Datumsauswahl zusammen (d. H. Geben Sie ihnen einen gewissen Abstand zu den anderen Auswahlen)
  • "Duration" ist natürlich ein dummes Label, sorry;)

(Randnotiz: Instinktiv würde ich ein Intervall von sieben Tagen "vom 17. Februar, 0:00 bis 23. Februar, 23: 59: 59.9999 .." annehmen, aber ich bin mir nicht sicher, ob dies universell ist.)

7
peterchen

Haben Sie darüber nachgedacht, es so zu machen 7 Signale es in ihren Anwendungen zu lösen? Ein einzelnes Auswahlfeld mit den Optionen "Nächste 3 Tage", "Nächste 7 Tage" usw. und der letzten Option "Benutzerdefinierter Bereich" (Mikrokopie ist hier nicht meine Stärke, ich gebe zu, klingt etwas zu technisch) Die letzte Option würde die Datumsauswahlfelder anzeigen.

1
Mariusz Ciesla

Dropdown mit folgenden Optionen:

  • Nächste 7 Tage
  • Nächste 3 Monate
  • Spätestens 7 Tage
  • Spätestens 3 Monate
  • Benutzerdefiniert

Und wenn sie benutzerdefiniert auswählen, werden die Datumsauswahl angezeigt.

1
Bobby Tables

Ich würde mit Option C gehen, aber mit ein paar Änderungen. Aus meiner Sicht ist das Design aufgrund der voreingestellten Zeiträume mit festen Optionen gerade ummantelt:

  • Ersetzen Sie das Popup-Menü für Voreinstellungen durch ein einfaches Bearbeitungsfeld, in das Benutzer eingeben können, z. "7 Tage" oder "7d". Dies ist ein bisschen mehr Arbeit, da Sie den Benutzern erlauben müssen, abzukürzen und dennoch intelligent zu analysieren, aber die Mühe lohnt sich, denke ich.

  • Lassen Sie die Optionsfelder fallen. Es ist kein Entweder-Oder-Vorschlag mehr.

  • Lassen Sie das Bearbeitungsfeld automatisch aktualisieren, wenn der Benutzer eine Auswahl für die Datumsauswahl trifft. Und umgekehrt: Aktualisieren Sie die Werte der Datumsauswahl automatisch, wenn der Benutzer einen neuen Wert in das Bearbeitungsfeld eingibt.

  • Ändern Sie die Bezeichnung "Zeitraum" in "Dauer".

  • Fügen Sie hier ein paar zusätzliche Beschriftungen hinzu (Von, Bis usw.).

Mir fällt nichts anderes ein. :-)

Modified date picker

1
Hisham

Ich mag die Idee nicht, zwei verschiedene Arten von Eingabefeldern zu haben, um dieselben Daten zu bearbeiten. Ich denke das wäre verwirrend. Muss ich etwas in der Bereichsauswahl UND in beiden Datumsfeldern auswählen? Was passiert, wenn ich das Datum in den Datumsfeldern manuell einstelle und aus Neugier die Bereichsauswahl auschecke? Funktioniert es immer noch, wenn ich zuerst einen Bereich auswähle und dann eines der Daten ändere? Wird der andere geändert, um dem Bereich zu entsprechen? All dies ist aus keiner der UI-Ideen wirklich ersichtlich.

Vielleicht ist dies rein kosmetisch, aber imho sollte der Bereichswähler kein Formularfeld sein, sondern eine Art Helfer für die beiden Datumsfelder. So ähnlich:

Hilfsmittel zur Auswahl des Datumsbereichs

Und sobald der Benutzer eines der Daten selbst geändert hat, können Sie den Helfer so ändern, dass er nur für das andere Feld funktioniert:

Datumsbereichswahlhelfer 2

Wenn Sie die Bereiche als Links anstelle eines Formularfelds haben, wird zumindest klar, welche der eingegebenen Daten am Ende zählt.

(Entschuldigung, kein Ruf, daher kann ich noch keine Bilder einfügen.)

0
HenningJ

Ich würde mit der B-Version gehen, weil der Zeitraum und die wählbaren Datumsangaben miteinander verbunden sind, z. Wenn Sie den Zeitraum ändern, werden die Datumsangaben von und bis aktualisiert, und umgekehrt - wenn Sie die Datumsangaben von bis ändern, wird der Zeitraum aktualisiert.

Version A scheint seltsam, da der Zeitraum und die Daten von bis gleich sind, also ein "oder" zwischen den Pausen.

Version C verfügt über einen unnötigen Selektor, da Sie nicht auswählen müssen, auf welche Weise Sie die Zeitspanne eingeben möchten. Beide aktualisieren beide.

0
Henrik Ekblom