2

Intro

I want to show a list of 5 to 10 items, each about 5-15 words. The list has a significant role in the view, and the user must notice it and understand that it is very important. My page is divided to panels as in the attached screenshot.
This is a desktop web-app, and will be displayed on a large screen.
I'll also mention that there is a button (action button in the screenshot) that is used to express that he understands and handles the problem described in the page.

Problem

My problem, is that the panel with the list looks really empty, and there is way too much space.

Other approaches I've tried

  1. Center the text, doesn't look any better.
  2. Showing the list panel on the right side of the panel 1. It makes it look of minor importance.

My Question

Is there another way to show this panel, so that it will be clear to the user that it is important, but there wouldn't be as much blank space?

Edit

As per alvaro's comments:

  • Additional info 1/2 are collapsed by default and won't show info that is directly connected to Panel 1 and List panel but rather supplemental information.
  • Panel 1 will explain to the user what are the problems that were discovered, and the List panel is a list of tasks that the user should perform in order to fix these problems
  • The upper panel occupies at least 3/4 of the screen, so I don't think it is relevant to have List Panel on the right side of Panel 1

Screenshot

enter image description here

Improve this question
4
  • Why is Additional info not in a panel? Could it be in one? Can the list panel be in the first place (over Panel 1)?
    – Alvaro
    Dec 25, 2016 at 11:04
  • The additional Info is a set of panel that are collapsed by default, but they are not directly related to the List panel
    – Hagai
    Dec 25, 2016 at 11:46
  • What about list panel being over Panel 1 or on left rather than on right (as you comment in the question)?
    – Alvaro
    Dec 25, 2016 at 11:57
  • Panel 1 shows what happened, than the List panel shows what the user should do in order to solve the problems. So Panel 1 has to be before List panel
    – Hagai
    Dec 25, 2016 at 13:53

3 Answers 3

Reset to default
3

How about splitting and perhaps enlarging the List Panel text? (my sketch is very rough).

enter image description here

Improve this answer
2
  • That actually is an interesting idea that I didn't considered. Though I'm a little afraid that a split list is not intuitive. Do you think that it is as intuitive as non-split list?
    – Hagai
    Dec 26, 2016 at 12:26
  • Packaging is your friend here. If you were to, visually, make 2 different areas called "Fixes required", and split the list between them, then yes, your users would perceive the list as 2 lists and spend a lot of cognitive time trying to work out why there are 2. So to avoid that, use vlsual tools to tie the list together into a single unit. If you do that, it will be obvious that despite having 2 columns, it's only one list. I'll modify the sketch to illustrate that.
    – MMacD
    Dec 26, 2016 at 13:59
3

You say that:

"Showing the list panel on the right side of the panel 1. It makes it look of minor importance."

But I think that given the information you have it is better to use columns for the panels. Giving the list the same font-size will make it look like it has the same importance (or not less at least) than the info panel.

enter image description here

Improve this answer
1
  • This might work for most designs, but in my case the Panel 1 show a wide chart, that occupies at least 3/4 of the page width, so if there are 2 panels side by side, and one of them is much smaller, than it automatically makes the user fill it is not as important.
    – Hagai
    Dec 26, 2016 at 12:22
2

Is there another way to show this panel, so that it will be clear to the user that it is important, but there wouldn't be as much blank space?

I think the priority is making it clear to the user that this panel is important and needing attention. I'm not sure the white space is a usability problem, other than the distance of the button from the associated list, which can be solved by bringing the button under the list.

.

One way to bring attention to the panel is to offset it to the left of the other panels. Also, improve noticeability and association by bringing the "Action button" over to the left and under the list:

panel offset

Moving the panel over the left boundary pops it off the page:

panel pop

As far as white space, simply reduce the width of the panel.

panel reduce

Improve this answer
3
  • I'm not sure that a narrow panel looks better than a wide, half-empty panel. Regarding moving it over the left boundary, I think it looks out of balance.
    – Hagai
    Dec 26, 2016 at 12:35
  • @Hagai I appreciate your feedback. Yes, it does look out of balance, and I think that's what makes it a higher priority item, and more noticeable. Just one of other examples provided to you to choose from. As far as a wide or narrow box, I don't have a preference. What I think is important there is the proximity of the "Action button" to the actionable list. Bringing the button over to the left and under the list solves that problem.
    – bloodyKnuckles
    Dec 26, 2016 at 17:05
  • Thanks a lot, I do agree about getting the button closer to the text
    – Hagai
    Dec 27, 2016 at 6:08

Your Answer

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

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