joomla
[J5.3] - Improve UX - Rearrange Admin Login screen
Summary of Changes
This PR rearranges the Joomla login screen for improved clarity and user experience. Previously, the login button was positioned below the alternate login options, which caused confusion for users. This change groups the "Username" and "Password" fields together, followed by the login button, and clearly separates them from the alternate login options.
The new layout includes headlines such as "Login with username and password" and an "OR" separator before the alternate login methods. This approach is consistent with login patterns observed in other services and aligns with established usability practices, ensuring users have a clear and intuitive path when logging in.
Sorry the screenshots are German but "Oder" means or and you see the Login options grouped:
Reasons for Change Enhanced Usability: By grouping the username and password fields with the login button, users can more easily identify and complete the standard login process without distraction.
Clarity: The addition of a separator and relevant headlines distinguishes the primary login method from the alternate options, reducing confusion and improving the visual hierarchy.
Consistency with Modern Standards: Following login patterns used by popular services provides users with a familiar experience, which increases ease of use and reduces cognitive load.
Testing Instructions
Login with Username and Password: Navigate to the admin login screen. Enter valid credentials (username and password) and click the login button. Verify that login is successful and that the grouping of the fields appears correctly.
Alternative Login Methods: Enable Passkey Login if not Enabled On the login screen, click on the available alternate login option. Ensure the visual separation and headlines make it clear these options are alternatives to the standard login.
Disable Alternate Logins Ensure the Alternative Login "Group" (Headline "OR" ) is not shown.
Responsive and Accessibility Testing: Test the new layout on various screen sizes (mobile, tablet, desktop) to ensure it remains clear and functional. Use a screen reader and keyboard navigation to verify that the new layout is accessible and navigable for users with disabilities.
Language Options The Language Selection is now at the top, ensure it's still visible
Actual result BEFORE applying this Pull Request
Expected result AFTER applying this Pull Request
Link to documentations
Please select:
-
[X] Documentation link for docs.joomla.org:
-
Maybe new Screenshots?
-
[ ] No documentation changes for docs.joomla.org needed
-
[ ] Pull Request link for manual.joomla.org:
-
[X] No documentation changes for manual.joomla.org needed
@coolcat-creations I've allowed myself to fix the markdown formatting of the description so the headings for actual and expected result are shown as expected in our PR template, and the check boxes for documentation are right.
@coolcat-creations I've allowed myself to fix the markdown formatting of the description so the headings for actual and expected result are shown as expected in our PR template, and the check boxes for documentation are right.
Thank you for your help, Richard!
I have tested this item :red_circle: unsuccessfully on 52e7bff4a3131fb26e10528287649f18586dbcb8
Didn't see anything about passwordless login on the admin login screen.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44228.
System plugin for passwordless login was enabled.
BTW: I couldn't see the language switcher with the prebuild package because the language pack for i.e. German does not yet exist.
That's odd - for me it works. Did you test then with English? Are you sure the "Passkey" Plugin is enabled?
I used the prebuilt package. And I have verified that the plugin for the Passkey (~ passwordless) Login was enabled.
@dautrich And you have once edited your user and registered your passkey like described here? https://docs.joomla.org/WebAuthn_Passwordless_Login
Regarding other language than English for 5.3 so you have multi language: You can download a language pack for 5.1 (or 5.2 soon) and install it with the normal extensions installer.
@richard67 That hasn't been the problem. I'm on localhost and use Laragon. The issue was that I wasn't under https://. Now I've convinced Laragon to allow https:// and I can see the login:
@dautrich Yes, passkey requires https. Maybe you ran into this issue #44208 but haven't seen the error message because debug not enabled and/or error reporting not on maximum?
@richard67 Next issue: Tried to download a German language pack from joomla.org, but only see a white screen with the word "Error".
@dautrich Download from https://downloads.joomla.org/language-packs/translations-joomla5/downloads/joomla5-german/5-1-4-1 works.
@richard67 Next issue: Tried to download a German language pack from joomla.org, but only see a white screen with the word "Error".
@dautrich Works for me, https://downloads.joomla.org/language-packs/translations-joomla5/downloads/joomla5-german/5-1-4-1 .
Re-Arranging the screen is a great idea. But do we relly need the Text "login with your username and password"? What else could the user expect on a login screen?
Things are improving after I installed a German language pack and set German as the default language for frontend, backend, and content:
Two remarks:
- There is an unnecessary language string (marked in red).
- I agree with @chmst that the text is redundant (marked in green).
For 1.: There is a class "visually-hidden" missing in the legend of the fieldset. If inserted, it looks like this:
Using keyboard navigation (tab key), the language selection is barely unreachable. By default, focus is on the username field, and you have to tab through all available elements (including the browser header), before you finally reach the language selector. Would be better to give this field the initial focus.
Using keyboard navigation (tab key), the language selection is barely unreachable. By default, focus is on the username field, and you have to tab through all available elements (including the browser header), before you finally reach the language selector. Would be better to give this field the initial focus.
thats no different to the current behaviour
Re-Arranging the screen is a great idea. But do we relly need the Text "login with your username and password"? What else could the user expect on a login screen?
The first option is username and password and the other option has the headline: Or I think if we say be, we have to say A ? What do you think ?
About the language and the focus - I wonder if we should do a second PR where the language actually changes by changing this dropdown? Because it does not and if you don't understand "Sign in with a pass key" in Chinese the dropdown is not really helpful.
The first option is username and password and the other option has the headline: Or I think if we say be, we have to say A ? What do you think ?
I'm with @chmst : Why should we need "Log in with your username and password", when immediately below there is a form asking for username and password? We could safely omit this line (which eliminates the task to translate the sentence as well).
We would end up like this:
About the language and the focus - I wonder if we should do a second PR where the language actually changes by changing this dropdown? Because it does not and if you don't understand "Sign in with a pass key" in Chinese the dropdown is not really helpful.
Maybe you're right. If you want to avoid a second PR, you might consider using something like a horizontal ruler instead of the "OR".
Why ? My screenshots are all German and show exactly this just a HR is not enough
The first option is username and password and the other option has the headline: Or I think if we say be, we have to say A ? What do you think ?
Correct. But as a user I don't see that these text fragments form one sentence. Suppose you are blind then the screenreander reads the first part of the sentence .. the labels, announces the input field .. then says "or" ...
What, if we start with a complete sentence: "Login with username and password or with a passkey" - then the two clearly separated blocks?
At the moment I have no good testing environment - can someone listen to the screenreader?
Why ? My screenshots are all German and show exactly this just a HR is not enough
My screenshot above is German as well, but it shows "OR", which obviously is not correct in German.
Why ? My screenshots are all German and show exactly this just a HR is not enough
My screenshot above is German as well, but it shows "OR", which obviously is not correct in German.
@dautrich A new language string added by this PR to the English file can't be available in the German translation yet :-) https://github.com/joomla/joomla-cms/pull/44228/files#diff-749c19a3bc27785f12905b9c65fe7600eedf704f0bb0093fbf838b266713fa29R11
@coolcat-creations Have you checked if there isn't already a global language string for "OR" (or "Or" or "or") which we could use here instead of creating a new string?
@coolcat-creations Have you checked if there isn't already a global language string for "OR" (or "Or" or "or") which we could use here instead of creating a new string?
There isnt and its not a good idea to add one for the reasons stated above by @chmst
@coolcat-creations Have you checked if there isn't already a global language string for "OR" (or "Or" or "or") which we could use here instead of creating a new string?
There isnt and its not a good idea to add one for the reasons stated above by @chmst
I thought maybe someone wants to override it with something else than or, it's not possible when I take the general "OR" Otherwise all OR will be replaced with "or use one of these methods" 😅