it-swarm-eu.dev

Modo migliore per gli utenti di selezionare un intervallo di date

Nella mia applicazione, gli utenti selezionano un intervallo di date per il quale sono richiesti risultati. L'interfaccia utente è simile al seguente:

Existing UI

Ai miei utenti non piace questo, perché il selettore della data richiede loro di selezionare una data specifica. Questo è molto più preciso di quanto richiedano: la maggior parte dei risultati raccolti dal sistema hanno risultati solo mensili o trimestrali. Alcuni sono solo annuali.

Le due idee che ho trovato sono queste:

alt text

A sinistra, basta usare una casella combinata per selezionare da date valide. Il problema con questo approccio è che a volte i risultati saranno giornalieri e l'intervallo di date valido risale al 1860. Ciò aggiunge troppi elementi da gestire in una casella combinata.

A destra, usando un trio di caselle di controllo per selezionare la data. Questo ha alcuni vantaggi. Se i risultati saranno mensili, potrei disabilitare la combo del giorno; se i risultati saranno trimestrali, potrei anche limitare gli articoli disponibili nella combinazione mensile. Ma sembra che questo design richieda un mucchio di clic per essere utilizzato.

Che cos'è un design alternativo per la UX che consente agli utenti di selezionare più semplicemente le date "utili"?

Il mio stack tecnologico è C #, WinForms, .NET 3.5

Aggiornamento 1 ottobre

  • Gli intervalli di date selezionati dai miei utenti sono in genere lunghi, da diversi anni a diversi decenni, che portano a risultati scarsi per un lungo periodo.
  • Le uniche impostazioni predefinite comuni identificate sono "Il più presto possibile" per la data di inizio e "Fino a oggi " come data di fine.

Molte buone idee nelle risposte fino ad oggi - grazie a tutti.

Aggiornamento 2 ottobre

  • Alcune delle risposte di seguito (e presumo che molti dei lettori) presumano che ho bisogno dell'intervallo di date per la generazione di report. In realtà, questa parte particolare della mia applicazione è più un motore di query. Se questo dettaglio ispira nuove idee, ti preghiamo di rispondere.
46
Bevan

In generale, gli utenti sono abbastanza precisi e veloci nell'immissione delle date come stringhe in una casella di testo, purché la convalida non sia inutilmente complicata e fornisca una correzione automatica e valori predefiniti decenti per i sottocampi (ad esempio, accettando 2-9-04 come oltre al 02/09/2004). I controlli del calendario sono ottimi da fornire come opzione quando l'utente non è certo della data (ad esempio, per i casi in cui l'utente sta pensando "mercoledì della prossima settimana"), ma non dovrebbero essere l'unico modo per inserire le date. I menu a discesa separati per ciascun sottocampo rallentano l'utente.

Se hai accesso ai log delle query, studiali per capire meglio che tipo di date stanno utilizzando gli utenti. Mentre potrebbe essere necessario supportare date arbitrarie risalenti al 1860, potrebbe essere necessario ottimizzare il design solo per un numero limitato di date o modelli di date.

Ecco alcune possibilità:

  • Predefiniti. Probabilmente la maggior parte delle tue query sono prevedibili solo dalla pagina in cui si trova l'utente (ad es. Per l'ultimo mese o l'ultimo trimestre o l'anno scorso a seconda della pagina/finestra). Per impostazione predefinita, il tuo intervallo Da-A su questi valori per ogni pagina e gli utenti non dovranno quasi mai inserire nulla.

  • Elenco di intervalli di date tipici. Se alcuni intervalli di date costituiscono la maggior parte delle tue query (ad esempio, ogni mese dell'anno scorso), elencale in una casella di riepilogo o in un elenco di pulsanti di opzione. L'ultimo sarebbe "Personalizzato" che abilita un paio di caselle di testo con controlli del calendario per l'immissione dell'utente di date specifiche.

  • Elenco a discesa per input comuni. Se è presente un elenco prevedibile relativamente piccolo di valori Da e A, fornire la casella combinata Da e A in modo che ciascuno accetti qualsiasi data digitata dall'utente ma con un elenco a discesa con le date più comuni Da e A (ad esempio, l'inizio di ogni trimestre in l'ultimo anno per il campo Da).

  • Casella di testo singola. Se la maggior parte degli intervalli di date sono interi mesi, trimestri e anni, fornire due metodi di immissione degli intervalli di date. L'impostazione predefinita ha una sola casella di testo denominata "Mese, Trimestre o Anno;" che accetta input come "Sep" (predefinito per l'ultimo settembre), "6/09", "3Q06" e "1933". Studia i materiali scritti dagli utenti per vedere quali tipi di stringhe anticipare. Il metodo non predefinito fornisce caselle di testo Da-A separate per date arbitrarie.

  • Micro-grammatiche. Se sono soprattutto i tuoi utenti esperti a lamentarsi dell'inserimento della data, prendi in considerazione il supporto di micro-grammatiche per le caselle di testo Da e A, in cui l'utente può inserire una data esatta o varie altre scorciatoie di sintassi (ad esempio, "Ultimo trimestre" o "LQ "Nella casella Inizio viene interpretato come tutto dal trimestre completato più di recente). Vedi Raccolta efficiente dei dati con le micro grammatiche della casella di testo

