From my experience there is seldom a universal rule to this. However, there are a number of ways to create scalable ui. Atleast, these are the methods I am using.
First of all you will probably want to take a look at [Plugin] AutoScale Lite for GUIs - Scale your UI. There is a nifty ui element in roblox called UIAspectRatio that keeps your gui objects proportioned the way you made them.
Really you most likely either want to make your ui elements in scale form (otherwise they will look massive on mobile devices) or make entirely seperate interfaces that work for mobile. Often times ui you make for desktop isn’t really suited for touch input.
But I can see from your example that the plugin will fix it quite simply. Just apply a ratio at the correct size and it will scale appropriately dependent on the screen. Scale really doesn’t work for uniform objects without this.
For scale, a tip is to add a limit to its max size. After all at a certain point (for those with large screens) gui objects will become needlessly large using scale. This is why offset is used often. There is another ui element for that called UISizeConstrain. This used in combination with UIRatio can be quite powerful.
Though I am not a professional when it comes to UI, so take my word with a grain of salt. But I hope I gave you some ideas on how to tackle this arduous issue.