Quelle serait la meilleure façon de guider les utilisateurs dans cette conception et d'éviter de forcer les utilisateurs à faire l'erreur puis à les corriger?
J'essaie de trouver la meilleure façon de guider l'utilisateur pour atteindre son objectif (soumettre un cours) sans avoir à forcer les utilisateurs à faire une erreur puis à les corriger.
Dans cette conception:
L'utilisateur atterrit sur cette page "Détails du cours" (option à gauche). Ici, l'utilisateur doit remplir certaines informations (certaines sont obligatoires et d'autres ne le sont pas).
Veuillez noter que le bouton "Soumettre" est désactivé.
L'utilisateur doit sélectionner l'option "Date du cours" à gauche. Doit fixer une date. Uniquement après la date fixée, le bouton "Soumettre" sera activé et l'utilisateur pourra soumettre. Cela signifie que toutes les autres options sont facultatives. Les options requises se trouvent dans les options "Détails du cours" et "Date du cours".
Le bouton Soumettre doit être visible sur toutes les pages (Quelle que soit l'option que vous avez choisie à gauche, une page à droite affiche des champs obligatoires, des champs facultatifs ou les deux. Ainsi, l'utilisateur peut soumettre à tout moment , quelle que soit la page sur laquelle ils se trouvent) APRÈS que toutes les données requises soient fournies, le bouton est activé et l'utilisateur peut soumettre (dans ce cas, les données requises sont uniquement sous Détails du cours et date du cours).
Ma question est: Alors que l'utilisateur est sur la page "Détails du cours" , comment puis-je leur faire savoir que le bouton "Soumettre" est toujours désactivé (bien qu'ils aient rempli tous les champs obligatoires sur la page "Détails du cours") car ils doivent allez dans l'option "Course Date" et fixez une date , pour que le bouton "Soumettre" soit activé?
Voici donc ce que j'ai pensé faire, soit:
Je mets un astérisque à côté de l'option "Date du cours" et j'ajoute une icône d'aide à côté du bouton désactivé "Soumettre", guide l'utilisateur pour définir la date et ensuite il pourra soumettre.
L'icône d'aide disparaît une fois le bouton activé.
Je mets un astérisque à côté de l'option "Date du cours" et je garde le bouton "Soumettre" activé tout le temps, et une fois que l'utilisateur clique dessus avant de définir la date sous l'option "Course Date", j'affiche un message qui guide les utilisateurs à fixer une date puis à la soumettre. (De cette façon, j'oblige l'utilisateur à faire une erreur en essayant de soumettre, puis en lui enseignant qu'il doit d'abord fixer une date, puis soumettre)
Je sais que le design n'est pas génial pour commencer, j'apprécie de meilleures idées!
Veuillez noter que ce n'est pas un design finalisé, ce design est juste un croquis pour expliquer le cas, donc pas de focus sur les polices, ou les couleurs correspondant ... etc.
Mise à jour: (pour en savoir plus)
Le bouton "Soumettre" doit rester visible tout le temps comme sur l'image fournie. Comme les utilisateurs n'ont pas besoin de remplir toutes les données de toutes les pages. Pensez-y en u cliquant sur un bouton "Créer un nouveau cours", vous amène à cette page (par défaut = page Détails du cours), U peut remplir toutes les données sur toutes les pages et soumettre. Mais vous pouvez toujours remplir "uniquement" les données requises (dans ce cas uniquement sur les pages Détails du cours et date) et Soumettre. Que se passe-t-il s'il y a d'autres données requises sur certaines autres pages qui ont chacune plusieurs données requises mais qui ne peuvent pas être placées sur la même page que la page Détails du cours. Alors, comment allez-vous gérer cela? Considérez la conception comme plusieurs pages chacune ayant des données spécifiques, certaines pages ont besoin de données tandis que d'autres en option. L'utilisateur peut soumettre à n'importe quelle page (toutes les données requises sont fournies).
Encore un point, il ne devrait pas y avoir de flux forcé. Cela signifie qu'il ne devrait pas y avoir de bouton "Suivant" sur chaque page pour amener l'utilisateur à la page suivante, car certains utilisateurs savent ce qu'ils doivent remplir afin de ne pas vouloir aller à chaque page. Certains utilisateurs qui reviennent pourraient ne vouloir fournir que certaines données (y compris les données requises) et soumettre. Ils veulent donc que cela continue.
La norme de facto actuelle est un astérisque immédiatement visible (c'est-à-dire grand) à côté de chaque champ obligatoire, avec une explication d'entrée indiquant que les éléments suivis sont obligatoires.
Étant donné que cette application est destinée aux enseignants, elle peut être hébergée sur une seule page, par exemple (cela n'a pas été raffiné): 
Tout est dans le placement.
Il serait préférable que le bouton Soumettre soit positionné sous l'option Date du cours, car il s'agit de l'ordre de lecture logique typique qui implique que la date doit être définie avant le bouton Soumettre est cliqué.
Je suggérerais également de mettre une info-bulle sur le bouton d'envoi désactivé - dès que l'utilisateur survole le bouton désactivé, il devrait dire quelque chose comme: Please set a course date. Bien sûr, les astérisques sur les champs obligatoires (et les contours rouges s'ils ne sont pas terminés lorsque vous appuyez sur Soumettre) est la norme attendue, donc je l'utiliserais également. Réduisez la charge cognitive des utilisateurs en introduisant tous ces éléments.
Grâce à ces améliorations, bien que tout le monde ne l'obtienne peut-être pas, la majorité des utilisateurs comprendront qu'ils ont besoin d'une date avant de pouvoir soumettre.