0

I'm trying to represent 4 states:

  1. Not started
  2. In progress
  3. Submitted (uploaded)
  4. Approved

Update: these are display only. Not clickable or changeable. (Program changes their state after other actions in program)

Based on answers below, considering using the Chip control (in Material UI) enter image description here I'm thinking:

  1. Unchecked checkbox

  2. Checkbox with horizontal line [-]

  3. Not sure.

  4. Green checkmark in checkbox

Improve this question
1
  • Can you provide the larger context here? What is user trying to do, and how do these elements present themselves? and why a check box?
    – Mike M
    Oct 5, 2022 at 20:48

3 Answers 3

Reset to default
2

Is this a display state or an interactive control?

Your current thought seems to be trying to either:

  • Add another state to a checkbox (highly unconventional)
  • Or, use a checkmark icon to describe a status

We don't have much details of your use case, but if you wish to have users interact and change status on a record, you could use a dropdown:

An example from Airtable:

On click for any cell in the column: enter image description here

In this case, the lozenge is actually in a table cell with a dropdown, and color coding differentiates the status.

This way you have a clear, readable label, no icon interpretation necessary: icons without labels can be notorious for ux problems.

If the data is not in a grid, you could extend the chip (as suggested by the commenter below), and the user is able to select the chip to change status:

enter image description here

From the Nielsen Norman group: Top 10 application mistakes

  1. Unlabeled icons: It’s really rare for icons to stand on their own, with most users able to understand them immediately. Even icons that might seem universal (such as the hamburger menu) are not as familiar to users as most UX practitioners would expect.
Improve this answer
2
  • 1
    I'm a little confused whether you're advocating the use of a pill that disguises as a drop-down, or arguing against it. I can only support that you seem to discourage any ambiguity regarding this. Is it a pill or is it a drop-down? I wouldn't expect my users to pick up on the invisible affordance whereas Airtable apparently does. Why not add a chevron to the pill and make it an unmistakable control?
    – Ro Achterberg
    Oct 9, 2022 at 12:35
  • 1
    @RoAchterberg Good catch - sorry about that; i forgot to add the dropdown state (and be a little clearer). Basically, my intent is that rather than modify a control with a known pattern (checkbox), use a pattern in which the state is a bit clearer, and easier to change. I've edited my answer to reflect your suggestion as well.
    – Mike M
    Oct 9, 2022 at 14:23
1

Checkboxes have long-been established to have 3 states: checked, unchecked, and mixed (with the horizontal line). Changing this behavior is confusing and should be avoided.

If the user has the ability to edit the status, consider a dropdown menu or some other single-select mechanism. If the status is view-only, consider just showing it as a label associated with the name of the item.

Improve this answer
1
  • 1
    i'd say skip the "mixed" too. Highly uncommon.
    – Bobby Tables
    Oct 13, 2022 at 7:48
0

If you are looking to use chips that have both text and icons, here is a suggestion. I have chosen material icons that correspond to conventions established by email and messaging service providers.

I agree with other respondents — it is best to avoid using the checkbox control because that leads to confusion.

enter image description here

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.