10 ms·
Show HN: I've made a rotary dial number input, because why not?
- starvingbear 7y agoThanks!
- atum47 7y agoyou're welcome! =)
- codingdave 7y agoClever - I like it. But the key thing that made rotary dials usable was the catch at the end - it stopped your finger, so you just pushed until it stopped you, and it registered whichever number your finger was in. Without that, this version isn't really usable. It needs to lock into a draggable state, then keep rotating so long as the mouse is down, even if you drag outside the control. And then it needs to stop dragging at the end, so you cannot over-drag and pick the wrong number. Do those 2 things, and it would be solid.
- mattmar96 7y agoSubmit a PR :)
- robbya 7y agoOr an issue. Feedback and ideas are often appreciated, even when they don't come with code. It also allows non-coders to contribute.
- ngcc_hk 7y agoYes. Remember the way to dial in those days. You hit it and release. Guess you need to pretend you do this (and the computer already know the number haha).
- cyborgx7 7y agoThe second part was going to be my complaint as well, but your observation about the catch for the finger is even more important. I think there might be some kind of lesson here. Rotary dials might be a usability punchline right now, but there is actually a lot of thought that went into their design which made it quite usable. I'm sure similar things can be said about other old interfaces.
- mikestew 7y agoRotary dials might be a usability punchline right now Punchline? Rotary dials are great. Find number, stick finger in hole, rotate until it stops, release. The only real thinking involved is to figure out which digit you want. Man, sure a lot more than just punching a button, amirite? Most of the time, yup, and the rotary is an antiquated method of digit input. But because rotary is not on/off, it is more forgiving. I am unable to come up with a suitable explanation without putting a rotary dial in front of you, but you could change your mind while you were dialing. Or more accurately, you could fix your mistakes. In the midst of dialing, some correction was possible. For instance, "oops, that's '3', not an '8'. Well, even if you've already stopped at 8, you can keep going and get the 3 instead (doesn't work the other way around). Anyway, I'm not saying I miss them, but rather to agree that TFA is missing the things that make rotary dials more than just a circular version of a 10-key.
- _nalply 7y agoAdditionally make the drag a lot more forgiving. After all, the rotary dial guides the finger around the circle. To emulate that, people should be able to drag in a very inprecise way and the dial should be reliable in rotating anyway.
- Aardwolf 7y agoAgreed, this feels a bit like the wire loop game where one wrong move makes you lose
- virgil_disgr4ce 7y agoThis is why one of the next major milestones in UX technology evolution needs to be a new step in haptic interfaces: programmable physical surfaces, where textures and raised edges can be brought into existence to serve as guides and wayfinders, just as the rotary dial catch did.
- thomaspark 7y agoAgreed, it's like the principle of Fitt's Law and screen edges having infinite width. I made a version a little while back that takes this into account: https://github.com/thomaspark/rotary https://github.com/thomaspark/rotary
- sleepychu 7y agoWow, that's really pretty!
- daniel-alex 7y agoAfter "dialing" 01189998819991197253 on the OP website and your's, I can say this one was easier and consequently faster to input the number correctly.
- rectangletangle 7y agoHad issues dragging the rotary bit on my iPhone in landscape mode. I noticed that it didn't entirely fit on the screen, so perhaps that's causing the issue. However it works great in portrait mode.
- basicplus2 7y agoWould love a real one on my physical keyboard..
- jpl56 7y agoYou are not alone, lookup "USB rotary dial" ;-)
- arthurcolle 7y agoLive demo doesn't seem to work on iPad (using Chrome)
- StudentStuff 7y agoSeems to work for me on Linux using older Firefox, must be a legacy WebKit issue (as Apple forces all browsers to use Safari's WebKit engine). Apple really is dragging their heels on supporting HTML5, when even (deprecated) Edge has better standards compliance, something is plainly wrong in Cupertino.
- reificator 7y agoIf you click on a number and start to spin, that number should be the furthest you can take it, because your virtual finger is in that hole.
- ebg13 7y agoIt looks like you have some numerical instability causing the numbers to wobble as they rotate.
- asimjalis 7y agoThe other thing that made rotary dials hypnotic was the sound effect. Would be a nice enhancement. https://www.youtube.com/watch?v=7pIw9xyDQkY https://www.youtube.com/watch?v=7pIw9xyDQkY
- forgotmypw 7y agoNice work! Thank you for sharing it. Aside from the number-stopping request others have made, I think it would be more accurate for the callback to happen once the dial has finished rotating back into its place, not on initial mouse release.
- chelovek89 7y agoCould this be used as a way to provide a "call us" link to prevent scrapers and spambots for getting our number? For example at the end of a successful dial you get a "tel:8675309"
- andrewshadura 7y agoIt will also prevent people with motion or sensory disabilities from using it.
- gitgud 7y agoInteresting idea, but it's also entry #3 in [1] this collection of the worst user interfaces... [1] https://www.boredpanda.com/funny-worst-input-fields https://www.boredpanda.com/funny-worst-input-fields
- raverbashing 7y agoIt's the best of the worse, because that's what they needed: a reliable way to generate a pulse sequence with different number of pulses for signaling. For 60s technology (maybe even earlier) this was the best they could come up with for the desired price point.
- kd5bjo 7y agoWith a little bit of practice, you could dial a phone number directly on the receiver hook. This also worked on touch-tone phones because the switches were all made backwards compatible with the old equipment.
- swish_bob 7y agoIt took a _lot_ of practice. I think I managed to successfully do it about 3 times ...
- raverbashing 7y agoYes but you can't expect the average use to learn this. It's not user friendly at all.
- jones1618 7y agoI stumbled on this accidentally when I started to dial information (411) and meant to hang up with my finger before the last '1'. Instead, the switch hook "bounced" (making the click signifying the last '1') and I got connected anyway. (A bummer since every call to information was a charge on your bill.) Still, once I figured that out my friends and I would try to call girls we liked using this method. The skill involved and the fact that you'd fail 2/3 of the time would distract you from the fear of actually talking to the girl once you got connected. "Oh, sh*t! It worked. Oh, hi, Rachel. I was playing around with the phone and must've accidentally dialed you."
- Animats 7y agoOh, I thought he'd used a physical dial. You can still buy them, in new condition. I bought one and hooked it up to a pen register, to demo old-school wiretapping.
- xwowsersx 7y agoThis is great. You gotta add audio to deliver those sweet, satisfying sounds!
- atum47 7y agoMy dad use to fix telephones when I was growing up. I remember fiddling with them a lot. If you grab the disc and rotate it, even without the finger on the proper number hole, the number that would be recognized was the number on the "recognition" area. I tried to put that on my code. If you let go of the disc going outside or inside of it, it will activate the spring back movement.
- z2 7y agoFirst, thanks, it made me chuckle! I have no dog in this race, but it seems to me that a finger hook and stopper is a functional feature of the rotary dialer. If and only if the user put their finger in the hole to dial, then the finger stop should catch and prevent the wheel from moving beyond that number. In other words, the number choice is actually strongly implied (but not locked in) the moment the finger is in a hole, and the stopper isn't merely an indicator but is step 2 of guiding that choice through. How best to simulate that distinction in a 2d screen, no idea...
- hn3333 7y agoReminds me of a Sega game, Shenmue: https://www.youtube.com/watch?v=GaHqOVZ5JvE https://www.youtube.com/watch?v=GaHqOVZ5JvE
- sumosudo 7y agoNow the young ones will understand why people with 9's and zeroes in their numbers were such a pain to call.
- skrebbel 7y agoNice idea! I'm a bit sad though that this doesn't appear to work on touchscreens, isn't that sortof the point? (tried in Edge and Firefox, win10)
- philmander 7y agoWorks for me on Chrome/Android
- tazard 7y agoIt works fine on my phone (android) chrome + Firefox
- skrebbel 7y agoHm, odd. Maybe it has some `if desktop then disable touch handlers` kind of code somewhere. note to coders: don't do that, lots of laptops have touchscreens :-)
- jfries 7y agoInterestingly (or perhaps annoyingly) enough, the placement of the 0 was different in different countries. At least in Sweden the first digit was 0, and not 1 as in this implementation. This was reflected in the emergency number which was 90000 at the time, which is easy to dial without mistakes even in a stressful situation. Is there a need for localization?
- thedufer 7y agoDoes that mean that different countries used incompatible dialing patterns? Since our 1 emitted one tone and 0 emitted 10, but presumably Sweden's 0 emitted one tone and 9 emitted 10.
- wolco 7y agoIn North America you dial 1 plus number. Elsewhere it's 011. It might be related to that.
- Angostura 7y agoRotary dials didn't emit tones, but basically briefly disconnected the line. IN most countries it was 1 pulse for the digit 1, 2 pulses for 2 etc. up to 10, for zero However Wikipedia notes: > Exceptions to this are: Sweden (example dial), with one pulse for 0, two pulses for 1, and so on; and New Zealand with ten pulses for 0, nine pulses for 1, etc. Oslo, the capital city of Norway, used the New Zealand system, but the rest of the country did not. If ever you were in a house which tried to prevent outgoing calls by using a lock on the dial, you could still make a call by tapping out the requisite digits on the hang-up buttons.
- ztetranz 7y agoThis is the type of phone I grew up with https://collection.motat.org.nz/objects/111551 https://collection.motat.org.nz/objects/111551 It seems more logical to me. Those from other countries seem backwards. Pulse count = 10 - digit.
- ehnto 7y agoThese are the kinds of things I expected to come out of WebComponents/other component architectures taking off. Inatead we got nested component spaghetti and app wide state management. (tongue in cheek, I know you can avoid it and I know it has it's purpose)
- abhiminator 7y agoThe project site (https://victorribeiro.com/dial https://victorribeiro.com/dial) is down at the time of this comment. Guessing it got HN's 'hug-of death.'
- p1mrx 7y agoHere's a USB version: https://windfisch.org/rotarydial/rotarydial.html https://windfisch.org/rotarydial/rotarydial.html
- jansan 7y agoThanks for the link, that's a really cool little project. If I find some time I will try to replicate this.
- whsheet 7y agoCould be a nice captcha.
- atum47 7y agohi, I really like the attention this project is getting and I'm very grateful to all for making pull requests and opening issues, but since last month I'm working on a full time job. the hours are hell but it's decent pay. anyway, I'm about to go in and I don't think I'll have time to dedicate to this project anymore. it was supposed to be a gag, I made the whole thing in a few hours on my Saturday. I have other things I want to do on my next break, but who knows? maybe I come back to this and add sound and the "finger" collision. sorry if I don't respond comments and github, they don't like us to be on our phones during work hours.
- sandwell 7y agoDisappointed that there is no easter egg revealed for dialing 8675309.... But cool nonetheless.
- atum47 7y agowent right above my head, what this is about?
- larntz 7y agoIt's from a song. https://en.m.wikipedia.org/wiki/867-5309/Jenny https://en.m.wikipedia.org/wiki/867-5309/Jenny
- evanb 7y agoAlso Jenny and her sister are twins---8675309 and 8675311 are prime.
- atum47 7y agoI'll make sure to listen, thanks
- myself248 7y agoSide note, if you're ever in a store where you need a "loyalty card" to get the posted prices, but they let you use "alternate ID" like a phone number instead of scanning your loyalty card, try (local area code)+867-5309. Odds are good that someone already signed up for a card under this number.
- alpaca128 7y agoReminds me of the preinstalled clock app on the pre-Android Blackerry smartphones. Basically to set any alarm or timer you just moved the finger around a clock to the desired time. It was satisfying to use and intuitive. Now my "Android One" phone has the worst UI I've ever seen for setting timers(you have to enter every individual digit, from hours to seconds, in the right order...). I really wish Google would copy more good ideas from the now-dead competitors, like the text selection and context menus on Windows Phone. Or the alphabetical lists that also work well for left-handed people. Many great user interface ideas died with these systems. But to be honest I'm not sure if they would even be allowed to do that legally. You never know what kind of crazy software patents are floating around out there.
- treerock 7y agoAndroid's 'time picker' sounds very much like the blackberry version you describe. https://i.stack.imgur.com/60z61.png https://i.stack.imgur.com/60z61.png
- alpaca128 7y agoIt does have similarities, but is still more complicated - BB simply had one watchface view where you'd set the time for alarms with minute accuracy just by dragging around a marker(one for each active alarm). On a separate tab you had the same UI for the timer etc. Google's approach feels like a more convoluted approach to the same idea, where the hours and minutes are separated and the selection is in a separate popup view instead of being embedded directly into the clock. It makes sense as it's a more generalized widget usable by other apps, but that's also the reason it's not quite as natural to use. EDIT - here's a (partial) example screenshot: https://forums.crackberry.com/attachments/blackberry-10-apps-f274/312401d1415232481t-new-blackberry-clock-app-img_20141105_180736.png https://forums.crackberry.com/attachments/blackberry-10-apps...
- aasasd 7y ago> you have to enter every individual digit That's actually the fastest time input method I've used. Only I need just minutes and seconds, e.g. ‘500’—or hours and minutes in the alarm, like ‘915’. And this app has gigantic buttons for the numbers, and checks on the fly for when a ‘9’ makes no sense so the button is disabled. I wish devs adopted this method instead of the inane ubiquitous scrolling dial. I need three or four taps on huge buttons which are in muscle memory by now, like with a calculator pad—as opposed to a ridiculous amount of scrolling through the 60 minutes and looking for when the dial lands on the right number.
- m00dy 7y agoit looks like a great idea for front end interview.
- emilfihlman 7y agoBad ux for mouse. It shouldn't stop accepting input if your mouse goes outside the donut.
- wolco 7y agoI'll issue a challenge to all. Who can take this and fork in as many cool versions with additional features/details?
- rgoulter 7y agoGood example of a skeuomorph. https://en.wikipedia.org/wiki/Skeuomorph https://en.wikipedia.org/wiki/Skeuomorph
- varjag 7y agoRotary dials have the arrow near the 0: it minimizes the movement.
- aasasd 7y agoReddit's ProgrammingHumor subreddit had stints with several topics in this vein: volume knobs, phone inputs, etc. I think you can find them at https://www.reddit.com/r/ProgrammerHumor/search/?q=flair%3A%22Bad+UI%22&sort=top https://www.reddit.com/r/ProgrammerHumor/search/?q=flair%3A%... It seems that there's a subreddit for such things now: https://www.reddit.com/r/badUIbattles/ https://www.reddit.com/r/badUIbattles/ The whole thing started with a couple inputs found in the wild: a volume slider bar that glitched and had to be slided in the 10px across instead of the >100px along the bar. And a phone number input that had four-digit groups as dropdown inputs with 9999 values.
- jammaloo 7y agoThat's correct, I chimed in with a rotary phone input https://twitter.com/jmcfreeman/status/724012572861718528 https://twitter.com/jmcfreeman/status/724012572861718528 but I literally just built this project https://github.com/peterszerzo/rotary-phone https://github.com/peterszerzo/rotary-phone and recorded it. It handles the rotation input very well.
- herodotus 7y agoSee this: https://www.patentlyapple.com/.a/6a0120a5580826970c01310f2ede7c970c-pi https://www.patentlyapple.com/.a/6a0120a5580826970c01310f2ed...
- nobrains 7y agoMake the rotate based on mouse move in any direction (i.e. there will be no reverse rotate). Make the rotate limited to emulate the finger catch. Then its perfect.
- SilasX 7y agoYes! Now Domino's can offer a convenient option to the blind users they're forcing to call in because they've made their website unusable! https://news.ycombinator.com/item?id=21188092 https://news.ycombinator.com/item?id=21188092
- sopooneo 7y agoWhen I was about eight I found an old rotary dial phone that I decided to take apart. Can't remember if I had permission. But seeing how unbelievably simple the underlying functionality was absolutely blew me away and opened my eyes to how much you can do by building on top of very simple things. For those who don't know, early local phone connections did NOT work on tones. Instead, the rotary dial simply broke the connection in quick succession whatever number times for the number you'd dialed to. And the rotary dial did this by simply breaking it once for every number that went by on the way back to its rest position. Just notches in a disk. Simple as that. This gave me a little revelation, and I found you could actually make calls without use of the dial at all. You simply clicked the hangup button very quickly in succession for the number you wanted, then paused, then repeated. I made it a sport to try to reach my friends that way. Which was risky, because a couple wrong clicks and I might be opening an expensive long distance call to anywhere. Formative stuff. So big thanks to the poster for the walk back down memory lane. I love the project.
- thescribbblr 7y agoI like it.
- KyleBrandt 7y agoIt would be good if the whole dial would sometimes slip (move on the screen) when trying to dial a number.