I attached mockups of a sign in form with their validation "versions". I would really appreciate some comments about that, especially about the one(s) on the bottom, because I think it violates a few rules (I've read that it's better to make a one-column form and validation is not aligned), but it seems to me like it's more breathing and not so cluttered. Those are the two that I will probably show to the client, but I still hesitate about the bottom proposition (but on the other hand I feel like it's something there.).

To be honest, I've been struggling with this form for a while, I've read a lot of guidelines, rules and good practices and it all seemed obvious, but when I sat to do it it caused me some trouble as I am still a beginner.

None of those elements there I can delete, they're all needed, but at the same time forms should be clean and simple. I look at all of these examples and designs of others and I still have a hard time applying it to my design.

Is even the top design good?

Sorry for the chaotic question.

enter image description here

3 Answers 3


It may be interesting in some cases to place two inputs side by side but in your second example juxtaposed inputs doesn't seem to be related.

About validation texts, I guess it's more interesting to put them under the input than on the right. So you can have the same layout if there are other pages elsewhere on this project without enough space to the right of the inputs (in pop-in or in mobile version for example).

  • I wanted to do so, even more so with the labels than the validation text, however I felt like this form is going to be really, really long and really really thin, which in no way looks good to me. I've been trying to squeeze it into the browser (which is actually the biggest window that I would have) and still I couldn't do it right, so those are the results. There would not be a mobile version of this I think, so that's not a problem. Commented Feb 23, 2018 at 11:14
  • I think it's a mistake to favor the aesthetics to the ux. We must first think about UX. You can then find solutions for UI. For example by putting an illustration or photo on the right of the form to fill the width. Commented Feb 23, 2018 at 11:53

I think the most important UX rule here to comply is "You are not the user". The form guidelines are born as a result of many researches and applications. Here is one.

Non-standard solution may feel comfortable for you, but you are not designing for you. Go with the standard solution.

Personally, the top row feels more intuitive and less cluttered, as I have seen countless of those.


I prefer the top one but to sign up I still have to input at least 7 things. I don't understand why I have to choose a nickname, a user type, date of birth.

You just need email and password (show password - nice!) the rest can be done post sign up as part of onboarding

  • Ok, thanks for the insight. But why is it better to give the user 2 fields to fill and then put the burden on them to fill all the rest instead of just putting it all out there? And tbh, I don't think I know how this onboarding would look like. Instead of taking the user for a quick trip around the app, I would ask them for some more info? Tester and developer are going to have different account once logged in, so I guess this is something to be established as soon as possible. Could you elaborate on your vision of onboarding though? Maybe it's something I can consider. Commented Feb 23, 2018 at 11:17
  • sign up forms are a massive drop out point so you want to minimise the hassle as much as you can. There are a bunch on links you can use eg alistapart.com/article/signupforms -- good start point To add: a good experience lets the user try the service without signing up and I've always advocated an approach where user information is registered passively
    – colmcq
    Commented Feb 23, 2018 at 12:14
  • ok, but could you tell me a little more about that onboarding you mentiones? As far as I know onboarding helps users get around the application upon the first arrival giving them some context-based advice and facilitating first steps. So I am having a hard time imagining what you meant when you wrote about completing personal information as a part of onboarding. Is it just a post-sign-up screen with additional fields and then to the account and that's it? Could you help me out here? Perhaps provide some reading on the subject? I'd really appreciate it! Commented Feb 26, 2018 at 11:47
  • you could start here uxplanet.org/4-best-practices-for-user-onboarding-a1f1524c7a40 Basically, the first couple screens are completion of user profile information
    – colmcq
    Commented Feb 26, 2018 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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