TAB at login styling

ux
#1

Some of our users complained about the behavior of the TAB key when logging in.
According to their perspective, after entering username and hitting the TAB key, the cursor should jump to the password field and not to the Skip password link.

image
image546×507 18.7 KB

Our forum is frequented mainly by developers who are used to the TAB key for login. And I know that in the case of Discourse, they could hit the TAB key two times to reach the password field…

But I wonder if the present behavior follows a particular design or it’s just a side effect of some change.
Have you received any similar comments?

5 Likes
Login dialog breaks general UX concepts and password managers
#2

I think the tab order is OK here, it’s the natural order of interactive elements in the modal… if I relied exclusively on the keyboard for navigation it could be frustrating to access that link at all if the tab order was arbitrary.

Accessibility specialists recommend avoiding changing the taborder of elements on a page unless it’s absolutely necessary. Using the tabindex attribute - TPGi

1 Like
#3

I see… Well, then the question is if login link option is in the recommended position or if it would be better to have it lower in the modal. Maybe below Password field?
Don’t get me wrong, I think login link option is interesting, it just seems to breaks a bit the almost universal use case of accessing Password field with two TABs.

2 Likes
#4

I agree with the OP: When I use a password manager, the typical “API” between the password manager and the login form is (1) paste username, (2) TAB, (3) paste password, (4) ENTER.

With the intervening “Skip” link (which surprisingly appears only after I - rather, my password manager - start typing my username), this sequence is broken.

Yes, most password managers allow to change the default sequence, but this requires a manual change to an otherwise mostly universally accepted “API”. That’s a nuisave to the knowledgeable and a no-go for the novices and will results in less usage of password managers, which will ultimately reduce the overall security of using Discourse. (I am talking as a Fairphone forum user.)

From a UX perspective I see no reason why the “Skip” link must be placed into this particular position. It is a feature which is probably used rarely, when the password was forgotten. (I don’t know whether you have statistics pointing otherwise, though.)

So I would strongly advocate to keep the previous design.

Danke & Grüße von
nobi

3 Likes
#5

I agree, it was quite annoying that I had to reconfigure my password manager for every Discourse forum I use.

@awesomerobot Could we consider moving the link below the password field?

5 Likes
#6

@awesomerobot what do you think we should do here?

image

  1. We can move that “skip password” hint somewhere else?
  2. We can fiddle with tab orders and have “skip the password” only tab after password
  3. We can move to a “google” like multi phase login, where the first screen only has the username, next screen has the password and the button
  4. We can do nothing.

I agree it is somewhat surprising now for people that have established muscle memory.

2 Likes
Login dialog breaks general UX concepts and password managers
#7

I think we’ve got it in the right place at the right time for most people, but I guess considering most people aren’t using password managers and keyboard nav we can take it out of the tab order to circumvent this specific complaint?

1 Like
#9

I would say fiddle vs remove, tab order can be

Username
Password
Login
Skip password
Forgot password
Create new account

1 Like
#11

This new tab ordering for the log in modal is now live on Meta, and will be available the next time you update Discourse

1 Like