Web page forms and date field best practice

I was prompted to write a quick blog post about entering dates on web forms after a painful experience on an insurance quote site at the weekend.  I needed to retrieve my quote by had to enter the reference number, my postcode and my date of birth.  I just couldn’t get the site to return my quote, it just kept saying it couldn’t be found. After phoning their helpline and spending 20 minutes listening to their music on hold they just said have are you putting the slash signs in? e.g. 10/08/1966 instead of 10081966.  There wasn’t a single clue on the page that that was required.

Dates on webpages which can be accessed from anywhere in the world are a problem due to the way dates are formatted differently around the world. Generally when displaying dates it’s best to avoid any confusion by spelling out the month e.g. 10th August 1966 instead of 10/8/1966 which could also be read by some as 8/10/1966.

When asking for a date of birth I prefer to separate the fields and make it clear to the user what is required as shown in the example below. Even if this page is accessed from a part of the world where the month is traditionally positioned at the start of the date the user won’t be confused about what they need to enter.

Best practice for date entry on web pages

Also notice that for Date of Birth we don’t display a date picker / calendar component. Using a date picker for and having to scroll back a number of years would be painful. The lesson is to seriously think about what the date is and why you are asking the user / customer to enter the date.  In this example you’ll notice that the year isn’t a drop down box.  Displaying a list of 80 or more dates isn’t a great user experience, it’s quicker to just key in four digits.

Entering dates in the future on web forms.

I love this website and the skill that has gone into making it really easy to use.  It’s for a UK hotel chain where people are booking rooms in advance. Note how the form is pre-populated with today’s date (March 17th 2014).  This is great from two perspectives. Lots of people leave booking their hotel rooms until the last minute incase their travel plans change so this means that a lot of the time you don’t actually need to enter a date at all.  Having the date pre-populated also acts as a visual guide to reenforce subconsciously with the customer how the date should be entered.  The date picker is also really well thought through. So many of the off the shelf date pickers are styled with quite a small font, this is big a bright and it’s obvious how to use it. The current date is nicely highlighted.  The developer has also taken the time to consider that you can only book a hotel room for future dates, so previous dates are greyed out.

Next time you need to ask a user for a date on a web form:

  1. Think through what the date really represents.
  2. What is a sensible default.
  3. Should it allow dates in the past and the future?
  4. If future dates then how far into the future? For example if you are asking someone to pick a delivery date why not just display the next 7 days and let them pick one of those dates from a drop down?
  5. Is the format of the date clear to an international audience and people from different backgrounds?
  6. Does a date picker make sense? I’d suggest it seldom makes sense on a date of birth for adults but may be if your developing something to record the date of birth for infants it does make sense.

Bonus tip: I’d always encourage good semantic markup but I have noticed that the default rendering on HTML date fields can yield pickers which are not optimised to the context of the date you want the user to enter. Think carefully before you leave this to chance.  For now I’d always code 3 input fields like you’ve seen in the above examples.


A template for meeting minutes & agenda for recurring meetings

IT professionals often have to run meetings and this will involve issuing an agenda and recording actions that have been agreed in a set of minutes.  For one of meetings the agenda and the minutes will usually be separate documents.  For recurring meetings, for example a monthly help desk review or product review meeting it is more efficient to combine the agenda and the minutes into one simple document.

Integrated meeting minutes and agenda template.

Integrated meeting minutes and agenda template.

This is what I consider to be a best practice integrated agenda / minutes template for most small to medium sized enterprises (SMEs).  You can download a word version of this integrated minutes & agenda template by clicking here.

The key points in the template are:

1. The header should include your company branding / product logo etc.  To the right of this include the description and date of the meeting.

2. If your company operates over multiple sites then you should record the location of the meeting.

3. Include a list of the people who attended the previous meeting and those who sent their apologies for not attending.

4. The agenda should be broken down into the major sections / topics for your meeting.  Under these headings you should then include the individual discussion points and any follow-up actions (tasks/ work) that were agreed.  Every action must be assigned to a person and there should be a target delivery date.  Don’t fall into the trap of having everyone at the meeting agree that something is a good idea but not agreeing who should do it and when.  If that happens then it’s valid to record it as an action to be carried forward to the next meeting for further discussion.

5. The last items on the agenda should always be AOB (Any other business).  This is where people can raise things that were not on the agenda.

6. Under the minutes it’s then good to at the end of the meeting agree the date and time of the next meeting.  When the minutes are sent you should include at the bottom the confirmed date and time of the next meeting and details of where it will be held.

7. I also recommend including a note that people should table any items for the agenda to the chair no later than 14 days (for example) before the meeting so that the final minutes / agenda can be sent out for the next meeting.

If you are responsible for producing the minutes / agenda it is essential that you retain copies of these for at least a couple of years.  Depending on the project and size of your company it’s not unusual for auditors to want to see that projects and meetings are being run properly.  Your minutes may need to be produced as evidence that a good process has been followed.  Just because your auditors didn’t ask to see any meeting minutes last year don’t assume they won’t in the future – be prepared.

Good luck with this, it’s worked well for me over a number of years.  If you have any questions or suggestions for improving this template do please get in touch by leaving a comment below.  I’d love to get some good suggestions so that I can create an even better version of this document template to share with you.