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.
Consiglio di sovrascrivere il CSS sulla tua istanza per renderlo più chiaro — come detto sopra, molti sistemi operativi sopprimono fortemente le barre di scorrimento, quindi credo che mi citerò da solo..
Risolvere il problema è complicato perché la maggior parte dei dispositivi touch nasconde le barre di scorrimento per impostazione predefinita, il nostro modulo di iscrizione è contenuto in una finestra modale, la lunghezza del modulo può variare se vengono aggiunti campi supplementari e l’altezza dei browser cambia.
A parte l’opzione molto radicale di spostare il modulo di iscrizione da una finestra modale a una pagina intera… penso che ci siano un paio di soluzioni possibili e che una (o entrambe) potrebbero migliorare la situazione:
Nei browser moderni possiamo forzare la visualizzazione delle barre di scorrimento tramite CSS. Questo significa che saranno sempre visibili sui dispositivi touch (rendendo lo scorrimento più evidente). Tuttavia, ciò implica che stiamo sovrascrivendo gli stili predefiniti delle barre di scorrimento del sistema operativo nella finestra modale di iscrizione, quindi potrebbero apparire fuori luogo.
Possiamo modificare il comportamento del pulsante “Crea nuovo account”. Invece di disabilitarlo finché il modulo non è completato, possiamo permettere agli utenti di cliccarlo e poi scorrere automaticamente fino al primo campo di input incompleto.
Forzare la visualizzazione delle barre di scorrimento dovrebbe essere semplice da provare per prima cosa. @codinghorror/@sam, cosa ne pensate?
Mi piace molto questa soluzione, @vinothkannans, puoi occupartene?
Abbiamo avuto lo stesso problema nel composer per anni e renderlo sempre cliccabile ha risolto un gran numero di problemi; l’animazione rossa rimbalzante creava davvero molti intoppi nel composer.
Sembra tutto a posto, penso che ora dovrebbe essere molto più evidente!
Ho apportato un’ulteriore modifica che ha rimosso il margine e utilizza “inserisci” invece di “fornisci” nei messaggi obbligatori (nei messaggi di convalida usiamo “inserisci”, quindi l’ho copiato).
Grazie. Anche se non ho le competenze (o il coraggio) per applicare questa patch. Spero che questa funzionalità appaia nei prossimi aggiornamenti il prima possibile.
Credo che il campo di input dovrebbe essere evidenziato in rosso per indicare cosa manca.
A proposito, ho appena avuto un secondo utente che non è riuscito a creare un account a causa di questo problema…
