11

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!

Improve this question
1
  • 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
    Commented Jun 12, 2019 at 12:59

3 Answers 3

Reset to default
17

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
1
  • Thanks @plainclothes for the detailed answer! This hadn't occurred to me but makes perfect sense from a hierarchy perspective
    – Conor
    Commented Jun 12, 2019 at 19:09
11

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
1
  • Thanks a lot Nicolas! Makes me feel a bit better. I'll give a think about condensing the details
    – Conor
    Commented Jun 12, 2019 at 19:10
2

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
3
  • 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
    Commented Jun 12, 2019 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
    Commented Jun 12, 2019 at 14:10
  • Thanks @Mo'ath, that's an interesting idea, i'll play around with it
    – Conor
    Commented Jun 12, 2019 at 19:11

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.