Un moyen simple de laisser un utilisateur sélectionner plusieurs plages de temps
Je réfléchis à ce problème depuis plus d'une semaine maintenant et je n'arrive pas à trouver une manière sensée de le faire.
Fondamentalement, je construis un composant dans le but de permettre à un utilisateur de sélectionner une série de plages de temps qui peuvent être spécifiques ou générales. Cela doit être présenté de manière simple et brave afin que même les utilisateurs non avertis en technologie puissent le comprendre sans effort et sans regarder une vidéo d'instructions ou lire plus de deux lignes de texte. Plus précisément, les plages horaires seront utilisées pour planifier les livraisons (et sont donc destinées à permettre à l'utilisateur de spécifier quand elles sont disponibles pour les accepter).
Il y aura deux modes: spécifique et général, que j'ai décidé de séparer avec des onglets. Le mode "spécifique" est facile et c'est quelque chose que j'ai couvert (l'utilisateur choisira deux fenêtres temporelles); cependant, le plus compliqué (et celui que nous voulons par défaut - il est donc crucial qu'il soit très simple) sera le mode "générique", dans lequel l'utilisateur devrait être en mesure de communiquer sa disponibilité de manière aussi spécifique et simple d'une manière possible (par exemple, "Cette semaine, je suis disponible en semaine après 18h, sauf le jeudi, et toute la journée le samedi").
J'ai réfléchi à différentes façons de mettre en œuvre cela, mais tout ce que je trouve semble contre-intuitif, laid ou bizarre. Certaines des idées que j'ai traversées étaient: un tas de cases à cocher/champs de texte (les plus simples mais laids), un calendrier où ils peuvent sélectionner des plages horaires (agréables à regarder mais qui pourraient dérouter les personnes moins techniques; aussi encombrantes si je dois les sélectionner, par exemple, 18h-22h chaque soir de semaine - je devrais le faire 5 fois), j'ai aussi pensé à une zone de texte de forme libre où les gens peuvent simplement taper un texte de présentation quand ils sont disponibles - mais cela va être ridiculement complexe et sujet aux bogues pour une tâche aussi simple, etc.
Donc, je me demandais si quelqu'un avait des idées sur la meilleure façon d'aborder cela. Je suis principalement un développeur, pas un gars UX, donc je suis sûr que ce problème a déjà été résolu par la communauté UX parce que je ne peux pas imaginer que ce cas d'utilisation soit si rare. Cependant, après avoir cherché, je n'ai pas pu trouver quoi que ce soit de pertinent (peut-être qu'il y a un terme pour cela que je ne connais pas?).
Merci d'avance.
Comme d'autres l'ont dit, cela est presque impossible à résoudre pour le cas général. Cependant, en connaissant les paramètres réels, une conception sur mesure peut être développée qui couvre la plupart des cas (par exemple 80%: 20% de Pareto) et prend toujours en charge les cas exceptionnels.
Si nous devons prendre en compte uniquement les heures de travail/d'ensoleillement pour la semaine ou les 5 à 10 jours suivant aujourd'hui et qu'une précision d'une demi-heure est suffisante, une grille/tableau de calendrier interactif fonctionnera. Chaque intervalle de 30 minutes est représenté par une seule cellule. Les colonnes représentent les jours (étiquetés demain puis par jour et mois ou simplement le jour de la semaine, c'est-à-dire mar ou mardi etc.) et les lignes représentent les heures d'horloge.
Une interaction intuitive serait de cliquer ou d'appuyer sur chaque cellule individuellement pour basculer son statut entre disponible et occupé (ou ce que vous avez). Cela peut être lourd. Je suggère donc d'autoriser le "dessin": lorsque le bouton de la souris ou le bout d'un doigt sur un écran tactile est enfoncé sur une cellule, un mode de dessin est activé qui change les cellules de l'état binaire dans lequel cette cellule se trouve actuellement à l'autre; il affecte toutes les cellules qui sont déplacées alors que le doigt est toujours baissé, mais seulement celles qui se trouvent dans le même état bien sûr.
votre problème doit être ventilé. Je pense qu'il existe deux types de problème, la plage de dates que vous souhaitez répéter et une autre que vous n'avez pas.
Pas de répétition : Cette semaine, je suis disponible en semaine après 18h, sauf le jeudi, et aussi toute la journée du samedi Répétition : 18h-22h chaque soir de semaine
Je viens de concevoir une interface utilisateur qui pourrait résoudre vos deux problèmes. jetez un œil ci-dessous.
Chaque jour, vous pouvez également définir le délai en plusieurs jours.
En cliquant sur le titre de la semaine (dim, lun), vous pouvez sélectionner les jours respectifs (facile pour le week-end hein?)
vous pouvez aussi obtenir de petites idées d'ici:
https://dribbble.com/shots/1821532-DatePicker
https://dribbble.com/shots/372959-Date-Picker-2-Month-View-with-Time-Option
Malheureusement, les calendriers sont difficiles à comprendre et à utiliser correctement et systématiquement.
Qu'en est-il de permettre aux gens de répondre avec la disponibilité du texte et de coder cela en quelque chose? Si vous avez actuellement quelques centaines d'utilisateurs, ce n'est probablement pas trop mal pour une personne CS de s'occuper pendant que vous mettez à l'échelle une bonne solution.
Vous pouvez même faire des tests A/B avec les deux options: 1) le meilleur UX que vous pouvez comprendre et 2) le champ de forme libre de texte. Ensuite, regardez les taux d'achèvement et le bonheur.
Il n'y a pas de solution simple à cela, mais voici la façon la plus simple à laquelle je pourrais penser:
http://jsfiddle.net/b3f6wvyp/1/
Autorisez l'utilisateur à spécifier une ou plusieurs fenêtres temporelles. Une fenêtre temporelle est composée d'une date et de 2 heures ("de" et "à"). Lorsqu'une nouvelle fenêtre temporelle est ajoutée, elle copie le contenu actuellement le dernier de la liste. Les widgets d'entrée que j'ai utilisés pour cet exemple sont ceux de base HTML5 et ils peuvent être embellis.
Il n'y a aucun moyen de contourner la nécessité pour l'utilisateur de saisir une date et 2 valeurs. L'astuce consiste à utiliser les méthodes/widgets les plus faciles à utiliser. Exactement ce que sont ces méthodes/widgets les plus simples, je vais laisser une autre discussion - si c'est une application web, alors peut-être utiliser jQuery UI ou YUI widgets, si c'est une application native, utilisez les widgets/conventions natifs, si disponibles.
L'important est de montrer clairement ces regroupements d'une date, une heure de début et une heure de fin à, ces fenêtres temporelles, en tant qu'unités, et d'avoir des moyens faciles de les ajouter et de les supprimer.