What to do with important information that disrupts the flow of the design?

Question

Quite recently, we redesigned our whole application. FYI, below you'll see the old and the new design:

Old:

New:

Very short summary of what you'll see:

• The top toolbar shows all the actions that can be performed
• The part in the red rectangle shows the file of a person you are currently looking at
• The left side of the screen (the table with icons) shows all the actions that previously have been created and are associated with the person marked in the red rectangle
• The right side of the screen shows a preview with the most important information associated with the currently selected action

Now, I'd like to focus your attention on the part that is highlighted by the red rectangle. This is quite important information to our users, because it tells them whose file they are looking at.

I feel like in the old application design, this blended in quite well, because there was very little padding or margin throughout the application.

However, in the new design, I feel like it looks ugly and I am wasting space.

The question is; what can I do with the part highlighted by the red rectangle? What are some alternative designs? What do you guys think of it (maybe I am overcomplicating)?

P.S. The reason this information cannot be displayed in the preview, is because when you switch tabs, you'll no longer know whose file you are looking at. Not all tabs display the preview.

Answer 1

First off, I think it's great you're reaching out to the community for some additional insights. I'm seeing some things that I'd like to point out.

'Ugly'

You mention the client summary looks ugly to you. To find out whether you're overcomplicating things, figure out first what it is that you're actually observing. If it's a matter of personal preference, then I would suggest you create a system-wide style guide first. While visual appeal is important, personal aesthetics should not be a guiding principle in a redesign.

'Wasting space'

Both screens you share show large amounts of negative space. I wouldn't say the slightly increased inline margin/padding on the redesign in the patient box is a waste of space. Although it can be improved upon, it resulted in a better alignment, which is good. Unless your application is also used on smaller screens, don't worry about the negative space.

Scannability

In the redesign, the preview pane will benefit from some extra block margin between the sections, to aid eye scanning (see the Gestalt principle of proximity). The old design did a better job of separating the sections.

Amount of redesign

Take great care in changing many things at once. Generally you want to present incremental changes to your users, as changing too much at once will force your users to adapt to a lot. Even when you've largely kept the same layout as you've done. This generally hurts engagement, as users prefer something that's familiar to them. If you haven't already, you might want to consider allowing your users to opt-in to the new look-and-feel, and phase out the old design over time.

Top navigation

I've noticed that the items overflow in the redesign, even on a relatively high resolution. You probably want to consider a different approach to make it more usable. Some extra inline margin/padding would also better organize the items, similar to the preview sections.

There's more that I could go into, but I'll keep it on topic as best I can ;). I hope this is of some value to you.

Answer 2

Here's what I think the problem might be: the new "red zone" section looks interactive.

The tabs right below it have the same border, rounded corners, and padding, which all help the user understand that they're clickable, and do something. They're creating clickability affordance.

The section right above it uses a similar styling, so it also seems to share that affordance. The icon also makes it look a little "button-like", since many buttons use icons.

What I would recommend trying is removing the border and icon, and left-aligning the text with the D in the Details tab. That will subordinate it somewhat, which should make it less confusing.

Answer 3

I feel like in the old application design, [the part that is highlighted by the red rectangle] blended in quite well, because there was very little padding or margin throughout the application.

However, in the new design, I feel like it looks ugly and I am wasting space.

...what can I do with the part highlighted by the red rectangle?

There is, from a user-interface point of view, no difference between the old and new design. (Nearly) everything is in the exact same place, order, and grouping. Actually, everything in the new design, except the part that is highlighted by the red rectangle, takes up more space.

"Space" is your friend—really, an essential component of user-interface design. One of the most important concepts of UI is scan-ability—i.e., how quickly can a user "digest" the gist of the interface and therefore know where to start? The less the user has to read and comprehend to make this determination the less cognitive effort consumed before actually interacting with it. Space between groups of like components, or components to be used together, makes scan-ability possible.

As just stated, along with spacing is the logical grouping of components into groups that are either similar, or used together. Here subject matter experts and users ought to be consulted to determine those similar concepts and associated tasks.

Finally, layout and order those groups on the page by procedural flow and importance.

With these in mind, below are some mock ups of some grouping of components in order to improve scan-ability.

 

Since the part that is highlighted by the red rectangle applies to both actions and tabs, put it at the top of the page.

The actions are grouped, moved to the side, and labeled to improve scan-ability of that section.

Not depicted here, but the tabs and the details' actions might also be improved with grouping.

 

To reduce the possibility of sideways scrolling, and tie the details closer to it's source, it's rolled into an expandable section immediately below each line item, which, of course, can be opened and closed, and allows the capability to open more than one set of details at time, in case that helps the user find and compare information. If not, simply close the last opened details when the user opens another.