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 have a windows based form in my project for adding contact details.

Here's a screenshot

enter image description here

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?

share|improve this question

6 Answers 6

up vote 10 down vote accepted

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.


enter image description here

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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:

enter image description here

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.

share|improve this answer
2  
I am not sure why it got a downvote, because the answer seems to be a valid advice and answering the question, so +1 to counter it. (I think the improvements are small however.) –  Inca May 20 '11 at 19:32
    
+1 from me for better spacing making a difference. You have been a bit restrained in how much of a layout change you've made. Save and Clear are miles apart, and stacking first name / last name would also help. –  James Crook May 20 '11 at 20:36
    
I think I have an idea why and who is giving downvotes for no reason, but thank you for your consideration. You have to keep in mind that being an application, the constraints are higher that it would be for a website. That is why my proposal came in this form. –  Marian May 20 '11 at 21:40
1  
-1 Just because this form is not on the web does not mean it can't look good. There are still multiple issues with the suggested solution. –  Denzo May 20 '11 at 23:12
    
@Denzo, maybe you are a developer and you know better. None the less, my comment stated that "constraints are higher that it would be for a website" I did not say that an application can't look as good as a website, or even better. I just need to point out that you gave a downvote to my response but you based your decision on my comment, not the response. The two are different things. –  Marian May 20 '11 at 23:39

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   existing@example.com          -
        [add email                  ] +

etc.

share|improve this answer
    
In the question it is clear that the Address can be entered multiple times. In your answer, however, it isn't the case and by adding a plus button next to street would be visually suggesting that it would add another "street" field. I think it would be great if you could use some graphic tool to visualize your idea as the question is mostly about the layout and in this case the layout would improve the user experience. –  Denzo May 20 '11 at 23:52
    
Yes, ASCII isn't going to have quite the fidelity needed, but the idea is there. With proper visual grouping (fieldsets) one could replicate the +/- with any of the groupings. –  DA01 May 21 '11 at 2:28

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.

share|improve this answer

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.