3

I'm currently designing the UX for a webapp. The webapp can be used both by users who are logged in, and by anonymous (not-logged-in) users.

When a user is anonymous, my team lead wants a small login form displayed on the top right of every page; he specifically did not want a separate login page, because he wants users to have the convenience of being able to login from wherever, without having to navigate somewhere in order to do so. This seems like a sensible request to me. However, I don't know how to make a login form look... good... with so little screen space.

If I display the form horizontally, then there's no good place to put the "forgot credentials" button. mockup of site with password displayed to the right of username

I considered stacking the username and password fields, but everything looks very squished. mockup of site with username and password fields stacked vertically

Putting the "forgot credentials" button next to the login button feels... unwieldy. mockup of site with "forgot credentials" button to the right of the login button

Maybe it could just be an icon? But what icon would I use to represent forgetting your credentials? mockup of site with "forgot credentials" icon

I'm not sure whether I like any of these designs or not. How might you guys handle this sort of design?

Improve this question

2 Answers 2

Reset to default
3

Out of the options you have provided, I would suggest that the first option is the best. Keeping the "forgot username" action as a simple link helps to reduce clutter in the header bar.

With that said, I think the whole form adds clutter that will add needless distractions for the user throughout the site. So my suggestion would be that you only show the "login form" ad and when the user needs to use it. Initially the page can simply notify the user they are not logged in, and then provide a link for them to log in if the want it.

Something like this:

enter image description here

Then when the user clicks on the "Log In" link, it will show the login form:

enter image description here

This still achieves your requirement of not forcing the user to another page, while also keeping the design simple and not distracting focus from the main content of the page.

As a side note, it would be correct to use "log in" for the action, rather than "login". See this for more information

Improve this answer
1
  • 1
    I like how you made the link flush with the right side of the log in button. I think me making it flush with the right side of the password input is what was bugging me, but I didn't realize. Thanks!
    – Mathew Alden
    Commented Nov 17, 2020 at 19:33
0

I would consider using a modal. You would have a exclusively section for login and it is not a separate page.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.