At some point, I happened to buy a cheap FM radio module just to play around with. Since I was already working on my boat tool, which uses a wide and narrow 1280×480px display, I came up with the idea of designing a UI for the module.
Of course, having a “normal” list of favorite or detected radio stations would be convenient enough. But since the boat is constantly moving from place to place, the availability and quality of radio stations change. This makes station auto-detection unreliable, and constantly updating the list manually doesn’t seem like a practical solution (automatic updates are even worse). Another issue is that sometimes the best frequency isn’t selected correctly, and you have to adjust it slightly (±0.05 MHz) to get better sound—especially when you’re far from shore and the signal is weak.
So, I wanted to combine a traditional radio interface with digital features, displaying the signal quality across the entire FM range in real time. This way, both real and potential stations could be shown as peaks. If a station supports RDS, the UI should also display its name (PS text) above the corresponding peak.
I also prefer adjusting the frequency in an old-school way—by turning a knob. It allows for both major and fine adjustments, and I was curious whether I could replicate this varying speed-precision effect using a touch screen.
It was pretty obvious that the entire screen (except for buttons) could function as a slider. But instead of just implementing basic horizontal sliding, I decided to measure two values when the finger moves across the screen:
- The horizontal position controls frequency selection.
- The vertical position affects the speed (or precision) of tuning.
While exploring this idea, I came up with two possible implementations:
- Scalable ruler – The width of the frequency scale dynamically changes based on the vertical finger position, so the finger always stays “on top” of the selected frequency, similar to zooming in and out on a map with a scroll wheel.
- Fixed ruler with variable speed – The frequency scale remains the same size, but the scrolling speed adjusts depending on the finger’s vertical position. This means the speed of the finger and the speed of the slider can be different.
Initially, I assumed the first option would be more intuitive since it maintains a direct connection between the finger’s position and the frequency scale. But it’s always a good idea to test assumptions, so I quickly implemented a prototype app to compare the two approaches.
So, here is the implementation of the UI with scalable ruler:
And here is the implementation of the second approach with static ruler and variable sliding speed:
Contrary to my expectations, the scalable ruler turned out to be too unstable—the UI jumped around too much, making it hard to follow, even with vertical sensitivity tweaks. The second method was much more “boring,” but significantly more usable. The UI remained stable while still allowing for precise tuning based on finger position.
In the end, the second method worked better, though it sacrificed the direct manipulation aspect.
Conclusion
I was quite happy with this concept and even started working on a full implementation. But I eventually dropped it because scanning the entire FM range while listening to a selected station would require two separate tuners. Maybe I’ll return to this project later. Or not.
The bigger takeaway with story, though, is that all assumptions about dynamic interactions should be tested—at least in a prototype, rather than just evaluating mockups in a cognitive walkthrough. There are always multiple factors affecting any solution, and in practice, their combined effect can be very different from what theory suggests.