Reposition buttons in "Verify Master Password" and "Log In" screens on mobile

Feature name:

Reposition buttons in “Verify Master Password” and “Log In” screens on mobile

Feature Description

Problem statement

The current design of these screens is confusing and makes it easy to click the wrong button. The design is as follows:

  • the primary button (Unlock or Log In) is located in the upper-right hand corner. This is not an intuitive place for a primary button and is difficult to reach.
  • the secondary button (Log Out or Get Your Master Password Hint) is a larger button immediately below the password input. This suggests a primary submit button. It is easier to reach and easy to click instinctively (even though it is usually not the intended action).

There is a combined thread here discussing this issue: Move Unlock & Log In Buttons from Action Bar to the Body in Android.

I have presented some mockups below with my recommendations.

Log In screen

Option 1 (my preferred approach)

  • Log In button takes the current place of Get Your Master Password Hint
  • Get Your Master Password Hint is moved to a More Options (three dots) menu in the upper right.

This keeps the screen tidy and directs the user towards the primary function.

Option 2

  • Add Log In button above Get Your Master Password Hint

Not preferred because two buttons clutter the screen and there is no clear primary button.

Unlock screen

Option 1 (my preferred approach)

  • Swap the current position of the buttons.

This keeps the screen tidy and directs the user towards the primary function.

Counter-argument: Log Out is not consistent with the “forward movement” implied by the button in the upper-right. If this was a concern then we could use a More Options (three dots) menu instead (as per Option 1 for the Log In screen).

Other options

  • Add an Unlock button above the Log Out button. This would look similar to Option 2 for the Log In screen. Again, I think this clutters the screen.
  • Use a “back arrow” button in the upper-left for Log Out. However, I don’t think a back arrow would clearly communicate the Log Out action in this context.

Clients / Repos Affected:

  • Mobile

Timeline to completion (estimate):

ETA: 2 weeks

@tgreer @kspearrin

1 Like

I appreciate your effort. I am not a programmer, so I am not really familiar with these kind of things
.Captudre
What about having a blue unlock button with the the open lock as shown above? This is from the desktop application.

1 Like

Hey @vachan, good suggestion. Here’s a mockup:

What do you think? The colour scheme might be a bit more suitable for a primary button.

2 Likes

Yeah, this actually looks good. Also, the color changes when the theme changes.
Nord, Dark and Light
1Capture Capture

1 Like

Hi @eliykat, I believe we would be good with this modification, here’s my feedback:

  • I like the lock icon on the Unlock button mentioned by @vachan, good stuff, let’s go with that
  • I like moving the LOT OUT button link to the top upper-right-hand corner (where Unlock is today)
  • I would prefer the 1 LOG IN button on the Login screen and moving the GET YOUR MASTER PASSWORD HINT button into a More Options menu (three dots) as you’ve specified as “Option 1”
    • This stays in-line with a top-down form approach for natural flow and line-of-sight based interactivity

Please feel free to proceed and thanks for the contribution!

2 Likes

I know that I am not the one who should ask this but …
Does the text have to be in all caps? In the desktop app, the text is in lower case.
Also, what about including these icons for ‘log in’ and ‘create account’?
Cappture
Thanks!

No, the text doesn’t have to be in all caps… Today it is not in all caps (at least on iOS), it may be on Android, which uses platform specific transforms. The underlying text stored in the resource strings is normal cased (Pascal Cased), not all caps, I believe Android has a built-in transform for those controls that changes them to UPPERCASE, which we would keep for now (let’s keep the change footprint as small and specific as possible).

Also, for now, let’s keep the iconography to a minimum on these buttons/actions.

2 Likes

OK, I understand. Thanks for the quick reply.

What about the use biometrics to unlock button

What about the use biometrics to unlock button

Do you have a mockup or something in mind? I’m not opposed to it, just not sure which icon would be appropriate there. (or are you referring to the placement of it?)

I am actually talking about both. Currently once biometrics is enabled,

  • Unlock button is located in the top right
  • Use Biometrics to Unlock is above the Log Out
    So the Use biometrics button should also match with the theme of the redesign unlock button? Thats why I mentioned this. Won’t the bio metric button look wierd without an icon?

I guess it will look ok without the icon. Plus, since biometrics include both facial recognition and fingerprint, I don’t know which icon will be suitable.

Yes, we should match location and theme, I’m sure someone would have more of an opinion for a solid suggestion on which icon to use for that, otherwise no icon would be fine.

2 Likes

Thanks, I’ll get to work on this and post a link to the pull request once submitted.

I’ll keep the Use Biometrics button in more or less the same location but I’ll update the theming as discussed.

1 Like

I have submitted a PR here.

As explained in the PR, I did not end up implementing the theming changes because (a) they were harder than anticipated and (b) I think they should be implemented consistently across the app rather than on an ad-hoc basis for these pages only.

I still think @vachan’s suggestions are good ones and the grey buttons could be improved, but I will leave it to someone with a better knowledge of UI/colour design and with more mobile development experience, who wants to take the time to make these changes across the entire app.

I also spent an inordinate amount of time just setting up my development environment for Xamarin.Forms and getting my iOS Simulator to work, so that didn’t help :sweat_smile:

1 Like

Awesome, thanks @eliykat, we’ll take a look at the PR soon, appreciate the work (and I know getting all of that setup initially can be a bit… involved :wink:)

2 Likes