7

There is a geographical hierarchy: Country -> Region -> Subregion.

We need to represent this in a dialogue like this:

  • Country 1
    • Preview of top 5 popular regions or subregions of country 1...
  • Country 2
    • Preview top 5 popular regions or subregions of country 2...
  • ...

The aim is to show most popular items without forcing users to travel through the whole tree. For many users it is too hard to find the particular subregion because they don't know its parent. Some Subregions are much more popular than their parent Regions.

Example:

  • Italy
    • preview of popular subitems: Chianti (subregion), Tuscany (region), Barolo (subregion), Sicily (region), Veneto (region)
  • France
    • preview of popular subitems: Bordeaux (region), Chablis (subregion), Burgundy (region)...

This representation will cover the needs of 80% users. Each shown item will be clickable - after click either on Country, Region or Subregion the appropriate filter will be applied. The dialog will be closed and the user will see the product list.

Another scenario (for 20% of rest users) - users need to go inside the country level to see the all its regions (and popular subregions).

The problem is how to combine this to scenarios so that it will be clear how to go select the exact tree item OR to go to the deeper level.

Is there a patterns for that representation or scenarios? Any ideas will be appreciated.

Improve this question

7 Answers 7

Reset to default
1

How about a treeview with the first node as Top 5 and then other nodes with Regions and SubRegions Details.

https://jsfiddle.net/23nigam/qrmcdL29/

Improve this answer
1

Maybe you can use this: https://tympanus.net/Blueprints/MultiLevelMenu/

You can move through regions and subregions and dive whenever you want. You can also show the top list and add a "show more" if it makes sense for your project.

Improve this answer
1
  • Could you copy and paste the relevant information?
    – Mayo
    May 18, 2018 at 12:50
0

Use the titles: Country, Region and Province (or whatever is appropriate) so users can click on these titles to see the pertinent list of Countries, Regions or Provinces. It will take space, but it's the only sensible way to offer the ability to navigate through your tree AND select within the tree, instantly.

Improve this answer
0

Is it possible to display a map where the user can click on to choose region/subregion? You can algo put a search text box, where the user writes the subregion name and the system shows few options that matches the criteria, just like google maps does.

Improve this answer
0

You can have the popular items show in a preview list that is concluded with a more... link. Clicking the more link should open the full list sorted by hierarchy. The items in the preview list should be clickable

Improve this answer
0

haha, stack exchange does exactly this. In fact it used to have popular questions in the menu as well before it moved.

It works well now too enter image description here:

Note the popular/your communities upfront, and below option to search for others. Simple and elegant.

Improve this answer
0

Why not using a real TreeView component for rendering the hierarchical data and allowing selection, keyboard navigation, expand/collapse and other fancy functionalities?

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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