Formatting a Login Screen

Question

I am designing a login page for my school's network. I'd like to display the logo of our school next to the login form.

I've created two prototypes:

---

In the first design, the image+form is horizontally centered. However, some of my coworkers were concerned that it seemed off-center, overall, because the login form itself was not in the center of the page.

So in the second prototype, the login form is centered, with the logo pushed to the top-left. I'm concerned here that the logo looks misaligned and is too small.

As far as usability and design go, is either preferred? What would you recommend?

I'm also open to any other UX suggestions.

Answer 1

Usability dictates that there should be nothing barring (or slowing) the user down from performing the action you want them to take. In this case, signing up. The 2nd option is the better of the two because it places the sign up form front-and-center, right where users need to see it. The icon is inherent (this is a school website, after all), so keep it out of the way (though visible) and make the sign up form the highlight of the page, with nothing else.

Anything else just adds cognitive distance from your desired goal.

Answer 2

I have no reliable evidence that my version is better, but speaking from my experience (10+ years) and regarding common usability rules, I suggest to make something like it showed below:

• remove unnecessary texts
• make the logo smaller and center
• make the button bigger

Answer 3

I'm more on board with @IgorGubaidulin's answer if it was my site, but working with what you have, I would just simply move the logo inside and be done with it:

Option 1

---

Option 2

---