22 ms·

Safari's date-picker is the cause of 1/3 of our customer support issues

565 points by robertakarobin 4y ago

ComodoHacker 4y ago
Who said browser "standard" date picker must support each and every use case?
- bioemerl 4y ago
  Is picking a date that is more than 20 years old a very odd use case? I feel like that should be something the UI can handle by default fairly easily.
  - culi 4y ago
    Usually setting a default value is a good idea. That way it doesn't default to today's date. But the standard implementation does make it very easy to navigate to a different year as pointed out in the blog post. The issue was that elderly folks don't always find it obvious how to do so. However, looking at the alternative implementations from Chrome and Android,[0] I don't think any other browser has made it any more obvious... [0] https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U...
sp332 4y ago
It took me a few seconds to parse the calendar view, but my first guess about where to tap was correct. And I expected the month and year rollers to move separately, which the article says is counterintuitive. But I don't own any devices that run Safari, so maybe it's inconsistent with the usual expectations of the interface?
- ars 4y ago
  Look at the UI: The grey bar connects the month and year, making it seem visually as if they would move together. It's a really terrible UI - why would the month and year both pop up at the same time? They should come up independently.
  - michaelteter 4y ago
    I disagree about them needing to be separate. Once you have that panel open (and knowing how to open it is the problem), you see the two high level selectors that you need. If you only need one, then the other is harmless and will not confuse you; you will just not touch it.
    - pmontra 4y ago
      Of course it's better to have them moving separately, otherwise somebody would move 12*n times the month to move n times the year, before discovering that the year also moves, if they'll ever discover it. However a better solution would be to show only the month and only the year in two separate screens. No surprises, no chances of using the UI inefficiently. And for 12 months, you can show all of them together on the screen. Same for the years, you can show more than one at the same time and scroll many of them together.
      - deleted 4y ago
        [deleted]
      - michaelteter 4y ago
        Absolutely they should _move_ separately, but they can both be visible at the same time. I'm not suggesting that they are stuck together; that would be pointless.
        bbbobbb 4y ago
        I think you're talking about slightly different things. The issue (which I agree with) is that the month and date "share" a continuous grey background which makes them seem connected. They can be visible at the same time, but it would make sense to me to separate the backgrounds as to indicate that they can be scrolled separately before touching them.
        michaelteter 4y ago
- matheusmoreira 4y ago
  I guessed correctly as well due to the blue arrow next to the date indicating further interaction was possible. I have decades of computer use experience though. I'm not sure if it's intuitive for every demographic or what an appropriate interface would be for our elders.
  - emn13 4y ago
    Another anti-pattern this UI and most modern UI has is a dramatic reduction in the number of visual cues that identify interactivity. This is a system widget, and blue indicates interactivity... but that's almost it. The shape is often used for other purposes, such as for a breadcrumb, and actually the positioning makes it look more like a breadcrumb. Furthermore, it's going to be used from a website, and thus you can't rely on the fact that the rest of the site's colors will be consistent with this particular shade of blue on an icon indicating interactivity. It's all rather minimalist - and if a user catches it, that's fine, but if they don't, there aren't any fallbacks or additional hints as to what to do. Additionally, the icon seems fairly small from the screenshot - though on an actual device that may not be an issue. It may be too small to function as a good UX element.
- Someone1234 4y ago
  They're getting tons of customer service calls though. Objective data always beats subjective, and the objective data here is that a bunch of customers are confused and unable to use the website. I have no doubt that 9/10s of people reading HN would be able to figure this out if not more. But what is the figure like out in the normal/non-IT world? I miss when Microsoft had their accessibility research lab that tested stuff like this scientifically and released tons of great papers. We need more of that, I'd love for Apple to invest in stuff like that.
  - masklinn 4y ago
    > They're getting tons of customer service calls though. Objective data always beats subjective, and the objective data here is that a bunch of customers are confused and unable to use the website. The problem is whether they're getting calls because the UI is objectively worse, or because there's an upstream selection issue: there are comments on the gist showing the UIs on other browsers are not fundamentally different, the biggest difference is that Firefox desktop makes it much clearer that the month/year is an active control, and the three desktop variants clearly allow textual input. They also indicate that their population is: > As such, most of our customers are in their 60s or older. So sounds to me the issue is not that Safari is worse than the rest (although it's no better either), but elderly generally get (or get offered) iPads for pretty obvious reasons, and so there's a huge selection bias.
bsg75 4y ago
Date pickers in general are terrible. Why on a form where I have type my email or shipping address can’t I also just type in a date ?
- jonahx 4y ago
  You can type the date in browser date pickers, including Safari's, even while the calendar is visible. But the UI is not superfluous for many use cases. Often, you want to see the whole calendar for context -- eg, to see the associated day of week.
  - comex 4y ago
    > You can type the date in browser date pickers, including Safari's, even while the calendar is visible. Not on iOS (at least assuming you don’t have a hardware keyboard). The software keyboard does not appear and there’s no option to bring it up.
- foolfoolz 4y ago
  date pickers are great for selecting recent dates such as this month or next month. this works very well for hotels and stuff like that where you select multiple dates. i would rather date picker than type it in
- CydeWeys 4y ago
  It depends on the use case. For something like birthday, ID expiration date, etc., just being able to type in the correct values is the best UI. But for a use case like scheduling something in the near future (e.g. a flight, delivery, whatever), the calendar picker is superior because days of the week actually matter for this use case.
- macinjosh 4y ago
  Exactly, a plain text field that does best effort parsing. If you want to be precise you can enter "2022-12-01", but if you are in the mood you can enter things like "tomorrow" or "first of the year", or "June 1 1999". UI could even show the exact parsed date below the field as a hint.
Mistletoe 4y ago
I’ve encountered this nightmare and couldn’t believe it was real. At least I didn’t have to scroll as far as some older people.
andrewmcwatters 4y ago
Edit: I have removed this comment due to post-specific moderation downweighing. Further reading [1]: https://github.com/minimaxir/hacker-news-undocumented/issues/64 https://github.com/minimaxir/hacker-news-undocumented/issues...
- throwawaaarrgh 4y ago
  Does Safari have 90% market share and a proprietary plugin ecosystem now and nobody told me about it?
  - Uninen 4y ago
    On iOS devices Safari (WebKit) has 100% market share.
- tomxor 4y ago
  I was a web developer when IE6 support was still a thing. Safari is the new IE, it may not be as bad yet, but it's right on track, cumulative regressions being the norm.
  - bioemerl 4y ago
    I have heard they are improving in recent updates. I'm skeptical, very skeptical, but it's possible that Apple has heard all of this complaining and is trying to pivot to counter it.
  - deleted 4y ago
    [deleted]
- bioemerl 4y ago
  When I hear Internet explorer I don't hear about the monopoly Internet explorer 6, I hear about the Internet explorer 11 that had to be supported for years and constantly just had to be different from everything else in a way that was frustrating and infuriating whenever you were trying to develop a product. Safari does not have the monopoly status, Chrome has that, but safari does have the IE 11 like constant fighting when you have to support it. Also Safari has monopoly status for everyone using an iPhone. The people on iPhone simply can't pick another browser, because Apple won't let them.
chazeon 4y ago
Now it seems the date picker, like the Safari one, is just meant to let you pick a recent date; for a faraway date like DOB, the weekday does not actually matter, so it is easier to ask the user to type. Just some quick thoughts after reading the article and comments.
- culi 4y ago
  The date picker only defaults to today's date if they don't specify a default value. Tbh I think setting a default value might actually have been a better solution. It's not perfect, but hacking together your own alternative could lead to a number of issues for folks relying on screen readers and other input devices. The `type="date"` gives a lot of semantic meaning that `type="number"` lacks. If you're gonna ditch it, I'd say at least use an existing external library that's been battle tested for accessibility.
  - pishpash 4y ago
    What would a default birthdate be? That would span 80+ years. That's not going to work. Any time an input spans ~29k values, you better provide some logarithmic-time searching mechanism. So yes, Safari's date picker is f'ing dumb.
    - culi 4y ago
      Which of these do you think did it better? https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U... From left to right, that's Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop --- The post specified that the users are mostly senior. Regardless of what they go with clearly 0% of their users benefit from leaving it to default today unless they somehow figured out how to sell smartphones to fetuses
      - phillipseamore 4y ago
        Also depending on the product and legal requirements the latest possible DOB might be 13, 18 or more years ago.
jiveturkey 4y ago
the rolling wheel thing is terrible for another reason. your finger obscures the value when you roll back (up). it’s horrid
- culi 4y ago
  And lacks the semantic information that's used by screen readers. If you're gonna ditch the native elements you should probably use an external library that has meticulously worked through all of these issues
  - andiareso 4y ago
    Agreed. I'm an iOS user primarily and have been since almost iOS 1. Some android intermittently. I have no trouble figuring out how to pick by year because the rest of iOS follows a standard UX. It seems more important to me to support the native accessibility of the phone than use an external UI vendor. I am a huge advocate of family members and elders to purchase devices they are comfortable operating. This is why my grandparents primarily use their desktop computer for any important things, and their iPhones for messaging/video chat.
antris 4y ago
The most straightforward solution I can think of is to split date inputs by context. Create an `<input type="dob">` that is tailored for picking a date of birth from 1900-today. "date" is too vague of a context to create an UX that works well in all the different contexts. It'll always be bad in some contexts, if it's trying to solve all the use cases.
- noduerme 4y ago
  This. In my form generation library (that I maintain and use for client apps) there are two types of datetime input areas available. They take the same arguments for ranges and single/double dates, with or without time, and at what frequency of time (e.g. hourly, 15 minutes, etc). One wraps a calendar library (daterangepicker) and attaches it to the form; the other generates a responsive text input with placeholders and danger labels. Their outputs are both returned as Moments which can be sanity checked, tested against other constraints and shipped back out as YYYY-MM-DD HH:MM:SS to the database.
- crabmusket 4y ago
  This would be good, or maybe use type=date and inputmode=dob? As it affects the method of inputting what is ultimately still a date.
