I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
I watched the video and think that it's a nice visual improvement
I love the chunky shadow
everything's spaced nicely
it's simple and doesn't try to do anything outside its remit
From a UX point of view I see a few problems with the version on the site at time of writing, which is close to the one you're looking at as the "before" state:
there are no labels for the inputs
the placeholders aren't close to accessibility standards in terms of text/background contrast, and are difficult for me to see even with glasses.
the "--or--" divider is too low contast
the error states don't convey any information apart from that something is wrong
error state borders and messages are in a clashing colour
I have some comments on the version you mocked up:
The original expects an email address as the primary identifier, and yours asks for a username. In many systems these are the same thing, but in many other systems they're not. People can and do share email addresses ("thesmithfamily@example.com", "helpdesk@test.com").
This is confounded because you don't add any input labels. If my browser or an extension has pre-filled those fields and I'm not getting logged in, I don't know whether my password is wrong or if I've accidentally saved my email address instead of my username. The only way I can find out is to delete the text in both boxes, which is a potential pitfall. The "User" icon doesn't really make this any clearer.
You want a hover effect explicitly on the words, "click here". I'd steer clear of that, even to the point of avoiding the words in the entire sentence. "Click here" has no context for screen readers, for example.
Perhaps, "Forgot your password?" would be better? It has the added benefit of keeping the same pronoun as the sub-heading, which is "Sign in to your account". Mixing "my" and "your" in interfaces adds a level of confusion.
You add "Register" and "Back to home" buttons to the heading, which is nice, but this would probably require changing some routes. On the existing home page, what you have as "Register" is /accounts/signup, and is called "Get started". I think that part of a redesign would involve getting these things to be consistent, perhaps to something ultra-clear like "Create a new account" under /accounts/new. This isn't wholly part of a designer's job, but it's where talk between team-mates comes in :)
From the point of view of someone who would code this, I notice you do something very designer-y - you move things around by eye until you think they look good. That's because you've got an eye for it, and you know what whitespace looks pleasing, but it might not match up with the styles for the rest of the site. If you set "Login" as a form legend, or as a heading (say an h2, depending where this is in the flow), then the margins and padding should be consistent with those for an h2 in the rest of the site, otherwise styles will have to be tweaked on a per-component basis.
My goal is to make useful and helpful advice and content that will help others!
New content everyday, please leave feedback if there is something you want to see!
Woah, this is an awesome reply, I love it. Thanks so much for taking the time to do this. I did a lot of design about 5 years ago, and now getting slowly back into it, Thanks Ben I'll keep these things in mind for future content :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I watched the video and think that it's a nice visual improvement
From a UX point of view I see a few problems with the version on the site at time of writing, which is close to the one you're looking at as the "before" state:
I have some comments on the version you mocked up:
The original expects an email address as the primary identifier, and yours asks for a username. In many systems these are the same thing, but in many other systems they're not. People can and do share email addresses ("thesmithfamily@example.com", "helpdesk@test.com").
This is confounded because you don't add any input labels. If my browser or an extension has pre-filled those fields and I'm not getting logged in, I don't know whether my password is wrong or if I've accidentally saved my email address instead of my username. The only way I can find out is to delete the text in both boxes, which is a potential pitfall. The "User" icon doesn't really make this any clearer.
You want a hover effect explicitly on the words, "click here". I'd steer clear of that, even to the point of avoiding the words in the entire sentence. "Click here" has no context for screen readers, for example.
Perhaps, "Forgot your password?" would be better? It has the added benefit of keeping the same pronoun as the sub-heading, which is "Sign in to your account". Mixing "my" and "your" in interfaces adds a level of confusion.
You add "Register" and "Back to home" buttons to the heading, which is nice, but this would probably require changing some routes. On the existing home page, what you have as "Register" is
/accounts/signup
, and is called "Get started". I think that part of a redesign would involve getting these things to be consistent, perhaps to something ultra-clear like "Create a new account" under/accounts/new
. This isn't wholly part of a designer's job, but it's where talk between team-mates comes in :)From the point of view of someone who would code this, I notice you do something very designer-y - you move things around by eye until you think they look good. That's because you've got an eye for it, and you know what whitespace looks pleasing, but it might not match up with the styles for the rest of the site. If you set "Login" as a form legend, or as a heading (say an
h2
, depending where this is in the flow), then the margins and padding should be consistent with those for anh2
in the rest of the site, otherwise styles will have to be tweaked on a per-component basis.Woah, this is an awesome reply, I love it. Thanks so much for taking the time to do this. I did a lot of design about 5 years ago, and now getting slowly back into it, Thanks Ben I'll keep these things in mind for future content :)