41
Michael Zuschlag

Perché non prendere in considerazione un dispositivo di scorrimento della sequenza temporale, con i punti snap-to dei rapporti più recenti per la selezione?

Se hai rapporti risalenti al 1860, con quale frequenza devono tornare indietro?

                   | Report XYZ, Jan 12, 1983 |       
<--- Earlier                   \/                         Later --->
|------------------------------||----------------------------------|
     ^      ^ ^  ^            ^    ^   ^    ^   ^ ^ ^ ^ ^

Qualcosa del genere potrebbe lasciarli scegliere visivamente? Con la bolla sopra l'elenco, dovrebbe rendere più facile per loro vedere ciò che hanno. Prima/dopo un pulsante/scheda si interrompe per spostare l'anno o simili. Slider è accessibile da tastiera.

23
Dominic Hopton

Utilizza due calendari e attenua i giorni non selezionabili. Offri ai tuoi utenti il ​​vantaggio dei calendari (essere in grado di vedere un intero mese alla volta, saltare facilmente avanti e indietro nel tempo e poter selezionare qualsiasi data che gli piace) con il vincolo di solo alcune date valide. Quando un utente fa clic su una data in grigio, fornisci loro un feedback sul perché tale data non è valida o usa una legenda.

Hipmunk.com fa un ottimo lavoro nel semplificare questo. Hanno sempre due calendari in vista e le date prima di oggi sono in grigio (è così ovvio il perché in questo caso che non è necessario specificare il perché, ma potresti doverlo fare). Facendo clic su una data si seleziona la data di inizio e facendo nuovamente clic si seleziona la data di fine. Nota come hanno anche i campi data in modo che tu possa digitare se vuoi, e i campi vengono evidenziati quando fai clic per indicare quale data selezionerai. È non convenzionale e non del tutto "non farmi pensare" ancora, ma è un ottimo modo per combinare questi controlli in modo elegante senza aggiungere un mucchio di ricchi widget. Controlla:

Hipmunk's homepage

Una cosa che Hipmunk potrebbe ancora fare IMO è evidenziare i giorni tra la partenza e il ritorno, proprio come un dettaglio visivo extra. In questo momento i tuoi occhi devono ancora analizzare lo spazio tra le due date come "oh giusto, ogni riga da questa data fino a quella data è dove sarò via".

(Bonus fantastico: prova a specificare una data di partenza dopo la data di ritorno)

6
Rahul

Questo in realtà proviene da un software basato sul Web che utilizzo al lavoro, ma l'idea può essere tradotta abbastanza facilmente in WinForms.

Con questo controllo, continuo a generare rapporti con intervalli di date variabili. Le caselle di testo non sono mascherate e perdonano piuttosto i valori che possono essere convertiti in date, quindi posso scrivere liberamente diversi intervalli di date senza problemi. Una volta usciti dal campo, la data viene formattata in un formato data "corretto". Se non riesce a capire la data, il testo diventa rosso e ha un piccolo simbolo di errore accanto (come se scrivo una data ambigua, come 1109).

Se devo fare qualcosa di specifico, posso fare clic sul pulsante del calendario a destra della casella di testo per vedere il calendario (ad esempio, se devo vedere i rapporti della terza settimana di marzo 2009, non ho bisogno di conoscere le date dalla parte superiore della mia testa).

