2

Here's a common situation: you need to capture input from the user about some complex entity, so you have a data entry field for every possible attribute of the entity:

enter image description here

And the tabs each have even more text- and combo-boxes.

The users want all of this data visible and modifiable, so the inputs have to be available, but they make the screen so cluttered.

Is there a way to keep the richness of the data entry, but make this more appealing to the eye and easier to use?

3

Ryna's answer suggests splitting up over more,simpler pages, but it sounds like your clients want simultaneous access to all of it. So let's see how far we get without changing the layout.

The problem here isn't so much the amount of data, but the visuals. You've got a gradient background, an outline, the same background, another outline, and then a white background. Plus there's a pretty strong color contrast between all those elements. All in all, quite a lot of complexity.


You can either have complex data, or complex visuals.

If you have both it gets too busy. (If you have neither, it could be boring, but that's less bad)

In this case you have fairly complex data, so your presentation should be rather simple. Try working more from gestalt theory, flat design, and try to minimize the amount of objects and visual ridges:

enter image description here

The layout is nearly identical, I only aligned the textboxes a bit more according to a grid. But I removed a lot of visual complexity:

  • no more outlines on textboxes and buttons
  • no more gradients
  • unified the color palette
  • made secondary info more subtle
  • made icons more symmetrical and softened the shading
  • slightly tweaked dropdown box

By far the important change out of all of these is removing textbox outlines:

enter image description here

Notice how much more unified the data fields are after just one tweak? This is because the contrast between the dark blue outlines and the white background is almost as strong as the black-on-white text would be. And outlines have no need to be that noticeable, they're just supposed to be a slight bump to keep you looking in the right area.


Visual hierarchy should match information hierarchy

There are two basic kinds of hierarchy; priority, and similarity. Priority is about which things should be seen first, similarity is about which things go together.

Priority is more of a small-scale thing, while similarity is about larger blocks of content. But both use the same basic toolset revolved around contrast: color contrast, text versus image, animated or static, different size, and so on.

Priority

The most important here is the content of the textfields. This is the data stored in the database, the information about your client. It's what you come to this page for. We want the highest contrast for this. Black on white is a good option here.

Sometimes you can intuitively see what's what ; James van Borgenstein, 12-06-1921. But sometimes you can't; is 555-6449134 a fax number or phone number? Luckily we can show labels. They should be noticeable, but not quite as much as customer info. Luckily we've already got a light-blue background, which contrasts well with black, but not as strongly as a white background does. We also have dropdown menus, which are on a white background. To get lower contrast than the text, don't make these black, but dark blue.

So we end up having a light and a dark blue. Which can be used together to create a tertiary layer of importance. I used it to soften the note since it was already in brackets, but you could also choose to make the labels dark blue and just "primary address" as black.

The icons are also a secondary element, but not as straightforward to explain. They're thicker objects than the label text, and they have stronger contrast too. (Perhaps I should have toned them down slightly?) But they are grouped together, similarly to how the textfields and labels are grouped, which brings us to...

Similarity

All of the textfields contain customer info, the labels are explanations of what each field is, and all the icons lead to different (external?) screens. We should style things so we simultaneously group similar things, and separate each group from another. We've got the same basic tools for that, we just need to look at a larger scale.

enter image description here

The most important group is customer information. They're already together in your layout, so that's good. When we remove the outlines from them (and you squint a bit) they form a pretty solid, and highly noticeable block against the lightblue background. Light colors also seem to be closer than dark ones, as do red colors vs blue ones, so the whole textfield block seems to jump off the page.

Our secondary elements , the text and icons, are black on lightblue. So the local contrast is lower, which is a good start. But in addition they share that background color with the entire screen, which means that there's also less global contrast. Just a couple of thin black lines instead of complete color blocks means that the local contrast is diluted a bit.

Which leaves the icons. They're slightly more contrasted than the labels, but they're also smaller. And due to the location they won't be seen as related to the labels; icons and labels are divided by a large white plains.

If we were to look one step larger than this, Primary Address vs Additional info, we could separate the two by lines as you do in your original picture. But if you look at the blurry version, you can see that the light textfield block is already sort of outlined by the darker labels and icons. So if we're looking at a full page of these, you could very easily skim the white areas, and then if necessary look at the secondary information.

![enter image description here

So here we see 3 scales of information:

  • what kind of customer information (Contact, Billing, Insurance, etc)
  • what sort of group (customer data, explanatory label, extra options)
  • the actual information (name, phone number, etcetera.)
4

Joshua

First, you would decide if all the questions are required to show on particular stage. For example - Stackexchange. There are 2 steps here:

  1. (Registration) Ask user for Name/Email and Password
  2. (Continue registration or Onboarding) Ask user for Avatar, address etc.

Another example is stay-on-page process:


Stay-on-page with some progress bar


It is nice because shows to users their current progress and concentrate their attention on one specific kind of fields. In the end, a user has a feeling of completion.

So, if it impossible to divide form into steps or to decline some fields try to do that:

Important. Answer the question: "Is is necessary and helpful for a user to show all the fields simultaneously?"

1. Define required fields and mark them with "*" or etc.
2. Group fields by kind. On your picture, it was shown.
3. Use short descriptions for your fields and placeholders to show correct and desirable variant. For example, Email (placeholder is
"user@example.com")
4. Think out of correct and different types of your form, not only text fields. For example, Pay Terms could be shown as date, single
button "Upload picture" to drag-drop clickable zone or etc. Refer to
MIT Lectures for detailed explanation

MIT Lectures


Desktop app example of almost all mentioned rules:

enter image description here

1

Pay attention to what the users say they find difficult on these screens. Avoid changing things they don't have a problem with.

I can't tell you exactly what you should change and what not to. That is upto you to test with your users and find out what's best for them. In general these type of screens should,

  • Avoid making the user scroll. Make the entire form visible. This means you have to be very careful about spacing.
  • Avoid having the user switch between different mediums to enter data. Ex: Switching between keyboard and mouse. It's faster when the user can "Tab" between fields and use the keyboard for filling the form than use the keyboard AND the mouse.
  • Highlight the selected field to quickly identify where they are.
  • Fields should be very clear. The user should be able to map the data to the correct field at a glance.
  • Avoid using bright colours which might strain the eyes. Users tend to stare at this type of screens longer.

Just keep in mind collecting accurate data and collecting them fast are more important than a beautiful interface in this case. So don't break the good stuff in trying to make it visually appealing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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