Input fields
Best experience
Really simple and at some extent difficult question. How to treat input fields best? Well, you can come across quite a lot of different options while using different products.
Let’s just very quickly review common examples:
Ex. 1 — The input field itself is blank and you have text explaining what to do on top of the input field. To make it work, you have to be super careful about what text you put there. It has to be super obvious. But this is not a good experience. You simply don’t get what you’re expected to input into the input field. You also don’t know what format you have to input your email in. People over 40, wouldn’t get it at all. Believe me — it’s been tested lots of times.
Ex.2 —No text above, only input field itself with some hint inside. You tap/click on the input field and then the hint disappears (normally). Absolutely disaster UX, because people simply forget what they’re expected to do. They can click/tap there and then they are distracted by someone/something and they need to unselect it to remember what they need to input after they’re back. Never do this!
Ex.3 — A hint above the input field and a hint inside the input field. It’s really a good experience, simply because you can see everything there. You can click/tap and start typing. You know the format, you know exactly what you’re expected to do. This just works! It’s not minimalistic but please Guys, think of your users first.
Let’s check some examples from the famous brands:
Facebook — Ex.1 I personally think it’s not the best solution. Because you’re missing the format for the informaition.
Medium — Ex. 3. Nice and elegant. Most importantly — works.
Twitter — Ex. 2. The only exception — twitter leaves the hint when selected. So it’s kinda recovery. But they rely on the existing customers mostly, and they keep experimenting with sign in experience.
Apple — Ex.3. Well kinda works but to me, it would have been better to write the hints above each input field separately.
