Le choix des dates (ci-après, pour plus de simplicité, j'utiliserai le mot calendrier) est souvent utilisé sur les sites. Réservation d'hôtels, vols, voitures, achat de billets. C'est un sujet tellement galvaudé qu'il n'y a aucun sens à l'écrire à ce sujet.

Mais ... il n'y a pas si longtemps, j'étais confronté à la tâche de concevoir un calendrier pour sélectionner les périodes. La plage de sélection des dates allait de 2 jours à plusieurs mois.

Le public cible est plutôt hétérogène: âge de 35 à 60 ans, maîtrise de l'informatique des débutants aux utilisateurs confiants.

Objectif: rendre le format de sélection de date le plus pratique qui soit compréhensible pour le public cible.
Avant de concevoir, les concurrents ont été étudiés et testés, plusieurs articles sur un sujet donné ont été lus.

Je veux partager les conclusions et les exemples tirés du travail. Il n'y aura pas de découvertes pour quelqu'un, mais quelqu'un, j'espère, trouvera quelque chose de nouveau et d'utile pour lui-même.

La présence du bouton «Terminer» (Confirmer, Sélectionner, OK ...) dans le corps du calendrier

Les gens ne viennent pas toujours sur le site avec des dates claires dans la tête.

Ils peuvent indiquer une période, réfléchir, changer les dates (début, fin, période entière). La plupart des sites masquent le calendrier immédiatement après avoir sélectionné une date. www.booking.com , www.aeroflot.ru à titre d'exemple. Ce comportement du système a gêné les utilisateurs dans une situation où la mauvaise date a été accidentellement choisie ou une décision finale n'a pas encore été prise. «Cliqué dans le mauvais sens» est particulièrement vrai pour les personnes âgées, malvoyantes, pressées ou incapables de se concentrer. Les raisons de cette conception sont compréhensibles - moins de clics, moins de charge.

Mais nous ne savons pas toujours qui et comment interagiront avec l'interface. Dans quelles conditions sera-t-il situé.

Pour cette situation, la solution Google Flights est pratique. Parcourez les dates en pensant à votre guise, le calendrier sera visible jusqu'à ce que vous cliquiez sur le bouton «Terminer». Idéalement, il y a un sentiment de contrôle et de compréhension de l'interface.

Afficher les résultats de la recherche sans clics supplémentaires

Une telle fonction est bien implémentée sur le site www.trivago.ru . J'entre les paramètres nécessaires et les résultats sont déjà chargés.

Mise en évidence visuelle des dates de début et de fin

Les utilisateurs ont laissé de bons commentaires sur la disponibilité de ces conseils. La différence visuelle entre les dates de début et de fin a servi d'ancrage d'origine et a facilité le travail avec le calendrier.

Certains sites manquaient d'indicateurs de dates actuelles.

Pour ne pas dire que cette erreur fatale, qui affecte grandement la facilité d'interaction, mais 6 personnes sur 10 testées ont remarqué qu'il leur manque vraiment un tel indicateur comme une sorte d '«ancre» qui montre la relation entre la date sélectionnée et la date actuelle.

Exemples d'heures : www.airbnb.ru

Il est clair quelles dates peuvent être sélectionnées et lesquelles ne le peuvent pas. Date actuelle non mise en évidence



Exemple deux : www.ozon.travel/flight/

Autre solution: les dates inaccessibles ne sont pas indiquées sur le calendrier. La date actuelle est la première, ne laissant aucun doute par où commencer la recherche.



Exemple trois : www.booking.com

Dates actuelles, disponibles et inaccessibles visuellement compréhensibles

Possibilité de réinitialiser rapidement les dates sélectionnées

Utile si l'utilisateur a décidé de modifier complètement la demande. Pour un nettoyage rapide, certains utilisateurs actualisent la page. Et il y a des situations où l'utilisateur a choisi les dates, mais a mis à jour la page par accident.

Si l'utilisateur se rafraîchit accidentellement, il est peu probable qu'il soit ravi de la nécessité de tout remplir à nouveau. S'il a été mis à jour intentionnellement, il verra les dates enregistrées et commencera à en enregistrer de nouvelles.

Pour résoudre ces problèmes, vous pouvez placer un lien «Réinitialiser» ou «Nouvelle recherche» bien visible à côté de la saisie de la date quelque part à la vue.

Cela vous permettra d'effacer rapidement les résultats de la recherche, si nécessaire, et de sauvegarder les données en cas de mise à jour accidentelle.

www.google.com/flights

Champs préremplis

Sur certains sites testés, le champ «Date» a déjà été rempli.

Dans certains cas, il n'y avait qu'une date de début, dans certains - une date de début et de fin. Ce comportement de l'interface a provoqué le mécontentement des personnes testées et confuses. Bien sûr, chaque cas doit être considéré individuellement.

Par exemple, l'achat de billets de train ou d'avion, les réservations d'hôtel peuvent avoir lieu longtemps à l'avance. La date actuelle est alors inappropriée.

Lors de la réservation de billets, par exemple, pour le cinéma, cette approche peut être justifiée.

Voici des exemples de champs préremplis. Est-ce pratique? Ça vaut le coup d'y penser.

Exemple un : www.rzd.ru



Exemple deux : www.trivago.ru



Exemple trois : www.rentalcars.com

Remplissez automatiquement la date «Retour»

Une autre «puce» commune avec un signe moins. Lors de la saisie de la date «Là», la date «Retour» est automatiquement remplacée. C'est généralement le lendemain.

Ce comportement de l'interface a également provoqué un mécontentement face à son imprévisibilité et à son indépendance excessive.

Cela vaut la peine de penser dans quels cas aider et dans lequel laisser les gens faire leurs propres choix.

Comme exemple pour tester des sites: www.booking.com , www.trivago.ru

Idées pour une note:

Enfin, de bonnes idées qui n'étaient pas nécessaires au développement, mais qui restaient dans la tirelire.

Indication du coût immédiatement sur le calendrier

www.google.com/flights

Lors du choix des dates aller-retour, le coût total du vol est calculé. Les vols les moins chers sont mis en évidence dans une couleur distincte. C'est pratique si la tâche consiste à trouver l'option la moins chère ou à comparer les prix.

Options pour afficher / basculer entre les mois

Lorsque vous devez montrer plusieurs mois à la fois, vous pouvez espionner des idées et réfléchir à une solution pratique.

Idea Times : www.rentalcars.com



Deuxième idée : www.ozon.travel/flight/



Troisième idée : www.swiss.com

Séparation visuelle des week-ends des jours de la semaine

La question la plus simple: commencer la semaine le lundi ou le dimanche? Cela dépend du service fourni et du public cible. Si les clients commandent vos services plus souvent le week-end, mettez en surbrillance les week-ends et éventuellement les jours fériés.

www.skyscanner.net

Mini podomètre pour des transitions rapides

Pour planifier de courts trajets, etc. Il n'est pas nécessaire d'ouvrir un calendrier. Ici, vous pouvez afficher les résultats de la recherche.

Il ne faut pas oublier que les mini-steppers sont une bonne amélioration lors du choix des dates, mais vous ne devez pas les remplacer par une fenêtre contextuelle complète avec un calendrier.

Que choisir? Examinez d'abord l'objectif des plages de saisie de calendrier et de date. Si les dates remontent loin dans le passé ou dans le futur (par exemple, pour réserver des vacances), une fenêtre contextuelle avec un calendrier est une bonne option.

Si la plage de dates est assez courte (moins de six semaines - par exemple, lors de la réservation d'un rendez-vous médical), assurez-vous d'envisager d'ajouter un mini-stepper pour une configuration plus rapide.

Un : www.bahn.de



Deux : www.google.com/flights



En fait, tout. Comme toujours, toutes les opinions sont acceptées, la critique est la bienvenue, pour des exemples supplémentaires de bonnes décisions de gratitude!