Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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
            and
            Course 3)
            or 
            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.

share|improve this question
    
As this is a UX question, it would help to know what sort of users will use the system (normal people, programmers, etc.) –  Izhaki Jun 26 '13 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). –  Alexey Kolchenko Jun 27 '13 at 3:52
    
@Izhaki - Normal people, but this is admin-level functionality, not user level. –  shimmoril Jun 27 '13 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 Jun 27 '13 at 13:40
add comment

3 Answers 3

up vote 1 down vote accepted

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
share|improve this answer
    
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 Jun 27 '13 at 13:42
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.