3

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.

Improve this question
  • You say "a list must show for standard or popular dimensions". Can you give examples of what would appear in that list? – Matt Obee Sep 23 '13 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 Sep 23 '13 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 Oct 2 '13 at 10:25
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

Improve this answer
  • 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 Oct 3 '13 at 17:53
  • Hi, @Justin! Glad to hear you. I made the mocks with Xara Designer, it's mostly like Illustrator but much lightweighted. – Alexey Kolchenko Oct 4 '13 at 8:23
1

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.

Improve this answer
  • 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 Sep 23 '13 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 Sep 23 '13 at 19:26

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.