UX
UI
Product
Web Design
Digital
Branding
3 intervals selector
Give to the player the opportunity to select 3 bet intervals.
The idea behind the design
We needed a selector for a dice game, allowing players to choose 3 groups of numbers to bet on.
We were restricted from using a horizontal slider design pattern and had to find a new UI solution.
The idea of using a circular selector came from the Sleep/Wakeup Apple app, which only has one circular slider.
However, for our game, we needed three sliders, which posed an issue due to limited screen space on mobile devices.
To prevent players from accidentally clicking the wrong button, we reduced the size of the sliders.
How it Works
The Selector consists of 3 sliders. The first slider is larger than the other 2, which are locked. In the center of the selector, there is the "Bet" button, which confirms the selection.
The player selects the first interval and clicks "Bet". At this point, the slider becomes locked and smaller, allowing the next one to be moved.
When the second selection has been confirmed, the third slider becomes larger and the second one becomes smaller and locked.
Once the third selection has been confirmed, the bet is placed.
Below the selector, there are displays showing the bets and the option to change them individually.