4

I'm currently designing a CRM, and am wondering how to place a specific piece of contingent information in the table section. As you can see in the attached snapshot, the top row is slightly different than those below it, as it has a check icon and number values below the task subject (this means that 1 of 3 to-do list items relating to that task have been completed). The other rows, meanwhile, have no check icons because there are no to-do's corresponding to their tasks. Here I solve for the presence of this unique piece of info by bumping up "14-Day Check-In," putting the icon and number right below it, and centering those two values on the row.

My question: Does moving "14-Day Check-In" up a few pixels create bad visual inconsistency with the other rows? Should I just put the check icon/numbers below that value without moving it?

(note: based on user goals, the to-list value on this page is a must-have)

enter image description here

Improve this question
2
  • Just curious - why not right align the to-do check+numbers (if present) so that they are horizontally aligned with the task subject - then it becomes another vertically scannable list of items that won't interfere with the task subject. Is there a reason to put them underneath? Alternatively do something similar in the Done column since presumably that relates to the done state of any to-do items. (And if not - that's potentially confusing)
    – Roger Attrill
    Jan 30, 2019 at 20:07
  • Thanks for the response, @RogerAttrill! Just so I understand: do you mean put the icon/digits to the right of the task subject, so that they're on the same horizontal plane? I thought about that, but ultimately decided against it to account for the possibility of a user entering a REALLY long Task subject name, which would effectively cramp the icon/digits. And you're absolutely right about the done column being more ambiguous with the intro of an entirely separate value. Thanks again! Let me know if you have any thoughts!
    – Conor
    Jan 31, 2019 at 16:03

3 Answers 3

Reset to default
3

You can use as guidelines the structural lines marked by the buttons on the right to align the whole line:

enter image description here

You will get more place to play with and there's no any kind of visual inconsistency

enter image description here

Result

enter image description here

Improve this answer
1
  • You should also call out inverting the colors and adding a bubble around the checklist count as a way to give it more visual prominence and show that this row is not like the others.
    – Nathan Rabe
    Jan 30, 2019 at 16:31
2

To answer your question, I think the visual weight and different sizes of the task subject and the check icon/digits are quite different - different enough that if you raise the task subject up, then it affects the horizontal scanning of the table row. I think it's better to place it underneath without raising the task up.

Here's an example with half the items with the check box and half without:

    enter image description here

The above version scans a lot better than this one below, which looks messy and jumbled:

    enter image description here

I think the first image above looks fine - however, there is an alternative to having it underneath at all. You could right align the to-do check+numbers (if present) so that they are horizontally aligned with the task subject - then it becomes another vertically scannable list of items.

In the case where someone has a long task name and there's the icon/digits, then truncate the task name with an ellipsis and show the full task name as a tooltip on hover. It's only the equivalent of about 6 or 7 characters and in the event that someone enters a really long task name then you're going to have to truncate it anyway...?

    enter image description here

Improve this answer
2
  • Ah i see thats a good point. I'm really intrigued by the right aligned version - however, in the right aligned version, if a user creates a checklist in the double digits, the icon/double digits would occupy more space, not to mention that the icon would be misaligned with other, single digit checklist icons. All that is to say, it looks like there might be a tradeoff either way and I need to decide which will have the least adverse impact on the experience. Really appreciate your ideas!
    – Conor
    Jan 31, 2019 at 22:24
  • Moving the tickbox over is nice for balance but keep in mind you'll now have to sometimes truncate the title earlier, and check whether or not it's necessary.
    – PixelSnader
    Feb 1, 2019 at 0:14
0

Not really, its ok to move it up. As title + checkbox are perceived as a group, which is vertically centered to radio. Simetry thing, right.

Improve this answer

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.