web-dev-qa-db-fra.com

Sélecteur de date / heure pour les petites plages

J'ai une application où un utilisateur devra choisir une date et une heure dans une très petite plage, avec une précision à la minute près. Généralement, ce qui se passe, c'est qu'un appareil biométrique est donné à un sujet et commence l'enregistrement (généralement 24 heures, mais jusqu'à 96) et pendant ce temps, le sujet prendra un journal écrit de leurs expériences (par exemple "8: 27 h - marche; étourdi "). Plus tard, l'appareil et le journal écrit seront retournés à un technicien qui devra transcrire les entrées du journal dans ma demande. Il y aura probablement plusieurs entrées de journal:
Diary Grid

Le problème est qu'aucun des sélecteurs de date/heure que j'ai examinés ne semble bien adapté à cette tâche.

C'était ma première itération, en utilisant une interface utilisateur assez typique:
Typical Date Time Picker

Notez combien de cette interface utilisateur est gaspillée avec des options désactivées, et en plus, elle ne fait pas un bon travail pour indiquer exactement où se trouvent les limites (dans ce cas, 23 heures le mardi à 23 heures le mercredi).

Voici quelques autres réflexions que j'ai eues:

Plusieurs listes déroulantes:
Many Dropdowns

C'est une assez bonne solution, mais je ne suis pas un grand fan de la façon dont l'encombrement donne l'impression de l'interface utilisateur. Maintenant, au lieu d'une liste déroulante contenant un sélecteur de date/heure, j'en ai 4. Cela rend également un peu plus difficile la mise en œuvre d'une validation appropriée, et ne fait toujours pas un excellent travail pour indiquer exactement où se trouvent les limites.

Curseur date/heure:
Date/Time Slider

Celui-ci fournit une indication très claire des limites, et il est très facile de limiter la plage des entrées, mais il ne fait pas grand-chose pour désencombrer l'interface utilisateur (surtout si j'inclus les marqueurs que j'ai ajoutés dans la maquette). Ceci est un contrôle assez non standard et pourrait dérouter certains utilisateurs, mais je voudrais également donner une entrée de texte à côté pour les utilisateurs qui préfèrent utiliser leur clavier. Je voudrais probablement aussi cacher le curseur complet dans une liste déroulante. La partie la plus difficile ici serait probablement la mise en œuvre du contrôle entièrement nouveau.

D'autres suggestions? Quelle est une manière conviviale de présenter un sélecteur de date/heure pour de très petites plages? Je suis sûr que je ne suis pas le premier à rencontrer ce problème.

4
p.s.w.g

Réponse mise à jour

Un calendrier réduit peut être plus facile à comprendre et à utiliser contrairement au menu déroulant multiple ou à l'option de curseur de plage.

par exemple.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Les vues de calendrier sont utiles pour orienter l'utilisateur dans la sélection de la date correcte bien mieux qu'une liste déroulante. Le passage à un calendrier hebdomadaire (ou bihebdomadaire, selon votre plage de dates) au lieu de la vue mensuelle permet de préserver le contexte tout en supprimant les dates les plus inutiles. Le sélecteur de calendrier est également une interface beaucoup plus familière avec laquelle interagir par rapport aux curseurs. Les curseurs peuvent être difficiles à comprendre et à ajuster.

Vous pouvez placer l'exemple ci-dessus dans une boîte de dialogue qui s'ouvre lorsque l'utilisateur clique dans la cellule de temps pour la modifier.

3
nightning

Qu'en est-il d'un modèle comme Busycal? Vous pouvez le définir de sorte que lorsque vous faites glisser des événements sur le calendrier, il progresse par petits incréments.

Exemple de gif: http://recordit.co/bpdLdbMt6x

1
Phillip Quintero