Preferisco questo stile, perché mi ci vuole solo un secondo per riempire gli intervalli di date: sono solo 010109 tab 030109 tab e poi passerò alla prossima serie di dettagli.

alt text

Controllo superiore, vuoto. Data centrale, a testo libero. In basso, formattazione della data e controllo del calendario.

Per quanto riguarda la tua terza opzione, ho un software che devo usare che usa quello stile, e lo odio, soprattutto perché devo usare il mouse. Vorrei anche sottolineare che le date mostrate sono le date predefinite quando carico la pagina, quindi per impostazione predefinita, vorrei che cercassi elementi più grandi del futuro, ma inferiori al presente. A ENORME il rovescio della medaglia è che gli anni sono decodificati nei menu a discesa - abbiamo dovuto aspettare fino a febbraio 2010 per l'aggiunta del 2010 in modo da poter cercare qualsiasi cosa recente.

alt text

Se sai in anticipo che una determinata query ha solo risultati trimestrali, puoi modificare alcuni layout e scegliere una selezione e un anno come questo:

alt text

E potresti disabilitare i trimestri per l'anno in corso che non sono stati ancora generati.

6
Jared Harley

Non ho letto tutte le risposte. Forse qualcuno ha già suggerito di iniziare con i controlli di cui la maggior parte degli utenti ha bisogno per la maggior parte del tempo, per poi rivelare progressivamente controlli aggiuntivi. Ad esempio, fare clic su un collegamento per rivelare i controlli per il giorno e il mese, per diversi intervalli di date non sovrapposti e così via.

alt text

O questo:

alt text

4
JeromeR

Ecco la mia soluzione.

FirstSecond

2
Alexandr

Sono innamorato del design utilizzato nel plug-in jquery bootstrap-daterangepicker .

Fondamentalmente, ha intervalli predefiniti e campi predefiniti da - a con datepicker che evidenziano l'intervallo selezionato. I like it

1
JCM

Campo scorrevole dell'intervallo di date: 5 passaggi di interazione come immagine .Png con commenti sul russo!

daterange + preset per periodi tipici come 1/3/6/12 mese http://1ne.twozerotwenty.com/pics/2011/10/show_me_the_date.png

Se necessario, posso fornire le istruzioni complete di interazione e aree funzionali in inglese e nella pagina demo.

1
denis.efremov

Ecco come ho risolto un problema simile ... potresti cambiare i 30 giorni/60 giorni/90 giorni per avvisare i rapporti più comuni generati (annuale/trimestrale/mensile). La funzionalità dell'intervallo di date apre una descrizione comandi con funzionalità di intervallo di date per quegli utenti che sono specificamente alla ricerca di un intervallo di date, ma non costringono un utente a inserire le date per generare risultati. enter image description here

0
Ashlie

Mi piace come viene implementata nell'app Google Calendar (MIUI). Ci sono due filatori per scegliere la data e l'ora. Ecco come appare:

enter image description here

Quando si imposta la data e l'ora nel primo selettore, il secondo viene impostato automaticamente su +1 ora.

0
naXa

che ne dici di usare il selettore dell'intervallo di date dell'interfaccia utente di jquery:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

potresti precompilare alcune impostazioni predefinite e impostarlo in modo che l'anno e il mese possano essere menu a discesa invece di avere solo le frecce <> al mese.

0
Patricia

È possibile visualizzare un selettore di calendario dall'aspetto normale, ma se l'utente selezionasse il mese dalla barra del titolo, questo comporterebbe automaticamente le date di inizio e fine come l'inizio e la fine del mese. Allo stesso modo per l'anno.

L'utente potrebbe ignorare la data di fine se desiderasse un intervallo leggermente diverso.

Non sono sicuro di come mostrerai un quarto però.

0
ChrisF

Due pensieri:

  • Puoi presentare diversi raccoglitori di date per diversi tipi di rapporti (ad esempio hai detto che alcuni erano annuali - nel qual caso non hai bisogno di più di un anno - che potrebbe essere un semplice campo di testo.)

  • La data di inizio/fine è il modo in cui gli utenti pensano di riferire? In diversi progetti ho lavorato su persone che vogliono avere rapporti in termini di data e periodo piuttosto che di due date. Quindi, per le relazioni trimestrali, potrebbero volere 4 anni a partire dal terzo trimestre del 1980.

0
adrianh