I need to design a filters column to fit in safe area (650px) and I need to understand how to deal with labels. In order to shrink the design I decided to put labels into input boxes and using tooltips to help users understand where they are when typing.

My problem is with sliders since the labels are too long and they cannot fit inside sliders.

Do you have any other alternatives to deal with this? enter image description here

Please find the design attached.

  • why cant you place the labels above the sliders
    – Mervin
    Sep 24 '14 at 15:21
  • Not space enough for the safe area :(
    – Giults
    Sep 24 '14 at 15:55
  • @Giults you have provided only one dimension - 650 px and I believe that is horizontal (x) or screen width. If the page is scroll-able (unlimited y), why can't you put the labels above the sliders and have the users scroll down or up? Sep 24 '14 at 16:01
  • 650px is the maximum height considered "safe area" for some risolutions. The form needs to be viewed without scrolling
    – Giults
    Sep 25 '14 at 9:12
  • To the left. They don't need sliders that big. Use an abbreviation for the label and full name on the mouse over.
    – paparazzo
    Sep 25 '14 at 18:43

For starters I would recommend against using inline labels in form fields as they pose a number of problems to users

  1. Users need to remember what the inline label in each form field was when they start entering content as the label disappears. I know you did mention you have on hover interaction but on hover doesn't work on mobile and you are imposing an additional cognitive load

  2. Error validation can cause a lot of confusion as users might have entered data slightly incorrectly but without the help of the label might not be aware of the format to use for data.

If you must look at inline labels, I suggest using something like Brad Forsts floating label pattern.

Coming to the sliders, you could look at a simpler and smaller design to show the slider interaction which would also allow you more space above to highlight the values selected.

Here are some examples

enter image description here

enter image description here


If the values must be shown all the time - put them above the sliders and move the handles inside the sliders (so they don't cover the labels and takes unnecesary space). This will (probably) take care any problems with the hand covering what's beneath on touch screens.

If the values mustn't be shown all the time - make the value popup while dragging the slider.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.