Here's my form layout.
Clicking the add school will add another form table at the bottom.
And I think the "Add School" button is too long.. How can I improve this..
-
I'm not going to add to the solutions below, because i think they're pretty good, but I will point out that horizontal grouping of fields when attributes are different is a bad idea. In the example above you have associated date attributes with school attributes with visual styling and positioning suggesting they are linked. Does this make sense? – colmcq May 4 '12 at 11:13
The form is clear, but suffers a bit from being samey... all the fields have equal weight, and there is no clear order to fill them in.
download bmml source – Wireframes created with Balsamiq Mockups
I moved the labels inside the fields which saves room but does require some javascript to be perfectly usable, and changed it to be a mostly vertical layout. The order of the fields is clearer this way. I also changed the 'Add' button to be less prominent (a link), because it shouldn't be a full 'Submit' or 'Cancel' type button; it has a different semantic role.
-
1This is a better layout, however the 'Add another school' is still an action, it's not a link so it should still remain a button. – JonW♦ May 4 '12 at 7:48
-
1
-
I would add it aligned to the left, as a text link "+ Add School", not as a button. I have a feeling that there is a 'save/submit' button below it somewhere in the form, so you would not want "add school" to be that dominant also..
A few differences made to your current layout would make it pretty good.
Some considerations I have. First and foremost you should place the user control to add a school at the top of the list instead. Consider users opening the view already knowing that they will add a school item to the list, do you want them to have to scroll down to the bottom of the list to get to this control? That is if they luckily even know that this is where the control is located.. I would think not.
Ordering the list so that the user action is at the top, and that new items are also in addition to this added to the top, for immediate revising after adding, would be the appropriate mapping of this action.
In addition to that I would also agree with Myrddin. The form for adding new items rather than present items should be weighted differently. Design a framing for the form, with a different background (light clear blue, or light clear green perhaps) to have it stand out more in the context.
answered May 4 '12 at 8:18
