it-swarm.it

Campi modulo più intuitivi per l'immissione di data / ora?

Quali sono i diversi modi per avere campi in un'applicazione per data, ora o entrambi? Quali sono i pro e i contro di ciascuno?

Il più comune sembra essere una combinazione di 2-3 elenchi a discesa o alcuni widget del calendario dei moduli. Ci sono altre opzioni disponibili? Qual è il più intuitivo?

45
GSto

Credo che una casella di testo normale con un'indicazione del formato previsto sia spesso sufficiente. Come accennato da Kevin, se usi un selettore di date devi assolutamente fornire un metodo per l'immissione diretta. Molte persone preferiscono semplicemente digitare la data.

Ma questo è quello che faccio su Techinsurance.com ...

alt text

Ovviamente ho anche la convalida lato client e server. L'unica altra caratteristica che ho aggiunto è che se immettono 12121999 o 12-12-1999, il testo viene automaticamente formattato con barre quando si perde lo stato attivo nella casella di testo. Ho adottato questa tecnica a giugno e finora ha funzionato abbastanza bene per noi.

31
Steve Wortham

Sono assolutamente d'accordo con Rahul, che dipende dal contesto. Un widget di calendario è super utile per andare avanti o indietro di qualche mese, ma non così grande per scegliere la tua data di nascita - sarebbe un incubo che fa clic!

Personalmente odio quei pull-down della data per scegliere la tua data di nascita, anche perché tendono a essere un dolore per colpire la tua selezione di target, ma ne ho visto di recente uno di recente nel flusso di iscrizione su Kontain.com. Come puoi vedere di seguito, hanno disposto le opzioni in una tabella anziché in un elenco (e hanno fatto lo stesso per giorno e anno) e ho scoperto che si trattava di un miglioramento straordinario. Sìì!

alt text

27
annemarie lock

Ricorda che la facilità d'uso è un prodotto del tuo pubblico e del dominio della tua app. Ad esempio, se stai creando un servizio come Kayak, ti ​​concentrerai su utenti ragionevolmente esperti di tecnologia che useranno molto i controlli di data durante la loro esperienza con la tua app. D'altra parte, Google e Amazon hanno un pubblico più ampio e meno interazioni, quindi hanno priorità diverse.

Con questo in mente, ecco alcune considerazioni:

  • Controllo calendario. Questi possono essere molto utili quando si desidera comunicare metadati aggiuntivi su date, orari o periodi durante la selezione di una data. Ad esempio, su un sito di viaggio, un utente potrebbe selezionare una data per prenotare un hotel. È possibile utilizzare il controllo calendario per indicare quali date sono completamente prenotate. Poiché il controllo del calendario si confronta più da vicino con il suo cugino del mondo reale, il calendario, stai facendo un favore agli utenti portando interazioni con date e orari nel loro modello mentale. Tuttavia, ci sono casi d'uso in cui i controlli del calendario diventano imbarazzanti; poiché il controllo è modellato sulla visualizzazione di un mese alla volta, stai spingendo il controllo sul salto tra i mesi in (spesso) frecce o menu a discesa. Questo può essere limitante se stai cercando di dare all'utente più libertà nella scelta di una data.

  • menu a discesa. Spesso ne vedrai tre di seguito: [Giorno] [Mese] [Anno]. Funzionano bene quando un utente sta semplicemente selezionando una data che conosce già in anticipo, come la sua data di nascita. Non funzionano così bene se stai chiedendo all'utente di ripetere un'attività che coinvolge le date, poiché la maggior parte degli utenti utilizzerà il mouse e quindi deve fare clic una volta su ciascun menu a discesa per aprirlo, una volta su ciascun elemento per selezionarlo e eventualmente scorrere su e giù un lungo elenco (per le date di nascita, non è raro avere il menu Anno che inizia a 1920 e termina a 2009). Assicurati di tenerne conto se scegli i menu a discesa.

  • campi di input con testo semplice. Come altri hanno risposto, la cosa bella dei campi di input è che puoi accettare praticamente qualsiasi cosa. In questi casi, ricorda i principi di progettazione del modulo: non applicare la formattazione del database/back-end all'utente finale. Cerca di essere il più generoso possibile nell'accettare il maggior numero possibile di formati. Utilizza la convalida lato client per segnalare i problemi all'utente prima che invii il modulo (le date sono molto facili da convalidare in Javascript fornendo alla stringa l'utente inserito nella nuova funzione Date () e vedendo se si ottiene una data indietro).

