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.
El mismo problema aquí. Los campos personalizados obligatorios no son visibles y los usuarios no entienden por qué no pueden hacer clic en Crear nueva cuenta:
Recomiendo sobrescribir el CSS en tu instancia para hacerlo más claro: como se mencionó anteriormente, muchos sistemas operativos suprimen fuertemente las barras de desplazamiento, así que supongo que simplemente me citaré a mí mismo..
Resolver esto es complicado porque la mayoría de los dispositivos táctiles ocultan las barras de desplazamiento de forma predeterminada, nuestro formulario de registro está en un modal, la longitud del formulario puede variar si se agregan campos adicionales y las alturas de los navegadores también varían.
Más allá del cambio muy grande de mover el formulario de registro a una página completa en lugar de un modal… creo que hay un par de soluciones posibles y una (o ambas) probablemente podrían mejorar las cosas:
En los navegadores modernos, podemos forzar la aparición de la barra de desplazamiento con CSS. Esto significa que siempre será visible en dispositivos táctiles (por lo que el desplazamiento será más evidente). Pero esto también significa que estamos sobrescribiendo los estilos predeterminados de la barra de desplazamiento del sistema operativo en el modal de registro, por lo que podría verse fuera de lugar.
Podemos cambiar el comportamiento del botón “Crear nueva cuenta”. En lugar de deshabilitarlo hasta que el formulario esté completo, podemos permitir que los usuarios hagan clic en él y luego desplazarnos al primer campo de entrada incompleto.
Forzar la aparición de la barra de desplazamiento debería ser sencillo de probar primero. @codinghorror/@sam, ¿tienen alguna opinión al respecto?
Me encanta esta solución, @vinothkannans, ¿puedes encargarte?
Tuvimos el mismo problema en el compositor durante años y cambiarlo para que siempre fuera clicable eliminó una gran cantidad de problemas; la animación rebotante en rojo realmente atascaba las cosas en el compositor.
Esto se ve bien, creo que ahora debería ser mucho más obvio.
Agregué un cambio adicional que eliminó un margen y usa “ingrese” en lugar de “proporcione” en los mensajes requeridos (usamos “ingrese” en los mensajes de validación, así que lo copié).
Gracias. Aunque no tengo las habilidades (ni el valor) para aplicar este parche. Espero que esta función aparezca en las próximas actualizaciones lo antes posible.
Creo que el cuadro de texto de entrada debería resaltarse en rojo para indicar qué falta.
Por cierto, acabo de tener un segundo usuario que no pudo crear una cuenta debido a este problema…