drstewart 4y ago
Date pickers are one of the worst interfaces on the web. Everyone seemingly has a wildly different design and they're almost always hard to use and unintuitive. And forget about if you're picking a date _range_
- noduerme 4y ago
  I've been using daterangepicker [1] for ages, and it's one of the reasons I still just default to jQuery for web apps (the other being jQuery's custom event chain). Works well, very readable, easy to pass functions to disable individual dates which is important in reservations apps, ties in nicely with moment.js. More to the point, finding a decent calendar that didn't baffle users was such a pain for so long that I never want to have to do it again. And of course, with native browser components who knows what your user's going to see next year? [1] https://daterangepicker.com https://daterangepicker.com
deleted 4y ago
[deleted]
lucb1e 4y ago
> I chalked up the "New IE" stuff to annoying little CSS issues Here, too, Safari is the cause of 2/3rds of the lines of exceptional UI code now that Edge switched to a compatible render engine. Or blocks features altogether. All major browsers settled on doing things a certain way and then you remember that you always need to check Safari and of course they want it another way, so you get to re-do the work and duplicate your code with a comment "//because safari wants x to be done this way". I had less trouble with MSIE6 back in the day, though I can't rule out that I did less fancy things back then. These things are not like "oops we render it differently by chance", it's conscious choices like not supporting SVG or being able to read file names in JavaScript (can't have javascript-based upload progress bars or local file encryption if you want to keep the filename; need to encrypt on the server and have the server report progress back via another channel).
- kiratp 4y ago
  > now that Edge switched to a compatible render engine What is the definition of “compatible” here? The point of “one specification, multiple implementations” is to explicitly leave the door open for slightly deviant implementations.
  - lucb1e 4y ago
    My definition of compatible is basically what I described in the comment: "[not being] the cause of 2/3rds of the lines of exceptional UI code". There's the occasional situation where Chromium doesn't support something or Firefox doesn't support something, but it feels like Safari has double the rate of both combined.
  - fbdab103 4y ago
    The computing industry has a pretty poor track record of multiple-implementations ever agreeing or being a net positive for the user. Instead it always seems to devolve into pile-of-hacks for platform X and pile-of-hacks for platform Y, regardless of what the specification says.
- Spivak 4y ago
  Can any browser that is not a reskin of Chrome with feature and bug-for-bug parity actually satisfy web developers at this point? If Firefox had the marketshare of Safari and was mandatory to support because they were a major platform’s browser devs would be cursing their name too but with a different set of things that aren’t exactly like Chrome. It really does feel like devs are literally developing against Chrome with not even so much a thought at cross-browser compat or a glance at caniuse and then taking their finished site and then working backwards from there on other browsers cursing the compatibility issues when they could have avoided it entirely had they started with a cross-platform subset of browser features. Just the same as how cross-platform native development works. Hell someone did all the hard work for you https://github.com/amilajack/eslint-plugin-compat https://github.com/amilajack/eslint-plugin-compat Then multiply by all the npm packages blindly imported that were developed with the same methodology and I see where the rage comes from.
gedy 4y ago
This is one of those basic UI things that are missing/bad in native HTML controls, and why we end up having to implement this stuff in JS.
- culi 4y ago
  and inevitably those JS implementations almost never take into account screen readers. I think we should use the platform as much as possible for this reason 90% of the annoyance could've been dealt with if they had just chosen a default date value of, say, Jan 1960 or so.
  - SCLeo 4y ago
    ...which means I just need to click the ">" a couple hundred times.
    - culi 4y ago
      Well I mean you don't. And you know that. And 95% of internet users know that. It's just an issue with elderly folks not being familiar with this UI Maybe the real solution is a simple explanation for how to use a date picker component. It'd help those users not just on this site but on many other sites in the future. Tbh I don't really know what improvements could be made to the picker itself. It looks pretty consistent with the implementation of most other browsers and OSes and even most native components I've seen I'd love to hear actual thoughts on improvements though
cwillu 4y ago
“It's not fancy, but it works. In fact, it works because it's not fancy.” is a lesson I wish was drilled into designers.
trarmp 4y ago
tl;dr elderly can’t find the year picker in the iOS version of the date picker pop-up. I feel like the data is flawed. This is (supposedly) 1/3 of tech issues raised by customer support — how many of which are total?
iknowurmum 4y ago
[flagged]
satvikpendem 4y ago
Now you understand why people use JS-based UI elements.
tareqak 4y ago
What do date pickers in other browsers look like?
- lucb1e 4y ago
  The Android one always makes me chuckle when some obscure site decided to use it. It's so unexpected to get a big pop-up in an entirely different UI style as the rest of the website suddenly, and when I realize what monster I now have to fight, idk it's humorous to me. It also differs between versions but hasn't gotten better. I have gripes with Safari, but date pickers isn't one of the things only Safari struggles with. An image search for 'android date picker' brings up at least three different designs: https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/kJqln.png https://i.stack.imgur.com/kJqln.png
  - culi 4y ago
    thanks for the screenshots It seems like the first screenshot is `type="time"` and the second and third are `type="date"`. But I don't know if those are native components or the browsers defaults. Would be useful information
  - bioemerl 4y ago
    And I think all three of those are out of date, the Android 13 one is totally different as well.
    - lucb1e 4y ago
      Time to update the image search results! Sharing is caring ;)
      - bioemerl 4y ago
        I wish, I can get the screenshot but there's no easy way to get that on the internet
alxmng 4y ago
Just have three separate drop downs for year, month, and day. Problem solved. Unambiguous. Bug free. Works without any extra JS.
- fortran77 4y ago
  Then people will pick June 31
- linsomniac 4y ago
  Year drop-downs are annoying for things like DOB because there are 100 choices to scroll through. Reminds me of my Humana insurance app where some questions had drop-downs of literally 1,000 values, so I'd swipe and swipe for several minutes, but if I swiped outside the box by a little bit, it would collapse and I'd have to start over. Eventually found that I could select a part-way value and then start swiping again, and if it collapsed I would at least go back to the part-way value. So, typing in Y/M/D is better in most cases for DOB than drop downs, unless maybe it's dropdowns for [YYY][Y], then [MM] and [DD]? Or how about start with "How old are you" and then get me most of the way there on the picker? :-)
mikl 4y ago
If you think Safari is the new IE, you have definitely forgotten (or not experienced) how bad things were with IE6. They didn’t just have a few bugs in their browser implementation or were slow to implement new features. Basic, crucial CSS features were broken. Microsoft didn’t add any new features to the browser about a decade, basically holding the entire web back to the standards of circa year 2001 until it was finally safe to drop support for it almost a decade later. And furthermore, Microsoft weren’t pushing users to upgrade to the latest version, so we had to support older versions of IE long after their replacements were released. I understand wishing that Safari would be better, but luckily the Safari team is much more on the ball than the IE team ever was.
- mmis1000 4y ago
  A few…? It's not my experience as a web developer. It's 'a lot' at best. And not only in js, but also in css or literal anywhere you might interact to. It always requires a few workaround when I finished the page in other browser. Firefox or Chrome, in the other end. If your page works on one of them, it will pretty much just work on the other. Safari is probably 50% of my bug ticket, almost equals to every others sums together. Write a page for safari really reminds me the age IE is still a thing.
  - culi 4y ago
    Interesting. I've run into issues with the way Safari handles transparency values, but don't actually come across many other Safari specific issues these days. Safari has been pouring a lot of effort into improving their web compatibility recently and I feel like it's already making a difference I'd be very curious to hear some common issues you have to deal with
- PpEY4fu85hkQpn 4y ago
  I agree. The people who call Safari the new IE probably don't know what zoom: 1; does and how fundamentally broken so many basic things were in IE6.
- makeitdouble 4y ago
  You have a point, yet I feel the situation isn't as bright as you make it look. I think Safari isn't broken in the ways IE was, because IE always had comptetitors running along it and pushing the enveloppe where Microsoft was pulling the brakes. Firefox and later Chrome were handicaped in adoption, yet had little to no limitations on the features they wanted to add. In comparison no other browser can run with the same privileges as Safari on the phone, while the iPhone is a dominant platform. So there just isn't the same space to innovate in a profitable way. The only company who can afford pushing the envelope is Google, and at this point their only real competitor is Firefox, that they basically pay to keep alive. They also have little incentve to really push the web as it doesn't impact their bottom line (native app ads also go in their pockets afterall)
michaelteter 4y ago
Date widgets are almost universally bad. Most I encounter are unintuitive or outright buggy. However, OP complaining about usability and the providing three text fields with the MM and DD being placeholders is terrible. Normally placeholder-only labels are a bad idea, but this is especially true when the month and day fields have different order depending on the region. The moment you've got [1] [4] [1980], you no longer know which is month and which is day. And do they swap these placeholders and entered values if you change the country from US to an EU country? The lack of progress in the tech world in making consistent user interface standards is disappointing. We should not be still struggling with these topics (and as users we should not be suffering). Tax time, trying to fetch reports from banks/exchanges is one of the worst recurring experiences...
- culi 4y ago
  Actually the Firefox and Chrome date pickers look... exactly the same I don't think this is so much a problem of UI not being consistent as us just not providing resources to help elderly navigate the web better. Also, they could've just... set a default date of like Jan 1, 1960 and saved 90% of their users a headache <input type="date" value="1960-01-01" /> Edit: ok, not "exactly" the same but functionally very similar. Or at least they'd have the exact problems pointed out in the post. See for yourself: FF: https://blog.nightly.mozilla.org/files/2017/06/input_date_calendar_1.png https://blog.nightly.mozilla.org/files/2017/06/input_date_ca... comparison: https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format&w=1600 https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U...
  - RussianCow 4y ago
    > Also, they could've just... set a default date of like Jan 1, 1960 and saved 90% of their users a headache I'm not sure how that really helps? Moving multiple years is still going to be a huge pain, so you're only really saving people who have a birthdate in or very close to that same year.
    - culi 4y ago
laserdancepony 4y ago
Some commenters seem to forget what the MSIE monopoly was all about. About not keeping up with emerging web standards? That's a misconception. That was a result of Firefox interrupting the market. MS deliberately added non-standard crap to get everyone off the rails when not using IE. That's why websites often showed "Best viewed in 1024x768 and 16M colors using Internet Explorer". And that is a remark I see more often every day. And it's Chrome being recommended. Remember why MS switched from EdgeHTML to Blink? Because Google would hamstring EdgeHTML at every corner on their services. Not completely break it, but make Gmail or Youtube a tad slower than in Chrome. "Don't be evil" my ass.
- deleted 4y ago
  [deleted]
- MrVandemar 4y ago
  > Remember why MS switched from EdgeHTML to Blink? Because Google would hamstring EdgeHTML at every corner on their services. Not completely break it, but make Gmail or Youtube a tad slower than in Chrome. I'm not exactly condoning, nor condemning, that behavior, but there's a little part of me that wants to say to Microsoft: "not so funny now, is it?"
  - culi 4y ago
    I know Microsoft was notorious for not playing nice with other browsers but I thought that mostly had to do with them deciding to go their own way with non-standard features or simply not implementing standards they don't like Is there documented evidence that Microsoft stooped this low as well? Did they purposely make their sites not work as well on other browsers?
- emptysongglass 4y ago
  Google also did this to Windows Phone, actively sabotaging the platform by refusing to allow Google Maps to load in WP's browser and repeatedly disabling Microsoft's YouTube app. It was Google at its worst for me, together with their shenanigans around subtly breaking FF on their web products throughout the years.
neilv 4y ago
I once developed an unusually complex HTML5 Offline app, and found that Safari even had regressions on some basic standard behavior that I needed. I know there's good faith work around WebKit, etc., by smart and genuine people. But it was easy to wonder (especially with the anger that comes from being existentially threatened) whether some element at Apple wanted to make Web apps work badly, to keep the proprietary App Store party going. (I did pull it off successfully, but only with much heroics.)
Groxx 4y ago
I absolutely cannot stand those scrolling selectors. They're a UX nightmare in every possible way - literally every one of them would be better replaced by either a normal list, or (when they're numbers) a number input field.
- kalleboo 4y ago
  iOS used to use those exclusively to pick times for alarms and such, and I could not for the life of me understand why I'm spending all this time spinning wheels up and down trying to get it right when just typing in "1030" is done in 4 taps
  - mcintyre1994 4y ago
    If you’re not aware the iOS time spinner has a hidden number input that comes up it you tap the wheels. So one extra tap then 1030 will get you what you want. Impossible to find without being told it’s there though. And as far as I can tell there’s no date equivalent.
    - Groxx 4y ago
      Android too, though the tap area is much smaller than it should be for what I am sure are completely defensible accessibility reasons.
