5

My site has a lot of fields that accept a certain format of input only. Do I need to show users that this is the case, or can I rely on them inferring it?

For example, is it better to do this:

              First Name:  [_____]
               Last Name:  [_____]
   Mobile Phone (Number):  [_____]
Date of Birth (DD/MM/YY):  [_____]
   Time of Birth (hh:mm):  [_____]

or this:

              First Name:  [_____]
               Last Name:  [_____]
            Mobile Phone:  [_____]
           Date of Birth:  [_____]
           Time of Birth:  [_____]

or even a combination or the two?

I can understand date fields being confusing, but we already have a global setting to swap between mm/dd or dd/mm so the users should be in the environment they prefer already, and in addition, focusing on the text field opens up a date picker which allows for selection of the date from a calendar.

  • Is date of birth recent? I am inferring this from the inclusion of time of birth. – Eric Stoltz Nov 9 '15 at 18:24
  • No, I was just using an example layout. We have various fields for dates, times, numbers and miscellaneous others. – A. Sim Nov 9 '15 at 21:46
9

Users should be made aware of any data formatting constraints before they start typing.

The best way to solve this is by visually and programatically incorporating these constraints into forms directly so:

  1. Users can 'see' the constraints so that they make correct entries in the first place
  2. System makes it nearly impossible for users to enter invalid data.

You can accomplish this through use of select dropdown, checkbox/radio, size constraints, HTML5 input types, placeholder data, with equivalent javascript fallback for older browers.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Thanks for the response! We have an onClick date selector that pops up in the text box for the date field, so keeping that all in one field is preferable. I prefer the simplicity of that as well - three fields, with separate selectors (and additional validation against 31-02 for instance), is too complex. The phone field has to validate against multiple countries as well, meaning different standards. – A. Sim Nov 9 '15 at 21:51
  • 1
    @A.Sim No problem. As long as the date selector allows you select Month and Year without having to browse dates, I think it's ok. Consolidating 3 fields into 1 field does reduce visual clutter, but it doesn't necessarily make it simpler for users to enter data. The sketch I created is a battle-tested and very standard way of entering DOB. Convention is your friend. :) – Jung Lee Nov 9 '15 at 23:14
0

To your question, option 2 is better.

and Adding to what Jung Lee mentioned a few things.

-You can also use calendar control for date fields instead of using 3 separate text boxes.

-For mobile you can customize on which keyboard to appear when entering. so for numeric only fields you could prompt to open only the number keypad.

  • Why is option 2 better? – Uwe Keim Nov 9 '15 at 9:54
0

Had I space, and I would do it like:

              First Name: [_____]
               Last Name: [_____]
            Mobile Phone: [_____] (Number)
           Date of Birth: [_____] (DD/MM/YY)
           Time of Birth: [_____] (hh:mm)
  • 1
    I think the question is primarily asking whether or not hints about input formats are necessary not how they should be implemented. – Andre Dickson Oct 5 '16 at 14:52
  • First, I could not write multi-line formatted text on a comment. Second my answer suggests a balanced proposal that go towards "combination of the two" as questioned by the asker. It eliminates the excessive text overload at the left and maintains the format input suggestion there. Another of my suggestions would be to eliminate the format indicators from main interface and have a tooltip that would only appear when user was typing in the affected field. – sergiol Oct 5 '16 at 15:33

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.