I was prototyping some inputs for a product I plan to develop and was wondering about the bad practice issue envolving the use of placeholders as labels. My question is: with the use of an icon altogether, can I achieve a better result with better affordance? Can a icon, along with a placeholder, replace the label in the context of a form? I also made two others labeled examples (first one and last one) hopping that you guys could help me to understand which one would be better, keeping in mind that I seek cleaness on my design (not willing to lose affordance for that, though). Thanks
This is not a widespread pattern because, what would happen when you have input fields with labels that don't have a clear icon associated with it?
Since you're working with a form for a product, you're going to encounter fields that are rather abstract. Fields like, how to address someone (sir/ma'm), initials, first and last name and so on. These are very difficult to visualise in an icon, because they have no tangible real-life equivalent.
Having distinct labels is important, even if it makes the design 'less clean'. This is simply because users tend to look specifically for labels. They scan for them. Placeholders may appear to function the same, but many users will initially overlook them. It can be mistaken for pre-filled inputs and can be less noticable than a blank space. So, to be on the safe side, include proper labeling and avoid users having to do double takes to find what they're looking for.
Clean design is nice, but your main priority with product forms is conversion: completion rates
Your form needs to become low-entry, and if you desire complex information, you need to make it as accessible as possible. Completion rates are important for the business, the feel-good about the ease of use is important to your users.
Only ask what is required
Try to minimize the number of fields as much as possible. This makes your form less loaded, especially when you request a lot of information from your users.
Focus on adding scannability
If you want users to scan out a form fast, put your labels above each field. This layout is easier to scan as the eyes move straight down the page. However if you want your users to read carefully, put the labels to the left of the fields.
Group Related Information
You should group related information in logical blocks or sets. The flow from one set of questions to the next will better resemble a conversation. Grouping related fields together also helps users make sense of the information that they must fill in.
Labels organise and bring clarity to your form. This is why they're such a big help to users, even if from a designer perspective they may look a bit old-fashioned and limiting for your visual design.