1

Apologies if this has been posted before.

I'm doing a visual rework on an existing webapp that's essentially a big form with a bunch of form fields, that are divided into sections, subsections, and subsubsections:

Current form layout

As you can see we have a big "block" representing a section, with several blocks inside it, and some of these subblocks also have blocks inside them. This is pretty visually heavy, but I'm at a loss as to how to improve or even get rid of this nested block system, while maintainting the sense of structure. Is there something I haven't thought of that could improve this?

Thanks in advance.

3
  • Hi Eva, I only see 2 levels (eg section and sub-section). And while it can be improved, even with my poor French I understood it at first sight and looks pretty usable. Do you mean something more "beautiful"?
    – Devin
    Jul 26, 2023 at 16:33
  • Hi Devin, you're right: the biggest "section" (which overflows from the borders of the screenshot) just contains everything there is on a given page, so it can easily be done away with. I wasn't looking for something more "beautiful" as much as I was looking for any ideas to visually separate sections and subsections without it looking as heavy and cluttered.
    – Eva
    Jul 27, 2023 at 8:59
  • I see a lot of wasted space horizontally. Can the first four light-gray boxes become four vertical boxes in a row?
    – Steve
    Jul 27, 2023 at 22:09

2 Answers 2

1

The heaviness and clutter is a consequence of too much visual variability on the screen. In your case, you did okay by keeping the palette to shades of gray. The main source of heaviness is from using multiple graphic features to redundantly code each level of the hierarchy. Right now, you have content visual grouped at the first level simultaneously by spacing, shading, and lines. The second level uses spacing, indenting, shading, and lines. Then similar shading and lines are used to distinguish fields from the background, making it hard to see where divisions begin and end.

To reduce weight and direct more attention to the content, use fewer graphic features per level. In my re-work below, for example, the first level uses spacing and shading. The second level uses spacing and indenting.

enter image description here

I take advantage of the fact that all fields in a subsection fit on single line. By putting the subsection title on the same line, and moving the fields laterally closer together, they appear adequately grouped.

The other thing that helps is to make the data stand out the most by maximizing its contrast: I use white for the background, and leave gray for the shading around the first level (although I am a believer of zebra stripes in tables). Using pure black for the text would also help that.

Reverse polarity, such the white-on-gray titles for the sections and subsections tends to have a lot of contrast that can make things look cluttered. In this case, simple bold black-on-white titles sufficiently captures attention.

1
  • I should have been clearer, the screenshot I used is of the original/old design :) You're right, using a "more discreet" type of spatial division in deeper levels and avoiding the use of too many lines definitely makes for a clearer design.
    – Eva
    Jul 27, 2023 at 8:54
0

I don't know why, but this reminds me of the structure that Google Chrome's settings page has:

google chrome settings page

You could try the same, moving the main sections into a left sided vertical navigation and then filling in the right section with the form items.

Of course, some items will look empty, but you get a more organised setup with less mental overhead.

Quick mockup to show idea:

enter image description here

2
  • While a good idea per se, unfortunately the "information density" is in this case very much intentional; my client wants to be able to see a large amount of fields on the same screen.
    – Eva
    Aug 1, 2023 at 10:54
  • @Eva ah I see, I'll need to update my answer to find a good enough example of this Aug 1, 2023 at 15:31

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.