I'm trying to understand which is better for this case: a "milestone" labels for a slider.
For an iOS mobile app. Above or Below the slider? Illustration:
Would love to hear your thoughts. Thank you!
Best regards, Roi
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityI'm trying to understand which is better for this case: a "milestone" labels for a slider.
For an iOS mobile app. Above or Below the slider? Illustration:
Would love to hear your thoughts. Thank you!
Best regards, Roi
Definitely agree on above the slider for mobile because of the thumb. I would also encourage considering how accurate your users need the slider value to be because of the steering effect and whether it adds value to have the milestone or labels (in addition to the icons) at all.
I would prefer above the slider, as the thumb of the user obfuscates the text underneath it.
I would prefer below slider as it aligns all the text in one direction. One more thing use are more focused to icons rather than text when we are giving name and icons. They would read text/label only then will not know the meaning of icon. So according to me below slider is preferable.
In case with the "speed setting" you are using a segmented control which is close to the slider and if you are putting the labels below it's can be a confusing for users to read the info. I'll suggest to put labels above or as a suggestion above let the icons do their work.
If the slider is on top of the screen put labels below the slider, if the slider is on the bottom of the screen put labels above the slider.
Let's say you are using this for 'Mouse Speed' and 'Volume' and these are 2 vertical sections in a mobile layout. If you use little larger and bold font for 'Mouse Speed' and 'Volume' as section title and then above sliders you are already using like ... Faster and Target Volume ... labels. I think this much is enough info for a user to understand what these sliders are for. No need to add above or below icon labels.