Here's the feature:

The user is a construction sub-contractor. Each user specializes in something like welding or plumbing or windows, etc... Now, these things they specialize in are formally defined in an industry standard hierarchical structure. The hierarchy has 5 levels and contains thousands of entries.

I want the user to be able to specify their specialties from this structure, but I think a tree-view with checkboxes and thousands of items will be horrible from a UX perspective, especially on mobile devices. What I am thinking is more along the lines of a textbox with "auto complete" so that when they start typing: "weld.." a dropdown appears with all of the specialties beginning with "weld". If they select a higher level specialty then all contained sub specialties are selected too.

Please advise on your suggestions for the best user experience here and keep in mind a mobile-first / responsive design.


  • Having to type and select from a dropdown that potentially contains lots of entries might cause other usability issues as well. To ensure that the design can be extended or modified, it would be good to get an understanding of the underlying information architecture (e.g. how the hierarchy is defined, are there jobs that are similar or related across different groups or hierarchy). That way you can provide suggestions not only based on text matching, but also context or personal preference based matching.
    – Michael Lai
    Apr 15, 2013 at 23:58
  • Michael, the skills are just a name and an id number. No relationship other than parent/child.
    – Infin8Loop
    Apr 16, 2013 at 4:39

1 Answer 1


While a user will be quite familiar with their skills, he or she may not be as familiar with the entire hierarchy. This makes it hard to find a skill at level 5 going down a tree like structure. I think you have the right idea of using a search interface with autocomplete/suggestions based on partial input. I would suggest not trying to represent the structure of these skills in an iPhone interface. Instead, present the results in a flat list, but do show their level in the hierarchy.

You could further support the numbers' meaning in terms of hierarchy by presenting them in a way that we naturally associate with hierarchical structures. For instance, the top level could be gold, second silver, etc. That doesn't go down to 5, but it's a start.

In this mockup, checking the "welding superhero" box would also mark the "welding for soccer moms" box if that's on the same branch in the hierarchy.


download bmml source – Wireframes created with Balsamiq Mockups

  • What about one of those horizontal slide list menu interfaces with checkboxes for selection.... Then an area showing the # of selected skills with an action link to edit the selection ???
    – Infin8Loop
    Apr 16, 2013 at 4:42
  • The side area is a skills "cart" if you will.
    – Infin8Loop
    Apr 16, 2013 at 4:43
  • You have an example I could look at? Apr 16, 2013 at 6:30

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.