I'm designing a CRM-style interface for nurses to help them manage their workflow, and I'm running into a UI issue where, in most use cases, there's kind of an awkward excess of white-space in the "Task Details" card (see image). enter image description here To mitigate this, I considered making the font size bigger, but the rest of the interface is also 14px, so I didn't want it to clash visually. (Also, this screen is designed for a 1440pt wide screen, which is what most of the nurses that we interviewed use).

I'm happy that the space is large enough to accommodate super long inputs, but it just seems a bit much.

Any thoughts on how to mitigate this? Thanks a lot!

  • 1
    If you don't want there to be that much white, what do you want there to be? Background colour? More information? More columns? A big logo? Trogdor? – Mast Jun 12 '19 at 12:59

Visualize hierarchy

You have an opportunity here to maintain flexibility while emphasizing the known priority of data elements and adding some scan-ability and visual interest.

The nice thing about card layouts (compared to tables) is that you can use the space to lead your users through the expected flow. Your whitespace is a blessing!

I might even add some elements that conditionally display based on whether or not they are used, such as a task description or possibly an event history for this customer.

Revised layout

Other opportunities

While we're on the topic, I think this whole area could use the space to better clarify information hierarchy …

Problem area

| improve this answer | |
  • Thanks @plainclothes for the detailed answer! This hadn't occurred to me but makes perfect sense from a hierarchy perspective – Conor Jun 12 '19 at 19:09

I don't see an issue with the white space. Card-type interfaces are prone to having white space.

Maybe you can condense the details into the global components, like the header, and dedicate the body area for the notes only.

| improve this answer | |
  • Thanks a lot Nicolas! Makes me feel a bit better. I'll give a think about condensing the details – Conor Jun 12 '19 at 19:10

How about changing the Cards layout!

Top card does not have a free-text area, so all info could easily fit in the horizontal space. This way you can utilize the available space for Task Notes card.


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |
  • 2
    Horizontal layouts make tabular information like this much more difficult to skim/scan than vertical layouts. Do prefer to optimize for interface for function rather than form. – Cody Gray Jun 12 '19 at 2:52
  • 1
    Yes but this is not a table design. The top card acts as a header with three pieces of info that are editable. Bottom card is left for notes. Notes will look exactly like Task Notes card in the original design with more space for free text. – Mo'ath Jun 12 '19 at 14:10
  • Thanks @Mo'ath, that's an interesting idea, i'll play around with it – Conor Jun 12 '19 at 19:11

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.