0

People usually told me that they prefer the second one. But I just want to know why from design / UX theories viewpoint, because for me, the first one is not inferior to the second one, at least in terms of clarity.

enter image description here

3

The second one is better for the following reasons:

  • It follows Material Design guidelines, so users are used to how it works and its element's affordances
  • Second form elements' are clearly defined. For example, in your first form, your dropdown (control) has exactly the same treatment as icons
  • It's more consistent and elements are aligned on the same axis which doesn't happen with the last name field
  • It has clear labels, which the first option hasn't (inline labels and placeholders with no labels are a no-no in UX)
  • It has way more contrast, making it more accesible. First option has very low contrast
  • Phone no has a lot of friction, it's unclear why do you have a negative word there.

Conclusion

There are many ways to go with forms, and I'm not a big fan of Material Design input fields myself (I use boxes no matter what MD guidelines says), but if the choice is between these two, then the second one is the one you should go with, without question

  • 1
    Thanks for the input and the link for the inline label and placeholders! – Chen Li Yong Aug 16 '17 at 7:17
1

The problem faced in first design is in terms of usability. Since you have not used labels instead you have an inline label that makes difficult to fill in data.

So second design is a preferable choice because in second design there is clear distinction between each field.

Try to avoid inline labels in forms.

  • Thanks. I never thought that using inline labels can be damaging. I just thought that it's clean and cool. – Chen Li Yong Aug 16 '17 at 7:19
1

I will comment on two important aspects.

Usability : Form 1 is superior because :

  1. Clearly defined labels for action points.
  2. Clear differentiation between different consoles
  3. There is more clarity between phone addition option and droplist to select contact type as compared to the Form 2

Aesthetics : This is where confusion starts

  1. Form 1 is old fashioned but very usable
  2. Form 2 partially follows Material Design Principles and hence looks latest or trendy
  3. Form 2, as you observe has input label for Phone and below that there is a mobile selection button and same goes with add more phone. There is no clear distinction between actionable controls like phone type selection, adding another phone and a non-actionable label Phone

Conclusion :

You need to realign and work on Gestalts(You can google it) to improve the appearance and let your design communicate what exactly you want user to do. There is however no single solution to a problem. You need to chose what best suits your product and audience.

You can check how iOS and Android contact apps as to how screens can be designed. Do write to me for any confusion.

  • Oh wow, the Gestalt principle is interesting! Thanks for mentioning it! :D – Chen Li Yong Aug 16 '17 at 7:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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