I've got a tree structure where the relationship between the parent and the child can be marked as either mandatory, recommended, or optional. This structure can be up to 3 levels deep. For example:

Parent 1
    Child 1-1 (Optional)
        Child 1-1-1 (Mandatory)
            (Course 1
            Course 3)
            Course 5
        Child 1-1-2 (Recommended)
        Child 1-1-3 (Optional)
    Child 1-2 (Mandatory)
        Child 1-2-1 (Recommended)
        Child 1-2-2 (Recommended)
Parent 2
    Child 2-1 (Recommended)
        Child 2-1-1 (Optional)

I've got the display of the tree relationship down, but now I need to display the data in a table, similar to this:

Parent 1  Child 1-1  Child 1-1-1  Course 1
Parent 1  Child 1-1  Child 1-1-1  Course 3
Parent 1  Child 1-1  Child 1-1-1  Course 5
Parent 1  Child 1-1  Child 1-1-1
Parent 1  Child 1-1  Child 1-1-2
Parent 1  Child 1-1  Child 1-1-3
Parent 1  Child 1-2  Child 1-2-1
Parent 1  Child 1-2  Child 1-2-2
Parent 2  Child 2-1  Child 2-1-1

However I need some way to make it clear what the type of relationship is (mandatory/recommended/optional) in the table.

I was thinking icons might be the best way, because I can add them to the radio buttons where the relationship type is selected so it's consistent, but I'm not sure what kind of icons would be best.

We use Font Awesome extensively, so any examples from that project would be great.

Also, since I'm here, there's a potential fourth level, where the relationship is and/or ([this item and this one] or [that one]). They will also need to be displayed in the table, so suggestions for representing and/or relationships are appreciated as well.

  • As this is a UX question, it would help to know what sort of users will use the system (normal people, programmers, etc.)
    – Izhaki
    Commented Jun 26, 2013 at 21:51
  • What the user task suggested for that table? And please provide en example of fourth level. Is the order of item names important? I see Child 1-1(O) goes before Child 1-2(M). Commented Jun 27, 2013 at 3:52
  • @Izhaki - Normal people, but this is admin-level functionality, not user level.
    – shimmoril
    Commented Jun 27, 2013 at 13:35
  • @AlexeyKolchenko - Not sure what you mean by your first question. Fourth level added to question. The order is set by the user and is not related to the relationship.
    – shimmoril
    Commented Jun 27, 2013 at 13:40

3 Answers 3


I guess we'll all have to chip in with our ideas, but I fail to see anyone giving a 'right' answer to this.

The problem is that it is hard to associate icons with these words, without requiring users to know what the icons actually stand for (if such is the case I'd go for the last option).

You may wish to consider traffic light colours:

  • Red for Mandatory
  • Orange for Recommended
  • Green for optional

If it's icons, you can choose something like this:

  • Exclamation for Mandatory
  • Star for recommended (like the star ratings on Amazon)
  • Circle for optional (reassembling both the letter 'O', and a check box you may or not wish to tick

Or if the users are more of 'creative' types, I would consider the 'Take the umbrella' set:

  • Bolt for Mandatory
  • Cloud for Recommended
  • Sun for optional
  • Yeah, I hear you on the difficulty of using icons, it's basically why I'm here :) As far as using colours, I'm not fond of it due to the accessibility issues, and we also already use green/yellow/red to indicate other statuses on the same page. We have done coloured icons before though, so I think I might end up using your first example set and then colour code them. Thanks.
    – shimmoril
    Commented Jun 27, 2013 at 13:42

For simplifying and making your visual encoding system more consistent you can use the set: options


In a table format, it might be difficult to display this (depending on the underlying implementation). However, what about icons overlaying lightweight/grayed arrows pointing to the children?

Mandatory: a lock icon Recommended: a check icon

Something like:

Parent 1 --[shrug]-> Child 1-1 --[lock]-> Child 1-1-1
Parent 2 --[check]-> Child 2-1

However, representing this in a table instead of a tree view is the red flag here: it's a tree! With a tree, I would have arrows curving down and to the right pointing from parents to children. There are a lot of things you can do with that kind of layout.

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.