ranman 4y ago
This is why we can't have nice things.
robocat 4y ago
Solution: add a transparent native date picker transparently fitted to a drop-down/calendar icon on the right of the inputs. Requires JavaScript to sync value between native date picker and the xx/xx/xxxx inputs, and it requires some CSS to make the picker “invisible”, and tabIndex to -1. This gives users access to their localised date picker (which can be really important), and may or may not help accessibility. Not DRY, but it solves a bunch of different problems on different browsers (e.g. you can’t tell if a browser has a broken date picker). This technique also fixes the issue where a Safari Mobile date picker defaults to todays date, for example when using > to move through existing dates that are empty (clicking Done unobviously picks today - often not what you want). Terrible UI for fields like birth date or employment end date. Although depends a bit on whether a blank date makes sense. Oh, and be really careful of type=number on Safari - it silently fails. inputmode=xxx can help, but it has weird differences between devices last time I looked (versions, Android, iPad etcetera). My mum repeatedly failed to enter a dollar value into a type=number, because she was entering a thousand’s comma (the UI showed $ and , everywhere for numbers so it is a sensible mistake to make; although Safari will display the entered number in the input field the .value==0 —— arrrgh silent failures are hideous). I hate Mobile Safari - buggy, impossible to get bugs fixed, relatively poor standards support e.g. still need -webkit- prefix for some standardised CSS from a decade ago. Oh, and you end up with people using obsolete phones stuck on old Mobile Safari versions. Android updates Chrome even if it doesn’t update the OS (although Android also has the problem, it is less of a problem).
- culi 4y ago
  Here's a simpler solution that's even safer for screen reader accessibility: use the platform Just set a default date and it won't default to today.
  - bruce511 4y ago
    When the date spans a wide possible period, like birth date, this approach doesn't solve the root problem.
    - culi 4y ago
saagarjha 4y ago
If I remember correctly WebKit replaced the 3-wheel date picker with this recently because people thought that was too skeuomorphic. Guess they can’t win?
- culi 4y ago
  It's also exactly how Firefox and Chrome's date pickers look. So they were probably to up their web compatibility game to look like everyone else and give users a more consistent UI
  - masswerk 4y ago
    Some of these new (unified) UI elements are just awful. My pet grievance is the range input, which is now filled by an accent color from the left (start) up to the selected value. Meaning, if you provide your users a range from -200 to +200 to select a value from, and a user selects a value of 2, this represents a selection of 202 units, which is apparently the real meaning of the number 2. (As is, Safari is the only major browser not participating in this nonsense.)
yellow_lead 4y ago
I have story about this one too. When I went to take a covid test ~1 year ago, they had an iPad for self registration near the reception. I filled it out, noticed this issue and sat down. An elderly lady came up and started going month-by-month back to her birthday year. I had to get up and help her. It's crazy Apple hasn't fixed this.
SCLeo 4y ago
At this point, I am convinced, all datetime inputs should be done with just text input. The moment I figured out I can click the text to enter numbers manually on my phone's timer, I never tried to scroll the stupid rolling thing to get to the correct time.
- Someone1234 4y ago
  Is the text input MM-DD-YYYY or DD-MM-YYYY though? Or YY instead of YYYY? Or no separator? How do min/max dates work? Left to Right Vs Right to Left text input? Without user experience testing "I'm convinced" says more about the person saying it than the reality of what users in the broad will find easier and what will reduce friction.
  - 7jjjjjjj 4y ago
    YYYYMMDD
  - SCLeo 4y ago
    Just label it? or split it into 3 separate labeled fields? Obviously not one singular input without any explanations/labels. :/ (Seriously, what is the last time you encounter a text-based date input that is not clear on the format?) Stop attacking the strawman. I am obviously talking about using text inputs as oppose to rolling selector/click to increment thingy (as shown in the article). > Without user experience testing "I'm convinced" says more about the person saying it than the reality of what users in the broad will find easier and what will reduce friction. The article clearly shows using the increment buttons/the rolling selector is causing problems for users. That is, my friend, user experience testing.
kshay 4y ago
One interesting alternative (that I can’t remember actually encountering, but just occurred to me when reading this) would be to have an Age numeric field before the calendar, entry in which would jump the calendar to the corresponding birth year.
rikschennink 4y ago
People remember their birthdate as a string of numbers. So why use a date picker for this and not go with 3 number inputs which would be a lot easier to enter your birthdate in.
- TrueGeek 4y ago
  This is what they ended up doing. However, they also mention that many of their users are on iPads. On iPad there is no numeric only keyboard so it's not the best experience. Not terrible, but it's annoying that iPhone has a numeric keyboard but on iPad it's just a full keyboard, even when you request numeric only. We ran into this same issue and ended up just creating our own keyboard to make input simpler.
RandomWorker 4y ago
I like this as an alternative https://github.com/mikepage/headlessui-datepicker https://github.com/mikepage/headlessui-datepicker
- throwaway1777 4y ago
  How do I change years? I couldn’t figure out how to quickly enter my birthdate with this.
- pnw 4y ago
  Has the same problem as OP - no obvious way to select a birth date without many interactions.
- hollowturtle 4y ago
  how this can be a good alternative? I doesn’t let you insert the date manually on mobile and there is no way to pick a different yea
- culi 4y ago
  Is this a troll? At least the native picker allows you to skip between years. Seniors are finding a hard time figuring out how to use it, but at least it's possible This implementation literally forces you to use the arrows...
- chromatin 4y ago
  As constructively as possible: This is awful.
kuon 4y ago
The only correct date widget is a second counter from epoch with a + and a - button.
mbork_pl 4y ago
While I don't claim that Org mode's `org-read-date` is ideal, I have yet to see a better date input UI. Also, ISO-8601 not being universally adopted is a shame.
Animats 4y ago
This is a curse of web design - you have to guess if it's clickable. You're not allowed to have boxes, or lines, or raised buttons. It's almost a dark pattern. It seems to be a holdover from mobile, where unmarked buttons were a thing, but the buttons were bigger and the UIs simpler. Now they've migrated to busier interfaces and become smaller. Date pickers are terrible if not near the current date. Ones for long-term data sets where you set the start and end date are a huge pain. Like getting inflation data starting in 1960, or coronavirus data starting in 2019.
- culi 4y ago
  As pointed out in the post, it's pretty easy to switch between years. It's mostly a matter of it being unintuitive. Unfortunately this isn't at all unique to Safari. See this comparison of implementations: https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U... From left to right: Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop I think at minimum they could've chosen 1980 or something as a default. 0% of their users were born today so not setting a default makes no sense
  - tapland 4y ago
    Since when would arbitrarily setting the default to the 80s and reducing the amount of needed clicks from 925 to 465 even be a suggestion? We're actually expecting users to follow through on that?
    - culi 4y ago
      No I wasn't suggesting it was the solution. Just a bare minimum. 0% of their users are born today. 100% are likely born with 30 years of 1980 Yes I agree, that ideally the users would find it more obvious how to use the date picker properly and not just tap the left and right arrow to navigate However in the screenshot I posted, I don't think any of the solutions have made this functionality very obvious. Except maybe Firefox lol. But Chrome's implementation on mobile seems even worse than Safari's! What would you propose as a solution?
spapas82 4y ago
The pick date widget is (at least for me) a solved problem: Use the jquery ui datepicker. The fact that a lot of people prefer to avoid using jquery (for no particualr reason) and all its widgets and instead try to re-invent the wheel (in a much inferior way) blows my mind.
Mave83 4y ago
Just never use date pickers for birthday but for short term date picking like scheduling an appointment. Date input can be DD, month in textform drop-down, YYYY and you won't have any problems anymore. I don't understand why it is so hard for devs, PO,... to understand this :)
sdiq 4y ago
A different pet peeve of mine on iOS is the USSD menu which is center-aligned, and i find that very ugly. Maybe the usage of this menu isn't universal but for someone from a developing country, we use that like a million times a day. Mostly we are choosing a menu item to continue with a dialogue and the numbers are not aligned.
andiareso 4y ago
I feel like this is such a silly post. Using the date input field should always adhere to the UX of the browser OS. If I'm on Android and I spend my whole life learning the UX of Android's date picker, wouldn't you want the web's date picker to follow the same UX? This is less a problem the website should solve and more of a problem that end-users need to learn. If my grandma doesn't know how to use a feature on her phone you bet she is contacting a family member first. Maybe we should encourage our family to use tools that they are proficient in... I'm an iOS user majority of the time and it is very intuitive to tap the text with the > symbol. Like others state, Android's UX can be just as confusing. I'd say you're following UX best practices and are supporting the native accessibility features of the phone so :shrug:... close and move on
- shashashasha___ 4y ago
  This approach will not help your product succeed > This is less a problem the website should solve and more of a problem that end-users need to learn.
friend_and_foe 4y ago
So I'm not the only one. It's not just limited to Safari. Any and every date picker that doesn't allow text input of the date is ridiculous, those of you that design these things that call yourselves designers should find a new career path, I recommend selling cologne out of your trunk at a gas station, and if you're involved in this blatant and hostile devolution of interface I hate your guts. This particular one is my number one hated trend in UX, by a high margin. It is the most absurd set of design decisions I have ever seen, I can't see how it would not be malicious, it shows disdain for your users and you should be ashamed of yourselves. Fix this one and then we can talk about the others.
- deleted 4y ago
  [deleted]
- culi 4y ago
  I think it's just Chrome and Safari's mobile versions that "don't allow" text input. And they actually do allow it. But most users don't have a keyboard hooked up to their phones The issue is that with mobile something has to pop up. So browsers need to make the decision between an onscreen keyboard or the built in pickers (this holds for color pickers as well) If web developers don't want any of this, they could always just use `type="text"` instead of `type="date"`, but this leads to other accessibility issues and means you have to write a ton more code for proper validation
  - friend_and_foe 4y ago
    Yeah, but from a user perspective text is superior to date. I don't even know a non technical person that doesn't curse under their breath when a date picker pops up. A simple "date (DD/MM/YYYY)" or similar format above a text field is a blessing these days, but I'll take anything over a date picker. A good date picker would let the year drop down somewhere, show calendar view, and allow text input of the date. That's the minimum requirements, a month drop down would be nice too. Sometimes I run into date pickers that have some unintuitive way to page years, one click at a time of course, and while I dislike that, at least I can move back by a year, it doesnt ruin my day. Imagine someone deciding that to input the exact time of something you'd select a drop down containing Unix timestamps, one option for each second, that's probably the only thing I can think of that would be more frustrating and senseless than the current state of affairs, and even then perhaps not because at least it's a dropdown you can scroll on. Literally a scrolling dropdown of all dates back to 01/01/1900 would be a superior UX to the current common date picker design.
leonidasv 4y ago
I think there's a hidden issue there: it's 2022, almost 2023, and we still don't have standardized auto-fill forms. Browser auto-fillers somewhat work, but because every website is implemented so differently, I always end up having to type my address number or birthdate again. I can't see why there isn't an standard semantic web standard for this. We shoukd standardise how common fields should be named and their datatypes set once and for all. Example: set on a field for month AND a field for day. No more MM/DD vs DD/MM issues. One-click and it's unambiguously filled by the browser. Seriously, what's preventing this from happening?
- michelb 4y ago
  I think my Safari 'autofill forms' feature fails 4-5 times in a year? Usually on a really shitty site or one that thinks it's clever. If you build your form according to standards with autofill hints you should have very little problems.
- dontwearitout 4y ago
  Sounds like a job for a LLM browser plugin :P
