Improvements login and sign-up pages UX/UI

[kimsible]

Description

After the suggestion of an about button instead of the publish button when user is not logged in, we found a way to fit better to the current PeerTube login scenario.

Along the discussion we've understood the real issue, which is the needs to inform the user about the instance and the ability to find another instance to publish.

So this PR introduces :

• A shared accordion of the about instance page between the sign-up and the login page ;
• A new login form UI ;
• An alert for the login page moved bellow the from for each case : opened / closed registrations with a link to the terms ;
• Adjustment of flex view between the instance informations accordion block and the form on sign-up and login pages ;
• Use expand() method intead of toggle() for links to the ngb-accordion and add a scrollTo especially for mobile screens.

Issues

Fix #3386

Has this been tested?

• 👍 yes, light tests as follows are enough

• Check if form and instance info block are well aligned with a max width and responsive on each screens (mobile, small, desktop, wide-desktop..) ;

• Check if the alert message bellow the form is right depending to the case : opened or closed registration ;

• Check if the «Terms» and «Code of Conduct» links in the alert login page and the consent info of the sign-up page will scroll to the accordion position and expand on each click the targeted text.

Screenshots

---

Demo

[rigelk]

The goal of keeping the upload button is to redirect people wondering if they can put their video on this server to the login page, where they will learn about the instances list and then learn about how to choose an instance based on their about page.

By removing the upload button you remove that user scenario, and newcomers to PeerTube won't know about other instances.

[kimsible]

The goal of keeping the upload button is to redirect people wondering if they can put their video on this server to the login page, where they will learn about the instances list and then learn about how to choose and instance based on their about page.
By removing the upload button you remove that user scenario, and newcomers to PeerTube won't know about other instances.

Ok @rigelk, but the problem is that the login page does not explain all these things, all the scenario you explain can be done quickly with the about page. Also it seems pretty obvious that we can't upload if the button is hidden.

Overall services like YouTube put user area especially on the header right, that's why I proposed to put it the about button there since we choose to let the user area in the left menu, which is unusual and as we can see hard to maintain popover and dropdown on a fixed scrollable menu here : #3344

But ok, it's not so bad to have this user area on the left menu until we do the best to not break all the common practices (like the bell for the notifications, dropdown on the avatar...).

The help button on the header right is intended to clarify where we are and what is PeerTube, which is, I think, very important though each instance may be different in term of moderation, public, politic....

[kimsible]

@rigelk I understand that you mean the about instance page content appears also on the signup page.

Maybe we could find a good compromise on improving the login and sign up page view instead ?

[LecygneNoir]

Hello,

I have just discovered that the "publish" button is indeed present when not loggued in. I was sure it appears only for user with an account 😅

I understand the scenario thought @rigelk , indeed it may help new users to understand they need an account.
However, the redirection is quite brutal, on most instance people will create an account directly without any more question, and as @kimsible stated, policies may be very different between instance.

I observe that on my instance where regularly people create account (I understand why now 😂 ), cannot upload because the quota is 0 by default, then leave, never reconnect, or for the most motivated contact me by other way (I even have seen people digging until using twitter or discord by guessing my pseudo to get in touch), despite all details about quota and contact information are in the About page :-/

I think indeed having the about button close to the publish button may help. Perhaps only for users without account?

Or a distinct message on the create account page telling "Before create account, do not forget to read the About page"?
(Edit: the current hidden menu at the right when creating account is perhaps easy to miss?)

Hope it helps!

Regards,

[rigelk]

By removing the upload button you remove that user scenario, and newcomers to PeerTube won't know about other instances.

Ok @rigelk, but the problem is that the login page does not explain all these things […]

I disagree, it does. An example login page:

[…] all the scenario you explain can be done quickly with the about page.

This is unpractical, as the About Page is very information-dense. But I'm open to suggestions.

Also it seems pretty obvious that we can't upload if the button is hidden.

You are missing the point: we want to show that even though the instance the user is on doesn't accept registration and thus video uploads, other servers can. Centralised services basically always accept new uploads ; we can't make such promises. Having the upload button is both answering a common user need and explaining how we expect them to spread across instances and choose them based on their about page :)

Maybe we could find a good compromise on improving the login and sign up page view instead ?

Definitely! But first we need to identify what is wrong. What @LecygneNoir is telling is a good example: the message is not apparent when registration is enabled on the instance, and yet we need part of the about page info there to understand how/why there might be better instances to choose.

[kimsible]

Definitely! But first we need to identify what is wrong. What @LecygneNoir is telling is a good example: the message is not apparent when registration is enabled on the instance, and yet we need part of the about page info there to understand how/why there might be better instances to choose.

We may display the about accordion page like for the signup page ?
I tried something locally, but it requires to extract all the accordion from the signup component to a shared component.

At the opposite, for singup it is justified to have all these informations but for login, I don't think, maybe just an info alert at the right (when registration is enabled) displaying the short description and the terms of the about page ?

EDIT : I would also see an image of sepia overridable to picture the login maybe we already have one that fits the action

[LecygneNoir]

If i do not miss anything, currently the "usual scenario for instance with registration enabled is

1. click "publish"
2. redirect to the login page
3. User has to guess itself that creating an account is necessary
4. Click on create account
5. Fill info, and eventually if interested, check accordion with information about instance

I think the problem this MR tries to address is in fact between 3. and 4.

Perhaps we may reuse the message used when the instance does not allow registration to display a text for the user in the login page, something like:

