I have a HTML form that requires the user to specify dimensions for an item they are ordering.

A list must show for standard or popular dimensions. Originally this would happen when the field is selected, the list would show below. Maybe a "search" icon on the right side would be more fitting?

Having single fields such as

Length: 42.12 Width: 12.3 Height: 4.42

could look nice with some styling, but having a drop down appear underneath these fields seems a bit odd.

Alternative would be a single field like so:

Dimensions (in.) : 42.12 x 12.3 x 4.42

The separator makes this painful to look at. Maybe styling the text so the separator is very faint would be good? For validation I could prevent the user from typing any non-numeric or decimal point character, and when a space is hit it automatically adds the separator, but this might be confusing.

  • You say "a list must show for standard or popular dimensions". Can you give examples of what would appear in that list?
    – Matt Obee
    Commented Sep 23, 2013 at 16:45
  • "42 x 21 x 3", "12 x 12 x 3", etc. Basically if the item is not in the list, then the order will be marked as having to be quoted first. The list will contain industry standard dimensions.
    – Justin
    Commented Sep 23, 2013 at 16:49
  • I think the slider idea is a good one, it may be worth checking out Bret Victor's scrubbing calculator that puts an idea like this into action worrydream.com/#!/ScrubbingCalculator
    – user35984
    Commented Oct 2, 2013 at 10:25

2 Answers 2


How about such solution:
enter image description here

The advantages are:

  1. Boxes for Length, Width, and Height are clear defined

  2. Standard sizes ▼ link clear shows interaction ability

  3. Popup dialog doesn't depend on field selection, no hidden rules

  4. Control allows easy editing

    enter image description here

  • Ha, very nice! The current design I went with is similar to yours. The difference is the "standard sizes" is a drop down on the left, when it's set to custom the input fields appear. I like your solution better, and will consider it. Thank you very much! Also, what did you use for screen mocks? Often I end up using illustrator here!
    – Justin
    Commented Oct 3, 2013 at 17:53
  • Hi, @Justin! Glad to hear you. I made the mocks with Xara Designer, it's mostly like Illustrator but much lightweighted. Commented Oct 4, 2013 at 8:23

How about three sliders, each of which has markings at popular dimensions for the respective dimension.

For example:

Length: |---|------|--[x]-----------|----------|
        2   4      8                16         24

By splitting them up to three inputs you can avoid confusion about parameter order, e.g. was it length x width x height or width x height x length, etc.

Providing the popular choices on the scale of that dimension, you can visually indicate and nudge users towards standard measurements, which still allowing granular selection should users require it.

Update: Thanks for clarifying your problem in the comments. Maybe you would be best suited with a drop down of common measurements. The drop down could have one measurement option "custom", which, when selected, shows three input fields for typing in custom dimensions.

  • 1
    Interesting idea. I should of added to think of the standards as a whole, rather than standards per dimension. Ex, 1 x 2 x 3 would be a standard, but their is no individual standards for length, width, and height as separate measurements. Begin able to key in data too is a must for fast entry for those who already know the standards.
    – Justin
    Commented Sep 23, 2013 at 18:11
  • Oh I see, that does make my suggestion less useful indeed - maybe I'll think of a different approach still, in which case I'll update my answer. I guess the problem boils down to having mostly 3-key standards or 3 individual measurements for custom input.
    – kontur
    Commented Sep 23, 2013 at 19:26

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.