0

My website's main page displays summaries of users' profiles. Each profile summary is encapsulated in a "card".

Take a look at an example here (using dummy data).

enter image description here

For reference, the card width is about the width of the main content <div> on StackExchange websites.

As you can see, there is a lot of empty space between the main information area on the left and the contact button on the right.

I wish to avoid multiple cards per "row" as I think that is confusing; the benefits of the current design are that they are easy for our brain to follow and read information.

Improve this question
3
  • 1
    Why do you feel compelled to use up the white space? White space allows the user to more easily focus on the matter at hand.
    – Mayo
    Commented Jul 17, 2019 at 15:26
  • That is an option, yes. I wanted to get some feedback and see if there are alternatives that I haven't thought of.
    – turnip
    Commented Jul 17, 2019 at 16:10
  • Consider how the information will be displayed on different screen sizes, because on a mobile device with a narrow screen width this wouldn't necessarily be the same problem. Also, you can try to adjust the size and position of elements (or create fixed width cards) if you feel like the whitespace is an issue on wide screen devices.
    – Michael Lai ♦
    Commented Jul 18, 2019 at 2:10

4 Answers 4

Reset to default
3

White space should be valued highly. In addition to reducing visual clutter; whitespace makes it easier for the eye/brain to focus on the task at hand.

If the entire screen doesn't look as visually attractive as you would wish it to be then this becomes more of a graphic problem than a UX problem.

Try out different visual changes, for instance zebra-striping the cards. Remember white space need not be white: F7F7F7, EEE can also be "white space." If this is outside your expertise (it's outside mine) then bring in a graphics person to have a go at it, but insist on a clutter free view.

Improve this answer
2

White space is totally fine in your case. It allows some breathing space to the design and the whole UI can easily be digested by the user.

But if you are adamant to not leave it as it is, then you can probably remove the list view and introduce a grid view which will handle the white space issue. I've attached a wire-frame for your reference.

enter image description here

Improve this answer
1

I think your solution is good.

Also, here can be used here pagination or filter/sorting system for quick finding information, which user need. For example filtering by services [service1, service2 (...) etc.)

In addition, it's possibility to display more information in the next column. The only question is. Is there a business need ?

It's depends on circumstances and objectives of application.

In the future there may be a need to add more action/interactions for specific user, add relation or reduce the width in favor of another div, which presented other collection of information, related to the bussiness requirements.

And the next case in this situation is displaying this information on mobile etc.

Improve this answer
0

Using a text center alignment can help

enter image description here

Improve this answer
2
  • 4
    I would not recommend this, the ability to scan fast through the names is worse then with the left alignment.
    – BrunoH
    Commented Jul 17, 2019 at 14:57
  • I agree with @BrunoH. Visually, in a mockup, it works fine. But it loses in usability.
    – Mayo
    Commented Jul 17, 2019 at 15:24

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.