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..
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityHere'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..
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.
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.