- scrollaway 4y ago
  There is a standard for this. If you google HTML5 autocomplete attribute you’ll notice all the possible autocomplete attributes and those cover pretty much just about anything. To my knowledge, the major browsers implement nearly all of them. What’s preventing this from happening? Nothing, clearly, devs just don’t implement it because they don’t know about it, and they don’t know about it because they’re busy learning about or implementing something else. How would you universally communicate to everybody that this is now a thing? How long will it take you to fix 90% of the forms out there that were set-and-forget five years ago? Besides, for most it’s easier to use oauth with google or whatever and automatically get the name and birthdate from there (of course, often enough, they have the non completed form anyway…)
  - rieTohgh6 4y ago
    > use oauth with google or whatever and automatically get the name and birthdate from there After recent story about github ban: https://news.ycombinator.com/item?id=33917962 https://news.ycombinator.com/item?id=33917962 anything that asks for more that email is a instant 'close tab and never return' for me. And even before, there is no way I am allowing any site to access may date of birth (despite it being fake one anyway) And going back to "autocomplete" - it looks that browsers "know better" than developers: https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off https://stackoverflow.com/questions/12374442/chrome-ignores-...
mlindner 4y ago
As a long time Apple user, the solution advertised in this is actively worse. Typing in a date manually is absolutely slower than quickly flicking to the year and the month and then touching the date. Please don't force users of mobile devices to type in a date.
culi 4y ago
If anybody else is now thinking about alternative possible designs and wants to explore the way different design systems do it: https://component.gallery/components/datepicker/ https://component.gallery/components/datepicker/
pxeger1 4y ago
Here's how the UK government website's design team recommends doing it: https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/ https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date...
- zote 4y ago
  Was going to share that, their blog is a nice resource on the topic of accessibility
yardstick 4y ago
The worst is when the date picker won’t let you select a date in the future, like a birthday, and so it’ll rubber-band your selection back to a valid date. That’s all fine, except it does this validation on every change, rather than when the user has finished entering data. So if today is 27th Dec, and I wanted to enter 1 Jan 2000, I have to first change the year and only then is it save to change the day and month fields! What’s worse is the year appears last/right hand side, so as we work from left to right the first thing the UI has you pick is the day, not the year. I simply cannot understand how these issues weren’t addressed before release.
- kevincox 4y ago
  I have this problem with thunderbird's calendar. It won't let you set the event start before the event end, even for a second while editing. So I have this common problem. 1. Have an "evening event" from 16:00-23:00 2. The start time changes (or most likely was previously a generous placeholder) 3. Update the start time to 19:00. Thunderbird automatically adjusts the end time to preserve the length. Now it is 02:00 the next day. 4. Adjust the date back, however after the first click it closes the datetime picker and throws an error. 5. Try again, select the future date to get past the date picker into the time picker, then select the correct time. 6. Open the datetime picker again, select the correct date and the same time. This is a particularly egregious example because the datetime picker is combined and aborts half-way through after you select only a date.
Obscurity4340 4y ago
It would be nice if Apple had like a DateKit or something that standardized and nudged developers to integrate natural language date entry across the OS. It needs to stop being a blockbuster feature that lets companies/products like Fantastical that bait and switched their paid users limit their competition. If Apple can spend the amount of time on things like LiveText and their creepy NeuralHash program, they can take 5 seconds to implement easy date entry.
WickyNilliams 4y ago
Even if safari had the greatest date picker ever conceived, don't use date pickers for date of births. They will never be better or faster than typing your DOB. Pickers are best for choosing dates that aren't known ahead of time, or where you need to know how a date relates to week days / week numbers etc. The proposed solution of using number inputs is also not great, since they have a host of accessibility issues [0] You want a regular text input with inputmode="numeric" and a pattern attr. This will give the correct numeric keyboard on mobile, and work just as well in desktop, without any of the associated issues. I've built several date pickers, I know how hard they can be to get right. But they shouldn't bbw blindly used for any date value, they should be a deliberate choice [0] https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des...
- masklinn 4y ago
  > Even if safari had the greatest date picker ever conceived, don't use date pickers for date of births. They will never be better or faster than typing your DOB. Pickers are best for choosing dates that aren't known ahead of time, or where you need to know how a date relates to week days / week numbers etc. Interestingly the old iOS datepicker was actually pretty good for DOBs: the old picker just gave you three scrollwheels with the year, month, and day (possibly in your locale order), scrolling through the years was a very quick thing: just flick the years wheel and off it goes. A touch finnicky to adjust, and maybe not great for close picks because of the lack of context. The issue here is the "new" (iOS14) calendar-based pickers, which give you, well, a calendar, and hides the quick month/year direct selection behind a dropdown (and as the essay notes without a day wheel, so now you have to open the year/month selector, jump to the right one, confirm that, then select the actual right day on the calendar view). Especially given the flat design language as it's really not obvious the month/year and their arrow is an active dropdown.
mozey 4y ago
I built an example that uses separate select tags for year, month, day, and time. The benefits of doing this are: - Standard elements that work everywhere - Easy to refresh the available options after a date change - Mimics the "rolodex" behaviour to quickly find any date/time The libs I used are arbitrary, won't be hard to rewrite using only built-in Javascript, or any library / framework https://www.mozey.co/demo/ts/examples/datepicker/ https://www.mozey.co/demo/ts/examples/datepicker/
scarface74 4y ago
Anybody going to address the elephant in the room that this startup is probably fraudulent and peddling pseudo science? https://geneticure.com/ https://geneticure.com/ Does anything they say read like it’s been backed up by peer review studies?
- robertakarobin 4y ago
  I'd have the same concerns. Fortunately our research is in several peer-reviewed journals, like the Lancet and the Journal of Clinical Medicine. We list our research on our homepage: https://geneticure.com/#article https://geneticure.com/#article
  - scarface74 4y ago
    So let’s say I use your service, then what? Do I hypothetically take the results to my doctor and will they prescribe drugs based on the recommendation? This is semi relevant to me, I do have high blood pressure at 49 that’s well control with what amounts to a standard diuretic (Hydrochlorothiazide).
    - robertakarobin 4y ago
      Yep, that's exactly correct. We lay out the process at https://geneticure.com#howitworks https://geneticure.com#howitworks, but you've already got the idea. I'm happy to answer any questions — if you email support@geneticure.com I'm one of two people who looks at support/info requests.
      - scarface74 4y ago
        I’m going to now admit that I don’t know enough to know how valid the testing is. But, I can say that on an individual level it is easy enough to test whether a blood pressure regimen is effective. Blood pressure is easy to test at home and the effect of a blood pressure regimen can be observed almost immediately - within 24-48 hours. So if the doctor recommends that I change drugs and measure my blood pressure daily under the same conditions, we can judge its efficacy. In other words, I would be more comfortable with experimenting with different approved high blood pressure medicines than something like cancer medicines based on a startups recommendations.
dutchbrit 4y ago
Talking about dates and Safari, be aware of this in JavaScript. new Date('12-27-2022'); works in Chrome but returns an invalid date in Safari & FireFox. new Date('12/27/2022'); works for all browsers.
- masklinn 4y ago
  The first format makes no fucking sense to start with, the US is the main country which uses mid-endian dates and it doesn't use "-" as a separator. But beyond that, don't use `new Date(string)`: the only spec-defined format is a restricted ISO 8601[0], though the horror show that is RFC 2822 datetimes is conventionally supported by everybody because it's the standard stringification (Date#toString). Everything else is implementation-defined, and likely heuristic. [0] https://tc39.es/ecma262/#sec-date-time-string-format https://tc39.es/ecma262/#sec-date-time-string-format
alistairSH 4y ago
Hell, I’m half as old as those customers and the date-picker is still annoying AF for birthdays or really anything that’s not this month. It’s just a shit design, likely created by some PM who couldn’t think beyond their weekly work meetings.
Waterluvian 4y ago
I’m shocked that there’s such a myopic view of “date” as a type in design that we don’t really see concepts such as “expected date range.” Am I expecting an input that’s years ago? Recent? The future? These would all be very different widgets if designed well.
jmull 4y ago
You can't really blame Safari for the fact you shipped a site that requires users to tap a button hundreds of times. That tells me you didn't once use your site the way many of your users do. That's completely on you.
- joeconway 4y ago
  Or that they shipped and tested this page prior to the release of iOS 16 as that’s when the UX of the iOS date picker changed to this abomination
  - jmull 4y ago
    That's just not true.
bloggie 4y ago
Do you need to know the exact birth date or just the birth year?
shadowgovt 4y ago
Color picker also. The crayon box is crap. Honestly, this aspect of Safari's UI (the default form input widgets for complex values) is severely under-worked and in desperate need of an overhaul.
wmeredith 4y ago
Safari's Rolodex date picker sucks out loud. I'm so glad they are getting called out on this.
emadda 4y ago
I use a very simple drop down prefixed with ISO week numbers here: https://stay100.app https://stay100.app It looks simple and basic, but <select> works very well on all devices.
- thepra 4y ago
  Thanks no thanks, what an abomination.
seydor 4y ago
Android date time picker is also fancy but icky imho. I don't know how it performs though Honestly , 3 select boxes are so easy to understand even if they are somewhat clutter
elzbardico 4y ago
Call me an old curmudgeon, but the only place where date pickers make sense is in scheduling applications. It is nice to see a calendar when picking a date for an Airbnb booking. Picking a date for a future event is an entirely different use case than choosing a date in the past. The former is more of an exploratory activity; you are interested in things like the day of the week, proximity to holidays, availabilities, and all kinds of information, whereas a visual depiction of a calendar conveys valuable information, information that is entirely superfluous when picking a date in the past. But registering dates is slow and cumbersome, more so if those dates are removed a few years ago, like DOBs and other similar kinds of dates. Also, anything past the current month is a chore; manual input is usually faster and less error-prone.
jlelse 4y ago
It's not just the date picker in Safari. iOS in general... I don't get it why I need to uninstall and reinstall an app from the app store when I want to clean the app's data like I can easily do on Android. Why is there no way to clean caches? Instead a big chunck of the storage is filled with "other system files". And the keyboard is so error prone as well, I always do spelling mistakes or need hours to type short texts. At least it's just my work phone...
anotheryou 4y ago
The solution works until you expand beyond the US to people with sane date and unit convention :P DD/MM/YYYY is the way purely safari's fault, makes sense otherwise to have this on the browser side. Next challenge: A sensible input for a date range with optional time of day. Have not seen a good one yet I think, especially when you try to correct your made input.
- toastal 4y ago
  Sensible is the ISO 8601 standard with the RFC 3339. It's already been adopted by tech and governments and keeps all time big endian (bonus: it's alphabetical too). But LOL AmErIcaNs month first, right?
  - anotheryou 4y ago
    this is about ui, not data storage
    - toastal 4y ago
      Yeah, and it's easier to parse big endian all the way down. It doesn't tend to cause the same ambiguities that make folks have to double take to understand the data.
stalfosknight 4y ago
Safari's date picker really isn't that hard to use.
SergeAx 4y ago
Even worse: I saw several websites, where this exact UI was carefully replicated with HTML custom control. NB: I am 47.
rolenthedeep 4y ago
Every year I get progressively angrier as I have to scroll through a GODDAMN SPINBOX on my phone to select my birth year. Spinbox is great if you need to increment like 5 items up or down. Not 30+ and CERTAINLY not starting at goddamn 1900 and making me scroll down nearly 100 entries. People who do this need to go to jail. Forever.
pentagrama 4y ago
The UK Design System, who is known to have high standards on accessibility, does it like this: - Pattern: https://design-system.service.gov.uk/patterns/dates/ https://design-system.service.gov.uk/patterns/dates/ - Research: https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/ https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date...
toastal 4y ago
GitHub Gists are not a blog.

