User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

We are designing the interface for our shopping cart. More precisely, we call it register page which is used for registering one course at a time.

However, we ran into a little disagreement in organizing its layout. Below are the two versions which we are considering.

So here are the things that concern me:

  • Label aligning: From some online resources, I have learned that right-align would be a better choice (version 2). So version 2 has this and centered sections except for the first section. However, someone said right-aligned label would break whole page alignment. All sections must be aligned the same style (center or left align).
  • Page layout: In version 1, each section is vertically organized separated by a light-colored horizontal bar. In version 2, the two middle sections are set side by side.

Could you please tell me which version you like better?

If you have time, please help me analyze further details.

What do you think of the two version in term of Label aligning, Page layout? Which would make a better choice or is there any other option?

Is it true about the thing all sections must be aligned the same style? Does the version 1 or version 2 look unbalance?

What improvements can be made to version 1 (or version 2)?

Version 1 version1

Version 2 version2

share|improve this question
up vote 1 down vote accepted

Don't have them use numeric steps. And don't use drop-downs when they select their state. Common problem. Just have them type the two letters.


download bmml source – Wireframes created with Balsamiq Mockups

Center sucks. Align left or right.

I liked it better when each section had 100% width. Don't have a good design guideline to rationalize this feeling.

I like your designs. For the second sketch, maybe stack both input boxes in the first section, instead of placing them in-line with lots of whitespace. People scan the page from the top left downward. Stacking might prevent users from missing the box. Using AJAX will update the text without requiring the user to click.

One more thing I caught. If you're going to use horizontal rules for each section, maybe include a header to explain why it's sectioned off? Example:

stuff that's not cool


stuff that's way cooler with that heading up there

share|improve this answer
Thanks for the sketches! – Tyler Langan Nov 23 '12 at 8:58

Your Answer


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.