Come presentare i preset relativi a un selettore di intervalli di date
Stiamo sviluppando un selettore di date ranger e siamo in dubbio su come presentare periodi di tempo preimpostati. Lo scenario è questo: OGNI utente utilizza un periodo predefinito, ad es.
- I prossimi 7 giorni
- I prossimi 3 mesi
- Ultimi 7 giorni
- Ultimi 3 mesi
OPPURE specifica una data Da e A. La mia domanda è questa:
- Come viene meglio rappresentata la funzionalità OR nell'interfaccia utente?
Tre delle nostre molteplici alternative di design sono:
Nell'immagine sopra "Impostazione alpha" ecc. Sono lì per mostrare il selettore data ranger nel contesto di altri controlli.
Nel nostro team siamo più propensi all'alternativa (C) poiché spiega la relazione OR in modo standard utilizzando i pulsanti di opzione. Tuttavia, si potrebbe obiettare che è troppo esplicata e che, ad esempio, l'alternativa ( B) è più conciso, ma se l'alternativa (C) è la strada da percorrere, come dovrebbe comportarsi in modo più dettagliato, ad esempio:
- La scelta di una data preimpostata deve compilare automaticamente i campi Da e A sotto il menu a discesa delle preimpostazioni?
- E in caso contrario: come si comunica all'utente cosa, ad es. "ultimi 3 mesi" significa in termini di data di inizio esatta?
- L'opzione non selezionata deve essere disattivata e reimpostata?
- In tal caso, il campo non selezionato dovrebbe diventare attivo quando si fa clic non solo sul pulsante di opzione corrispondente ma anche sui campi di input, ad es. il menu a discesa o i campi della data?
Cosa ne pensi di questo? Quale alternativa preferisci o hai qualche suggerimento migliore? Hai qualche buon esempio di come presentare i preset agli utenti?
In quell'ordine: B (con la gestione dettagliata di seguito), A (precisato), C.
C è per me la "tipica soluzione tecnica": decidi prima come specificare la durata, quindi specifichi i dati richiesti per quell'algoritmo. Tuttavia, sono solo due i controlli aggiuntivi da gestire e gli utenti non conoscono le opzioni future. Detto questo, se i tuoi utenti sono tecnici/pensatori analitici ed è più facile da implementare, provaci.
B sarebbe preferibile:
Requisiti minimi:
- I controlli "preselezione" e data/ora sono sempre disponibili (mai disabilitati)
- la modifica della preselezione modifica il tempo visualizzato nei controlli di intervallo
- cambiando i controlli di gamma cambia la preselezione in "altro"
Quasi perfetto:
- confronta la selezione manuale con i tuoi preset e mostra "altro" solo se non c'è corrispondenza
- quando l'utente seleziona "altro" manualmente, mostra un suggerimento come "seleziona la data di inizio e fine qui"
Vantaggi:
- Gli utenti con una vaga idea della tua app hanno una serie di opzioni tipiche
- Gli utenti ricevono un feedback immediato e concreto per le loro scelte
- La scelta può essere raffinata, ad es. Le "prossime 3 settimane" possono essere facilmente affinate a "4 settimane"
Varianti:
- Invece di "altro", genera rappresentazioni testuali adeguate (ad es. "Prossimi 17 giorni").
- Se l'app viene utilizzata principalmente da utenti abituali (pochi casual), prendi in considerazione un input di testo gratuito come suggerito Hisham: fare clic su per inserire tre intervalli di tempo in un determinato giorno va bene, perché inserire 30 in un'ora è una seccatura e testo libero vince.
(Non riesco a pensare a una semplice interfaccia combinata che non penalizzi in qualche modo gli utenti alle prime armi, ma se ti aspetti una vasta gamma di utenti, potresti dover trovare alcune soluzioni per questo)
Note sul layout:
- Ometterei il "da" puramente per un aspetto pulito, ma c'è un compromesso. In genere cerco di dare ai controlli la stessa dimensione e li allinea su poche righe per evitare un aspetto "forma irrequieta".
- Raggruppa preselezione e selettore data insieme (ovvero concedi loro una distanza dalle altre selezioni)
- "Durata" è ovviamente un'etichetta stupida, scusa;)
(nota a margine: d'istinto suppongo che tra un giorno e l'altro trascorreranno "sette giorni" dal 17 febbraio, dalle 0:00 al 23 febbraio, dalle 23: 59: 59.9999 .. ", ma non sono sicuro che sia universale.)
Hai mai pensato di farlo nel modo 7 segnali risolverlo nelle loro applicazioni? Unico campo di selezione con le opzioni "Prossimi 3 giorni", "Prossimi 7 giorni" e così via e quindi l'ultima opzione è "Intervallo personalizzato" (la microcopia non è il mio punto di forza qui, lo ammetto, suona un po 'troppo tecnico) - controllando il l'ultima opzione mostrerebbe i campi del datepicker.
Elenco a discesa con le seguenti opzioni:
- I prossimi 7 giorni
- I prossimi 3 mesi
- Ultimi 7 giorni
- Ultimi 3 mesi
- Custom
E quando selezionano personalizzati appaiono i datepicker.
Vorrei andare con l'opzione C, ma con alcune modifiche. A mio modo di vedere, il design ha una camicia di forza a causa dei periodi preimpostati con opzioni fisse:
Sostituisci il menu a comparsa delle preimpostazioni con un semplice campo di modifica che consente agli utenti di digitare, ad es. "7 giorni" o "7d". Questo è un po 'più di lavoro perché devi consentire agli utenti di abbreviare e tuttavia analizzare in modo intelligente, ma ne vale la pena, credo.
Rilascia i pulsanti di opzione; non è più una "o o" proposizione.
Far aggiornare automaticamente il campo di modifica quando l'utente effettua una selezione sui selettori di data. E viceversa: aggiorna automaticamente i valori dei selettori di data quando l'utente immette un nuovo valore nel campo di modifica.
Modificare l'etichetta "Periodo" in "Durata".
Aggiungi un paio di etichette extra qui (Da, A, ecc.).
Non riesco a pensare ad altro. :-)
Non mi piace l'idea di avere due diversi tipi di campi di input per manipolare gli stessi dati. Penso che sarebbe confuso. Devo selezionare qualcosa nel selettore di intervallo E in entrambi i campi della data? Cosa succede se imposto manualmente la data nei campi data e il check out il selettore di intervallo per curiosità? Funziona ancora se seleziono prima un intervallo e poi cambio una delle date? L'altro è stato modificato per adattarsi alla gamma? Tutto ciò non è davvero ovvio da nessuna delle idee dell'interfaccia utente.
Forse questo è puramente estetico, ma imho che il selettore di intervallo non dovrebbe essere un campo modulo, ma piuttosto una sorta di aiuto per i due campi data. Qualcosa del genere:
helper selettore intervallo di date
E una volta che l'utente ha modificato una delle date, puoi cambiare l'helper in modo che funzioni solo sull'altro campo:
helper selettore intervallo di date 2
Avere gli intervalli come collegamenti anziché un campo modulo chiarisce almeno quale dei dati inseriti conta alla fine.
(scusa, nessuna reputazione, quindi non posso ancora includere immagini)
Vorrei andare con la versione B perché il periodo di tempo e selezionabile da - alle date sono collegati, ad es. se si modifica il periodo di tempo, le date da e a verranno aggiornate e viceversa - se si modifica il periodo da - a date, il periodo verrà aggiornato.
La versione A sembra strana dal momento che il periodo di tempo e dalle date sono uguali, quindi una "o" tra le interruzioni logiche.
La versione C ha un selettore non necessario poiché non è necessario scegliere in che modo inserire il lasso di tempo, entrambi aggiorneranno entrambi.