Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72928

Further improve login page

    XMLWordPrintable

Details

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72928-rebase
    • Hide

      Setup:

      1. Enable oauth2 authentication
      2. Navigate to Server > OAuth 2 services
      3. Create a new dummy Google service (Dummy values are fine this test is not testing the service)
      4. Create a new custom service
        1. Set the "This service will be used" field to Login page only
        2. Set the "Name displayed on the login page" to "Some super long login method that will highlight issues with the login page width foo bar testing content andy"
        3. Set the rest of the required fields (Dummy values are fine this test is not testing the service)

      Test:

      1. Ensure you are logged out
      2. Navigate to the login page
      3. Confirm there is only the minimal footer (? with the popup)
      4. Confirm That you do not see "Cookies must be enabled in your browser"
      5. Confirm You see "Lost password?" instead of "Forgotten your username or password?"
      6. Confirm You do not see the "Remember password" checkbox
      7. Confirm That the text fields now use the form-control-lg class
      8. Confirm That the language selector is now at the bottom of the form with a divider to the right
      9. Click the "Cookies notice"
      10. Confirm that a modal appears
        1. Confirm that the title is "Cookies must be enabled in your browser"
        2. Confirm that the body text has the following: "Two cookies are used on this site:"
      11. Confirm that you see "Log in using your account on:"
        1. Confirm that each login method appears on its own line within a border
        2. Confirm that the login method "Some super long login method that will highlight issues with the login page width foo bar testing content andy" appears on two lines but does not interfere with other login methods
      12. Log in to the site
      13. Log out
      14. Navigate to the login page
      15. Confirm Your username is auto-populated
      Show
      Setup: Enable oauth2 authentication Navigate to Server > OAuth 2 services Create a new dummy Google service (Dummy values are fine this test is not testing the service) Create a new custom service Set the "This service will be used" field to Login page only Set the "Name displayed on the login page" to "Some super long login method that will highlight issues with the login page width foo bar testing content andy" Set the rest of the required fields (Dummy values are fine this test is not testing the service) Test: Ensure you are logged out Navigate to the login page Confirm there is only the minimal footer (? with the popup) Confirm That you do not see "Cookies must be enabled in your browser" Confirm You see "Lost password?" instead of "Forgotten your username or password?" Confirm You do not see the "Remember password" checkbox Confirm That the text fields now use the form-control-lg class Confirm That the language selector is now at the bottom of the form with a divider to the right Click the "Cookies notice" Confirm that a modal appears Confirm that the title is "Cookies must be enabled in your browser" Confirm that the body text has the following: "Two cookies are used on this site:" Confirm that you see "Log in using your account on:" Confirm that each login method appears on its own line within a border Confirm that the login method "Some super long login method that will highlight issues with the login page width foo bar testing content andy" appears on two lines but does not interfere with other login methods Log in to the site Log out Navigate to the login page Confirm Your username is auto-populated
    • 3
    • Navigation push 11, Navigation push 13

    Description

      I'm going to suggest that we further simplify the design of the login page as there are a number of UI features which belong in the previous century, and the design is still slightly too cluttered.

      In short, I'm going to suggest that we should consider some more drastic changes:

      1. Remove the Footer entirely - especially when it is empty, but also consider hiding the performance info (collapse it perhaps) when stats are shown
      2. Make the login region wider. For some reason it appears narrower now than it does on the screenshots from when Angelia tested MDL-69371 - considerably narrower.
      3. Remove the Cookies warning - we should only show information about this when a login fails because cookies are not enabled. It's a standard feature of browsers and very very few people disable cookies. Logins are too prevalent these days to consider disabling them entirely.
      4. Reword the "Forgotten your username or password?" link to simply "Forgot password?"
      5. Remove the "Remember username" checkbox entirely. This should be the default. I quite like what Chrome have done whereby they show information on how to open a private browsing window if you do not want your login to be remembered. This is a much safer and more user-friendly approach.
      6. Make the username and password fields taller. At the moment they're really short but they are the main focus of this page. We should make the area that users are expected to interact with more prominent. Equally we can increase the padding around them to make the area clearer.
      7. Move the Language selection to beneath the username and password fields. The Username field should be the first field in the tab order
      8. The "Username / email" placeholder text should read "Username or email" rather than having a slash (not very user friendly)
      9. I'd like to suggest that we move the Cookie warning, to a new page which opens in a popup. It can also have the information on starting a private browsing session, and any other help we need to show in future (i.e. password recovery for admin, etc.).

      Comparing a number of other big login screens, none of them has the "Remember" or Cookie warnings.

      Mockups

      Current:

      Minimum width:

      Simplified by removing Cookies prompt, and replacing "Remember username" with instructions for private browsing

      Attachments

        1. 2021-10-28_17-22.png
          2021-10-28_17-22.png
          72 kB
        2. 2021-10-28_17-25.png
          2021-10-28_17-25.png
          15 kB
        3. Current.png
          Current.png
          3.00 MB
        4. Current but wider (380px min).png
          Current but wider (380px min).png
          3.66 MB
        5. Current login.png
          Current login.png
          791 kB
        6. Current with alt login methods.png
          Current with alt login methods.png
          3.66 MB
        7. Current without debug footer.png
          Current without debug footer.png
          3.69 MB
        8. Facebook login.pdf
          72 kB
        9. Firefox Sync login.png
          Firefox Sync login.png
          323 kB
        10. Footer removed and input fields taller.png
          Footer removed and input fields taller.png
          3.72 MB
        11. Github login.pdf
          18 kB
        12. Google login.png
          Google login.png
          1.12 MB
        13. MDL-72928 testing.webm
          2.15 MB
        14. Moodle (EN) Log in to the site.pdf
          380 kB
        15. Proposed login.png
          Proposed login.png
          803 kB
        16. Proposed login with modal.png
          Proposed login with modal.png
          687 kB
        17. Screen Shot 2021-10-28 at 15.50.10.png
          Screen Shot 2021-10-28 at 15.50.10.png
          147 kB
        18. scrollbar-caused-by-language-menu.png
          scrollbar-caused-by-language-menu.png
          69 kB
        19. Simplified but missing Help link and Private browsing instructions.png
          Simplified but missing Help link and Private browsing instructions.png
          3.73 MB
        20. Ubuntu One login.pdf
          40 kB
        21. With private browsing prompt.png
          With private browsing prompt.png
          3.63 MB
        22. Yahoo login.pdf
          26 kB

        Issue Links

          Activity

            People

              mathewmay Mathew May
              dobedobedoh Andrew Lyons
              Andrew Lyons Andrew Lyons
              Jun Pataleta Jun Pataleta
              Angelia Dela Cruz Angelia Dela Cruz
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              15 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                19/Apr/22

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 days, 1 hour
                  4d 1h