I need to design a commercial information form for a project. Client section is read only data and is loaded with select button. It opens a search dialog and client and receiver data are loaded. I have designed two options but I don't like any of them.

Option 1

enter image description here

I have gruped the form in 3 sections. It's clear that client and receiver are loaded by select button and in that section each data are grouped again with labels Client and Receiver. Labels below each textfield helps to know what kind of information is showing. I don't like the amount of space that textfields takes. I have to show the data in textfields because help labels.

Option 2

enter image description here

In this option I delete sections and read only data is in labels (less space). If I include help labels below they look weird, so I have to draw "client" and "receiver" words multiple times in labels. Besides, select client button looks out of place.

Is there any way to combine two options? Option 1 looks nice but I don't like textfields in read only data (I prefer labels). But with labels I can't include help labels and I don't know how group the data. Maybe showing in two columns (one per client and the other per receiver) groups better, but commercial data section and salesman are showing only in one column.

  • The select button (just under the client and receiver details), what does it do to be precise. Am working on a quick design to help you through the challenge. Commented Aug 23, 2018 at 11:41
  • It opens a modal dialog widows where the user can search a client. When the client is selected, the dialog close and client and receiver data loads to the form. Commented Aug 23, 2018 at 12:05
  • Okay cool. Check out my answer. If it helps do mark as accepted. Commented Aug 23, 2018 at 12:25

3 Answers 3


My thoughts:

  • Show the client receiver as labels not as input fields (there is no input to be done)

  • bear in mind that there are two states the client can be selceted or not

  • get rid of lables that are not necessary (eg. client is an address an will be read like this by users. An email address will be recognisable as such

  • make groups by using titels this gives more context to the content.

I made a sketch of the possible states. I left out the beginning of the form:

enter image description here

  • Clean and simple. I like it !! Commented Aug 23, 2018 at 16:02

I am unaware of the roots of the form so I can't tell which information is more important than the other. But make the groups logical and do it from the perspective of the user (the grouping and order should make sense to the user rather than the developer)

Combine the two options (just like you were wondering).

  • Follow the pattern of Option 2 because showing read-only fields as disabled fields is a bad practice.
  • Divide the form into logical divisions like you've done in Option 1 and re-visit the logic behind the grouping. See if all the fields are necessary and if the order is correct.
  • Re-order (if required) the form in such a way that the most important information is shown first and the rest of the information is scanned

Alright, both options look cool. Option 2 falls in a better acceptance level given the textboxes that were yanked off. However, there's still a bit of glitch here, i.e the long exhausting form, a wizard would have made it more easy to the eyes and approachable with an even better design.

Here's a sample I created to help you through.

enter image description here

enter image description here

Display the summary of the form filled for confirmation before submit. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.