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.

Given the interface below, what would be the best way to contrast the labels from the data labels?

The only thing I could think of would be to shade the background of the labels, however, according to LukeW http://www.lukew.com/ff/entry.asp?1502 background shading is undesirable because it adds visual elements to your layout.

As you can see, if there is any data that is blank then the information looks spread and unorganized.

enter image description here

share|improve this question
1  
You already have all the labels in bold, that has a similar affect as increasing the contrast. –  Danny Varod Jun 26 '12 at 15:49
    
True. There is a lot of info out there on how to improve layouts with labels and inputs, but I haven't found anything on labels with readonly data. Any way to improve on this? –  Rich Jun 26 '12 at 16:38
    
You could make the data italic or change its font. –  Danny Varod Jun 26 '12 at 16:47
    
This is a visual design question, one that is not easily answered in a wire mockup. –  JeroenEijkhof Jun 26 '12 at 23:39
add comment

2 Answers

up vote 2 down vote accepted

If the main reason for visiting the page had to be to know the information, then you should improve the contrast in favour of information. Your labels are bold and are dominating the information. You should do the opposite: make the labels less visible (grey, for example) and leave the info black (or make it even bold).

Next thing, in order to make information more readable and understandable you should consider placing the informations that are connected in the proximity of each other. Informations like "name", "address", "state", "zip code" form one group, while the "latitude", "longitude" and driving directions form the other.

I am not sure what is the meaning of informations like "type", "ABC" or "Description", but surely you need to place it and display it with the correspondence to it's importance (for the user).

share|improve this answer
    
Thanks for the explanation. I'll give it a shot. –  Rich Jun 27 '12 at 13:18
add comment

The technique used at my work currently is to put user-editable data in text boxes in both read-only and in edit mode. In read-only mode, the text boxes are disabled and both the text boxes and their contents are slightly greyed out. If there isn't any data for a particular field, an empty text box is still shown.

In this case, I think adding some kind of visual elements to connect labels and data labels is necessary to give a good visual cue.

share|improve this answer
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.