2006-08-02

Date/time input usability

If you have ever designed web input controls for picking a(ny) date and time, you might have been tempted to pick Blogger's approach to it, setting up a sizable array of select boxes, like this:


:


It works. And, as anyone who ever used them to pick a date and time different from the prepopulated one knows, it is painful to use it, even if you don't resort to the click mayhem of doing it keyboard unaidedly. That's six times two clicks plus two or three click+drags to scroll among the options of the larger select boxes plus all the precision mouse manouvering involved with hitting the very small target zones for each and every one of those clicks. Try it with a laptop mouse pad if you find it too easy with a mouse and your many years worth of computing experience. It's just not fun any more. Add the joys of converting 24 hour time to AM/PM if your brain isn't wired to twelve hour time for another optional tinge of discomfort.

What I'm trying to say is that it is not a very friendly approach to achieving the wanted functionality, though it admittedly makes it difficult (but not impossible!) to enter illegal date/time combinations. So, how would one improve upon the situation without sacrificing that criterion? After all, replacing these select boxes with a pre-populated text input reading a default date, say on the format "YYYY-MM-DD hh:mm" (annotated as such), might do away with the click mayhem involved in picking a date and time combination of your own, but it instead becomes easy to make a mistake that would require another iteration of editing, in case that date somehow turned out not quite up to specs. Especially as that format is quite likely not how the user would intuitively phrase a timestamp in writing. Another server roundtrip (for a non-ajax typical implementation) for an "uhm, try again with the date, please?" also does not equal usage bliss.

But the text entry is a great place to start, and for some use cases much better than would a popup calendar date picker be, for instance.

Aside from the specifics of this (short of perfect) visual packaging, try on this Blogger free-form date field user script (direct install link) and head over to your Blogger post editor, where you will now encounter a variant, which leaves the fields to show which date has been picked and lets you type dates by hand in a text field next to the dropdowns, updating the rest of the fields with the data it successfully understood.

While mostly crafted for my needs of half a year ago, when I was importing a lot of blog posts from an external source that listed dates formatted in a textual style I'd want to just paste and be done with, I took some time to make it a bit more useful, understanding lots of partial and complete date formats, in English, French and Swedish (I don't do too well with other languages). It is rather easy to extend it to others, as long as there is no overlap in the names or short forms of months and the relative dates "today" and "yesterday" among the languages listed.

Note how it clues you in to which parts of the date "took" by tinting the appropriate fields greenish. As the Blogger date fields only suggests a few recent years in the year dropdown, I spiced it up to liberally add whichever year you type in yourself, too, after a slight delay, in case it was a typo just as quickly fixed as it was typed. I don't recall the exact details around why I found that safeguard useful any more, but left it in place, in case there was some good thinking behind it. There often is, but I didn't seem to clue in a good enough documentation trail. Anyway, a sample of date and time formats it can handle to play with, to get you started:
1972-04-23
18:05
12/25/2005 (read commentary below if you want D/M/Y dates!)
2006-08-02 14:56
6 Aug, 1996, 04:28
samedi 28 février 2004 19:55 (irrelevant junk around ignored)
Yesterday, 12:31
aujourd'hui
igår

Enjoy!