Who said browser "standard" date picker must support each and every use case?

bioemerl 4y ago
Is picking a date that is more than 20 years old a very odd use case? I feel like that should be something the UI can handle by default fairly easily.
- culi 4y ago
  Usually setting a default value is a good idea. That way it doesn't default to today's date. But the standard implementation does make it very easy to navigate to a different year as pointed out in the blog post. The issue was that elderly folks don't always find it obvious how to do so. However, looking at the alternative implementations from Chrome and Android,[0] I don't think any other browser has made it any more obvious... [0] https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U...

It took me a few seconds to parse the calendar view, but my first guess about where to tap was correct. And I expected the month and year rollers to move separately, which the article says is counterintuitive. But I don't own any devices that run Safari, so maybe it's inconsistent with the usual expectations of the interface?

ars 4y ago
Look at the UI: The grey bar connects the month and year, making it seem visually as if they would move together. It's a really terrible UI - why would the month and year both pop up at the same time? They should come up independently.
- michaelteter 4y ago
  I disagree about them needing to be separate. Once you have that panel open (and knowing how to open it is the problem), you see the two high level selectors that you need. If you only need one, then the other is harmless and will not confuse you; you will just not touch it.
  - pmontra 4y ago
    Of course it's better to have them moving separately, otherwise somebody would move 12*n times the month to move n times the year, before discovering that the year also moves, if they'll ever discover it. However a better solution would be to show only the month and only the year in two separate screens. No surprises, no chances of using the UI inefficiently. And for 12 months, you can show all of them together on the screen. Same for the years, you can show more than one at the same time and scroll many of them together.
    - deleted 4y ago
      [deleted]
    - michaelteter 4y ago
      Absolutely they should _move_ separately, but they can both be visible at the same time. I'm not suggesting that they are stuck together; that would be pointless.
      - bbbobbb 4y ago
        I think you're talking about slightly different things. The issue (which I agree with) is that the month and date "share" a continuous grey background which makes them seem connected. They can be visible at the same time, but it would make sense to me to separate the backgrounds as to indicate that they can be scrolled separately before touching them.
        michaelteter 4y ago
matheusmoreira 4y ago
I guessed correctly as well due to the blue arrow next to the date indicating further interaction was possible. I have decades of computer use experience though. I'm not sure if it's intuitive for every demographic or what an appropriate interface would be for our elders.
- emn13 4y ago
  Another anti-pattern this UI and most modern UI has is a dramatic reduction in the number of visual cues that identify interactivity. This is a system widget, and blue indicates interactivity... but that's almost it. The shape is often used for other purposes, such as for a breadcrumb, and actually the positioning makes it look more like a breadcrumb. Furthermore, it's going to be used from a website, and thus you can't rely on the fact that the rest of the site's colors will be consistent with this particular shade of blue on an icon indicating interactivity. It's all rather minimalist - and if a user catches it, that's fine, but if they don't, there aren't any fallbacks or additional hints as to what to do. Additionally, the icon seems fairly small from the screenshot - though on an actual device that may not be an issue. It may be too small to function as a good UX element.
Someone1234 4y ago
They're getting tons of customer service calls though. Objective data always beats subjective, and the objective data here is that a bunch of customers are confused and unable to use the website. I have no doubt that 9/10s of people reading HN would be able to figure this out if not more. But what is the figure like out in the normal/non-IT world? I miss when Microsoft had their accessibility research lab that tested stuff like this scientifically and released tons of great papers. We need more of that, I'd love for Apple to invest in stuff like that.
- masklinn 4y ago
  > They're getting tons of customer service calls though. Objective data always beats subjective, and the objective data here is that a bunch of customers are confused and unable to use the website. The problem is whether they're getting calls because the UI is objectively worse, or because there's an upstream selection issue: there are comments on the gist showing the UIs on other browsers are not fundamentally different, the biggest difference is that Firefox desktop makes it much clearer that the month/year is an active control, and the three desktop variants clearly allow textual input. They also indicate that their population is: > As such, most of our customers are in their 60s or older. So sounds to me the issue is not that Safari is worse than the rest (although it's no better either), but elderly generally get (or get offered) iPads for pretty obvious reasons, and so there's a huge selection bias.

bsg75 4y ago

Date pickers in general are terrible. Why on a form where I have type my email or shipping address can’t I also just type in a date ?

jonahx 4y ago
You can type the date in browser date pickers, including Safari's, even while the calendar is visible. But the UI is not superfluous for many use cases. Often, you want to see the whole calendar for context -- eg, to see the associated day of week.
- comex 4y ago
  > You can type the date in browser date pickers, including Safari's, even while the calendar is visible. Not on iOS (at least assuming you don’t have a hardware keyboard). The software keyboard does not appear and there’s no option to bring it up.
foolfoolz 4y ago
date pickers are great for selecting recent dates such as this month or next month. this works very well for hotels and stuff like that where you select multiple dates. i would rather date picker than type it in
CydeWeys 4y ago
It depends on the use case. For something like birthday, ID expiration date, etc., just being able to type in the correct values is the best UI. But for a use case like scheduling something in the near future (e.g. a flight, delivery, whatever), the calendar picker is superior because days of the week actually matter for this use case.
macinjosh 4y ago
Exactly, a plain text field that does best effort parsing. If you want to be precise you can enter "2022-12-01", but if you are in the mood you can enter things like "tomorrow" or "first of the year", or "June 1 1999". UI could even show the exact parsed date below the field as a hint.

Mistletoe 4y ago

I’ve encountered this nightmare and couldn’t believe it was real. At least I didn’t have to scroll as far as some older people.

andrewmcwatters 4y ago

Edit: I have removed this comment due to post-specific moderation downweighing. Further reading [1]: https://github.com/minimaxir/hacker-news-undocumented/issues/64 https://github.com/minimaxir/hacker-news-undocumented/issues...

throwawaaarrgh 4y ago
Does Safari have 90% market share and a proprietary plugin ecosystem now and nobody told me about it?
- Uninen 4y ago
  On iOS devices Safari (WebKit) has 100% market share.
tomxor 4y ago
I was a web developer when IE6 support was still a thing. Safari is the new IE, it may not be as bad yet, but it's right on track, cumulative regressions being the norm.
- bioemerl 4y ago
  I have heard they are improving in recent updates. I'm skeptical, very skeptical, but it's possible that Apple has heard all of this complaining and is trying to pivot to counter it.
- deleted 4y ago
  [deleted]
bioemerl 4y ago
When I hear Internet explorer I don't hear about the monopoly Internet explorer 6, I hear about the Internet explorer 11 that had to be supported for years and constantly just had to be different from everything else in a way that was frustrating and infuriating whenever you were trying to develop a product. Safari does not have the monopoly status, Chrome has that, but safari does have the IE 11 like constant fighting when you have to support it. Also Safari has monopoly status for everyone using an iPhone. The people on iPhone simply can't pick another browser, because Apple won't let them.

chazeon 4y ago

Now it seems the date picker, like the Safari one, is just meant to let you pick a recent date; for a faraway date like DOB, the weekday does not actually matter, so it is easier to ask the user to type. Just some quick thoughts after reading the article and comments.

culi 4y ago
The date picker only defaults to today's date if they don't specify a default value. Tbh I think setting a default value might actually have been a better solution. It's not perfect, but hacking together your own alternative could lead to a number of issues for folks relying on screen readers and other input devices. The `type="date"` gives a lot of semantic meaning that `type="number"` lacks. If you're gonna ditch it, I'd say at least use an existing external library that's been battle tested for accessibility.
- pishpash 4y ago
  What would a default birthdate be? That would span 80+ years. That's not going to work. Any time an input spans ~29k values, you better provide some logarithmic-time searching mechanism. So yes, Safari's date picker is f'ing dumb.
  - culi 4y ago
    Which of these do you think did it better? https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U... From left to right, that's Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop --- The post specified that the users are mostly senior. Regardless of what they go with clearly 0% of their users benefit from leaving it to default today unless they somehow figured out how to sell smartphones to fetuses
    - phillipseamore 4y ago
      Also depending on the product and legal requirements the latest possible DOB might be 13, 18 or more years ago.

jiveturkey 4y ago

the rolling wheel thing is terrible for another reason. your finger obscures the value when you roll back (up). it’s horrid

culi 4y ago
And lacks the semantic information that's used by screen readers. If you're gonna ditch the native elements you should probably use an external library that has meticulously worked through all of these issues
- andiareso 4y ago
  Agreed. I'm an iOS user primarily and have been since almost iOS 1. Some android intermittently. I have no trouble figuring out how to pick by year because the rest of iOS follows a standard UX. It seems more important to me to support the native accessibility of the phone than use an external UI vendor. I am a huge advocate of family members and elders to purchase devices they are comfortable operating. This is why my grandparents primarily use their desktop computer for any important things, and their iPhones for messaging/video chat.

antris 4y ago

The most straightforward solution I can think of is to split date inputs by context. Create an `<input type="dob">` that is tailored for picking a date of birth from 1900-today. "date" is too vague of a context to create an UX that works well in all the different contexts. It'll always be bad in some contexts, if it's trying to solve all the use cases.

noduerme 4y ago
This. In my form generation library (that I maintain and use for client apps) there are two types of datetime input areas available. They take the same arguments for ranges and single/double dates, with or without time, and at what frequency of time (e.g. hourly, 15 minutes, etc). One wraps a calendar library (daterangepicker) and attaches it to the form; the other generates a responsive text input with placeholders and danger labels. Their outputs are both returned as Moments which can be sanity checked, tested against other constraints and shipped back out as YYYY-MM-DD HH:MM:SS to the database.
crabmusket 4y ago
This would be good, or maybe use type=date and inputmode=dob? As it affects the method of inputting what is ultimately still a date.

drstewart 4y ago

Date pickers are one of the worst interfaces on the web. Everyone seemingly has a wildly different design and they're almost always hard to use and unintuitive. And forget about if you're picking a date _range_

