12

In our application users/developers are able to build their own web layouts via editor. Therefor, they need to define container sizes with either percentage (%) or pixels (px). Currently, this choice can be made within the input field. I did not even know this until a co-worker told my about it - the placement of the unit choice within the input field was just not obvious to me and is difficult to learn for new users.

Current solution:

enter image description here

I came up with two alternative solutions:

(1) Choose the value's unit via toggle switcher

(2) Choose the value's unit via dropdown

enter image description here

One drawback I'm aware of is that the form starts to look more cluttered.

What are your experiences with use cases like this? What are your thoughts about these alternatives?

Improve this question
3
  • 1
    better remove the up/down buttons
    – Chriss
    Mar 24, 2017 at 12:55
  • 4
    I personally prefer the dropdown (3rd option) because it provides infinite room for more options (not necessarily because you would want 1,000 choices in a dropdown but at least it won't break functionality nor the layout). Have you considered allowing users to simply type the units directly into the textbox? And then onBlur, parse the field and leave behind only the digits and try to match the left over chars to the choices in your dropdown and select the units for them? It will also make your form less cluttered because you will remove the useless (IMHO) up/down arrows.
    – MonkeyZeus
    Mar 24, 2017 at 13:02
  • I agree with @MonkeyZeus: Whichever option you choose for mouse input, make sure to also enable the user to change the unit by explicitly typing it into the input field together with the number! Most graphics softwares and online website builders work like this and it should be expected behaviour.
    – Emil
    Mar 24, 2017 at 13:20

7 Answers 7

Reset to default
8
  1. Good defaults. Keep as the default the unit mainly used.
  2. Switches don't work, you can't tell fast which one is on and which one is off.
  3. In the current setup, you can't know there are other options. Nothing tells you "hey, you can click here for other options"

I'd go with dropdowns. Everyone knows how to use them and they work. They might not be so pretty, but they work.

Improve this answer
8

Ideally your field should accept both units in all combinations:

10px, 10 px, 10%, 10 % -> all should work; you can add inline validation though

Then you can add a short explanatory text at the beginning of the form or with every field depending on your goals.

I suggest to hide incrementing arrows on the number field (they are to small anyways - see Fitt's law). Your fields also can be shortened, because input is max 10 symbols.

Consider splitting related input by group and think twice before going two column layout in form.

Dropdowns and toggle suck I'd say.

no dropdowns or toggles

Improve this answer
10
  • 3
    What is the user doesn't provide a unit?
    – Chriss
    Mar 24, 2017 at 12:53
  • 3
    @Chriss you pick a sensible default.
    – Seiyria
    Mar 24, 2017 at 13:16
  • 13
    It looks like one of the options is μ, which many people find tricky to type.
    – TRiG
    Mar 24, 2017 at 14:41
  • 2
    @MPJ I think if you want good UX, you need to increase your development efforts. As for js bit not sure I understand. You can parse the value and then process it as you like: extract a number or units, whatever. It's not that difficult or time-consuming.
    – Runnick
    Mar 24, 2017 at 15:51
  • 1
    for example currencies? Someone might want to use dollars, but there are plenty of different dollars. Or where both dp and sp are accepted, and since s and d are close, the risk of typo is non-negligible.
    – njzk2
    Mar 24, 2017 at 19:54
4

(1) the toggle switcher:

  • +1 Only one click is needed to switch
  • -1 It looks a bit messy when different units are selected.
  • -1 Maybe some users are confused which unit is currently selected the gray or the white.

(2) dropdown:

  • +1 It looks clean and is intentional.
  • -1 You have to perform two actions: aim and click on the dropdown, click on the unit you want

(3) button switcher: A simple button that shows the current unit. When pressed it switches to the other unit.

enter image description here

  • +1 No up/down button
  • +1 It looks clean and is intentional.
  • +1 Only one click is needed to switch the unit
Improve this answer
4
  • 3
    +1 for the confusion around toggle switchers. It may be because I am partially color-blind that I rarely trust colors to start with, but whatever it is I am firmly in the "confused users" groups when it comes to understanding which of those toggles means selected. I mean, greyed both mean "pressed" and "disabled" so...
    – Matthieu M.
    Mar 24, 2017 at 13:04
  • 12
    One important negative of the button switcher is that it doesn't make it very clear what exactly your choices are. You have to just click around until you get a mental image of what the options are, and then choose which one you like the best. That's not a problem with a drop-down: you can see all the options at a glance, with only a single click, and then choose the most appropriate one.
    – Cody Gray - on strike
    Mar 24, 2017 at 16:31
  • 1
    Also consider if there are > 2 options. Then the "only one click" intention goes right out the window for the switcher. And it will likely be > 1 click for many users, as @CodyGray mentions. Users want to see what their choices are.
    – Broots Waymb
    Mar 24, 2017 at 19:33
  • +1 with @CodyGray's comments. The button switcher is "only one click" IF you know that there's more than one option AND you know what those options are. I'd consider the dropdown option better than the button switcher in absolutely every case
    – Algy Taylor
    Mar 27, 2017 at 8:55
3

A problem you might face when using a dropdown or toggle buttons is that the user enters a value not valid for the new unit.

For example the user enters:

Width: 800 [px]

and switches to percentage:

Width: 800 [%]

You could reset the value to 0% automatically, but if the user changes back to px then he lost the 800 he entered before.

Consider using a different input for each value, and possibly a different type of input as well for this scenario. A suggestion is a range slider for the percentage input (you might want to still give the user a way to type a value).

Improve this answer
5
  • 1
    I would be annoyed if it just resets invalid values instead of telling me that the values are invalid.
    – Jimmy T.
    Mar 24, 2017 at 17:11
  • @JimmyT. I agree, I think the conflict should be avoided in the first place.
    – Alvaro
    Mar 24, 2017 at 17:16
  • 1
    @Alvaro >100% shouldn't be an invalid input. It should, at the very worst, indicate that the value is unexpected, but I've used 125% (actually really common when dealing with visually limited users) and would be floored that some 'developer' was clever and flagged that as invalid.
    – Der Kommissar
    Mar 25, 2017 at 0:06
  • @EBrown Fair enough. This will depend on the nature of the attribute. I used a very high value to bring an extreme case (800). There may be situations where a 15% is more than valid but 15px is not acceptable. The point is the two inputs could represent very different end values and this situation should be handled when changing from one to the other. In some cases there won't be any conflict and in others there might be. Thanks for the feedback :)
    – Alvaro
    Mar 25, 2017 at 8:12
  • 1
    I like your concern, @Alvaro. We definitely have to find ways how we deal with unexpected values for each form field.
    – Fabian Kuenzli
    Mar 28, 2017 at 6:47
2

When you provide a feature to use field level unit type - you can't avoid repetition of those elements unless you think of showing them on mouseover.

Looking at the form above; I think you should keep the option on Form level so the user either uses px or % for the entire form. Do a little research on what units the users are using the most, and keep it as default and then provide a link/button on top of the form to switch between the units:

enter image description here

As per my experience the percent unit behaves differently in different browsers - so I'm assuming the type of users you mentioned above will choose pixels.

Improve this answer
2
  • 2
    The problem with this is that you assume that the user wants to use % or px the whole way through the form. I've seen many cases where this would break the layout entirely. I want width: 100%; margin: 5px;.
    – Der Kommissar
    Mar 25, 2017 at 0:08
  • I agree with @EBrown: For some properties users have to set percentage values, for others px values. It's a rare case that it's the same unit for every property of a layout container.
    – Fabian Kuenzli
    Mar 28, 2017 at 6:44
0

As dropdown option is most prefered for this, for example, Adobe photoshop -> new document window display the Width/Height selection with the unit dropdown like this. enter image description here

If user is going to select one unit for few values, you can categories the values and provide common dropdown for selecting the unit. In that way, providing text input is sufficient for user to enter the value, since the unit has been already set.

Improve this answer
0

I think what you have in the second "dropdown" comp is a pretty good start. I would adjust the field sets a little bit to improve the overall experience. In doing some research, I discovered how some custom web design tools handle their container layout fields. One in particular was WebFlow. Their Sizing tools are pretty intuitive. First they set defaults for the width and height to "auto". For the min-width and min-height they set the defaults to "0". The max values are defaulted to "none". By setting some basic layout defaults, you can give the user the option to not input any information if they are not sure on what exact numbers to use for particular fields. Allow the sytem to autogenerate a basic flexible layout for the user.

See the screenshot attached.

enter image description here

Improve this answer

Your Answer

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

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