7 comments:

  1. this is odd question, but what set its apart from phydeaux3 time warp since you said it was that and more?

    just to make it chrystal clear.. :P

    The user interface bits mentioned in the article above.

    ReplyDelete
  2. love the concept as I personally find the blogger date editor one of the worst bits of the blogger UI.

    Having played around with it a bit, here's some thoughts & feedback:

    1. Would be even more useful if it worked when editing a post as well as when creating a new post. Most of the time I need to change a post date is when I've started creating a post, left it in draft then finished it off some time earlier when the date/time is irrelevant

    2. Personally I think it would be more intuitive if the date edit box before the blogger date/time selectors

    3. Like the green tint but I found it very hard to see on my laptop screen so perhaps it ought to a bit darker ?

    4. Some dates & times I tried didn't work as I expected them to do such as:

    a. Typing 9:43 sets the time as expected but then if I type a following space (e.g. to type a date next), the time change gets cleared and the day number is set to 3

    b. Entering 5/4 (for 5th of April) isn't recognised until I type 5/4/06 and then it's parsed in US date format (as 4th May) instead of using my GB lang setting (yes I know this is picky but day/month is the intuitive way I type dates!)

    c. Then if having typed 5/4/06 and type a following space the date change is zapped out and only the day is set to 6 (this is similar to a above but for dates typed not times)

    d. If I type 30 may 2:30 then when I type the 2 the year changes to 2002. As I then type the :30 the time is set correctly but the year is still left set to 2002. Perhaps this would be better if the fields were not changed until a trailing space were typed?

    Don't take this the wrong way, I do love the concept and I can see it's a script I will be using on my on own blog editing

    ReplyDelete
  3. 1. Ow; forgot to upload the last version with the added line on top. Updated now, though; a reinstall is all it takes to get mentioned fixes.

    2. Possibly. The script is rather easy to tweak; if you want it like that, I suggest changing postYear.nextSibling to form.elements.namedItem( 'postHour' ) on one of the final lines.

    3. The first line has a changedColor = '#F0FFF0' you might like to set to '#C0FFC0', '#80FF80' or something.

    4. This is where mass user testing and/or easier configurability would be good, tossing it at crowds of people to see what and how they would have it behave. (In a way, my failing to do so myself defeats a few of the points made in the post.) Anyway, the variable "tests" set up early in the script lists rules to try in order of preference until one matches.

    a) & c) Ow. The sixth rule was way overly trigger-happy. Also fixed. Thanks.

    b) Unfortunately (to the best of my knowledge) a script can't read your locale settings, so it's pretty much configure manually or use one single worldwide standard (ISO Y-M-D comes to mind :-). I opted for the M/D/Y madness to please the large fraction of americans passing by despite also being aware of britons' preferences of using D/M/Y. Anyway, change the tests to list Day/Month/Year instead of Month/Day/Year, and you'll be fine.

    d) Ah, I think this was the reason I added the year parsing delay, though it ought to go for all years, be fixed the way you suggest, or otherwise. Not sure I'll address that until I find some solution I'm happy about, though.

    ReplyDelete
  4. Fine analysis. Another point is how I can bounce my posts around in sequence by changing the dates and times of a post. But if I move a post to a different month, it gets a new post URL.

    I had an art blog, an online gallery of my dorky digital pixel massacres, and I spent hours juggling the order of their presentation, and got quite good at quickly changing dates and times of posts to effect the monstrous moving around of said objects.

    For forensic purposes, this should not be allowed. More and more, blogs are turning up in court, to testify about the murderer. Blogs are leaving the blogosphere and testifying that so and so posted such and such and mentioned that the brother in law had it in for him, and this post was published the day he was killed and only five minutes prior to the bloody stabbing.

    This is real, no joke.

    So this changing the time and date of posts must be forbidden by some Forensic Blog Special Interest Group or Regime.

    Thank you for submitting your lengthy comment, Steven. Unfortunately, we cannot publish such drivel here at this establishment. Kindly take your abravise grating remarks somewhere else we don't appreciate them here.

    --site security administrator

    ReplyDelete
  5. That's what Blogger's logs are for; if anyone should put blogs to forensic use, they would not take anything as circumstantial as user modifiable data without checking whether it was first modified. (Besides, with Blogger, each post has a post id integer that states to ten nanosecond precision when the post was created -- not posted -- and post times shown are just whatever the author want them to show as.)

    ReplyDelete
  6. I converted to Blogger beta today, and the second thing I noticed was that the blogger timestamp filed has changed to a plain ol text field and I was happy happy happy as I change the times on all posts.

    The FIRST thing that I noticed is that the blogger beta upgrade BROKE my Greasemonkey extension to tag all most posts to delicious. After amild heart attack, I am out searching the web hoping that someone else has already seen this and is modifying the extension because I can't!

    ReplyDelete
  7. Eventually there will probably show up some version of the tagging helper, in one form or another, for Blogger beta, but so far I don't think there is one. (Haven't made the switch myself yet.)

    ReplyDelete

Limited HTML (such as <b>, <i>, <a>) is supported. (All comments are moderated by me amd rel=nofollow gets added to links -- to deter and weed out monetized spam.)

I would prefer not to have to do this as much as you do. Comments straying too far off the post topic often lost due to attention dilution.

Note: Only a member of this blog may post a comment.