noduerme 4y ago
I've been using daterangepicker [1] for ages, and it's one of the reasons I still just default to jQuery for web apps (the other being jQuery's custom event chain). Works well, very readable, easy to pass functions to disable individual dates which is important in reservations apps, ties in nicely with moment.js. More to the point, finding a decent calendar that didn't baffle users was such a pain for so long that I never want to have to do it again. And of course, with native browser components who knows what your user's going to see next year? [1] https://daterangepicker.com https://daterangepicker.com

deleted 4y ago

[deleted]

lucb1e 4y ago

> I chalked up the "New IE" stuff to annoying little CSS issues Here, too, Safari is the cause of 2/3rds of the lines of exceptional UI code now that Edge switched to a compatible render engine. Or blocks features altogether. All major browsers settled on doing things a certain way and then you remember that you always need to check Safari and of course they want it another way, so you get to re-do the work and duplicate your code with a comment "//because safari wants x to be done this way". I had less trouble with MSIE6 back in the day, though I can't rule out that I did less fancy things back then. These things are not like "oops we render it differently by chance", it's conscious choices like not supporting SVG or being able to read file names in JavaScript (can't have javascript-based upload progress bars or local file encryption if you want to keep the filename; need to encrypt on the server and have the server report progress back via another channel).

kiratp 4y ago
> now that Edge switched to a compatible render engine What is the definition of “compatible” here? The point of “one specification, multiple implementations” is to explicitly leave the door open for slightly deviant implementations.
- lucb1e 4y ago
  My definition of compatible is basically what I described in the comment: "[not being] the cause of 2/3rds of the lines of exceptional UI code". There's the occasional situation where Chromium doesn't support something or Firefox doesn't support something, but it feels like Safari has double the rate of both combined.
- fbdab103 4y ago
  The computing industry has a pretty poor track record of multiple-implementations ever agreeing or being a net positive for the user. Instead it always seems to devolve into pile-of-hacks for platform X and pile-of-hacks for platform Y, regardless of what the specification says.
Spivak 4y ago
Can any browser that is not a reskin of Chrome with feature and bug-for-bug parity actually satisfy web developers at this point? If Firefox had the marketshare of Safari and was mandatory to support because they were a major platform’s browser devs would be cursing their name too but with a different set of things that aren’t exactly like Chrome. It really does feel like devs are literally developing against Chrome with not even so much a thought at cross-browser compat or a glance at caniuse and then taking their finished site and then working backwards from there on other browsers cursing the compatibility issues when they could have avoided it entirely had they started with a cross-platform subset of browser features. Just the same as how cross-platform native development works. Hell someone did all the hard work for you https://github.com/amilajack/eslint-plugin-compat https://github.com/amilajack/eslint-plugin-compat Then multiply by all the npm packages blindly imported that were developed with the same methodology and I see where the rage comes from.

gedy 4y ago

This is one of those basic UI things that are missing/bad in native HTML controls, and why we end up having to implement this stuff in JS.

culi 4y ago
and inevitably those JS implementations almost never take into account screen readers. I think we should use the platform as much as possible for this reason 90% of the annoyance could've been dealt with if they had just chosen a default date value of, say, Jan 1960 or so.
- SCLeo 4y ago
  ...which means I just need to click the ">" a couple hundred times.
  - culi 4y ago
    Well I mean you don't. And you know that. And 95% of internet users know that. It's just an issue with elderly folks not being familiar with this UI Maybe the real solution is a simple explanation for how to use a date picker component. It'd help those users not just on this site but on many other sites in the future. Tbh I don't really know what improvements could be made to the picker itself. It looks pretty consistent with the implementation of most other browsers and OSes and even most native components I've seen I'd love to hear actual thoughts on improvements though

cwillu 4y ago

“It's not fancy, but it works. In fact, it works because it's not fancy.” is a lesson I wish was drilled into designers.

trarmp 4y ago

tl;dr elderly can’t find the year picker in the iOS version of the date picker pop-up. I feel like the data is flawed. This is (supposedly) 1/3 of tech issues raised by customer support — how many of which are total?

iknowurmum 4y ago

[flagged]

satvikpendem 4y ago

Now you understand why people use JS-based UI elements.

tareqak 4y ago

What do date pickers in other browsers look like?

lucb1e 4y ago
The Android one always makes me chuckle when some obscure site decided to use it. It's so unexpected to get a big pop-up in an entirely different UI style as the rest of the website suddenly, and when I realize what monster I now have to fight, idk it's humorous to me. It also differs between versions but hasn't gotten better. I have gripes with Safari, but date pickers isn't one of the things only Safari struggles with. An image search for 'android date picker' brings up at least three different designs: https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/kJqln.png https://i.stack.imgur.com/kJqln.png
- culi 4y ago
  thanks for the screenshots It seems like the first screenshot is `type="time"` and the second and third are `type="date"`. But I don't know if those are native components or the browsers defaults. Would be useful information
- bioemerl 4y ago
  And I think all three of those are out of date, the Android 13 one is totally different as well.
  - lucb1e 4y ago
    Time to update the image search results! Sharing is caring ;)
    - bioemerl 4y ago
      I wish, I can get the screenshot but there's no easy way to get that on the internet

alxmng 4y ago

Just have three separate drop downs for year, month, and day. Problem solved. Unambiguous. Bug free. Works without any extra JS.

fortran77 4y ago
Then people will pick June 31
linsomniac 4y ago
Year drop-downs are annoying for things like DOB because there are 100 choices to scroll through. Reminds me of my Humana insurance app where some questions had drop-downs of literally 1,000 values, so I'd swipe and swipe for several minutes, but if I swiped outside the box by a little bit, it would collapse and I'd have to start over. Eventually found that I could select a part-way value and then start swiping again, and if it collapsed I would at least go back to the part-way value. So, typing in Y/M/D is better in most cases for DOB than drop downs, unless maybe it's dropdowns for [YYY][Y], then [MM] and [DD]? Or how about start with "How old are you" and then get me most of the way there on the picker? :-)

mikl 4y ago

If you think Safari is the new IE, you have definitely forgotten (or not experienced) how bad things were with IE6. They didn’t just have a few bugs in their browser implementation or were slow to implement new features. Basic, crucial CSS features were broken. Microsoft didn’t add any new features to the browser about a decade, basically holding the entire web back to the standards of circa year 2001 until it was finally safe to drop support for it almost a decade later. And furthermore, Microsoft weren’t pushing users to upgrade to the latest version, so we had to support older versions of IE long after their replacements were released. I understand wishing that Safari would be better, but luckily the Safari team is much more on the ball than the IE team ever was.

mmis1000 4y ago
A few…? It's not my experience as a web developer. It's 'a lot' at best. And not only in js, but also in css or literal anywhere you might interact to. It always requires a few workaround when I finished the page in other browser. Firefox or Chrome, in the other end. If your page works on one of them, it will pretty much just work on the other. Safari is probably 50% of my bug ticket, almost equals to every others sums together. Write a page for safari really reminds me the age IE is still a thing.
- culi 4y ago
  Interesting. I've run into issues with the way Safari handles transparency values, but don't actually come across many other Safari specific issues these days. Safari has been pouring a lot of effort into improving their web compatibility recently and I feel like it's already making a difference I'd be very curious to hear some common issues you have to deal with
PpEY4fu85hkQpn 4y ago
I agree. The people who call Safari the new IE probably don't know what zoom: 1; does and how fundamentally broken so many basic things were in IE6.
makeitdouble 4y ago
You have a point, yet I feel the situation isn't as bright as you make it look. I think Safari isn't broken in the ways IE was, because IE always had comptetitors running along it and pushing the enveloppe where Microsoft was pulling the brakes. Firefox and later Chrome were handicaped in adoption, yet had little to no limitations on the features they wanted to add. In comparison no other browser can run with the same privileges as Safari on the phone, while the iPhone is a dominant platform. So there just isn't the same space to innovate in a profitable way. The only company who can afford pushing the envelope is Google, and at this point their only real competitor is Firefox, that they basically pay to keep alive. They also have little incentve to really push the web as it doesn't impact their bottom line (native app ads also go in their pockets afterall)

michaelteter 4y ago

Date widgets are almost universally bad. Most I encounter are unintuitive or outright buggy. However, OP complaining about usability and the providing three text fields with the MM and DD being placeholders is terrible. Normally placeholder-only labels are a bad idea, but this is especially true when the month and day fields have different order depending on the region. The moment you've got [1] [4] [1980], you no longer know which is month and which is day. And do they swap these placeholders and entered values if you change the country from US to an EU country? The lack of progress in the tech world in making consistent user interface standards is disappointing. We should not be still struggling with these topics (and as users we should not be suffering). Tax time, trying to fetch reports from banks/exchanges is one of the worst recurring experiences...

culi 4y ago
Actually the Firefox and Chrome date pickers look... exactly the same I don't think this is so much a problem of UI not being consistent as us just not providing resources to help elderly navigate the web better. Also, they could've just... set a default date of like Jan 1, 1960 and saved 90% of their users a headache <input type="date" value="1960-01-01" /> Edit: ok, not "exactly" the same but functionally very similar. Or at least they'd have the exact problems pointed out in the post. See for yourself: FF: https://blog.nightly.mozilla.org/files/2017/06/input_date_calendar_1.png https://blog.nightly.mozilla.org/files/2017/06/input_date_ca... comparison: https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format&w=1600 https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U...
- RussianCow 4y ago
  > Also, they could've just... set a default date of like Jan 1, 1960 and saved 90% of their users a headache I'm not sure how that really helps? Moving multiple years is still going to be a huge pain, so you're only really saving people who have a birthdate in or very close to that same year.
  - culi 4y ago

laserdancepony 4y ago

Some commenters seem to forget what the MSIE monopoly was all about. About not keeping up with emerging web standards? That's a misconception. That was a result of Firefox interrupting the market. MS deliberately added non-standard crap to get everyone off the rails when not using IE. That's why websites often showed "Best viewed in 1024x768 and 16M colors using Internet Explorer". And that is a remark I see more often every day. And it's Chrome being recommended. Remember why MS switched from EdgeHTML to Blink? Because Google would hamstring EdgeHTML at every corner on their services. Not completely break it, but make Gmail or Youtube a tad slower than in Chrome. "Don't be evil" my ass.

deleted 4y ago
[deleted]
MrVandemar 4y ago
> Remember why MS switched from EdgeHTML to Blink? Because Google would hamstring EdgeHTML at every corner on their services. Not completely break it, but make Gmail or Youtube a tad slower than in Chrome. I'm not exactly condoning, nor condemning, that behavior, but there's a little part of me that wants to say to Microsoft: "not so funny now, is it?"
- culi 4y ago
  I know Microsoft was notorious for not playing nice with other browsers but I thought that mostly had to do with them deciding to go their own way with non-standard features or simply not implementing standards they don't like Is there documented evidence that Microsoft stooped this low as well? Did they purposely make their sites not work as well on other browsers?
emptysongglass 4y ago
Google also did this to Windows Phone, actively sabotaging the platform by refusing to allow Google Maps to load in WP's browser and repeatedly disabling Microsoft's YouTube app. It was Google at its worst for me, together with their shenanigans around subtly breaking FF on their web products throughout the years.

neilv 4y ago

I once developed an unusually complex HTML5 Offline app, and found that Safari even had regressions on some basic standard behavior that I needed. I know there's good faith work around WebKit, etc., by smart and genuine people. But it was easy to wonder (especially with the anger that comes from being existentially threatened) whether some element at Apple wanted to make Web apps work badly, to keep the proprietary App Store party going. (I did pull it off successfully, but only with much heroics.)

Groxx 4y ago

I absolutely cannot stand those scrolling selectors. They're a UX nightmare in every possible way - literally every one of them would be better replaced by either a normal list, or (when they're numbers) a number input field.

kalleboo 4y ago
iOS used to use those exclusively to pick times for alarms and such, and I could not for the life of me understand why I'm spending all this time spinning wheels up and down trying to get it right when just typing in "1030" is done in 4 taps
- mcintyre1994 4y ago
  If you’re not aware the iOS time spinner has a hidden number input that comes up it you tap the wheels. So one extra tap then 1030 will get you what you want. Impossible to find without being told it’s there though. And as far as I can tell there’s no date equivalent.
  - Groxx 4y ago
    Android too, though the tap area is much smaller than it should be for what I am sure are completely defensible accessibility reasons.

ranman 4y ago

This is why we can't have nice things.

robocat 4y ago

