1

I am creating a web app (web app only, no mobile functionality) and am wondering if I should use a tree selection (where the user drills down through hierarchical categories until they find their selection) or an autocomplete (where the desired result is typed in and gets filtered based on what has been typed and then the result can be selected. More specifically Material Angular are the versions of each I would be using. The links for the description and functionality of each are below

Tree

https://material.angular.io/components/tree/overview#nested-tree

https://stackblitz.com/angular/eaalmyagbxpn?file=src%2Fapp%2Ftree-nested-overview-example.ts

Autocomplete

https://material.angular.io/components/autocomplete/overview#adding-a-custom-filter

https://stackblitz.com/angular/yoqybbxoegl?file=src%2Fapp%2Fautocomplete-filter-example.ts

The specifics of this widget are as follows:

The user can only choose 1 option.

Each individual user will be creating these options for their own account. So the selectable options the User 1 sees will be completely different from those that User 2 can see, since each user will create them specifically for their own needs.

I am confident that the number of options each user creates for themselves will be no less than 5 and no more that 50 the overwhelming majority of the time (there will not be restriction put in place either way but it would it would be rare for someone to go above or below these numbers).

They will probably use this function between 5 and 25 times a day

Please let me know what everyone thinks. Would a tree selection be a better UX experience or would an autocomplete be better?

Improve this question
2
  • If someone really is using that input that many times per day, I would highly recommend pre-filling the last used choice to save them the time navigating the tree or taking their hand off the mouse to type a few characters over and over.
    – Nathan Rabe
    Oct 22, 2020 at 15:07
  • I think that context here is very important to give answers. What type of entries are those?
    – xul
    Feb 20, 2021 at 8:57

2 Answers 2

Reset to default
1

Suggest you to go for autocomplete. Autocomplete is better than searching for a 50th element in a tree.

No matter how much efforts you put on structuring menus user prefers to use search bar. Here in your example autocomplete represents search-bar and tree represents menu.

Take a look at menu of below site https://materializecss.com/helpers.html It has autocomplete

enter image description here

As well as tree with depth of 1. You can increase depth by nesting collapsibles inside collapsibles. enter image description here

Improve this answer
0

Tree element

  1. List of elements which has 2 to 3 level of nesting is called tree element.
  2. Tree element is usually used for navigating through branches and if the list is long, it is grouped together along with a search element.

On autocomplete

  1. Its mostly used along with form elements. To note, like "advanced search" can be used stand-alone, so is the case for auto-complete.

Solution

  1. If you don't have **2 to 3 levels of nesting, a grouping of list elements and the user gets to select only one option, autocomplete should work.

  2. Otherwise, go for a tree with a search.

It would have been great to see if you had attached any wireframe for the resulting page once the user selects something.

Improve this answer

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.