form How to unclutter this web form?

[whitebread]

I'm helping a client with a site. He wants to sell T-shirts. I asked him for a sketch of how he wanted the site to look, so I implemented it. The problem is, we both agree it looks too cluttered and "busy."

Could you guys give him and I some ideas on how we can improve the layout?

Thanks :D

Here's the screenshot:

[primexx]

hide more granular options until the user selects a higher level option. use an add/remove mechanism to allow them to select multiple ones repeatedly on the same page (display the selected stuff in a list or something)

or even just aligning the input boxes would make a huge difference

[Lant]

I would definitely align the text boxes. Also you could get rid of the prices and update a total when a user changes a value in any text box.

Plus and minus buttons to the right of the text boxes may also be worth considering

[DrJohnSmitherson]

Align the text boxes and the prices. That should help a lot.

[Aethec]

Here's a quick mockup using Visual Studio:

You should use numeric up/down controls for the quantity, not textboxes (do not allow the user to enter invalid values).

Also, an "edit" button would be welcome.

[Dick Montage]

Sites to look at:

TeeFury.com

ASOS.com

[Kami-]

Here's a quick mockup using Visual Studio:

You should use numeric up/down controls for the quantity, not textboxes (do not allow the user to enter invalid values).

Also, an "edit" button would be welcome.

This is how I'd do it, only replace the 'Cancel' word with 'Remove' or an icon ;)

[Xoligy]

Here's a quick mockup using Visual Studio:

You should use numeric up/down controls for the quantity, not textboxes (do not allow the user to enter invalid values).

Also, an "edit" button would be welcome.

This is a better design as said though use a quantity button instead something like "< [0] >" would be better, if they added to the cart it looks like "< [5] >" could be done to the lower part too where the quantity is instead of that cancel.