You need to create an account or login to publish!
This instance allows registration. However, be careful to check the instance rules before creating an account [with a link to the about, or an accordion with info for moderation? Terms? Both?].

If you want to create a account, click here [with a link directly to the create account page]. 
You may also search for another instance to match your exact needs! [link to joinpeertube]

With this use case, we reuse the existing layout (hope the code may be easier? 🙏 ), currently used only if the instance has no registration, and we make the user aware of the fact Peertube has multiple instance, with different topics, moderation rules, etc.

Also, user is correctly guided to the create account" page when he clicks on publish, so he knows that it's possible (and do not close the page once he has a login page displayed)

What do you think about?

Thanks ;-)

[kimsible]

Thanks @LecygneNoir ,

Based on your tips, I updated the PR description =)

That placement of the alert may be wrong but this ways it is common to the signup view. What do you think ?

[kimsible]

@rigelk
As you said :

This is unpractical, as the About Page is very information-dense. But I'm open to suggestions.

I now feel this proposition is too information-dense for the login page, maybe we could only display :

• Instance Title, Short description Code Of Conduct and Terms for the signup ;
• Instance Title, Short description and Terms for the login page.

[test2a]

"You need to be logged in to ( instance name) to publish a video"

Then a yay or a nay as you wrote.

"If you are looking for an account.....". IMO that doesn't tell the user they need an account to publish a video specifically.

What my sentence would do is dumb down the instruction. Then you can say as in your screenshots, either signup here or if not then check instances website.

Another suggestion. If there is an instance that has closed signups but needs prior approval, we could have a modified "contact administrators" form from about page where instance admins can define fields and boxes to ask the user. On that basis, they would be granted a login.

[kimsible]

@test2a

"You need to be logged in to ( instance name) to publish a video"

The problem is, we might login to only comment or create a playlist, not necessarily to publish a video, we may says so :

« You need to be logged in to ( instance name) to publish » (as we can publish a video, a comment or a playlist

Another suggestion. If there is an instance that has closed signups but needs prior approval, we could have a modified "contact administrators" form from about page where instance admins can define fields and boxes to ask the user. On that basis, they would be granted a login.

For the fields we can open an issue for that, it's a little bit too much work for one PR.
But we can display the contact button in case the instance has closed registrations ?

[test2a]

Hmm. I actually didnt think that. How about

"Logging into an account on (instance name) lets you publish a video, comment and do more. "

[kimsible]

Logging into an account on (instance name) lets you publish a video, comment and do more

Actually it depends on many things, some instances do not let new user to publish any video...

[kimsible]

The last commits adds :

• instance name and instance short description up to the accordion.
• accordion showing only the instance about panel we need to avoid intensive information.
• new alert login title with suggestions of @test2a.
• reverse blocks order of instance description and form on screen smaller than 768px.

Maybe the accordion block should be less bigger ?

[kimsible]

Here is a proposition of a better accordion UI, what do you think ?

[LecygneNoir]

Honestly, I think it's a very good addition!

When the instance allow subscription, it will help the user to see in a glance the terms and policy, and also make easier for admin to show prerequisites (such as, contact admin to have quota)

As clicking on "Term" in the message display the accordion, and do not redirect to the whole About page, it keeps the message clear, and the user may choose to create account directly if he is okay with that.

Of course if the user does not care, it'll change nothing, but at least he cannot argue that he is not informed :)

Also, moving the message below the login form avoid it to be too intrusive for user that already have account and just wants to login.

👍 for me :-)

[kimsible]

Thanks @LecygneNoir for sharing your remarks and feeling about the recent addition. =)

[rigelk]

@kimsible could you provide screenshots testing for large instance descriptions/terms?

[kimsible]

@kimsible could you provide screenshots testing for large instance descriptions/terms?

@rigelk what do you mean ? this is the short description, and the terms can be as long as you want thought it is inside the accordion.

[rigelk]

note: I’m not done reviewing the PR, but at least I got through the rebase

[kontrollanten]

Really impressive work, @kimsible ! I haven't tested the functionality, I just took some minutes to review the code to learn more about the PeerTube code base and hopefully reduce some burden for you. Thanks.

[AnonymousWebHacker]

@kimsible I think it's great how he edited his instance in the gif above.

@AnonymousWebHacker me ? My pronouns are actually she / her =).

For the animated screenshot I use Peek GIF Screen Recorder on linux MINT.

hahaha my apologies, I use a translator :)
I did not mean to make the gif, I was referring to its content. I would like to implement that in my PeerTube instance, because many users get confused when looking to register or they forgot the password

[rigelk]

@kimsible thanks for the PR and subsequent changes! Thanks @LecygneNoir and @kontrollanten for the reviews.

[kimsible]

Thanks @rigelk for taking the rebase back and thank you all @LecygneNoir , @kontrollanten , @test2a for the review =).

[test2a]

@kimsible hi... this pr just got updated on https://peertube2.cpy.re/
but keyboard navigation has taken a major hit. if i am on user box, i enter the username and i press tab, i expect to be switched to password which actually is the case with a 2.4 website like https://tube.ouahpiti.info
user> tab>password>tab>enter

on https://peertube2.cpy.re/ right now it is like
user>tab>tab>tab>tab>tab>password>tab>tab>enter

so 5 tab in first step and 2 after password.

sorry. i posted the comment on the wrong pr before. i have deleted that comment

[rigelk]

@test2a this is caused by my commit, making use of a new password component.