Formulaire de saisie des heures d'ouverture d'une entreprise
Je conçois une interface où les restaurants doivent saisir leurs heures d'ouverture. Je pense à utiliser un contrôle de curseur pour les horaires pour une seule journée, puis laisser l'utilisateur choisir les jours de la semaine auxquels cette chronologie serait applicable.
Le problème est que certains restaurants ferment pendant quelques heures entre leurs heures d'ouverture. Des idées sur une solution élégante à ce problème?
** Mise à jour **
Cette question a été mentionnée par Sacha Greif dans son bulletin hebdomadaire, donc j'ai pensé que je devrais énoncer les exigences de manière plus formelle.
- Les propriétaires de restaurants devraient pouvoir indiquer leurs heures d'ouverture, y compris les pauses entre les heures d'ouverture et différentes heures les jours de la semaine.
- Jours/dates de fermeture du restaurant. Cette exigence est née d'un Tweet:
![enter image description here]()
- L'interface devrait être principalement destinée aux restaurateurs qui (nous supposons) pourraient ne pas être familiers avec les interfaces complexes.
- Le but est d'encourager les restaurateurs à s'inscrire, et donc un effort minimal de leur part est idéal pendant qu'ils remplissent le formulaire d'inscription.
J'apprécie l'intérêt que cette question a suscité et j'accueille vos suggestions.
Il s'agit d'une interaction délicate, principalement parce qu'elle doit être super intuitive, car les utilisateurs finaux ne sont pas familiarisés avec l'ordinateur. Je le sais car j'ai dû y faire face dans le passé :)
J'ai eu le même problème en travaillant dans l'équipe UX sur 11870.com (un site de recommandations similaire à Yelp), c'est la façon dont nous l'avons géré, ce n'est peut-être pas la solution idéale, mais cela a bien fonctionné et les restaurants et les entreprises n'ont eu aucun problème le configurer:
L'utilisateur choisit les jours et heures d'ouverture .
Si le service est divisé (99% des restaurants sont divisés en 2 autant), cliquer sur "service divisé" affiche deux autres sélections et change le texte: "de x à x ET x à x" et le lien change en "service continu "afin que l'utilisateur puisse revenir à l'état précédent.
Le délai est d'une demi-heure. Et par défaut, le choix le plus courant (de 09h00 à 17h00 ici)
Ci-dessous, nous montrons à l'utilisateur les informations Et c'est aussi comme cela qu'elles s'afficheront dans la page
Voici la partie délicate ..
Vous devez l'afficher de manière simple et compréhensible qui ne se transforme pas en un énorme bloc d'informations.
le regroupement est la clé, regroupez les jours avec le même horaire.
pensez à tous les combos possibles, par exemple:
- si l'utilisateur choisit toutes les heures chaque jour, affichez "ouvert toute la journée" au lieu d'afficher tous les jours et heures qui seront redondants.
- Si plus de 2 jours consécutifs peuvent être "groupés" sur le même horaire, affichez "du lundi au mercredi"
- si seul le week-end est sélectionné: afficher "week-end: de x à x"
etc...
vous pouvez voir un exemple d'affichage d'une sélection difficile (ouvert du lundi au jeudi en heures fractionnées + vendredi et samedi dans une autre série d'heures fractionnées + dimanche en horaire complet):
lundi : 13-16: 30h/20: 30-0h ven et sam : 13-16: 30h/20: 30-0: 30h Soleil : 13-16: 30h
vérifiez-le en direct ici: page du restaurant sur 11870.com
Selon le temps de vacances et les jours de fermeture spéciaux, ma recommandation est de créer une section différente ou les utilisateurs seront facilement confondus.
Pour cela, un calendrier comme une interaction est préférable.
Différencier les heures et les jours d'ouverture normaux du temps de vacances spécial permettra également aux utilisateurs de changer l'un sans affecter l'autre.
Je pense qu'il peut mieux faire un support visuel pour une telle entrée, qui permettra d'entrer non seulement des pauses, mais aussi des jours de congé. L'entrée peut ressembler à ceci:
Un clic sur l'en-tête de ligne ou de cellule (avec heure ou jour) doit activer/désactiver tous les jours ou heures. Vous pouvez également ajouter des variantes populaires en haut du tableau pour les sélectionner plus rapidement - "24x7", "Tous les jours sans week-end" etc.
En outre, l'utilisation du curseur pour une entrée simple (sans interruption) peut ne pas être très pratique, car pour certains de votre public (pas très familier avec les interfaces modernes), il peut être difficile de sélectionner l'heure exacte.
Je pense que la meilleure façon pour les utilisateurs d'entrer des données est via un formulaire - Tout le monde sait comment les utiliser, et vous pouvez facilement diviser de nombreuses données en petits morceaux gérables. Voici ma solution:
Cela leur donne suffisamment de contrôle pour qu'ils puissent saisir tout ce dont ils ont besoin, mais ne les submerge pas avec un barrage de questions.
Un clic sur "Cet horaire ne s'applique qu'à un jour férié" ferait apparaître un menu déroulant avec une liste des jours fériés, ainsi qu'un sélecteur de date pour les jours fériés les plus obscurs.
Un clic sur "Ce calendrier ne s'applique qu'à une certaine période de l'année" ferait apparaître deux sélecteurs de date, à savoir de [datepicker] à [datepicker]
EDIT: Je viens de voir un peu comment identifier les jours de fermeture. Dans ma solution, je mettrais une petite info-bulle à gauche du bouton Enregistrer, disant " Astuce: supprimez tous les changements si vous êtes fermé pour ce programme. "
WWYD (Que ferait Yelp?)
J'ai brièvement examiné des sites populaires qui dépendent de formes de saisie similaires pour se développer et réussir. Je pense que Yelp a la solution la plus simple et la plus intuitive (essayez vous-même) :
- Trois zones de liste déroulante (jour, heure de début, heure de fin) plus un bouton "Ajouter des heures"
- Cliquer sur "Ajouter des heures" ajoute à la liste des heures au-dessus du widget d'entrée.
- Il existe un lien de suppression à côté de chaque élément de la liste.
- La valeur par défaut de la zone de liste déroulante de jour commence le lundi et incrémente automatiquement chaque fois que de nouvelles heures sont ajoutées.
- Des valeurs par défaut sensibles sont données pour les autres zones de liste déroulante de temps.
La solution Google+ Places est un bon finaliste; cette conception est probablement motivée par des tonnes de données d'utilisation réelles (essayez vous-même) :
P.S.
Lors de l'inscription d'un restaurant, je rendrais les heures facultatives (comme les exemples ci-dessus). Vous pouvez toujours doucement pousser les propriétaires de restaurants à ajouter leurs heures plus tard, ou peut-être que d'autres utilisateurs de votre service seront disposés à ajouter ces informations.
J'ai pensé à cela il y a quelque temps pour un site Web lié au restaurant et le problème de newsletter de Sacha a refait surface pour moi. Il existe de nombreux types d'heures d'ouverture différents que les restaurants peuvent avoir, donc la solution doit être suffisamment flexible pour englober les différentes variantes, mais suffisamment simple pour qu'elle ne soit pas intimidante pour les restaurateurs (qui ne sont peut-être pas technophiles).
Je suis allé avec un Twitter intuitif et compact bootstrap comme un groupe de boutons de case à cocher pour choisir les jours de la semaine ( http://Twitter.github.com/bootstrap/javascript.html#buttons ). L'image est pour un navigateur/client de bureau, mais je peux l'imaginer facilement traduite en une interface mobile.
Cette interface est bien évolutive. Pour la plupart des restaurants avec des heures d'ouverture simples, il est assez simple de saisir. Cliquez simplement sur les jours pour lesquels vous êtes ouvert et sélectionnez les heures d'ouverture. Avez-vous un service de déjeuner et de dîner séparé chaque jour? Pas de problème, ajoutez simplement plus de lignes d'heures avec des plages horaires différentes. Une information utile pour les amateurs de restaurants est le moment de la dernière commande, donc je l'ai également ajouté. Une fois que les restaurateurs ont entré les heures, toutes les informations qu'ils ont saisies sont joliment présentées sur une seule page, afin qu'ils puissent facilement voir ce qu'ils ont entré.
Avec ce format d'entrée, tout est capturé dans un format standardisé convivial pour la machine, de sorte que la sortie peut être analysée et présentée de manière lisible (par exemple du lundi au jeudi de 8h à 20h, fermée le vendredi).
Je pense que cette question a un potentiel illimité de prolifération de la complexité. Par exemple, que se passe-t-il si un restaurant ouvre à des horaires réduits en hiver? Je pense que vous aurez du mal à saisir chaque scénario.
Cela dit, beaucoup peuvent être capturés d'une manière assez simple en utilisant un formulaire de type assistant avec divulgation progressive pour réduire l'encombrement jusqu'à ce que l'utilisateur le demande.
Première étape:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Deuxième étape: (y compris la divulgation progressive ci-dessous)
Troisième étape:
J'ai trouvé un bel exemple (voir l'image en taille réelle) sur ce site . C'est pour gérer la disponibilité des sites sportifs dans un tournoi sportif, mais la conception pourrait facilement être appliquée aux heures d'ouverture d'un restaurant. Vous n'auriez pas besoin des deux dernières colonnes.
Ce que j'aime:
- Glisseurs faciles à faire glisser et disponibilité visuelle claire sur une semaine
- Des plages horaires plus rapides et plus faciles à définir que plusieurs listes déroulantes contenant des informations temporelles
- Affiche les heures de début et de fin spécifiques à côté de chaque jour
- Indique la durée totale d'ouverture du restaurant chaque jour
- Contrôle granulaire en cliquant sur une poignée de curseur puis en utilisant les touches fléchées du clavier qui déplace la poignée de curseur de 5 minutes à la fois
- Gros bouton pour effacer le planning et recommencer en un clic
- Peut être facilement réalisé avec curseur jQueryUI .
Les inconvénients:
- Ne permet pas de diviser les heures d'ouverture sur un jour de semaine. Vous auriez probablement besoin d'ajouter dynamiquement une autre ligne s'ils voulaient des heures d'ouverture fractionnées pour ce jour de semaine.
Quelques idées.
1) Prévoyez des heures "fractionnées":
Hours:
[ ] to [ ] (+ split hours)
Et s'ils décident de se séparer:
Hours:
[ ] to [ ]
[ ] to [ ] (+ split hours)
2) Laissez-les se former librement sous forme de zone de texte:
Enter your hours of operation:
----------------------------
| |
| |
| |
| |
----------------------------
Voici une maquette de la façon dont je pense que cela devrait être:
- L'utilisateur sélectionne d'abord l'une des 2 options
- Supposons que la corbeille est visible en vol stationnaire pour éviter le bruit
- Par défaut, l'utilisateur obtient 1 emplacement intitulé (Ouvrir) (De) (À)
- Les listes déroulantes (De) et (À) peuvent également fonctionner comme des champs de texte (Google Agenda)
- Un curseur peut être utilisé pour chaque emplacement au lieu des menus déroulants
Pourquoi pas quelque chose de similaire au calendrier de mac?
Ceci est très clair visuellement, mais permet également de cliquer et de faire glisser, ce qui rend la création et le réglage des blocs de temps rapides à utiliser.
La simplicité est la clé, ici. Pour que cela vaille la peine pour les restaurateurs, je considère que ce produit doit être très rapide, gérable et intuitif par-dessus tout.
Le flux d'inscription comporte deux étapes, chacune présentée sur un écran différent. 
Cette première partie est l'inscription. Tout ce qu'on leur demande, c'est le nom, un e-mail et un mot de passe. Ensuite, une fois ces informations soumises, elles seront présentées avec l'écran suivant: 
Ils saisissent toutes les règles auxquelles ils peuvent penser, faisant de chacun sa propre phrase. Il n'y a rien à comprendre; ils peuvent simplement expliquer leurs heures sous forme de paragraphes, comme ils le feraient à n'importe quel humain. Le traitement du langage naturel analyserait alors toutes les phrases, rechercherait les jours de la semaine et "ouvrir" ou "fermer" - entre autres mots déclencheurs - et afficherait les données dans un calendrier. 
En haut, ils peuvent ajouter de nouvelles règles à ajouter au calendrier, et chaque règle du calendrier est une zone de texte sur laquelle vous pouvez cliquer et modifier. Au bas du calendrier se trouvent des notes pour l'avenir. Ils contiennent des avis à venir à appliquer à l'horaire du restaurant à l'avenir, tels que les jours fériés ou les changements d'heures prévus.
Mais le calendrier montre simplement la semaine en cours. Il met en évidence le jour de la semaine en cours et affiche horizontalement toutes les informations sur les heures du restaurant, comme une chronologie.
Je pense qu'il vaut mieux éviter de répéter la même tâche pendant plusieurs jours. Dans la plupart des cas, les restaurants choisissent une plage de jours pour appliquer leurs heures d'ouverture (généralement deux plages: les jours de semaine et les week-ends).
L'interface que je propose ressemble aux heures d'ouverture affichées sur une fenêtre de restaurant, et offre la possibilité d'ajouter un seul ou plusieurs jours.
Des équipes supplémentaires peuvent également être ajoutées dans la plage de jours. Le premier quart de travail ne peut pas être supprimé (car au moins un quart de travail doit être inclus), mais les lignes supplémentaires auront un bouton de suppression à côté d'eux.
L'interaction serait le défilement horizontal avec la souris ou avec les flèches gauche et droite du clavier (les deux seront activées). Les incréments de minutes peuvent être de 15 minutes ou de 00 ou 30, selon la flexibilité requise.
Si tous les jours sont sélectionnés dans la première plage (par exemple du lundi au dimanche), la plage de jours supplémentaire n'apparaîtra pas (et vous pouvez afficher "Tous les jours" dans les heures d'ouverture).
Je ne suis pas tout à fait sûr de la flexibilité requise pour les jours fériés, mais j'ai ajouté une fonctionnalité pour sélectionner les jours fériés dans lesquels le restaurant sera fermé.
Si quelque chose sur l'interface ou l'interaction n'est pas clair, n'hésitez pas à demander. :)
C'est un problème difficile. Pour résoudre un problème d'interface utilisateur difficile, je pense que cela aide à énoncer les choses et à ne pas essayer d'être concis et compact, d'être simple au détriment du gaspillage potentiel d'espace. Une autre chose qui aide est de montrer à l'utilisateur le résultat de son travail, de sorte que l'utilisateur saisit des informations, il y a une section de sortie qui montre comment les informations seront interprétées et affichées.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Maintenant, je ne suis pas satisfait à 100% de la section d'entrée (côté gauche) de cet exemple (c'est passable mais cela ne me surprendrait pas de voir de meilleures suggestions), je pense que la chose importante ici est que le résultat de l'entrée est affiché en temps réel dans la section "sortie" à droite. Cela permet à l'utilisateur d'explorer et d'expérimenter et de voir les résultats et de l'aider à arriver à un résultat dont il est satisfait.
J'ai entendu parler du problème en lisant la newsletter de Sacha Greif. En lisant les commentaires de Sacha sur les problèmes et solutions possibles, j'ai commencé à visualiser ma propre solution. J'en ai créé un rapide filaire.
Exemple de filaire http://inkreaser.com/ext/stack-exchange/restaurant-hours.png
Je pense que la solution est suffisamment complexe pour couvrir avec élégance tout ce dont elle a besoin, mais assez simple pour être intuitive pour les nouveaux utilisateurs. Par défaut, le formulaire a un jour et un quart de travail (l'exigence minimale). Les utilisateurs peuvent entrer un quart de travail en sélectionnant les heures et les minutes pour "de" et "à"; ceci est rapide mais conserve toujours une flexibilité totale. Les utilisateurs peuvent ajouter des équipes supplémentaires en cliquant sur '+ Ajouter une équipe', qui insère un autre ensemble de listes déroulantes 'de' et 'à'. Les utilisateurs peuvent spécifier le (s) jour (s) auxquels ce groupe de quarts s'applique et ajouter plus de blocs de jours si nécessaire, en répétant le processus pour chaque quart de jour différent.
Vous souhaitez également inclure les boutons "- Supprimer ce décalage" et "- Supprimer ce jour", au cas où les utilisateurs commettraient des erreurs.
Je pense que les restaurateurs/propriétaires de magasins considèrent généralement leurs heures d'ouverture comme (par exemple) de 9h00 à 22h00 avec une pause de quelques heures. Peut-être que la pause/sieste est juste une chose locale (je suis de Chypre) mais je pense que l'ajout d'une "pause" au lieu de deux heures d'ouverture distinctes pour chaque jour simplifierait les choses du point de vue des restaurateurs.
L'autre chose à laquelle j'ai pensé est une interface à onglets pour ajouter des horaires. Si je comprends bien, la majorité des restaurants ont deux principaux horaires d'ouverture (hiver/été) et quelques horaires de vacances en plus.
Les restaurateurs pourraient créer leurs horaires via une interface à onglets. Ils peuvent nommer l'horaire, ajouter la plage de dates de l'horaire et entrer leurs heures d'ouverture et leurs pauses pour chaque jour de semaine (qui est appliqué à cette plage de dates).
Maintenant, un problème auquel je peux penser, c'est celui des dates qui se chevauchent. Par exemple, si une fourchette 1/8/2013 - 30/8/2013 existe dans deux (ou plus) planifications, laquelle choisir le système?
Cela pourrait être résolu avec une sorte de paramètre de "remplacement" (par exemple, "Ces dates existent dans Schedule2! Override?"), Mais je ne sais pas si cela ajouterait à la facilité d'utilisation de cela. Cela créerait également d'autres complications (par exemple, ce qui se passe lorsque le calendrier prioritaire est supprimé, etc.)
J'imagine un widget d'horloge séparé en quartiers, où ils peuvent simplement cliquer sur les heures d'ouverture. Les heures sélectionnées seraient surlignées en bleu clair sur le widget, et les heures d'ouverture/fermeture apparaîtraient dans le texte en dessous (peut-être même dans une zone de texte, afin qu'ils puissent cliquer pour copier les heures une fois qu'elles ont été terminées?). Alternativement, vous pouvez les faire surligner (en rouge très clair, peut-être) les heures de fermeture, car il semble que cela nécessiterait moins de clics.
Voici une maquette Balsamiq (très) approximative du widget sans temps sélectionné:
Des exemples d'images seraient fournis dans une barre latérale collante afin qu'ils puissent continuellement les référencer. De plus, cliquer + glisser mettrait en surbrillance plusieurs segments temporels.
Je pense que l'option étendue d'Alex Ovtcharenko est très claire en termes d'affichage visuel. Il ne faudrait que quelques ajustements pour le rendre encore plus utilisable. Je le ferais en affichant des intervalles d'une demi-heure et en affichant un bloc d'heures d'ouverture comme une zone au lieu de colonnes séparées (comme dans le calendrier mac uniquement latéralement), et en permettant à la fois de cliquer sur l'entrée et de faire glisser l'entrée. Ça signifie:
- marquer un bloc de saisie en un seul clic. S'il est adjacent à une période déjà marquée, joignez-y ce bloc. Sinon, commencez une nouvelle période. Si la période est déjà marquée, décochez-la et divisez la zone si nécessaire (vous pouvez entrer toute la journée, puis simplement décocher la pause déjeuner par exemple).
- permet de faire glisser les bordures d'une zone/période (fournir le curseur de souris approprié)
- permet de cliquer-glisser pour sélectionner une zone à la fois.