4

We have a form that allows a person to indicate a curriculum, level, subject and price, but we're trying to figure out the most intuitive way of doing it. There's a few challenges though:

  1. The hierarchy is as such Curriculum -> Level -> Subjects -> Price
  2. 1 curriculum has multiple levels.
  3. Subjects are linked to a level.
  4. Users can select multiple combinations of anything.
  5. Users can input different prices for any combination, but there has to be no repeats. for e.g. Curriculum 1, Level 1, Subject X, $XX. Curriculum 1, Level 1, Subject Y, $YY.
  6. Our studies have shown that most users input price based on level, rather than subject, but both should be provided.

Here's the proposed suggestion:

1.step 1

2.step2

3.step3

4.step4

Users are expected to move from left to right, and completing each drop down allows the next drop down box to be activated. Is there a more intuitive way of doing things/organising things better?

5
  • I think the way you have it is as good as it gets. Only other suggestion would be to have it top down instead of left to right or have arrows to indicate the direction. good luck!
    – user46390
    Apr 7, 2014 at 14:20
  • Yep, I think it looks fine. I wouldn't break it up as suggested below, I think the fewer clicks the user has to do the better.
    – Franchesca
    Apr 8, 2014 at 8:02
  • You can highlight the column with a box and move it to the right as soon as a selection is made in the current column. This will guide the users' focus accordingly Sep 6, 2014 at 19:12
  • Adding a line or larger gutter between the rows would clarify the left to right flow of the experience.
    – Jamesh
    Jun 3, 2015 at 23:00
  • I think it look fine, however I've noticed that with 2 rows I think it's already demonstrating an issue you might have later when a user could be using 5+ rows. The screen will look like a lot of blocks. I would suggest creating some sort of divider between the rows. Dec 2, 2015 at 16:15

5 Answers 5

2

For me the "row" approach is okay, specially if you have a LOT of registers, but I've thought of an alternative that might work better if the common case is that just a few registers are added, reasons:

  • Enhances the relationship between fields (law of proximity)
  • Requires less fixations/eye movement. (see arrows length)
  • Improves path of completion.

enter image description here
I made this image to illustrate my idea:

enter image description here

Another minor comments:
"Add new line" it's okay, but if it's possible, I would rename it with "Add new X" with X representing what you are adding conceptually and not just at a structure level, to be more meaningful. (anyway I don't think "add new line" harms users' mental model at all). I have my doubts about the size and horizontal position of the button, but since I can't think of a real improvement, I'll just leave my thoughts about it:

  • Its width seems too much for the text it has and also it's similar to the inputs' width (visually "blending" with them a bit)
  • The green makes it more noticeable than the inputs, which might result distracting.

Lastly, the controls for input fields seem right to me.

1
  • 1
    This layout also plays better with the vertical nature of dropdown boxes, so each task is (in this design) organized in the same column, and same general area of about 250x250px. Aug 3, 2015 at 15:54
0

My only feedback would be the fact that it's displaying all the content at once. It looks like quite a lot to take in at the start. There could be some indication of 'steps', showing three different screens, only revealing the next piece of information after the last has been selected.

This makes sense given that the next field requires the previous to be selected before continuing.

Especially given that the second and third levels are multiple select; having the different screens would allow you to draw more attention to this and make it obvious to the user.

I'm thinking something like this with the Memory / Attention / Speed being your different levels. That site has a great UI (slightly irrelevant) which helps. Also this example is slightly less elegant but works. You could use AJAX to display the content.

2
  • Hello, thanks for all the feedback, i really appreciate it. One of my concerns is that users don't know how flexible the system is, i.e., they don't know that they can price different subjects at the same level for different prices, unless they really "think" about it. it doesn't immediately indicate to the user that "wow! i can price things differently". I'm afraid this might influence a certain pattern to pricing (e.g., same price for every level and every subject), and users don't see how they can customise from first glance.
    – eugenesoo
    Apr 8, 2014 at 14:31
  • That's a fair point. I guess using the step by step in some of those examples it's quite clear there's process and the copy could indicate that there's customisation. Even the title could be enough to indicate this. Although that's not a 'visual' cue as such. Apr 9, 2014 at 7:07
0

I think what you have isn't bad, however I would make a few small tweaks.

I would look at introducing headings to help the user. Maybe seeing it in the context of the website would help, but to me, I find it difficult to tell what each field relates to. You could also include a progress/stepped approach here by adding a number or icon to say '1. Choose Curriculum', '2. Your level' etc. These would only be listed once above the first row (and not above every row). If you add these in, it will add clarity for the user, and what steps are involved and it should remove some of the complexity and thinking needed on the users part.

The copy you have used may not be final, but I would change the copy on the 'add new line' button. It should be relevant to the context and tell the user task it will achieve. Something like 'Add Subject' (or whatever the most suitable term is for the user to understand). You could also include a plus icon to make that visual connection.

Regarding the price, if you were to follow the above suggestion and add headers above each column, you could also add in a small tooltip/text to let the user know that the price can change.

You might also consider approaching this form in a more vertical format. It probably wouldn't look as good, but it might be simpler for the user to understand. That being said, I think the horizontal format you have can work well.

0

I would consider moving from a dropdown box to a grid with all subjects. Seems like it'd save a fair few clicks.

0

I'd also recommend maybe check out how Chosen handle multi-select dropdowns. I think their solution is elegant especially because it allows you to easily remove one of the selection without having to open the dropdown again. In your solution you have to open the dropdown to un-tick something. Also, I think having checkboxes inside a select is sorta hectic and might be a bit overwhelming for some users. I like to keep form elements fairly separate because forms are stressful at the best of times :)

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.