1

I am creating an onboarding process where the admin dictates requirements for it's members.

They start by selecting from a list of identifiers

[ ] Meat [ ] Poultry [ ] Seafood [ ] Produce

Then they go into each identifier they select and pick options

Meat:

[ ] Steak [ ] Hamburger [ ] Hot dogs

Then they go into each option and pick more options

Steak:

[ ] Filet Mignon [ ] NY Strip [ ] Ribeye

Now they will need to go back through this process for possibly Poultry, Seafood and Produce.

What's the best way to do this? What is this called?

  • Have you considered a cascading list with checkboxes on the leaf nodes? – Graham Herrli Nov 5 '14 at 19:27
  • I have! It's still an option on the table. Thanks! – themack Nov 5 '14 at 19:56
  • As presented this question has gone beyond the 'goal' or 'user story' level of abstraction and has introduced a quite limited scope, which excludes a number of potential design options. e.g. Impossible to design a UI where user selects "NY Strip" directly? – Jason A. Nov 6 '14 at 12:31
1

I don't know if there is a name for this iterative process but I would clearly identify where the user is. For example a breadcrumb can show where the user is in the process (first time through the iteration as well as subsequent times through).

Identifier > Sub-identifier > Sub-sub-identifier

I would also consider showing the completed Categories. For example (and don't pay attention to my wording)

"You have completed: MEAT"

If complex iterations are commonplace (and non-sequential) and if the staff are often called away from the on-boarding task and come back to it later then I would consider showing a more in depth display of what has been done as well as the available options. Something along the line of:

YOU HAVE COMPLETED

[Main Category Label]

AAA

BBB

CCC

Meat

DDD

Poultry

Produce

Seafood

| improve this answer | |
  • I like this option too! I am going to wireframe both and see what makes more sense. Thanks! – themack Nov 5 '14 at 19:56
0

Maybe an old classic tree for this kind of need. If you want to go back and forth it seems a not so bad idea.

For limited space and/or more step by step approach you can go to a wizard like interface.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |

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