37 comments

  • codingdave 1628 days ago
    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.

    • _nalply 1627 days ago
      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.
    • cyborgx7 1627 days ago
      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.

      • mikestew 1627 days ago
        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.

    • thomaspark 1627 days ago
      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

      • daniel-alex 1623 days ago
        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.
      • sleepychu 1627 days ago
        Wow, that's really pretty!
    • ngcc_hk 1628 days ago
      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).
    • virgil_disgr4ce 1627 days ago
      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.
    • Aardwolf 1627 days ago
      Agreed, this feels a bit like the wire loop game where one wrong move makes you lose
    • mattmar96 1628 days ago
      Submit a PR :)
      • robbya 1628 days ago
        Or an issue. Feedback and ideas are often appreciated, even when they don't come with code. It also allows non-coders to contribute.
  • aasasd 1627 days ago
    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.

  • asimjalis 1628 days ago
    The other thing that made rotary dials hypnotic was the sound effect. Would be a nice enhancement.

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

  • p1mrx 1627 days ago
    • jansan 1627 days ago
      Thanks for the link, that's a really cool little project. If I find some time I will try to replicate this.
  • alpaca128 1627 days ago
    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.

    • aasasd 1627 days 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.

    • treerock 1627 days ago
      Android's 'time picker' sounds very much like the blackberry version you describe.

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

      • alpaca128 1627 days ago
        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...

  • jfries 1627 days ago
    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?

    • thedufer 1627 days ago
      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.
      • Angostura 1627 days ago
        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.

      • wolco 1627 days ago
        In North America you dial 1 plus number. Elsewhere it's 011. It might be related to that.
  • atum47 1627 days ago
    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.
    • StavrosK 1627 days ago
      There's https://www.codeshelter.co/ that can help with co-maintainers, if someone is interested.
    • wolco 1627 days ago
      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.
  • atum47 1628 days ago
    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.
    • z2 1627 days ago
      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...

  • sopooneo 1627 days ago
    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.

  • reificator 1628 days ago
    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.
  • xwowsersx 1628 days ago
    This is great. You gotta add audio to deliver those sweet, satisfying sounds!
  • skrebbel 1627 days ago
    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)
    • tazard 1627 days ago
      It works fine on my phone (android) chrome + Firefox
      • skrebbel 1627 days ago
        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 :-)

    • philmander 1627 days ago
      Works for me on Chrome/Android
  • sumosudo 1627 days ago
    Now the young ones will understand why people with 9's and zeroes in their numbers were such a pain to call.
  • sandwell 1627 days ago
    Disappointed that there is no easter egg revealed for dialing 8675309.... But cool nonetheless.
    • atum47 1627 days ago
      went right above my head, what this is about?
      • larntz 1627 days ago
        • evanb 1627 days ago
          Also Jenny and her sister are twins---8675309 and 8675311 are prime.
        • atum47 1627 days ago
          I'll make sure to listen, thanks
          • myself248 1627 days ago
            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.
  • gitgud 1628 days ago
    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

    • raverbashing 1628 days ago
      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.

      • kd5bjo 1627 days ago
        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.
        • jones1618 1627 days ago
          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."

        • w0land 1627 days ago
          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.
        • raverbashing 1627 days ago
          Yes but you can't expect the average use to learn this. It's not user friendly at all.
        • swish_bob 1627 days ago
          It took a _lot_ of practice. I think I managed to successfully do it about 3 times ...
        • atum47 1627 days ago
          I've learned this from that movie hackers. #hacktheplanet
      • larntz 1627 days ago
        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?

        • myself248 1627 days ago
          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.

        • jones1618 1627 days ago
          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.

      • Symbiote 1627 days ago
      • gitgud 1627 days ago
        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...
  • ebg13 1628 days ago
    It looks like you have some numerical instability causing the numbers to wobble as they rotate.
    • atum47 1628 days ago
      Yeah, I was rounding up the cos and sin. Got rid of that.
  • herodotus 1627 days ago
  • Animats 1628 days ago
    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.
  • arthurcolle 1628 days ago
    Live demo doesn't seem to work on iPad (using Chrome)
    • StudentStuff 1628 days ago
      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.

  • basicplus2 1628 days ago
    Would love a real one on my physical keyboard..
    • jpl56 1627 days ago
      You are not alone, lookup "USB rotary dial" ;-)
  • ehnto 1627 days ago
    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)
  • emilfihlman 1627 days ago
    Bad ux for mouse. It shouldn't stop accepting input if your mouse goes outside the donut.
  • abhiminator 1627 days ago
    The project site (https://victorribeiro.com/dial) is down at the time of this comment. Guessing it got HN's 'hug-of death.'
  • forgotmypw 1628 days ago
    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.

  • rectangletangle 1628 days ago
    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.
  • chelovek89 1628 days ago
    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"
    • andrewshadura 1628 days ago
      It will also prevent people with motion or sensory disabilities from using it.
  • rgoulter 1627 days ago
    Good example of a skeuomorph. https://en.wikipedia.org/wiki/Skeuomorph
  • hn3333 1628 days ago
    Reminds me of a Sega game, Shenmue: https://www.youtube.com/watch?v=GaHqOVZ5JvE
  • nobrains 1627 days ago
    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.

  • wolco 1627 days ago
    I'll issue a challenge to all. Who can take this and fork in as many cool versions with additional features/details?
  • KyleBrandt 1627 days ago
    It would be good if the whole dial would sometimes slip (move on the screen) when trying to dial a number.
  • SilasX 1627 days ago
    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

  • varjag 1627 days ago
    Rotary dials have the arrow near the 0: it minimizes the movement.
  • whsheet 1627 days ago
    Could be a nice captcha.
  • starvingbear 1629 days ago
    Thanks!
    • atum47 1629 days ago
      you're welcome! =)
  • m00dy 1627 days ago
    it looks like a great idea for front end interview.
  • thescribbblr 1627 days ago
    I like it.