I need to allow the user to select a unit when entering a certain amount for a certain ingredient. Certainly :-) I want this to be rather dynamic. My web-app has many facets and I want to use the same module every time I need a user to enter an amount.

What I came up with is the following flow:


download bmml source – Wireframes created with Balsamiq Mockups

What are your thoughts about this? I don't want to bother the user too much, but he needs to be able to enter the correct unit obviously. There are cases where I have no idea what the unit can be.

  • Why does your second version contain units for different measures? If you know what units a field is supposed to contain, filter them down to only the applicable ones even if this is more implementation work for you. Unfiltered lists are only acceptable in cases such as conversion applications, where you don't know if users will be entering length or weight or something else.
    – Rumi P.
    Commented Jan 30, 2014 at 11:13
  • I hate to get into detail about this as I want this 'widget' to be as flexible as possible. But to give you an example: The value they need to enter in this case is to measure the necessary ingredient amount for a certain product. This can be anything from pieces to millimeters (time excluded in this case). I see your point though and I agree that you should be able to pass in an initial filter to this widget.
    – Peter
    Commented Jan 30, 2014 at 11:21

2 Answers 2


You could use pop-up block, where units are grouped by type. Headers allow fast scanning across unit types.

enter image description here

In cases, where you know unit type (e.g. Mass or Length) it's better to limit the types to minimize information overload.

Also it's good to implement "memory effect", highlighting previously used units to find them more faster. The assumption is if user have used some unit previously, it's more probable he will use it again.

enter image description here

  • Upvoted. I would also display the 3 previously used units (or used most times) between the amount and "units". This would save a click, scan to find the measure, click again.
    – jff
    Commented Jan 29, 2014 at 16:53
  • @jff Thank you, your suggestion has sense! I think the pop-up could be displayed on entering the value first time to force user select some unit. It can be distractive, still let not to miss a unit. Commented Jan 29, 2014 at 16:58
  • Thanks Alexey, I like your idea of grouping them! It seems to be very suitable if you have a lot of different units.
    – Peter
    Commented Jan 30, 2014 at 11:25

Couple of variables

  1. How well do users know standard notation
  2. How many units of measure do you have to deal with

If users mostly know and stick to S.I. and other well defined units, then it will be enough (efficient, non-distracting and clear) to just confirm an entry with full text version after completion i.e. [250 m] entered becomes [250 meters]. For assistance just link to a unit reference.

If the full gamut of units (i.e. say all options for acceleration, light intensity, ... ) is available to the user, then even a filtered list is likely to be noisy (showing rare units, users choice not visible early, large scale of updates). See the number of hits found in this unit dictionary for "milli" and other common units. If do decide on doing an auto-complete for the full gamut of units, make sure the most commonly used units get highr precedent in the filtered list.

If you can limit number of units in play i.e. only need to include common Length and Area measures and the users are very in-accurate in their unit abbreviations then auto-complete should be useful.

If have to have full gamut of units and their are novice users, then consider establishing nature of the measurement. Heat, Speed, Length, Acceleration, etc and providing a full browse option.

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.