Solution: add a transparent native date picker transparently fitted to a drop-down/calendar icon on the right of the inputs. Requires JavaScript to sync value between native date picker and the xx/xx/xxxx inputs, and it requires some CSS to make the picker “invisible”, and tabIndex to -1. This gives users access to their localised date picker (which can be really important), and may or may not help accessibility. Not DRY, but it solves a bunch of different problems on different browsers (e.g. you can’t tell if a browser has a broken date picker). This technique also fixes the issue where a Safari Mobile date picker defaults to todays date, for example when using > to move through existing dates that are empty (clicking Done unobviously picks today - often not what you want). Terrible UI for fields like birth date or employment end date. Although depends a bit on whether a blank date makes sense. Oh, and be really careful of type=number on Safari - it silently fails. inputmode=xxx can help, but it has weird differences between devices last time I looked (versions, Android, iPad etcetera). My mum repeatedly failed to enter a dollar value into a type=number, because she was entering a thousand’s comma (the UI showed $ and , everywhere for numbers so it is a sensible mistake to make; although Safari will display the entered number in the input field the .value==0 —— arrrgh silent failures are hideous). I hate Mobile Safari - buggy, impossible to get bugs fixed, relatively poor standards support e.g. still need -webkit- prefix for some standardised CSS from a decade ago. Oh, and you end up with people using obsolete phones stuck on old Mobile Safari versions. Android updates Chrome even if it doesn’t update the OS (although Android also has the problem, it is less of a problem).

culi 4y ago
Here's a simpler solution that's even safer for screen reader accessibility: use the platform Just set a default date and it won't default to today.
- bruce511 4y ago
  When the date spans a wide possible period, like birth date, this approach doesn't solve the root problem.
  - culi 4y ago

saagarjha 4y ago

If I remember correctly WebKit replaced the 3-wheel date picker with this recently because people thought that was too skeuomorphic. Guess they can’t win?

culi 4y ago
It's also exactly how Firefox and Chrome's date pickers look. So they were probably to up their web compatibility game to look like everyone else and give users a more consistent UI
- masswerk 4y ago
  Some of these new (unified) UI elements are just awful. My pet grievance is the range input, which is now filled by an accent color from the left (start) up to the selected value. Meaning, if you provide your users a range from -200 to +200 to select a value from, and a user selects a value of 2, this represents a selection of 202 units, which is apparently the real meaning of the number 2. (As is, Safari is the only major browser not participating in this nonsense.)

yellow_lead 4y ago

I have story about this one too. When I went to take a covid test ~1 year ago, they had an iPad for self registration near the reception. I filled it out, noticed this issue and sat down. An elderly lady came up and started going month-by-month back to her birthday year. I had to get up and help her. It's crazy Apple hasn't fixed this.

SCLeo 4y ago

At this point, I am convinced, all datetime inputs should be done with just text input. The moment I figured out I can click the text to enter numbers manually on my phone's timer, I never tried to scroll the stupid rolling thing to get to the correct time.

Someone1234 4y ago
Is the text input MM-DD-YYYY or DD-MM-YYYY though? Or YY instead of YYYY? Or no separator? How do min/max dates work? Left to Right Vs Right to Left text input? Without user experience testing "I'm convinced" says more about the person saying it than the reality of what users in the broad will find easier and what will reduce friction.
- 7jjjjjjj 4y ago
  YYYYMMDD
- SCLeo 4y ago
  Just label it? or split it into 3 separate labeled fields? Obviously not one singular input without any explanations/labels. :/ (Seriously, what is the last time you encounter a text-based date input that is not clear on the format?) Stop attacking the strawman. I am obviously talking about using text inputs as oppose to rolling selector/click to increment thingy (as shown in the article). > Without user experience testing "I'm convinced" says more about the person saying it than the reality of what users in the broad will find easier and what will reduce friction. The article clearly shows using the increment buttons/the rolling selector is causing problems for users. That is, my friend, user experience testing.

kshay 4y ago

One interesting alternative (that I can’t remember actually encountering, but just occurred to me when reading this) would be to have an Age numeric field before the calendar, entry in which would jump the calendar to the corresponding birth year.

rikschennink 4y ago

People remember their birthdate as a string of numbers. So why use a date picker for this and not go with 3 number inputs which would be a lot easier to enter your birthdate in.

TrueGeek 4y ago
This is what they ended up doing. However, they also mention that many of their users are on iPads. On iPad there is no numeric only keyboard so it's not the best experience. Not terrible, but it's annoying that iPhone has a numeric keyboard but on iPad it's just a full keyboard, even when you request numeric only. We ran into this same issue and ended up just creating our own keyboard to make input simpler.

RandomWorker 4y ago

I like this as an alternative https://github.com/mikepage/headlessui-datepicker https://github.com/mikepage/headlessui-datepicker

throwaway1777 4y ago
How do I change years? I couldn’t figure out how to quickly enter my birthdate with this.
pnw 4y ago
Has the same problem as OP - no obvious way to select a birth date without many interactions.
hollowturtle 4y ago
how this can be a good alternative? I doesn’t let you insert the date manually on mobile and there is no way to pick a different yea
culi 4y ago
Is this a troll? At least the native picker allows you to skip between years. Seniors are finding a hard time figuring out how to use it, but at least it's possible This implementation literally forces you to use the arrows...
chromatin 4y ago
As constructively as possible: This is awful.

kuon 4y ago

The only correct date widget is a second counter from epoch with a + and a - button.

mbork_pl 4y ago

While I don't claim that Org mode's `org-read-date` is ideal, I have yet to see a better date input UI. Also, ISO-8601 not being universally adopted is a shame.

Animats 4y ago

This is a curse of web design - you have to guess if it's clickable. You're not allowed to have boxes, or lines, or raised buttons. It's almost a dark pattern. It seems to be a holdover from mobile, where unmarked buttons were a thing, but the buttons were bigger and the UIs simpler. Now they've migrated to busier interfaces and become smaller. Date pickers are terrible if not near the current date. Ones for long-term data sets where you set the start and end date are a huge pain. Like getting inflation data starting in 1960, or coronavirus data starting in 2019.

culi 4y ago
As pointed out in the post, it's pretty easy to switch between years. It's mostly a matter of it being unintuitive. Unfortunately this isn't at all unique to Safari. See this comparison of implementations: https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U2YQnUMato21MzzbR.png?auto=format https://wd.imgix.net/image/vvhSqZboQoZZN9wBvoXq72wzGAf1/uh0U... From left to right: Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop I think at minimum they could've chosen 1980 or something as a default. 0% of their users were born today so not setting a default makes no sense
- tapland 4y ago
  Since when would arbitrarily setting the default to the 80s and reducing the amount of needed clicks from 925 to 465 even be a suggestion? We're actually expecting users to follow through on that?
  - culi 4y ago
    No I wasn't suggesting it was the solution. Just a bare minimum. 0% of their users are born today. 100% are likely born with 30 years of 1980 Yes I agree, that ideally the users would find it more obvious how to use the date picker properly and not just tap the left and right arrow to navigate However in the screenshot I posted, I don't think any of the solutions have made this functionality very obvious. Except maybe Firefox lol. But Chrome's implementation on mobile seems even worse than Safari's! What would you propose as a solution?

spapas82 4y ago

The pick date widget is (at least for me) a solved problem: Use the jquery ui datepicker. The fact that a lot of people prefer to avoid using jquery (for no particualr reason) and all its widgets and instead try to re-invent the wheel (in a much inferior way) blows my mind.

Mave83 4y ago

Just never use date pickers for birthday but for short term date picking like scheduling an appointment. Date input can be DD, month in textform drop-down, YYYY and you won't have any problems anymore. I don't understand why it is so hard for devs, PO,... to understand this :)

sdiq 4y ago

A different pet peeve of mine on iOS is the USSD menu which is center-aligned, and i find that very ugly. Maybe the usage of this menu isn't universal but for someone from a developing country, we use that like a million times a day. Mostly we are choosing a menu item to continue with a dialogue and the numbers are not aligned.

andiareso 4y ago

I feel like this is such a silly post. Using the date input field should always adhere to the UX of the browser OS. If I'm on Android and I spend my whole life learning the UX of Android's date picker, wouldn't you want the web's date picker to follow the same UX? This is less a problem the website should solve and more of a problem that end-users need to learn. If my grandma doesn't know how to use a feature on her phone you bet she is contacting a family member first. Maybe we should encourage our family to use tools that they are proficient in... I'm an iOS user majority of the time and it is very intuitive to tap the text with the > symbol. Like others state, Android's UX can be just as confusing. I'd say you're following UX best practices and are supporting the native accessibility features of the phone so :shrug:... close and move on

shashashasha___ 4y ago
This approach will not help your product succeed > This is less a problem the website should solve and more of a problem that end-users need to learn.

friend_and_foe 4y ago

So I'm not the only one. It's not just limited to Safari. Any and every date picker that doesn't allow text input of the date is ridiculous, those of you that design these things that call yourselves designers should find a new career path, I recommend selling cologne out of your trunk at a gas station, and if you're involved in this blatant and hostile devolution of interface I hate your guts. This particular one is my number one hated trend in UX, by a high margin. It is the most absurd set of design decisions I have ever seen, I can't see how it would not be malicious, it shows disdain for your users and you should be ashamed of yourselves. Fix this one and then we can talk about the others.

deleted 4y ago
[deleted]
culi 4y ago
I think it's just Chrome and Safari's mobile versions that "don't allow" text input. And they actually do allow it. But most users don't have a keyboard hooked up to their phones The issue is that with mobile something has to pop up. So browsers need to make the decision between an onscreen keyboard or the built in pickers (this holds for color pickers as well) If web developers don't want any of this, they could always just use `type="text"` instead of `type="date"`, but this leads to other accessibility issues and means you have to write a ton more code for proper validation
- friend_and_foe 4y ago
  Yeah, but from a user perspective text is superior to date. I don't even know a non technical person that doesn't curse under their breath when a date picker pops up. A simple "date (DD/MM/YYYY)" or similar format above a text field is a blessing these days, but I'll take anything over a date picker. A good date picker would let the year drop down somewhere, show calendar view, and allow text input of the date. That's the minimum requirements, a month drop down would be nice too. Sometimes I run into date pickers that have some unintuitive way to page years, one click at a time of course, and while I dislike that, at least I can move back by a year, it doesnt ruin my day. Imagine someone deciding that to input the exact time of something you'd select a drop down containing Unix timestamps, one option for each second, that's probably the only thing I can think of that would be more frustrating and senseless than the current state of affairs, and even then perhaps not because at least it's a dropdown you can scroll on. Literally a scrolling dropdown of all dates back to 01/01/1900 would be a superior UX to the current common date picker design.

leonidasv 4y ago

I think there's a hidden issue there: it's 2022, almost 2023, and we still don't have standardized auto-fill forms. Browser auto-fillers somewhat work, but because every website is implemented so differently, I always end up having to type my address number or birthdate again. I can't see why there isn't an standard semantic web standard for this. We shoukd standardise how common fields should be named and their datatypes set once and for all. Example: set on a field for month AND a field for day. No more MM/DD vs DD/MM issues. One-click and it's unambiguously filled by the browser. Seriously, what's preventing this from happening?

