Qual è il modo più intuitivo e utilizzabile per inserire un'ora del giorno o una durata?

Question

Sto creando un'applicazione line-of-business in Silverlight e devo consentire all'utente di modificare due valori TimeSpan .NET. Uno è un'ora del giorno (relativa a mezzanotte) e l'altra è una durata. Attualmente sto usando due TextBox, formattati come hh: mm. Questo è abbastanza semplice, ma potrebbe sicuramente essere migliorato. Ho osservato persone che usano l'applicazione e mentre alcuni non hanno problemi a entrare rapidamente nei tempi, altre persone hanno difficoltà.

Dato che sto lavorando in Silverlight2, cosa vedresti come controllo personalizzato perfetto che ti consente di visualizzare e modificare facilmente questi due TimeSpan?

Per rendere le cose più difficili, l'interfaccia utente dovrebbe consentire a qualsiasi ora del giorno di essere selezionata con precisione fino al minuto, ma enfatizzare i tempi nel normale giorno lavorativo (ad esempio: 8:00 - 17:00). Alcuni utenti tendono ad entrare in 2:00 (am) quando intendo veramente 2:00 pm.

Nella mia app, sto tendendo ad allineare i tempi e le durate a intervalli di 5 minuti. Come sfondo, questa app è simile a un'app di prenotazione di una stanza in cui le persone specificano quando e per quanto tempo desiderano una stanza.

Answer 1

In una delle mie applicazioni Web ho utilizzato uno slider con 2 maniglie.

Esempio:

|.........Y-----------------Y...| 
     5AM    8PM 

Naturalmente non avevo bisogno di alta precisione come si fa, ma credo che con intervalli cursore 5min leggermente più lungo sarebbe possibile.

Per enfatizzare il normale giorno lavorativo, è possibile colorare lo sfondo del cursore di colore diverso per il normale giorno lavorativo. Oppure fai in modo che gli handler "scattino" per iniziare e terminare il normale giorno lavorativo.

Answer 2

Probabilmente dipende dall'accuratezza dei dati e dalla loro variazione. Se non ha bisogno di essere perfettamente accurata e non variano molto, si potrebbe fare qualcosa di simile

Task was performed at [select start time...] o'clock for [select duration...] 

dove [selezionare l'ora di inizio ...] è una discesa con ogni ora e [selezionare la durata ...] è un pulldown con scenari comuni per quello che stai tracciando come "30 minuti", "1 ora", "2 ore"

Se deve essere flessibile, forse basta andare con la struttura della frase e sostituire il pulldown con le caselle di testo renderebbe chiaro per tutti i nuovi utenti.

Answer 3

ottenere l'ultima Sliverlight Toolkit e utilizzare uno dei nuovi Tempo controlli orientati

Answer 4

Guardate Outlook forse, utilizza menu a discesa che per impostazione predefinita ore e mezza sane (per me comunque;) e le selezioni possono essere modificati a mano in seguito se si desidera una maggiore precisione. La durata segue anche quando viene modificata l'ora di inizio e si imposta automaticamente un'ora o qualcosa.

Ho usato le caselle di testo in una vecchia applicazione Web prima proprio come te, con l'opzione aggiunta di fare doppio clic su di esse per far apparire un widget di selezione rapida come il precedente esempio di Outlook. Forse un pulsante o qualche altra magia di Silverlight può migliorarlo.

Una linea temporale verticale come un giorno di calendario in Outlook in cui è possibile trascinare la parte superiore e inferiore di una "casella" di riunione è per me il modo più intuitivo o almeno il più veloce per posizionare e modificare una prenotazione. Forse se è precompilato con uno che si estende per circa un'ora, facilmente trascinabile per cambiare l'ora di inizio - con il ridimensionamento superiore e inferiore per cambiare la durata.

Answer 5

L'espansione su ciò che Anthony ha detto, Silverlight Toolkit di marzo 2009 include TimePicker & TimeUpDown controls. Si può vedere una demo live di TimeUpDown e TimePicker con 2 popup a: http://silverlight.codeplex.com/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%201#TimeUpDown

io in realtà di proprietà del set di funzionalità e API per questo controllo, quindi sono molto ben familiarità al giorno d'oggi con ciò che è la migliore forma di tempo di ingresso . C'è un intero elenco di best practice di cui possiamo parlare per l'input di tempo. Tutti i quali sono attualmente facilmente reperibili nei controlli.

Su alcuni concetti abbiamo dovuto innovare (come la funzione "Time Intellisense"), ma per la maggior parte usavamo concetti testati in tempo reale. (no pun intended)

Tuttavia, come parte dei non-obiettivi per questi controlli per v1 abbiamo deciso di non supportare intervalli di tempo. Se ritieni che gli intervalli di tempo siano qualcosa che dovremmo sostenere in modo nativo, sentiti libero di suggerirlo su codeplex: http://silverlight.codeplex.com/WorkItem/Create.aspx Diamo priorità attiva agli articoli in base alla quantità di voti e agli scenari utente richiamati nelle questioni.

Per ora, suggerirei di utilizzare solo 2 TimePickers. Le visualizzazioni avanzate (come un righello a selezione multipla o un cursore multiplo) sono un modo per inserire l'intervallo di tempo, ma è necessario disporre di un solido sistema di input di testo globalizzato per un'opzione di fallback.

Answer 6

Questo è un ottimo momento per chiedere quale compito gli utenti stanno cercando di realizzare. Puoi creare le prestazioni del tuo sistema basandoti su questo. In Outlook, ad esempio, le persone di solito inseriscono l'ora perché stanno cercando di pianificare una riunione, in modo da poter tranquillamente disambiguare "2" o "2:00" per indicare le 14:00, perché pochissimi utenti stanno tentando di pianificare riunioni a 2 sono. Questo suona simile alla tua applicazione.

Se si guardano gli utenti, è probabile che eseguano anche la pianificazione per i tempi tipici, che dovrebbero essere facilmente specificati nell'interfaccia. Ad esempio, se la maggior parte delle riunioni ha una durata di 50 minuti, ciò dovrebbe essere molto saliente, forse un pulsante o un'altra opzione con un clic.

Non suggerirei di inventare un nuovo widget di input. Più lo strumento di input è standard, meno gli utenti devono pensare quando utilizzano il prodotto. Concentrati sulle intelligenze all'interno della tua logica, capendo (e mostrando all'utente) ciò che pensi di chiedere.