Guardando oltre i controlli, prendi in considerazione alcuni principi di buon senso quando gestisci le date:

  • Controlla se l'utente non ha commesso un errore. Se stai progettando un sito per ragazzi e qualcuno dice che sono nati nel 1934, considera se questa dovrebbe essere un'opzione e se dovrebbe, ricontrolla con loro per vedere se sono effettivamente 76. Non per scopi di validazione dell'età, ma come servizio per l'utente. Allo stesso modo, se stai progettando un sito di viaggi, valuta se l'utente intendeva davvero prenotare una vacanza alle Hawaii a ottobre 2011, non a ottobre.

  • Nella maggior parte dei casi, non sono necessarie selezioni temporali specifiche e probabilmente non vengono mappate sul modello mentale dell'utente. Quando pianifichi un evento, la massima granularità di cui probabilmente avrai bisogno è in intervalli di 5 minuti. Offri un controllo che consente agli utenti di selezionare 12:00, 12:05, 12:10 ecc. Anziché 60 opzioni per ogni minuto. La granularità che decidi può avere un grande effetto sull'usabilità del particolare controllo che scegli di utilizzare (come i menu a discesa).

  • Guarda sempre oltre i controlli standard e nel regno della grafica delle informazioni come opzione. Di solito questi saranno complicati e costosi da implementare, ma possono valerne la pena se la selezione di data/ora è una caratteristica fondamentale. Ad esempio, hipmunk.com ha una fantastica rappresentazione visiva degli orari dei voli (leggi, non come input) che potrebbe essere ancora migliore se fosse interattivo. In questi casi, ricorda di considerare le aspettative del tuo pubblico.

16
Rahul

Conservare il modulo di inserimento dati gratuito quando possibile

I programmatori sono pigri! Lascia che il computer funzioni un po 'e considera di non avere nemmeno un campo data specifico per l'inserimento della data iniziale. Google Calendar, durante la creazione di un nuovo evento, ti consente semplicemente di dire:

  • 4 luglio: cena a casa di Joe

GC quindi capirà tutto per te (incluso dove) e, in base alle impostazioni locali del tuo profilo utente, sarà intelligente su cosa significhi 4/7: cena da Joe. Per le modifiche successive, il controllo del calendario GC è piacevole e facile da usare. Considera quanto segue e quanto sarebbe facile per gli utenti:

  1. prossimo gio
  2. tra 4 ore
  3. tra 2 settimane

E ... SHOCK HORROR cosa succede se l'utente non lo sa ?? Non ho visto molto, ma perché questa non è una data accettabile per alcune circostanze:

  • Tra circa 3 giorni

So che è spaventoso :) Ma Tog On Software Design , Bruce Tognazzini (autore originale di Apple Human Interface Guidelines) descrive l'implementazione di User Experience è un po 'come una magia trucco: 'un'illusione': sembra facile, ma sotto sta succedendo ogni sorta di follia.

Vorrei che il software mettesse un promemoria automatico 1d prima di dire 'hey, in giro adesso volevi fare cose'

Inoltre, usa il contesto tanto quanto poss:

  • prima del compleanno di Joe

... se hai contatti o un grafico sociale, questo dovrebbe essere facile da capire; in caso contrario, chiedere.

Prendi in considerazione più di un mese

Quando si hanno intervalli di date, considerare che i limiti del mese sono una vera seccatura per le visualizzazioni del calendario che mostrano solo un mese. iCal su Mac è pulito in questo modo perché puoi mostrare un numero qualsiasi di mesi in modo da poter facilmente controllare cosa significano le date esatte di "tra 2 e 3 settimane da ora".

12
Julian H

Normalmente uso solo una normale casella di testo e aggiungo l'interfaccia utente di Jquery Datepicker.

Quando l'utente mette a fuoco la casella di testo tramite tab o clic o quant'altro si apre temporaneamente il controllo del calendario sotto di essa - senza disturbare l'inserimento di testo:

alt text

L'utente può quindi semplicemente digitare una data in qualsiasi formato analizzabile o utilizzare il mouse con il popup del calendario. Selezionando una data con il mouse, la digiti semplicemente nella casella di testo nel formato preferito del sito per l'utente e chiudi il popup.

Per l'inserimento dell'ora ho trovato qualcosa di simile fatto da qualcuno che ho dimenticato che, ma con le (12 o 24) ore che compaiono in un widget tabulare, selezionando un'ora quindi vengono visualizzate alcune opzioni di minuti come 0, 15, 30 e 45. prima, solo digitando l'ora funziona bene, ignorando il popup.

alt text

Inoltre, un controllo del calendario può essere regolato per visualizzare più di un mese alla volta, di solito lo faccio mostrare 2-3 mesi uno accanto all'altro, a seconda del contesto della data. La registrazione della data nel mio caso ruota generalmente intorno al trimestre corrente però. Una voce di data di nascita non funzionerebbe così bene come qualcuno ha già sottolineato ^^

7
Oskar Duveborn

