Me: Fix the current flow for Sign Out when using 2FA

[Tug]

Steps to reproduce

1. Have 2FA enabled on your account
2. Starting at URL: http://calypso.localhost:3000/
3. You want to log out
4. You click on your avatar on the top right and are redirected to http://calypso.localhost:3000/me
5. You are asked for a verification code before you can do anything else, including signing out

What I expected

Being able to log out from an account without knowing the verification code for it.

What happened instead

I was asked for a verification code I may not have (if it is not my account).

Screenshot

[lancewillett]

Might be a duplicate of #202

[aduth]

Might be a duplicate of #202

#202 was technically first, but yes, I agree with assessment this is duplicate.

[lancewillett]

Duplicate of means that one is first, yes. :)

[lancewillett]

Closing in favor of older issue.

[aduth]

Err, sorry, I was referring to #4272, which is newer than this issue and should have been closed, keeping this one open. #202 I feel is a separate issue.

[lancewillett]

See also #960 — similar UX problem for changing a password.

[lancewillett]

One quick improvement would be to make the Not you? Sign out link stand out more:

[Tug]

Agreed, I didn't notice it was there actually!

[aduth]

Possibly better tracked as a separate issue and certainly worrying: following the flow described in the original comment, another consequence of the stale token is that navigating to the Me section causes the /me/settings/profile-links endpoint to be requested infinitely.

[Tug]

So this is design issue IMO.
I think we could show a small card about the current user profile with the gravatar image and the name of the account. Then you would notice if it's not yours and find quickly the "Not you?" attached to this card.

[lancewillett]

@Tug Love that idea, much more visually rich and communicates which user is logged in.

[ryanboren]

I always overlook sign out links that are prefixed with "Not you?" type text. I've stared at this screen looking for and missing the sign out link on several occasions. I am certain to overlook sign out links embedded in text. Amazon is the classic case of this.

When I’m on the desktop computer at the office and finish ordering books on Amazon.com for an article I’m working on, for instance, I can never find a simple log-out button. Instead, I scroll down a column marked “Hello, Natasha — Your Account” and then click on an option that reads: “Not Natasha? Sign Out.” But the notion that in order to sign off, I have to deny that I am me always gives me pause.

“It’s really clever — they want you to do something that is counterintuitive and maybe a little freaky to you,” Mr. Nodder said. “There’s an element of ‘Maybe I just won’t sign out this time.’”

http://www.nytimes.com/2016/05/15/technology/personaltech/when-websites-wont-take-no-for-an-answer.html?_r=0

I overlook sign out. Once I do finally notice it, I have to deny my identity.

[ryanboren]

Also, on iOS, tapping Notifications doesn't dismiss the 2FA dialog, contributing to a trapped feeling.

[ryanboren]

I suggest "Sign out" standing alone. This dialog is an intrusion in flow that usually features a prominent Sign out button.

[folletto]

The quick fix would be just to move "Sign Out" in the dialog below, since all the Dialog actions are meant to stay below:

(btw apparently there's a bug there on mobile where the button falls below)

---

However... that screen shouldn't be a Dialog. Dialogs should be avoided as much as possible, and in this scenario it doesn't make sense design-wise (even I'm sure there was a technical reason to make it that way):

In this design concept the "dialog" isn't really a dialog (we could even design it to look entirely different) but a "lock" on the specific area of the screen that is impacted in practice by the lock. The sidebar is still functional (navigating isn't locked) and this allows the access to any section that doesn't have the lock... or to see again the log if even other sections are actually locked.

[davewhitley]

I remember the discussion of the design of this modal, but I can't find it. I quicker solution would be to make "Send SMS Code" a link instead of a button (and moved up), and make "Sign Out" a button at the bottom.

[kriskarkoski]

I don't have a stale 2fa to grab a screenshot, but this still exists as in the original screenshot with the Sign Out link inline and easy to overlook. +1 to @drw158 quick fix suggestion above since I don't think a revamp of this design is on anyone's roadmap near-term.

[mcsf]

Closed per #15095