I have to display a form with 12 months and for each month a number input and a toggle button. This form is in a pop-up so I don't have a lot of place. I did two columns with six month per columns. This a screenshot of the columns. form

Do you think this positioning is intuitive for the user ? Should I display the month in another order (January, February, March, etc. in the first column, and July, August, September, etc. in the second) ?

  • 7
    I'd be expecting it to be Jan, Feb, Mar in the first column
    – icc97
    Oct 8 '13 at 14:41

Compare reading patterns. They are based on Gestalt principle of proximity. It's better to slightly re-organize months, i.e. your second choice. enter image description here

  • 2
    Ok I get it. thank for this answer and for Gestalt principe ;)
    – Alex
    Oct 8 '13 at 15:01
  • Plus one for bringing up the Gestalt principle :) If a lot of people knew it off the bat, it would make design decisions far easier.
    – Majo0od
    Oct 9 '13 at 15:20

You're not saying what the use case is for this. Can you elaborate? Why would one need to specify values for all 12 months at the same time, and why would some need to be "estimated" and some "requested" instead?

If you don't need all at the same time, have you thought about just making it one entry with a popup for the month name? Or if you need more than one but not usually all 12 months, building a list like

The Finder search panel

? I.e. have only one (or a few, whatever a typical number of months that people will request at a time) field, and "+" and "-" buttons to add/remove fields ? The month name would then be a popup, allowing selection of all months that aren't yet present in the list.

Alternately, you could display it as a table, with the months listed horizontally, and below each name the edit field and switch button. (Also, how large will those numbers be? You can make the fields narrower, they only need to be large enough to hold the widest number).

Depending on what an estimate and a request is for, you could also remove that from the table and put it below the actual month list, allowing a user to select ranges of months using popups, like

Estimate: [October v] through [December v]
Request:  [January v] through [September v]

Or even automatically assign these values (e.g. if estimates are needed only for months that haven't happened yet) and just display:

Estimating October through December

Or just have one UI element per month for estimating those months that can't be requested for some reason. Though one needs to be careful with this, as you don't want users to be unsure what the opposite of "estimate" will turn out to be.

But really, I don't know what your target audience or even use case is, so it's hard to make any substantial suggestions.

  • Thanks for your answer. This is an internal application for my company. Managers have to fill (about each month) the forecast of resources for all the month until the end of the year. They also have to select if it's a definitive request or an estimation.
    – Alex
    Oct 9 '13 at 14:28
  • In that case, it may be worth splitting this into 2 forms: One for estimates, one for actual requests. That also makes it harder to accidentally lock yourself in by forgetting to make it an estimate. (At the least, using "estimate" as the default, not "Request" sounds like the safer choice) Also, might be possible to leave out fields in one form that have already been filled out in the other, then. I.e. all requests won't be on the estimate form anymore.
    – uliwitness
    Oct 21 '13 at 13:04

I found the gap between the 2 columns of months too large. After having read the 1st column my eyes didn't go to the second column... Why not something like that enter image description here

  • 1
    Sorry, but this version seems much more confusing that the one shown in the question itself. Why have you flipped around the fields for those on the right compared to those on the left? I don't understand why having the labels appear after the fields for some of the fields but before the fields for the others is a more usable approach that being consistent with all fields.
    – JonW
    Oct 9 '13 at 13:51
  • @JonW This design allows you to find the month and then work outwards. If (and only if) you're searching for a particular month first, then it could be an improvement on the original with the months ordered row-wise because it keeps the month-names together; but the best answer is to work in columns. Oct 9 '13 at 13:54
  • According to me the best answer is to work with only 1 column. I don't know why @Alex wants to use 2 columns. I guess he has specific layout constraints. Considering this constraint, all other solutions would have drawback(s).
    – RawBean
    Oct 9 '13 at 14:10
  • While more aesthetically pleasing, this is unreadable, and doesn't reflect actual work order. The user will want to have seen what month a field is for, before entering values for it. The eye tracking on this form would be all wrong and inefficient.
    – uliwitness
    Oct 21 '13 at 13:06

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.