Un'alternativa comune a più menu a discesa o widget è il testo della guida alla formattazione standard. A volte lo vedrai all'interno del campo di testo come valore predefinito e talvolta a destra/sotto il campo. Il testo predefinito direbbe qualcosa come "MM/GG/AAAA" o "gg-mm-aaaa". Ecco un esempio dal modulo di iscrizione di Google:

Google's date format

Ciò offre all'utente il controllo totale su cosa inserire e utilizza solo un campo di testo. Un aspetto negativo di questo approccio è la necessità di ulteriori convalide lato client per assicurarsi di aver seguito la convenzione sulla data corretta.

5
wnathanlee

La prima domanda è quanti campi di immissione della data sono presenti nell'applicazione e con quale frequenza vengono utilizzati.

Se devi iscriverti al tuo giorno di nascita quando ti iscrivi e basta, probabilmente non dovrebbe essere una priorità per te.

Ma se hai molte date ci sono alcuni punti da considerare che nessun altro ha ancora parlato:

  1. Devi occuparti del formato data preferito dall'utente (non sono negli Stati Uniti, voglio che le mie date siano nel formato GG/MM/AAAA, quelle date statunitensi con il mese all'inizio sono difficili da leggere per me e genere).

  2. Inoltre, considera gli altri controlli attorno al campo della data, se è una pagina costruita in modo che l'utente interagisca con esso con il mouse, dovresti avere un selettore di date che può essere utente solo con il mouse, d'altra parte se hai campi di testo verso la data in cui è probabile che l'utente si trovi in ​​"modalità di digitazione" e forzare l'interazione che richiede il mouse (come più menu a discesa) potrebbe essere fastidioso.

Infine, i tuoi utenti non sono miei utenti, dovresti testarlo, dare a metà degli utenti un campo di testo e metà di un controllo grafico del calendario, misurare quanti utenti completano ogni modulo e quanto tempo impiega ogni gruppo in media a completarlo .

Se è abbastanza importante ossessionarlo al riguardo, è abbastanza importante testarlo.

4
Nir

I miei due centesimi: sono cieco e penso che la cosa migliore sia: 3 combo box! Un'alternativa potrebbe essere 2 caselle combinate per mesi e giorni e un testo di input per l'anno, ma dovresti fare un controllo su questo campo ... Se dovessi pensare come programmatore, avrei preferito un singolo testo di input, ma se pensi che nel tuo sito potrebbe essere un "utente noob" Penso che la cosa migliore sia la prima opzione :)

3
Filippo1980

Per quanto riguarda la velocità e la facilità d'uso, niente è meglio della semplice immissione numerica, ad es. 2010-09-21. Utilizzare un casella di testo singola ma (a parte i comuni "/" e "-") accetta anche le schede per spostarsi da un campo al successivo uno. Colpire "[tab]" dovrebbe inserire un separatore. Come separatore preferisco il trattino, perché separa i campi più chiaramente.

Non forzare le persone a digitare zeri iniziali.

Non userei l'inserimento di testo come mesi abbreviati come suggerito Bevan perché impiegano più tempo per entrare. Inoltre, come si abbrevia? Tre lettere? Quattro? Come ho detto nella mia risposta a Bevan, è particolarmente una cattiva idea se stai lavorando con un pubblico internazionale; "Settembre" potrebbe non essere "Settembre" nella lingua dell'utente.

Parlando di pubblico internazionale: non tutti usano l'ordine MM-GG-AAAA (di fatto, al di fuori degli Stati Uniti quasi nessuno lo fa). È possibile indicare l'ordine richiesto sotto la casella di testo. Un modo per evitare l'ambiguità di date come 5-06-201 è utilizzare il formato ISO 8601 YYYY-MM-DD.

2
stevenvh

Fornisci un input di testo in cui l'utente può digitare la data insieme a un suggerimento sul formato che può utilizzare, ma accetta quindi qualsiasi formato non ambiguo indipendentemente dai separatori o dal numero di cifre. Quando l'utente digita qualcosa di diverso dal formato standard, aggiornalo immediatamente al formato standard in modo che l'utente veda esattamente come stai interpretando la data in modo inequivocabile. L'aggiunta di un'icona del calendario per dare agli utenti che desiderano un'opzione di selezione da un calendario è buona anche - gli utenti che vogliono digitare una data non devono usarla.

1
Sam

Stavo solo facendo delle ricerche su questo. Le app di calendario sono un buon punto di partenza. Il mio layout preferito è la data con l'ora a destra. Non mi piace il calendario di Google Data - Ora - Ora - Formato data, ma il datepicker e il menu a discesa sono eseguiti in modo abbastanza chiaro.

(Non ho potuto pubblicare l'immagine di esso, ma ti incoraggio a verificarlo)

0
sudonim