7

I have a long list of items for users to choose from. The options are hierarchical.

For example: (fyr, these are Standard International Trade Classification)

01 - Meat and meat preparations
011 - Meat of bovine animals 
01111 - Meat of bovine animals, fresh or chilled with bone 
01112 - Meat of bovine animals, fresh or chilled boneless

Users can choose multiple codes, but they must be of the same hierarchical level. Which of the following is more desirable?

  1. Let them choose freely at first. Then remove the codes of other levels.

enter image description here

Pros: One less control, simpler

Cons: Some items suddenly removed from the list, confusing

  1. Have users explicitly choose the code level. Then display only the codes of that particular code level.

enter image description here

Pros: Easier to understanding that codes must be of the same hierarchical level

Cons: One more control

|improve this question
  • 1
    There is the possibility of a third variant: a predictive search where your users can start typing either the number or the title of the classification and the system will show a shortlist of suggestions based on the content of the input field. For example, the user may start typing "012.." and see a list containing: "012 - Other meat and edible meat offal, fresh, chilled or frozen", "01212 - Meat of sheep, frozen", "01213 - Meat of goats, fresh, chilled or frozen", etc. – Andrew Martin Sep 9 '16 at 7:32
  • After the first input, the suggestion list will change. First time when user type 012, the suggestion will show "012, 01211, 01212...". After he chose "012", all codes which are not of 3-digit will be removed from the list. Next time he type "012", there will be no suggestion. I am worried that the change in the list will be confusing. – Lai Sep 12 '16 at 2:21
  • My suggestion was to reduce the UI to just a search box and an 'add' button - each time the user starts typing they will be selecting from the whole list but narrowed based on what they have typed - much like google suggests possible search strings while you are typing. You don't see google's entire database of possible results and choose from there, you only see suggestions based on what you have typed. – Andrew Martin Sep 12 '16 at 7:28
  • While people have suggested other options that may or may not suit, your first option doesn't seem all that bad to me. The confusion about the disappearing items could probably be cleared up with a short inline help sentence (e.g. "Selections must all be made from the same code level"), either before or after the first selection was made. What might be harder is whether and how to allow multiple selection from the list -- it would be easiest to disallow it for 1st selection and allow it afterwards, but that's probably not very discoverable. – calum_b Feb 7 '17 at 17:18
1

I'd stick to a variant of the second option.

  1. Let the user click down to the lowest level. Each level are links that leads to the next level below the current one and so on and on...
  2. At the lowest level, the links are instead replaced with text with check boxes and a submit-button.

The control at the top of your second example is perfekt when the user already knows the desired code (as most users will do sooner or later if they are using that system regularly) and just want to type in the five numbers related to the item they are looking for.

|improve this answer
1

The best control for the task you are describing is a hierarchical multi-state tree selection. (try this demo).

Let the user select any options from any level and let the computer make the calculations based on the lowest selected level.

For example the following will imply the same level selections : Russia, Mongolia, Brazil, Argentina. enter image description here

While the following will imply the same level selections : Asia and South America . enter image description here

|improve this answer
  • I agree that tree is the best representation of hierarchy. My problem is how to let user know they can only choose codes of same level without being awkward. The tree selection suggested that you can tick items across all levels. – Lai Sep 12 '16 at 2:31
  • The whole point of my answer is that maybe users do not have to know about the same level constraint. Any selection they make can be translated by the computer as a same level selection. – DesignerAnalyst Oct 11 '16 at 6:26

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.