Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: I've made a rotary dial number input, because why not? (github.com/victorqribeiro)
190 points by atum47 on Oct 14, 2019 | hide | past | favorite | 86 comments


Clever - 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.


Additionally 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.


The 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.


Rotary 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.


Agreed, 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


After "dialing" 01189998819991197253 on the OP website and your's, I can say this one was easier and consequently faster to input the number correctly.


Wow, that's really pretty!


Yes. 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).


This 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.


Agreed, this feels a bit like the wire loop game where one wrong move makes you lose


Submit a PR :)


Or an issue. Feedback and ideas are often appreciated, even when they don't come with code. It also allows non-coders to contribute.


Reddit'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%...

It seems that there's a subreddit for such things now: 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.


That's correct, I chimed in with a rotary phone input https://twitter.com/jmcfreeman/status/724012572861718528

but I literally just built this project https://github.com/peterszerzo/rotary-phone and recorded it. It handles the rotation input very well.


The other thing that made rotary dials hypnotic was the sound effect. Would be a nice enhancement.

https://www.youtube.com/watch?v=7pIw9xyDQkY



Thanks for the link, that's a really cool little project. If I find some time I will try to replicate this.


Reminds 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.


> 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.


Android's 'time picker' sounds very much like the blackberry version you describe.

https://i.stack.imgur.com/60z61.png


It 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...


Interestingly (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?


Does 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.


Rotary 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.


This is the type of phone I grew up with https://collection.motat.org.nz/objects/111551 It seems more logical to me. Those from other countries seem backwards. Pulse count = 10 - digit.


In North America you dial 1 plus number. Elsewhere it's 011. It might be related to that.


hi, 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.


There's https://www.codeshelter.co/ that can help with co-maintainers, if someone is interested.


Not to worry there should be a few forks up soon with regional versions. This is the type of weekend project that people can relate to.


My 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.


First, 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...


When 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.


If 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.


This is great. You gotta add audio to deliver those sweet, satisfying sounds!


Nice 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)


It works fine on my phone (android) chrome + Firefox


Hm, 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 :-)


Works for me on Chrome/Android


Now the young ones will understand why people with 9's and zeroes in their numbers were such a pain to call.


Disappointed that there is no easter egg revealed for dialing 8675309.... But cool nonetheless.


went right above my head, what this is about?



Also Jenny and her sister are twins---8675309 and 8675311 are prime.


I'll make sure to listen, thanks


Side 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.


Interesting 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


It'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.


With 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.


I 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."


Heh, reminds me if my university period. In the students house each apartment had a phone with the round dialing physically removed as the phones were supposed to be used only for recieving calls. I tried the technique you are referring to and it worked perfectly. Too bad that after some months the administration noticed the receipts from the phone company and me and the other guys living in the same apartment had to pay part of it.


Yes but you can't expect the average use to learn this. It's not user friendly at all.


It took a _lot_ of practice. I think I managed to successfully do it about 3 times ...


I've learned this from that movie hackers. #hacktheplanet


In my area (in the 80s/90s I think) we had to pay extra for touch tone service.

Anyone know if there was a technical reason for that originally?

A quick search shows that apparently these charges were still around until recently. Maybe it was just another reason for the telco to add a fee to the bill?


Originally, the switching equipment was driven with pulses, and your phone interacted with it directly.

As the dial plans got more elaborate, things like digit absorbers got in between you and the actual call routing equipment, but they all still talked to each other and to you with pulses.

When tone dialing made its debut, some offices had switched over to electronic control and could natively understand touch-tone, but a lot had not, so there were front-end circuits that would decode the tones and control the switching equipment. Throughout the 80s, pretty much all the step, panel, and crossbar switches were replaced with common-control switches (where a computer did the thinking, even if relays were still used for the actual routing), and the fees became bogus.

If you had Call Waiting, you should not have been paying extra for touch-tone.


All the fees were kind of B.S. especially as technology made providing the switching, call-forwarding and caller ID ring services easier and cheaper to provide.

Besides, remember that they used to charge _rent_ for your phone and wouldn't allow 3rd party phones at all until the late 60's or so.



Keep in mind the link was referring to software UI's. It's not saying the mechanical rotary dial was bad, just software implementations imitating it...


It looks like you have some numerical instability causing the numbers to wobble as they rotate.


Yeah, I was rounding up the cos and sin. Got rid of that.


It looks like you did for the circles, but not for the digits themselves?



Oh, 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.


Live demo doesn't seem to work on iPad (using Chrome)


Seems 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.


Would love a real one on my physical keyboard..


You are not alone, lookup "USB rotary dial" ;-)


These 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)


Bad ux for mouse. It shouldn't stop accepting input if your mouse goes outside the donut.


The project site (https://victorribeiro.com/dial) is down at the time of this comment. Guessing it got HN's 'hug-of death.'


Nice 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.


Had 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.


Could 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"


It will also prevent people with motion or sensory disabilities from using it.


Good example of a skeuomorph. https://en.wikipedia.org/wiki/Skeuomorph


Reminds me of a Sega game, Shenmue: https://www.youtube.com/watch?v=GaHqOVZ5JvE


Make 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.


I'll issue a challenge to all. Who can take this and fork in as many cool versions with additional features/details?


It would be good if the whole dial would sometimes slip (move on the screen) when trying to dial a number.


Yes! 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


Rotary dials have the arrow near the 0: it minimizes the movement.


Could be a nice captcha.


Thanks!


you're welcome! =)


it looks like a great idea for front end interview.


I like it.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: