Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Here's my form layout.

enter image description here

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..

share|improve this question
    
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
add comment

3 Answers

up vote 4 down vote accepted

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.

mockup

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.

share|improve this answer
1  
This 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 be wary about placing labels inside the fields. –  Alvin May 4 '12 at 9:58
    
yeah, I'd go with this. –  colmcq May 4 '12 at 11:10
add comment

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..

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.