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).
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).
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.
I appreciate your effort. I am not a programmer, so I am not really familiar with these kind of things
.
What about having a blue unlock button with the the open lock as shown above? This is from the desktop application.
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!
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’?
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.
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.
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
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 )
)