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.
Recomendo sobrescrever o CSS na sua instância para torná-lo mais claro — como dito acima, muitos sistemas operacionais suprimem fortemente as barras de rolagem, então acho que vou apenas me citar..
Resolver isso é complicado porque a maioria dos dispositivos touch esconde as barras de rolagem por padrão, nosso formulário de cadastro está em um modal, o comprimento do formulário pode variar se campos adicionais forem adicionados e as alturas dos navegadores variam.
Fora a mudança extra-grande de mover o formulário de cadastro para uma página completa em vez de um modal… acho que há algumas soluções possíveis e uma (ou ambas) provavelmente poderiam melhorar as coisas:
Em navegadores modernos, podemos forçar a aparência da barra de rolagem com CSS. Isso significa que ela sempre estará visível em dispositivos touch (então a rolagem fica mais óbvia). Mas isso também significa que estamos substituindo os estilos padrão da barra de rolagem do sistema operacional no modal de cadastro, então pode parecer fora de lugar.
Podemos alterar o comportamento do botão “Criar Nova Conta”. Em vez de desativá-lo até que o formulário esteja completo, podemos permitir que as pessoas cliquem nele e, em seguida, rolar a tela até a primeira entrada incompleta.
Forçar a aparência da barra de rolagem deve ser simples de testar primeiro, @codinghorror/@sam, vocês têm alguma opinião sobre isso?
Gosto muito dessa solução, @vinothkannans, você pode assumir isso?
Tivemos o mesmo problema no compositor por anos, e mudar para torná-lo sempre clicável eliminou uma grande quantidade de problemas; a animação vermelha e saltitante realmente prendia as coisas no compositor.
Isso parece bom, acho que agora deve ficar muito mais óbvio!
Adicionei uma alteração adicional que removeu uma margem e usa “digite” em vez de “forneça” nas mensagens obrigatórias (usamos “digite” nas mensagens de validação, então copiei isso).
Obrigado. Embora eu não tenha as habilidades (ou coragem) para aplicar esse patch. Espero que esse recurso apareça nas próximas atualizações o mais rápido possível.
Acredito que a caixa de texto de entrada deve ficar destacada em vermelho para indicar o que está faltando.
Aliás, acabei de ter um segundo usuário falhar ao criar uma conta devido a esse problema…
