Inadvertently designing a horrible time and date picker

Perhaps inspired by the tongue-in-cheek competition to design the worst volume control, an internal tool here at Microsoft managed to create the worst time and date picker:

January 2017

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Time 04:29

Okay, the date-picking part isn't so bad (aside from the fact that everything is varying shades of gray), but using sliders to select the time?

Comments (50)
  1. pc says:

    I have to say that “Shades of Gray” didn’t link to where I was expecting.

  2. ZLB says:

    Raymond, you can’t call your co-worker a tool. Even if they create eyesores like that…

    1. Ben Voigt says:

      Raymond routinely tags posts as “social skills of a thermonuclear device”, and you’re trying to shame him over a mildly offensive possible intentional misinterpretation?

      1. I took it as a joke on ZLB’s part.

        1. ZLB says:

          It was a joke. It amused me that ‘Which tool checked this in?!’ works either way!

          1. So did I.

            But next time, consider inserting a “;)” or “😉” at the end to make sure the message gets through. (You’d be surprise how often the person who yells “No, it’s Becky!” isn’t the original poster.)

  3. Dave says:

    I’m forced to use a Production Environment Change tool, from a well-known company, that has an almost identical dialog. It’s awful. And then represents the date as xx/yy/zz, which of course is not localised to those of us in the UK.
    But great HTML mockup, as usual :)

  4. laonianren says:

    This year’s nominations in the category of Worst Original Date Picker are… every date picker ever.

    Seriously, just let me type a date.

    1. Scott H. says:

      As someone who needed to add a date/time picker in a prod environment, just letting people type dates in usually can’t work. I’m either stuck trying to interpret all sorts of date entries, or fielding tickets because “the date entry doesn’t work” because I’m enforcing a format that the user doesn’t want to put in (or is different from their native, usual date format).

      Some kind of date-time picker works way better universally even if it annoys the few who can manage to type in a valid date. Getting a *good* one is of course the hard part…

    2. zboot says:

      So, you type a date. . .how does the tool know unambiguously what date you typed? Humans are even worse date picker tools.

      1. Mike S says:

        If you let users type in a date, you should also specify the format (either as a watermark in the control, or as next next to it). That’s what we do.

      2. Dan F says:

        Format it to something unambiguous on blur is my favourite way of doing this. Let them type in any old guff, have a crack at parsing it, display it as D MMM YYYY in the field (or sound the air raid siren if what they’ve typed is unparseable). This subtly encourages them to type the format I want, but also allows them to enter literally anything that parses. Also massively reduces the damage caused by 01/02 being ambiguous – the user is shown 1 Feb (or 2 Jan, depending on locale settings) straight away.

    3. Ken Hagan says:

      “Seriously, just let me type a date”

      I hate being asked to type a date. The developer nearly always has the year, month and day in the wrong order and even when they provide “examples” to help, it’s usually something like 05/06/07. At least if I have a date-picker, I know that the developer understood this point.

      1. cheong00 says:

        As developer, I always want people to enter date as ISO format (i.e.: “yyyy-MM-dd”), but for some reason nearly all companies that I worked with uses a variant of “MM/dd/yy” or “dd/MM/yy” when importing Excel.

        That’s why we only accept import when the Excel originates from downloadable template we offer. (And that’s why we can’t have nice things)

        1. Mike S says:

          I hate 2 digit years. Oracle loves them, and when I worked with an Oracle DB, we ended up liberally using the convert function to make sure that the years made it into the database right.

    4. Steve says:

      The average user will, unfortunately, have all sorts of weird and wonderful ideas about what constitutes a valid date. A combination of a date picker and a decent validation routine on Submit is the absolute minimum defence against Date-Related Data Misery.

    5. Nick says:

      Date pickers are great for nearby dates (like next Monday or last Wednesday) but terrible for faraway dates (like dates of birth)

      1. Alex Cohn says:

        Note that when you pick the date of birth, the least relevant piece of information is whether it was Monday or Saturday, and you rarely need to worry about leap years. This justifies an entirely different UX approach, like this:

  5. The MAZZTer says:

    I saw a date/time picker the other that was JUST a slider. It had a predetermined range and you slid it around until the text displayed the value you wanted.

    What made it worse was that it was locked to only the current date/time until you messed with the window enough to refresh the proper range for the slider. Messing with the window usually meant hitting its reset button or closing it though so you’d have to reenter all the other fields in it too.

    As a side note /r/programmerhumor on reddit sometimes has competitions like this. They had a number of good contenders for “worst phone number picker” for a while, and they went through designing terrible volume controls as well.

    1. Aged .Net Guy says:

      My Fortune 100 employer may have you beat. We have an internal web app for requesting vacation weeks. They used some fancy 3rd party UI control library to do the whole app. The big picture goal is to rank order all 52 weeks of the year, either singly or in contiguous groups. Then at some future date the big computer will crunch everyone’s requests and determine who gets what vacation for next year.

      So there’s a horizontal row of of little squares each containing the week number from ‘1″ to “52”. So picture a 1×52 grid. Overlaying the grid are two sliders that you mouse-drag back and forth across the grid to identify a single week or a range of weeks. There’s a floating label attached to each slider that shows the start date of that week. As you drag the slider, the label follows along above the slider changing from, say, “01/01/2018” to “04/12/2018” or whatever. Each slider has a label, and each label is about 7 grid sqaures = 7 weeks wide. Both labels appear side by side above the grid. And the labels won’t overlap; instead when the labels bump into each other the sliders stop moving visually, but still somehow generate move messages that alter the label as long as you keep dragging.

      So even though the primary use case is designating a single week, to do that you first move the right slider out of the way, then move the left slider to the desired week, carefully wathcing the moving text change to make sure you got the right actual date, then finally drag the right slider back as close as possible to the left slider = 7 weeks away, then continue pulling it left with the mouse while the sliders don’t move but the right slider’s label text counts down until it’s reading the week you want.

      Then you click [Add]. One down, just 51 more to go. Gaaaahhh!

      Asking for a range of weeks is easier; jut move the sliders to the first & last weeks while reading the moving changing labels to make sure you’ve stopped on the date range you want. But the longest vacation allotment anyone has is 4 weeks while the shortest request that is visually consistent is 7 weeks.

      Jeebus H Crackers! What were they thinking??@!?!

      If they just <had to use a 1×52 grid and sliders, how hard would it have been to have the label for the left slider be above the grid and the label for the right slider be below the grid so they don't interfere with each other? Impossible apparently.

      1. Okay, you brought back memories of when I wrote the shift scheduling app for telephone pole workers for New Jersey Bell (as it was then known). I implemented it according to the official rules, but they came back and said that it created incorrect schedules because there were a ton of unofficial rules I hadn’t been informed of. (For example, if somebody takes a vacation for week N, then as a courtesy, do not assign them a nonstandard shift for weeks N−1 or N+1.)

  6. Sam says:

    The funny thing is, that time picker is almost exactly like the one in an ITSM application I use.

  7. Brian says:

    Sadly, this is exactly what the jQuery UI timepicker looks like, although a few implementations have +/- butons on the times. I’ve always hated it.

  8. SimonRev says:

    Obviously the same team who designed the UI for Outlook 2013 . . . except the gray person must have been sick so it was all fields of undifferentiated white with a little bit of text on them.

  9. Yuri Khan says:

    No, sliders are okay and the date calendar is downright sensible. The absolute worst is using dropdowns for each field.

    In many cases, the more usable control is a text input. Aside from the ISO 8601 format, it can accept abbreviated formats depending on the nature of the date/time being entered.

    For example, a control for the date of a financial transaction in a home accounting application could assume it is being used to enter a date in recent past and interpret “3” as 2018-03-03, “7” as 2018-02-07, “2-3” as 2018-02-03, and “12-7” as 2017-12-07. On the contrary, a todo list application could assume a date in near future and interpret the same strings as 2018-04-03, 2018-03-07, 2019-02-03 and 2018-12-07 respectively.

    1. ender9 says:

      There’s an accounting app some of our customers use, and I’ve seen them enter dates as 1302, which the program corrects to 13.02.2018 when moving to the next field (we use DD.MM.YYYY format). Typing just the day automatically uses current month.

      1. El Dorko says:

        I’ve seen that too; not sure if it’s the same app, but ours lets people write things like “+1” for today plus one day, or “+1w” for today plus one week. It’s actually pretty handy, super fast to enter a lot of dates, which is something accountants tend to do quite a bit.

    2. Aged .Net Guy says:

      IMO …

      The challenge with this approach is the user has to first learn, then retain in their head, an accurate model of how each and every app “smartly” re-interprets partial or ambiguous date input. All without ever having read any documentation. Deducing a plausible & logical rule set from examples is a common dev skill. Not a common user skill.

      For an enterprise app that a user types into all day every day, they’ll probably learn most of the rules (net of corner cases) within a month or two. After gosh knows how many mistaken and unnoticed wrongly interpreted inputs. That’s still a failed UI design strategy, but not a grossly failed one.

      For more ordinary apps and end users, where the user interacts only occasionally with dozens of “smart” apps, each with differing sets of “smarts”, the overall usability outcome is poor at best.

      1. Yuri Khan says:

        You don’t need an accurate model. As a user, you start off only knowing that it will accept a full date (because that’s what is written in the widget placeholder or in the first example that you see). You only get to know about shortcuts when you try them, or when you read about them in the manual or someone’s blog post.

    3. Viila says:

      And then everyone in Europe will hate you, since 2-3 is second of March and 12-7 is twelfth of July. Interpreting those as partial ISO dates may work fine for you yanks since you normally use the mixed endian MM-DD-YYYY order, but Europe uses DD-MM-YYYY and having to transpose the day and month for data entry is bloody annoying.

      1. Yuri Khan says:

        Hey, my country commonly uses DD.MM.YYYY format. ISO 8601 is still an international standard and the world would be nicer if everyone just switched to that.

      2. Yuri Khan says:

        Of course nobody is stopping you from designing a really smart date/time expression interpreter honoring the user’s locale, knowing about localized month and day names, and allowing such inputs as “yesterday”, “Saturday last week”, “this past Groundhog’s day”, etc.

    4. Someone says:

      Why any arbitrary order, or ISO? Windows tells you the Y-M-D order that the user is working with. To respect the regional date order is important to allow the user to copy&paste dates between your app and MS Excel, MS Access, other Office products or nearly every other program.

  10. Ben Lubar says:

    Hmm, a date picker sounds like a good idea for an OMGWTF-style competition.

  11. user says:

    This reminds me of Myst… in that planetarium room where you have to move sliders to the right date and time to find constellations.

  12. Martin Bonner says:

    Even the date picker is tedious if you want (say April 18th 2023) – date pickers are great for nearby dates, but they *need* a text entry box too.

    1. Alex Cohn says:

      Most importantly, they need a field that can accept Ctrl-V. Quite often, we already have the date on clipboard.

  13. Cristian G says:

    Almost as bad as the current Alarms app (Win 10) where, to set an alarm you scroll hour / minute / AM-PM. Who comes up with s**t like this for a desktop application? Sigh…

    1. ender9 says:

      Try the time picker in Windows Update UWP app – it’s even worse (and don’t forget to click ✓ after setting the time, otherwise all your scrolling will be for naught).

  14. Nico says:

    I actually came across something very similar to this on The Daily WTF recently: Clearly slider controls are vastly under-utilized in modern UI design!

    And no volume control that uses a Game of Life grid where you build a glider gun with a period that controls the volume? Disappointed!

  15. Erik F says:

    My personal pet peeve regarding contemporary date pickers on smartphones is that you have to use multiple “Price Is Right” rotary controls to choose the date. I find that they’re either too sensitive and go zooming past where I wanted to stop, or not sensitive enough. They look cool enough, but I’d rather be able to use a calendar, or even a keyboard!

  16. cheong00 says:

    At least they remember to put display of current time setting there, and not require user to deduce the time through the position of slider. :P

  17. ender9 says:

    And here I thought you’d be talking about the time picker in UWP Windows Update dialog, which was obviously designed for touchscreens with no thought at all about mouse and keyboard users (which is also using sliders for time, they’re just vertical).

  18. Jonathan says:

    I seem to remember getting tripped up by a date picker for an travel site that had the calendar set to Monday first. Accidentally booked for Sat – Mon when I thought I was picking Fri – Sun. Fortunately able to quickly correct that. (I want to say the day of week letters were either omitted or very subtle; in any case I didn’t notice they’d moved.

    Though the ones that bug me are when I need to schedule something in the far future and, like the included example, there’s no way to jump years – so to put in something 2 years from now you need to hit next 24 times. (Related but differently annoying are ones that do include next/prev year but then don’t increment the year when you advance past December. Most of the time if it’s December and I click next to January it’s because I want to pick something next month; not something 11 months ago)

  19. RobYull says:

    This looks almost exactly like a date time picker that a piece of software we use at my work has. It exists in a web interface.

    1. Steven Don says:

      A popular PHP MySQL admin interface , perchance? At least it also has a text input field, though the sliders may occasionally be useful for quick inaccurate adjustments.

  20. Single Dude says:

    The worst date picker of all is my Mom.

  21. Erik F says:

    I just came up with a devilishly clever and horrible way of repurposing an already-existing control to represent dates: the Color Picker common control. Use the RGB components to represent DD-MM-YY or HH:MM:SS: reusability at its finest!

Comments are closed.

Skip to main content