1

I have a series of criteria required to get a permission. These criteria can be met by taking a class (this is for a hackerspace website I'm making). Some criteria have multiple classes, where any class can grant you access to said criteria. This is only for displaying the data, as criteria are checked off by instructors when a class is completed.

I want to find out the best and clearest way to display a complex structure like this. So it would be something like.

To use this tool you need the following classes:

This one class:
___ Shop basics

Any one of these 4 classes:
___ Intro to Woodworking
_X_ Woodworking: Build a box
___ Woodworking: Build a bench
___ Woodworking: Adirondak Chair Making

This one class:
_X_ Safety Training

And any one of these 2 classes:
___ Some other class
_X_ Yet another class

Ideally I'd like this to be even more concise like:

To use this tool you need the following classes:

All of these classes:
___ Shop basics
_X_ Safety Training

And any one of these 4 classes:
___ Intro to Woodworking
_X_ Woodworking: Build a box
___ Woodworking: Build a bench
___ Woodworking: Adirondak Chair Making

And any one of these 2 classes:
___ Some other class
_X_ Yet another class

But I feel like the first solution is clunky and the second solution is harder for the user to parse. Are there any elegant solutions around the web for displaying this? All the similar posts I've seen on ux.stackexchange.com seem great for applications (data editing) but are clunkier for displaying the data.

  • 1
    Any one of these 4 classes is a little ambiguous, it could be taken as either 1 of these 4, or 1 or more of these 4. I'd rather say "One or more", or say "One of" – Des Horsley May 3 '16 at 4:08
1

Inspired by scottishwildcat's answer. Just put checkmarks and use a different style for completed items:

enter image description here

Alternatively, if you wish to show the progress of subtasks as well:

enter image description here

I've also made the outstanding classes as links with mouse hover popups as users may wish to know more about the classes they need to meet the criteria.

  • I really like the idea of putting the "Any one of: Item 1, Item 2..." on one line like that. I don't think it will work for my purposes, but I like it a lot. Probably going to do something like your second picture. Thank you. – chriscauley Jun 4 '16 at 0:41
1

Since this is purely for information and not interactive, could you keep it simple by ignoring what they have completed, and focus on what they haven't? Something like:

You are not eligible to use this tool until you have completed all of the following:

  • Shop Basics
  • Safety Training
  • Any one of Intro to Woodworking, Woodworking: Build a box, Woodworking: Build a bench, Woodworking: Adirondak Chair Making
  • Any two of Some other Class, Yet Another Class, And Another One

Admittedly this would probably work better if people are usually only short by two or three classes (so the list isn't very long), and the groups of classes are reasonably short.

If the groups of classes do tend to be a bit longer, could use a nested list format:

You are not eligible to use this tool until you have completed all of the following:

  • Shop Basics
  • Safety Training
  • Any one of:
    • Intro to Woodworking
    • Woodworking: Build a box
    • Woodworking: Build a bench
    • Woodworking: Adirondak Chair Making
  • Any two of:
    • Some other Class
    • Yet Another Class
    • And Another One
0

I am thinking of a drag'n'drop interface where the users can physically match the shape and size of the 'chunks' of work/classes they need to complete in order to use the tool. If you are open to thinks like gamification then you can even incorporate those elements into the interaction design. Just to illustrate my design concept:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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