[UX] Simplify various login pages so that they look nice.

[klonos]

Moving this part of the discussion out of #3309, in order to not derail the recent momentum and direction of that issue.

The most recent PR in that issue provided an option to suppress the layout (regions other than the main content region), which resulted to this:

After some feedback, a border was added around the login form:

I proposed to use 0.25rem solid #bbbbbc for the border in the login page, which is the same as the horizontal line used in the top-border of the footer in Basis (where Drop the dragon is sitting):

...I tried to find any other borders used in blocks etc. in Basis that we could mimic, but couldn't find anything else.

If I was to suggest further styling for the login pages in Basis, then it would be to consider wrapping the h1 site name in a div, and styling it similarly to the header in Basis:

...we could add the same background pattern as the one used in the hero block:

...or make it plain black/white if people think it's "too much":

In general, I am looking for more consistency with the Basis theme.

In order to be as backwards-compatible as possible, we can offer a flip switch in the UI, to allow the legacy-styled login pages to be used on existing sites, as contrib and custom themes are adapted to accommodate for the new design/templates. This is a screenshot of what was in the PR sandbox at the time of writing vs. what I am proposing:

The wording in labels and help texts needs further thought/improvement, however the current "Use tabs" and "Hide regions" are too techie and don't sound like a new feature. They also do not explicitly convey what you get before/after.

Avocate: @docwilmot

[klonos]

We should do some research on what is considered common UX practice, and consider a11y as well.

When it comes to popularity of the style of login pages, here's what some of the most commonly-used CMSes provide OOTB:

• Wordpress:
  
• Joomla:
  
• Typo 3:
  
• Magento:
  
• Craft CMS:
  
• Grav CMS (Admin plugin):
  

[klonos]

Started doing some research, and the following resources came up at the time of writing this:

• https://www.interaction-design.org/literature/article/login-screen
• https://blog.hubspot.com/website/login-screen
• https://medium.com/@fiona.chiaraviglio/best-practices-for-login-sign-up-from-a-ux-perspective-e5d14b6ffce0
• https://arounda.agency/blog/10-examples-of-login-page-design-and-best-practices
• https://uxdworld.com/2021/12/22/12-best-practices-for-sign-up-and-login-page-design
• https://wpamelia.com/login-page-design
• https://www.invisionapp.com/inside-design/login-page-design
• https://www.uxforthemasses.com/login-page
• https://www.imaginarycloud.com/blog/12-powerful-tips-for-sign-up-and-login-page-design/
• https://app.uxcel.com/courses/common-patterns/loginsignup-best-practices-854

There's a few common suggestions in all of these articles:

• keep it simple
  we need to work on this 🔨 🔧
• keep it safe
  • we've got that in covered in core 👍🏼
  • we also offer customizable options for failed login attempts throttling (to minimize the impact of brute force attacks)
  • we provide sensible defaults that should work OOTB for most sites, so 0 configuration required.
• clear errors/messages
  • we've got that in covered in core 👍🏼
  • we can file separate issues to improve UX as we discover potential problems or room for improvement ...we have been doing that for a while, for many user-facing elements
• indications for things like caps lock key being pressed
  we should explore that 🤔
• separate login form vs. sign up form
  we've got that in covered in core 👍🏼
• ask for email instead of username
  • we've got that in core 👍🏼
  • we provide option for both by default, but can be limited to only email 👍🏼
• provide social login options
  • sounds like something that people expect nowadays, but doesn't feel like something that should be in core
  • we've got some contrib projects that provide that - do they work? ...how popular are they?
  • we can consider promoting one such contrib project via the project browser or something (the goal being that people should be able to add that functionality quickly and with ease)
  • expose that as documentation or a blog article perhaps?
• remember returning visitors ("remember me" checkbox)
  • we should explore that 🤔
  • we should port any contrib that offers that functionality:
    • https://www.drupal.org/project/remember_me
    • https://www.drupal.org/project/persistent_login

[izmeez]

@klonos Thanks for sharing your research. While all the examples Wordpress, Joomla, Typo, Craft, Grav follow the same design template they do not appeal to me. They seem to be more a "plug" for the CMS itself not the site. My preference is for a login that integrates with the site. I think from an end user perspective a login that integrates with the site is a nicer UX.

[klonos]

All the UX research I have done so far suggests to "keep things simple" and "limit elements to the task at hand". When a user either intentionally clicks the "login" link from the home page of a site, or is redirected to the login form after trying to access a restricted section of the site, then the only task at hand is to log in - everything else is a distraction, which is not good UX.

In the login form, the only links that should be available are:

• context-specific links (forgot password, register account etc.)
• link to home page (can be the site logo that serves that purpose)
• a "back" or "cancel" link, if the trigger to lead to the form was a redirect

The only UX pattern that I've seen (not explicitly being recommended - just mentioned) that has a login form integrated with the rest of the site is to provide the login form in a sidebar (what in Backdrop can be achieved with the "Login" block). But if a "login" link has been explicitly clicked, then the sole focus and best UX/workflow is to limit page elements to the login action.

The above pattern made me think that opening the login form in a modal dialog, which pushes the rest of the site to the background and focuses on the form itself, should also be an acceptable UX.

[klonos]

They seem to be more a "plug" for the CMS itself not the site.

I'm assuming that that's because the screenshots are from "vanilla" installations. In Backdrop, we should be replacing the CMS logo with the actual site logo and name. It should be all about providing context to the person trying to log in that they are logging into the site - not promoting Backdrop in any way here.

...but perhaps we can consider adding a subtle "powered by Backdrop" link. If we decide to do that, then we should be respecting whether the "Powered by Backdrop" block has been removed from the default layout. In that case, we shouldn't be rendering anything related to the CMS.

[bugfolder]

The above pattern made me think that opening the login form in a modal dialog, which pushes the rest of the site to the background and focuses on the form itself, should also be an acceptable UX.

On a complex site I manage, there's a lot of members-only stuff, where an anonymous user sees text on a page that says something like "to access this stuff, please login and then return to this page." The link sends them to the login page with a destination=... query. If there were an easy way to put up a login modal dialog over the current page, so that they never have to leave whatever page they're on, that would be a big UX improvement. (Probably out of scope for this particular issue, which assumes a dedicated login page, but since you brought up the model dialog, I'll mention it.)

[klonos]

I think that we already have an issue for that @bugfolder ...or something similar to that at least 👀

[klonos]

...there you go: #2207 🙂

[yorkshire-pudding]

remember returning visitors ("remember me" checkbox)
we should explore that 🤔

I think Backdrop already does that OOTB; as long as cookies remain it keeps the session alive for quite a while. In my experience, sites that offer that through a checkbox still require occasional logging in. If we want to keep simple, then why clutter with a checkbox that probably won't make any difference?

[klonos]

I think Backdrop already does that OOTB; ...

Yes, it does. And it is a security concern. The default should be to expose it as an option, with help text that says "Do not tick this if you are on a shared computer". (this feels like a separate issue though)

... If we want to keep simple, then why clutter with a checkbox that probably won't make any difference?

As I said, security concern. It can be optional (but denoted as recommended), and I would like to include it in #3624 as well.