5

I have two date fields next to each other on a form in my app.

I am not using labels for any of the fields. Rather I have put a help text inside each of them. When the user taps on a field, native keyboard opens and once he enters the first character the help text disappears.

My issue is that while most of the other fields are easily distinguishable (Like full name, country, address etc.), the two date fields, once filled up, looks too similar as they stand for start date and end date.

Please suggest a way to distinguish these two fields after it is populated. I can't put a label outside the field because it will look like the odd ones out.

  • Is there a reason you do not want labels outside the actual fields? Do you happen to have a screenshot of how this currently looks? – Monomeeth Apr 21 '16 at 8:02
  • If none of the fields have labels, then the user completing the form will be able to differentiate the date fields by the fact one is later than the other, hence one must be the end date, the other being the start date. – Monomeeth Apr 21 '16 at 10:39
  • Pop your hints out as a label or tip when the user enters the field. – plainclothes Aug 19 '16 at 17:54
  • What @plainclothes said...For accessibility sake, you should keep the labels visible. You can still use inline-placeholder text, but animate it to a smaller size and out of the way once text has been added. See: Google Material material.google.com/components/… – Quantastical Aug 19 '16 at 19:38
1

I suppose my comment could be an answer ...

Labels in fields can work

Despite widespread hatred from people like NN/g, labels inside empty input fields can work well in complex forms. They can clear up clutter and lessen the anxiety users sometimes feel when confronted with a blank form with more than a handful of fields.

Things to look out for

But there are a few critical considerations to keep in mind when designing and evaluating this solution.

  • Make sure the meaning of the form is clear when all fields are populated and the placeholder labels are gone.
  • Design the placeholder label type in such a way that users can tell at a glance that the field still needs to be populated.
  • And, in regards to your question, make sure they know what they're doing once in the field.

Material Design’s solution

In this example from the Material Design spec (thanks for the link @Quantastical) you can see how they've solved these problems relatively well.

Material Design input fields

Here's what's going on in this solution:

  • Labels are positioned as placeholders when no text has been input.
  • Upon focusing the field, the label animates above the input and is reduced in size.
  • Once populated, the label now remains above and smaller for context when reviewing the accuracy of the form.
0

Based on @Monomeeth comment:

Leave the user enter the dates. The earlier date will be "start" and the latter the "end".

If the user enters a start date that's after the end date, switch the two dates.

I have also a couple of suggestions: I strongly advise to put labels to mark the fields as a blind UI can be frustrating for the user. Also, you should make the help text disappear as soon as the user taps on the field.

  • I personally think that help text should just be populated through native placeholders on the input fields. – Bryce Snyder Aug 19 '16 at 17:41

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.