I have a windows based form in my project for adding contact details.
Here's a screenshot
I have added textbox for First name, Last name , var and cst (vat and cst are numbers related to registered companies)
And I have used list boxes to store multiple mobile numbers , address, etc.
For some reason I feel that the UI is not user friendly at all. I feel like every thing is congested.
Can some one guide me in improving my user interface?
By looking at your layout I suspect that when you created layout for your form you felt like you needed to fill out all the space you had. In reality, white space adds clarity and sense of order. I believe that the biggest issue in your layout is spacing. With spacing you can visually group certain areas of layout. Also, two column layout in forms generally isn't a good idea. The eye flow on the form is from top to bottom.
In my layout below I have done the following. I have place all the fields in one column and used space to group some inputs like mobile, telephone and fax. I have also remove the UI element you had for multiple entries as it is very clunky and takes up unnecessary real estate by default. In my example a field allowing multiple entries uses a plus button which will simply add a new text input. This was each entry stays editable at all times and only uses space required.
I have also placed the save button in the visual flow of the form and replaced the "clear" button with "cancel". Moreover, I have moved the "cancel" button away to the right so it isn't in the eye flow of the form and would require extra effort to be found thus avoiding accidental click.
A contact/address block is fairly self explanatory. As such, you may not need to rely on labels as much.
I'd use a combination of inline labels and regular labels, and then remove the lists of emails/phones and instead combine them into one element (a list that you can append to directly):
name [first ] [last ]
address [street ]
[city ]
[state ] [country ] [zip ]
email [email protected] -
[add email ] +
etc.
Reduce your spacing between related elements. Also reduce the amount of space you give for the mobile and telephone numbers. I, of course don't know your customers, but would assume that they don't have more than 2 or 3 alternative numbers TOPS, but in reality maybe only 1. If there are more, use a scroll bar. Same thing with email, fax, website and address. Put the save and clear button next to each other.
Even though written as pertains to web forms, you still may benefit quite a bit from reading Luke Wroblewski's "Best Practices for Form Design". http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
Another informative article by Luke W. is available detailing the options for placing the two bottom buttons. http://www.lukew.com/resources/articles/PSactions.asp
The current layout makes it look like two distinct columns to me, so having first name at the head of one of them and last name at the head of the other, with the save and cancel buttons similarly aligned, threw me off initially. I agree with the suggestions to reduce the "white" space and move similar items together.
Do you have the ability to make the big spaces (for multiple phone numbers, fax, etc?) react to the data? If I only have one URL I don't need to see a big empty space where four or five would fit. Does whatever platform you're using to make this UI support something a little more data-driven, with those spaces expanding or contracting as needed. Or perhaps smaller spaces plus scroll bars would work better -- how many people have even as many as three mobile numbers, after all?
Just some thoughts.
First of all, try to group interdependent elements, like Telephone input and the list box bellow. Make it clear that they are connected by reducing the space between the two. Then you can also make the input field a bit wider so that they are closer to the label. Like this:
Then you replace the "+" and "-" buttons with some icons, make sure the input and list box have the same border style and things start to look a bit better.
