I received some very valid feedback today from a user. I’m not sure if there’s already a good way of dealing with this issue or not. If not, I’d say it’s something worth thinking about how to improve.
But after all visible fields were completed, it wasn’t immediately clear that the user would have to scroll down to find the final required field/checkbox:
Sure, there’s some slight fading of the content, but that’s not very obvious for most people.
I’m not sure what the best approach would be to improve this—perhaps a visual hint that scrolling is needed? Or simply expanding the signup modal so all fields are visible?
And is there something I can do immediately that would improve the signup flow for my users?
You can make a minor CSS adjustment to allow the modal to get taller on desktop devices, this should do it:
.d-modal.create-account .login-form form {
max-height: 70vh
}
At the moment our default max-height is more restrictive, I can probably allow it to get a little taller by default… but there’s always going to be a point where the scroll cut-off isn’t obvious for someone with X number custom fields added. I really hate that macOS does this hidden scrollbar behavior.
Thanks @awesomerobot, I’ll give that a try! (I assume you meant max-height: 70vh; which seems to work perfectly!)
And I do appreciate that this primarily an issue on MacOS, @codinghorror. However, 1/3 of my desktop users are on MacOS, so it’s not an insignificant part of my audience.
Même problème ici. Les champs personnalisés obligatoires ne sont pas visibles et les utilisateurs ne comprennent pas pourquoi ils ne peuvent pas cliquer sur Créer un nouveau compte :
Je recommande de remplacer le CSS de votre instance pour le rendre plus clair — comme indiqué ci-dessus, de nombreux systèmes d’exploitation masquent fortement les barres de défilement, alors je vais simplement me citer moi-même..
Résoudre ce problème est délicat car la plupart des appareils tactiles masquent les barres de défilement par défaut, notre formulaire d’inscription est dans une fenêtre modale, la longueur du formulaire peut varier si des champs supplémentaires sont ajoutés, et les hauteurs de navigateur varient.
En dehors du changement très important qui consisterait à déplacer le formulaire d’inscription vers une page complète au lieu d’une fenêtre modale… je pense qu’il existe plusieurs solutions possibles et que l’une (ou les deux) pourrait probablement améliorer les choses :
Dans les navigateurs modernes, nous pouvons forcer l’apparition des barres de défilement avec CSS. Cela signifie qu’elles seront toujours visibles sur les appareils tactiles (ce qui rend le défilement plus évident). Mais cela signifie aussi que nous remplaçons les styles de barre de défilement par défaut du système d’exploitation sur la fenêtre modale d’inscription, ce qui peut sembler déplacé.
Nous pouvons modifier le comportement du bouton « Créer un nouveau compte ». Au lieu de le désactiver tant que le formulaire n’est pas complété, nous pouvons permettre aux utilisateurs de cliquer dessus, puis les faire défiler jusqu’au premier champ incomplet.
Forcer l’apparition des barres de défilement devrait être simple à tester en premier. @codinghorror/@sam, qu’en pensez-vous ?
J’adore vraiment cette solution, @vinothkannans, peux-tu t’en charger ?
Nous avions le même problème avec le compositeur depuis des années, et le rendre toujours cliquable a résolu un grand nombre d’incidents ; l’animation rouge rebondissante bloquait vraiment les choses dans le compositeur.
Cela semble bien, je pense que c’est beaucoup plus évident maintenant !
J’ai apporté un changement supplémentaire qui a supprimé une marge et utilise « entrer » au lieu de « fournir » dans les messages obligatoires (nous utilisons « entrer » dans les messages de validation, donc je l’ai copié).
Merci. Bien que je n’aie pas les compétences (ni le courage) d’appliquer ce correctif. J’espère que cette fonctionnalité apparaîtra dans les prochaines mises à jour dès que possible.
Je pense que la zone de saisie devrait s’illuminer en rouge pour indiquer ce qui manque.
D’ailleurs, je viens d’avoir un deuxième utilisateur qui a échoué à créer un compte à cause de ce problème…
