2

I am in the process of designing the user interface of a ticket system. There will be a dashboard view which displays the most recent number of open ticket. One user need is to be aware of open tickets, so the user can close them ASAP.

To encourage the user not to keep tickets open for too long, I'd like to display "aging" tickets, by visualizing groups tickets into age groups, e.g. "tickets opened today", "tickets opened this week", "tickets open last week or before". Typical visualization techniques have a positive connotation for large numbers (e.g. pie charts, bar charts). Here, the zero is the hero number.

In a nutshell, here are the requirements for the visualization technique:

  1. The total number of tickets should be grouped into age groups (e.g. "tickets opened today", "tickets opened this week", "tickets open last week or before")
  2. The total number of open tickets per age group should be visible.
  3. The visualization should associate a small number with a positive connotation, especially the zero, and a high number with a negative connotation.

Problem: What is an appropriate visualization technique which meets the requirements?

Options: I have considered different ways to visualization techniques for open tickets but they don't meet all of the requirements above:

  • Pie chart: good to visualize the relative proportions of different aging groups, but not the total number of open tickets per age group. Problem: Does not meet requirement 3 (a zero is not visible).
  • Bar chart: Good to compare the number of open tickets per age group. Problem: Does not meet requirement 3 (a zero is not visible).
  • Circles: Each age group is visualized with a single circle by itself. A small number is represented by a small circle, a large number by a large circle. Problem: Does not meet requirement 3 (a zero is not visible).
  • Just numbers per age group: Good to inform the user about the total amount per age group; Problem: Does not meet requirement 3 (a zero is visible but does not have a positive connotation necessarily).

Do you have any other idea?

2 Answers 2

2

Big numbers in small digits are often better than small numbers in double digits. i.e. a 1 with font-size 16 is much more important than a font-size 12 of 22

i.e. think about this.

1

versus

22

This is what people use in games as well, where you're closing in on the "first rank".

2
  • This proposal does not rely on colors and therefore meets the accessibility requirement. Thanks.
    – hhd
    Sep 28, 2017 at 19:58
  • No worries @hhd
    – insidesin
    Sep 28, 2017 at 23:33
0

You could associate status by color and background changes. If the number is zero, it has a blue background and white number. (which calls attention to itself but is more neutral. 1-100 is just the black number and anything over 100 is highlighted in red as a flagged status that needs attention.

Like the comment above does, try the squint test. What stands out to you when you squint and vision is blurred?enter image description here

2
  • 2
    To add to this - If you use color to accent things in your UI please don't forget about folks with colorblindness
    – cssko
    Sep 21, 2017 at 14:02
  • Hi cssko and Melissa Easker: for accessibility reasons, colors can be a supporting means, but should not the main means for communicating the status. I should have added this to the requirements list.
    – hhd
    Sep 25, 2017 at 14:56

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.