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.

I am working on a UI design. I have good CSS/HTML knowledge. But not good in UX.

Attached image is the UI I created for one page.

enter image description here

I tried alter it nearly 10 ways, still my customer says it looks weird.

I can make fields one by one, problem is it will show a scroll bar.

How can I improve this form's UX?

Any sample or https://gomockingbird.com/ kind of wire frame / suggestions are all welcome

The form has a fixed, 960 pixel width.

share|improve this question
add comment

2 Answers

up vote 26 down vote accepted

You have a lot of information in that form - it isn't organized very well. Consider subdividing the form fields into logical groups that will help orient and guide the user (the HTML fieldset and legend tags work well here). Also, present a uniform visual style - right now your inputs are all over the place. Line up your form fields so that the user's eye can easily scan the form. See a sample interface below (I didn't include all of your fields because I wasn't sure how to categorize them):

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Well done Joshua! Concise and elegant solution and explenation. –  Yosef Waysman Apr 7 '13 at 13:06
add comment

The problem is your page is without structure, making it hard for the user to know where to start, where to go next etc.

There is plenty of evidence that having all your fields in vertical alignment will improve usability and minimise time, burden and errors.

Sure, it is nice to avoid scrolling if possible, but users work quite happily with them. Furthermore, even if you present the fields the way you have here, there's no guarantee you'll avoid a scrollbar thanks to different screen and window sizes, screen resolutions, level of zoom etc.

Joshua's suggestion to group fields into sections could also improve the experience, however there is also evidence that people sometimes base their decisions about which fields must be filled out on the relevance of the section headings.

I would keep your field labels flush right (i.e. butting up against the field) rather than flush left as Joshua has them in his mockup. This makes it easier for the user to associate labels with fields.

All in all, alignment is very important to the forms user experience. If you want to read more about it, I wrote a detailed post on my website, which talks about the four different places alignment come into play in a form.

share|improve this answer
    
Good points - there is a lot of work that goes into excellent form design. –  Joshua Barron Apr 7 '13 at 16:48
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.