The user is assigning products to a location in a hierarchy in a website.

There is potential for multiple locations in multiple hierarchies in multiple websites.

User journey:

  • Select website
  • Select hierarchy within website
  • Select location within hierarchy

Each of the elements should be able to be removed.

Does anybody have any suggestions to help improve the user experience?

Any feedback will be greatly appreciated!


  • At the first look i think about google forms, when one creates a form. You might want to take a look at their approach.
    – Yakke
    Jan 29 '16 at 15:50
  • 1
    Thanks for this example, unfortunately Google doesn't seem to nest as deep as I need to in this example. (maybe there's a reason for that...)
    – OzzyWadd
    Feb 2 '16 at 11:01

Here's a quick sketch of something you can try: enter image description here

You can add multiple websites and hierarchies and make the location field specific to that combination of website and hierarchy. You can also individually close each field. I think it's important let users toggle between multiple combinations that you have, which could also be done easily in this architecture.


  • Thanks for this solution, I really like it. I've mocked up the following concept postimg.org/image/lm6iczn13
    – OzzyWadd
    Feb 1 '16 at 14:14
  • Looks neat! I like the positioning of menu items on rows. Quick comments - as a user is there a way for me to know more about one particular hierarchy when I select it? (what drives a user's selection when he selects a hierarchy?) It would be great if more information is shown on hover/ if hierarchy area expands to show details of selected hierarchy when user makes that selection.
    – ypag
    Feb 2 '16 at 1:24
  • I agree with showing more information for selected hierarchy. Our system doesn't really have much information about each one but what we do have is the "code" which is used on the selection and then we could show the "description" on hover.
    – OzzyWadd
    Feb 2 '16 at 10:59

i would recommend using the parent dropdown as a way of adding new child entries. Then have a delete button for each child element (kind of like how you have it). Remove ALL borders of the child elements and the "Add another ***" buttons. Add some basic animation to the child entries when they appear, for some light flair.

DO you have any live examples of what data this is piece is trying to capture?

I hope this helps.

  • Could you use the UI Wireframe tool to provide an example of what this would look like? In what ways would this improve the current UX?
    – elemjay19
    Jan 29 '16 at 17:42
  • @Alan please could you sketch up an example for me to get an idea of what you mean? It is important that the user knows to start with the parent which is "Website" in this case.
    – OzzyWadd
    Feb 2 '16 at 11:02

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.