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.
Das gleiche Problem hier. Erforderliche benutzerdefinierte Felder sind nicht sichtbar, und die Benutzer verstehen nicht, warum sie nicht auf „Neues Konto erstellen
Ich empfehle, das CSS in deiner Instanz anzupassen, um es klarer zu gestalten – wie oben bereits erwähnt, unterdrücken viele Betriebssysteme die Scrollbalken stark, daher werde ich mich wohl selbst zitieren..
Die Lösung ist schwierig, da die meisten Touch-Geräte Scrollbalken standardmäßig ausblenden, unser Anmeldeformular in einem Modal liegt, die Länge des Formulars variieren kann, wenn zusätzliche Felder hinzugefügt werden, und die Höhe der Browserfenster unterschiedlich ist.
Abgesehen von der sehr großen Änderung, das Anmeldeformular von einem Modal auf eine Vollbildseite zu verlegen, sehe ich ein paar mögliche Lösungen, wobei eine (oder beide) die Situation wahrscheinlich verbessern könnten:
In modernen Browsern können wir mit CSS das Erscheinen von Scrollbalken erzwingen. Das bedeutet, dass sie auf Touch-Geräten immer sichtbar sind (das Scrollen ist also offensichtlicher). Das bedeutet aber auch, dass wir die Standard-Scrollbalken-Stile des Betriebssystems im Anmelde-Modal überschreiben, was möglicherweise nicht gut aussieht.
Wir können das Verhalten des Buttons „Neues Konto erstellen
Diese Lösung gefällt mir am besten. @vinothkannans, kannst du das übernehmen?
Wir hatten jahrelang das gleiche Problem im Composer, und als wir ihn dauerhaft anklickbar machten, verschwanden viele Probleme. Die hüpfende rote Animation hat den Composer nämlich stark ausgebremst.
Das sieht gut aus, ich denke, es ist jetzt viel offensichtlicher!
Ich habe eine weitere Änderung vorgenommen, die einen Rand entfernt und in den erforderlichen Meldungen „enter“ statt „supply“ verwendet (wir verwenden „enter“ in den Validierungsmeldungen, daher habe ich das übernommen).
Danke. Obwohl ich nicht die Fähigkeiten (oder den Mut) habe, diesen Patch anzuwenden. Ich hoffe, dass diese Funktion so schnell wie möglich in zukünftigen Updates erscheint.
Ich bin der Meinung, dass das Eingabefeld rot hervorgehoben werden sollte, um anzuzeigen, was fehlt.
Übrigens: Gerade hat ein zweiter Benutzer aufgrund dieses Problems keine Konten erstellen können…