michelb 4y ago
I think my Safari 'autofill forms' feature fails 4-5 times in a year? Usually on a really shitty site or one that thinks it's clever. If you build your form according to standards with autofill hints you should have very little problems.
dontwearitout 4y ago
Sounds like a job for a LLM browser plugin :P
scrollaway 4y ago
There is a standard for this. If you google HTML5 autocomplete attribute you’ll notice all the possible autocomplete attributes and those cover pretty much just about anything. To my knowledge, the major browsers implement nearly all of them. What’s preventing this from happening? Nothing, clearly, devs just don’t implement it because they don’t know about it, and they don’t know about it because they’re busy learning about or implementing something else. How would you universally communicate to everybody that this is now a thing? How long will it take you to fix 90% of the forms out there that were set-and-forget five years ago? Besides, for most it’s easier to use oauth with google or whatever and automatically get the name and birthdate from there (of course, often enough, they have the non completed form anyway…)
- rieTohgh6 4y ago
  > use oauth with google or whatever and automatically get the name and birthdate from there After recent story about github ban: https://news.ycombinator.com/item?id=33917962 https://news.ycombinator.com/item?id=33917962 anything that asks for more that email is a instant 'close tab and never return' for me. And even before, there is no way I am allowing any site to access may date of birth (despite it being fake one anyway) And going back to "autocomplete" - it looks that browsers "know better" than developers: https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off https://stackoverflow.com/questions/12374442/chrome-ignores-...

mlindner 4y ago

As a long time Apple user, the solution advertised in this is actively worse. Typing in a date manually is absolutely slower than quickly flicking to the year and the month and then touching the date. Please don't force users of mobile devices to type in a date.

culi 4y ago

If anybody else is now thinking about alternative possible designs and wants to explore the way different design systems do it: https://component.gallery/components/datepicker/ https://component.gallery/components/datepicker/

pxeger1 4y ago

Here's how the UK government website's design team recommends doing it: https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/ https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date...

zote 4y ago
Was going to share that, their blog is a nice resource on the topic of accessibility

yardstick 4y ago

The worst is when the date picker won’t let you select a date in the future, like a birthday, and so it’ll rubber-band your selection back to a valid date. That’s all fine, except it does this validation on every change, rather than when the user has finished entering data. So if today is 27th Dec, and I wanted to enter 1 Jan 2000, I have to first change the year and only then is it save to change the day and month fields! What’s worse is the year appears last/right hand side, so as we work from left to right the first thing the UI has you pick is the day, not the year. I simply cannot understand how these issues weren’t addressed before release.

kevincox 4y ago
I have this problem with thunderbird's calendar. It won't let you set the event start before the event end, even for a second while editing. So I have this common problem. 1. Have an "evening event" from 16:00-23:00 2. The start time changes (or most likely was previously a generous placeholder) 3. Update the start time to 19:00. Thunderbird automatically adjusts the end time to preserve the length. Now it is 02:00 the next day. 4. Adjust the date back, however after the first click it closes the datetime picker and throws an error. 5. Try again, select the future date to get past the date picker into the time picker, then select the correct time. 6. Open the datetime picker again, select the correct date and the same time. This is a particularly egregious example because the datetime picker is combined and aborts half-way through after you select only a date.

Obscurity4340 4y ago

It would be nice if Apple had like a DateKit or something that standardized and nudged developers to integrate natural language date entry across the OS. It needs to stop being a blockbuster feature that lets companies/products like Fantastical that bait and switched their paid users limit their competition. If Apple can spend the amount of time on things like LiveText and their creepy NeuralHash program, they can take 5 seconds to implement easy date entry.

WickyNilliams 4y ago

Even if safari had the greatest date picker ever conceived, don't use date pickers for date of births. They will never be better or faster than typing your DOB. Pickers are best for choosing dates that aren't known ahead of time, or where you need to know how a date relates to week days / week numbers etc. The proposed solution of using number inputs is also not great, since they have a host of accessibility issues [0] You want a regular text input with inputmode="numeric" and a pattern attr. This will give the correct numeric keyboard on mobile, and work just as well in desktop, without any of the associated issues. I've built several date pickers, I know how hard they can be to get right. But they shouldn't bbw blindly used for any date value, they should be a deliberate choice [0] https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des...

masklinn 4y ago
> Even if safari had the greatest date picker ever conceived, don't use date pickers for date of births. They will never be better or faster than typing your DOB. Pickers are best for choosing dates that aren't known ahead of time, or where you need to know how a date relates to week days / week numbers etc. Interestingly the old iOS datepicker was actually pretty good for DOBs: the old picker just gave you three scrollwheels with the year, month, and day (possibly in your locale order), scrolling through the years was a very quick thing: just flick the years wheel and off it goes. A touch finnicky to adjust, and maybe not great for close picks because of the lack of context. The issue here is the "new" (iOS14) calendar-based pickers, which give you, well, a calendar, and hides the quick month/year direct selection behind a dropdown (and as the essay notes without a day wheel, so now you have to open the year/month selector, jump to the right one, confirm that, then select the actual right day on the calendar view). Especially given the flat design language as it's really not obvious the month/year and their arrow is an active dropdown.

mozey 4y ago

I built an example that uses separate select tags for year, month, day, and time. The benefits of doing this are: - Standard elements that work everywhere - Easy to refresh the available options after a date change - Mimics the "rolodex" behaviour to quickly find any date/time The libs I used are arbitrary, won't be hard to rewrite using only built-in Javascript, or any library / framework https://www.mozey.co/demo/ts/examples/datepicker/ https://www.mozey.co/demo/ts/examples/datepicker/

scarface74 4y ago

Anybody going to address the elephant in the room that this startup is probably fraudulent and peddling pseudo science? https://geneticure.com/ https://geneticure.com/ Does anything they say read like it’s been backed up by peer review studies?

robertakarobin 4y ago
I'd have the same concerns. Fortunately our research is in several peer-reviewed journals, like the Lancet and the Journal of Clinical Medicine. We list our research on our homepage: https://geneticure.com/#article https://geneticure.com/#article
- scarface74 4y ago
  So let’s say I use your service, then what? Do I hypothetically take the results to my doctor and will they prescribe drugs based on the recommendation? This is semi relevant to me, I do have high blood pressure at 49 that’s well control with what amounts to a standard diuretic (Hydrochlorothiazide).
  - robertakarobin 4y ago
    Yep, that's exactly correct. We lay out the process at https://geneticure.com#howitworks https://geneticure.com#howitworks, but you've already got the idea. I'm happy to answer any questions — if you email support@geneticure.com I'm one of two people who looks at support/info requests.
    - scarface74 4y ago
      I’m going to now admit that I don’t know enough to know how valid the testing is. But, I can say that on an individual level it is easy enough to test whether a blood pressure regimen is effective. Blood pressure is easy to test at home and the effect of a blood pressure regimen can be observed almost immediately - within 24-48 hours. So if the doctor recommends that I change drugs and measure my blood pressure daily under the same conditions, we can judge its efficacy. In other words, I would be more comfortable with experimenting with different approved high blood pressure medicines than something like cancer medicines based on a startups recommendations.

dutchbrit 4y ago

Talking about dates and Safari, be aware of this in JavaScript. new Date('12-27-2022'); works in Chrome but returns an invalid date in Safari & FireFox. new Date('12/27/2022'); works for all browsers.

masklinn 4y ago
The first format makes no fucking sense to start with, the US is the main country which uses mid-endian dates and it doesn't use "-" as a separator. But beyond that, don't use `new Date(string)`: the only spec-defined format is a restricted ISO 8601[0], though the horror show that is RFC 2822 datetimes is conventionally supported by everybody because it's the standard stringification (Date#toString). Everything else is implementation-defined, and likely heuristic. [0] https://tc39.es/ecma262/#sec-date-time-string-format https://tc39.es/ecma262/#sec-date-time-string-format

alistairSH 4y ago

Hell, I’m half as old as those customers and the date-picker is still annoying AF for birthdays or really anything that’s not this month. It’s just a shit design, likely created by some PM who couldn’t think beyond their weekly work meetings.

Waterluvian 4y ago

I’m shocked that there’s such a myopic view of “date” as a type in design that we don’t really see concepts such as “expected date range.” Am I expecting an input that’s years ago? Recent? The future? These would all be very different widgets if designed well.

jmull 4y ago

You can't really blame Safari for the fact you shipped a site that requires users to tap a button hundreds of times. That tells me you didn't once use your site the way many of your users do. That's completely on you.

joeconway 4y ago
Or that they shipped and tested this page prior to the release of iOS 16 as that’s when the UX of the iOS date picker changed to this abomination
- jmull 4y ago
  That's just not true.

bloggie 4y ago

Do you need to know the exact birth date or just the birth year?

shadowgovt 4y ago

Color picker also. The crayon box is crap. Honestly, this aspect of Safari's UI (the default form input widgets for complex values) is severely under-worked and in desperate need of an overhaul.

wmeredith 4y ago

Safari's Rolodex date picker sucks out loud. I'm so glad they are getting called out on this.

emadda 4y ago

I use a very simple drop down prefixed with ISO week numbers here: https://stay100.app https://stay100.app It looks simple and basic, but <select> works very well on all devices.

thepra 4y ago
Thanks no thanks, what an abomination.

seydor 4y ago

Android date time picker is also fancy but icky imho. I don't know how it performs though Honestly , 3 select boxes are so easy to understand even if they are somewhat clutter

elzbardico 4y ago

Call me an old curmudgeon, but the only place where date pickers make sense is in scheduling applications. It is nice to see a calendar when picking a date for an Airbnb booking. Picking a date for a future event is an entirely different use case than choosing a date in the past. The former is more of an exploratory activity; you are interested in things like the day of the week, proximity to holidays, availabilities, and all kinds of information, whereas a visual depiction of a calendar conveys valuable information, information that is entirely superfluous when picking a date in the past. But registering dates is slow and cumbersome, more so if those dates are removed a few years ago, like DOBs and other similar kinds of dates. Also, anything past the current month is a chore; manual input is usually faster and less error-prone.

jlelse 4y ago

It's not just the date picker in Safari. iOS in general... I don't get it why I need to uninstall and reinstall an app from the app store when I want to clean the app's data like I can easily do on Android. Why is there no way to clean caches? Instead a big chunck of the storage is filled with "other system files". And the keyboard is so error prone as well, I always do spelling mistakes or need hours to type short texts. At least it's just my work phone...

anotheryou 4y ago

The solution works until you expand beyond the US to people with sane date and unit convention :P DD/MM/YYYY is the way purely safari's fault, makes sense otherwise to have this on the browser side. Next challenge: A sensible input for a date range with optional time of day. Have not seen a good one yet I think, especially when you try to correct your made input.

toastal 4y ago
Sensible is the ISO 8601 standard with the RFC 3339. It's already been adopted by tech and governments and keeps all time big endian (bonus: it's alphabetical too). But LOL AmErIcaNs month first, right?
- anotheryou 4y ago
  this is about ui, not data storage
  - toastal 4y ago
    Yeah, and it's easier to parse big endian all the way down. It doesn't tend to cause the same ambiguities that make folks have to double take to understand the data.

stalfosknight 4y ago

Safari's date picker really isn't that hard to use.

SergeAx 4y ago

Even worse: I saw several websites, where this exact UI was carefully replicated with HTML custom control. NB: I am 47.

rolenthedeep 4y ago

Every year I get progressively angrier as I have to scroll through a GODDAMN SPINBOX on my phone to select my birth year. Spinbox is great if you need to increment like 5 items up or down. Not 30+ and CERTAINLY not starting at goddamn 1900 and making me scroll down nearly 100 entries. People who do this need to go to jail. Forever.

pentagrama 4y ago

The UK Design System, who is known to have high standards on accessibility, does it like this: - Pattern: https://design-system.service.gov.uk/patterns/dates/ https://design-system.service.gov.uk/patterns/dates/ - Research: https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/ https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date...

toastal 4y ago

GitHub Gists are not a blog.