r/badUIbattles • u/NinjasPounced • May 16 '23
4-click-max birthday date picker OC (Source Code In Comments)
250
u/NinjasPounced May 16 '23
Source: https://jennica.github.io/datepicker/ . Did not fix all the leap year bugs.
99
u/56kul May 16 '23 edited May 16 '23
I don’t know how, but I failed to get to my birthdate.
I got the month and year right, but the day was far off.
80
u/evestraw May 16 '23
also had it first time. but that was because i didn tpay good attention to the dates.
Its a lot of info it ask at one time.I don't think its a bad ui. it works in 4 clicks.
16
u/NinjasPounced May 16 '23
Feel free to DM any non-working dates but agree it is worth taking a few tries to grok.
34
u/56kul May 16 '23
I figured out what I did wrong.
I somehow mistook the values on the left for the age. I just now realized they refer to the days and I feel stupid. XD
3
u/MadMantisShrimp May 16 '23 edited Jun 29 '23
This comment was posted using Apollo before the Reddit API changes caused it to be shut down
Save third party apps
Fuck u/spez
1
8
3
u/Jpaylay42016 May 16 '23
Maybe its something with my laptop, but I can't click anything.
Edit: Had to turn off my adblockers
156
u/mlubben May 16 '23
If you make the table big enough you can even click your birthday in one click
48
u/NinjasPounced May 16 '23
I wanted to keep the number of choices in one screen less than 30 so it could technically have less choices than a traditional picker that lets you pick a day within a month.
To reduce to 3 clicks while still preserving the same general concept, you'd need 5 year columns, 4 day columns, and 3 month choices per box. So 60 boxes.
2
u/iliekcats- May 17 '23
Howd you figure it out?
7
u/unwantedaccount56 May 17 '23
There are 12 months. You can guess the month in 4 clicks if you have 2 options each time: 23 < 12 <= 24. If you have 3 options each time, you can do it in 3 clicks: 32 < 12 <= 33.
You do the same with possible days from 1-31: 5 clicks with 2 choices, 4 clicks with 3 choices, 3 clicks with 4 choices.
For the year it depends on the range as well.
7
u/PM_Ur_Illiac_Furrows May 17 '23
That's about 3 pixels per date, which is plenty if they're in order.
280
u/tomwie May 16 '23
This is actually a relativitely good idea. 4 clicks is far less than a usual date submenu needs.
101
u/ZENITHSEEKERiii May 16 '23
This might be a decent anti-bot captcha as well. It seems like it would be relatively complicated to program logic to bypass and also very easy to break any bypass code by renaming elements.
23
u/westwoo May 16 '23
At best it's as good as simply rendering any number into an image without even any obfuscation
20
u/Roxolan May 16 '23
Any quirky question will block bots as long as hacking your website isn't worth writing a custom bot for, and not otherwise.
6
u/ZENITHSEEKERiii May 16 '23
Yep, but at that point you can just employ actual captchas and maybe some randomly-generated logic questions designed to fool naïve AI.
1
22
2
u/Cats7204 May 16 '23
Aren't most menus 4 clicks already? You click a year range, you select the specific year, then it takes you to select the month (only 12 options no need for a range), then the day (only 31 options no need for a range if you make the buttons small)
82
u/Boby_Dobbs May 16 '23
This is both genius and bad at the same time somehow
26
u/Varth919 May 16 '23
Genius in the simplicity.
Bad because it requires more thought and potentially time than sliders.
31
20
u/Christoff_r May 16 '23
I can't pick February 29?
65
19
u/Bartho_ May 16 '23
I am able to pick my date but for me it's some kind of Akinator kind of black magic fuckery even if it's all logical.
6
u/N3rdr4g3 May 16 '23
My guess (too lazy to look at the code) is that it functions as a 3 attribute binary (and trinary and quaternary) search tree.
An example for the months, it asks you to pick between the first 6 months and the second 6 months, then each choice reduces the number of possible months by half. (Possible months after each click are: 6, 3, 2, 1).
The same principle applies to the years and to the days. There's more than 16 so they need more than 2 options for 4 clicks (24 is 16, 34 is 81 for the days, and 44 is 256 for the years)
8
u/Schuben May 16 '23
Yeah, it's 3D as evidenced in the fact that they have to include 2 buttons in each box in the grid that would otherwise represent a 3rd dimension which can't easily be depicted in a typical web page.
Maybe I should make some sort of manipulatable hypercube date picker...
4
9
4
3
3
2
2
u/UnicornBelieber May 16 '23
If you make it 3D, you might even trim it down to like, 3 or maybe even 2 clicks.
2
-7
u/Leothegamedev May 16 '23
This idea is not sufficient for Jesus's age.
11
u/NinjasPounced May 16 '23
I know this is a joke, but going back that far would require extending the layout to 7 year columns without increasing the number of clicks.
2
u/Leothegamedev May 17 '23
Shout out to you for doing the math. This is a pretty cool concept tho, beating the drop-down selector (2+2+2+1(submit)) by 3 clicks. Try implementing it somewhere.
2
1
1
1
1
1
1
1
•
u/AutoModerator May 16 '23
Hi OP, do you have source code or a demo you'd like to share? If so, please post it in the comments (Github and similar services are permitted). Also, while I got you here, dont hesitate to come hang out with other devs on our New official discord https://discord.gg/gQNxHmd
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.