how to make very small login form look good
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.
I'm not sure whether I like any of these designs or not. How might you guys handle this sort of design?
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:
Then when the user clicks on the "Log In" link, it will show the login form:
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