I am working on the app which has the following controls which do two things

  1. Size - It contains for controlling the background size of an element's background image. As per https://tailwindcss.com/docs/background-size/ this can be auto, contain and cover.

  2. Movement - It allows the user to specify whether or not the background should be parallax or fixed.

I do not think any of these terms are user friendly. I was wondering what would be the best way to communicate them to the user?

enter image description here

P.S. please ignore the typo, it should have been fixed now.

  • Does the user get a preview of what happens?
    – Big_Chair
    Commented May 5, 2020 at 8:30
  • No they do not get a preview
    – methuselah
    Commented May 5, 2020 at 12:12

2 Answers 2

  1. Size is a bit tricky as users may not really understand what auto, contain, and cover means. Those are more programmatic terms. What you are really doing when you are setting a background-size is scaling it in a certain way. So maybe a better way to convey the action is to call it "Scale".
  2. Parallax is a scrolling effect so it is probably better to call that an "Effect" as opposed to "Movement".

First of all I would recommend using buttons instead of dropdown as there are few options with instant changing of the image. In this way even if the terms are not familiar to the users they are able to quickly test and select their preffered option.

Size Auto Contain Cover

Movement Fixed Parallax

Now for the terms instead of Size you could go with either Position or Mode. Position was used in windows XP to set an image as Tile / Strech / Center. Or Image mode as it would be generic enough but suggestive.

For movement I would go with Image Effect .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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