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

Further improve login page

    XMLWordPrintable

Details

    • Navigation push 11

    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 with alt login methods.png
          Current with alt login methods.png
          3.66 MB
        6. Current without debug footer.png
          Current without debug footer.png
          3.69 MB
        7. Facebook login.pdf
          72 kB
        8. Firefox Sync login.png
          Firefox Sync login.png
          323 kB
        9. Footer removed and input fields taller.png
          Footer removed and input fields taller.png
          3.72 MB
        10. Github login.pdf
          18 kB
        11. Google login.png
          Google login.png
          1.12 MB
        12. Moodle (EN) Log in to the site.pdf
          380 kB
        13. Screen Shot 2021-10-28 at 15.50.10.png
          Screen Shot 2021-10-28 at 15.50.10.png
          147 kB
        14. Simplified but missing Help link and Private browsing instructions.png
          Simplified but missing Help link and Private browsing instructions.png
          3.73 MB
        15. Ubuntu One login.pdf
          40 kB
        16. With private browsing prompt.png
          With private browsing prompt.png
          3.63 MB
        17. Yahoo login.pdf
          26 kB

        Issue Links

          Activity

            People

              mathewmay Mathew May
              dobedobedoh Andrew Lyons
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              9 Start watching this issue

              Dates

                Created:
                Updated:

                Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 30 minutes
                  30m