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.
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
- 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.
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
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.
I will comment on two important aspects.
Usability : Form 1 is superior because :
- Clearly defined labels for action points.
- Clear differentiation between different consoles
- 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
- Form 1 is old fashioned but very usable
- Form 2 partially follows Material Design Principles and hence looks latest or trendy
- 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
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.