3

I'm developing a little hybrid mobile application, it is an e-commerce app, I've designed all from scratch. I am designing it in such a way that the admin at anytime can add categories and subcategories, and so on. There could be cases like this (although they may be a bit rare cases):

Category 1
  Category 1.1
  Category 1.2
  Category 1.3
    Category 1.3.1
      Category 1.3.1.1
    Category 1.3.2
    Category 1.3.3
Category 2
Category 3

I would like to know what is the best way to do this? As a CSS framework I am using Materialize.

How would you advise me, to browsing this section?

Initially, if they were just categories (without children). I would make an accordion, or what in Materialize is called Collapsible. And then when the user clicks on an item, a list with all the products is opened below.

What are the best practices on this type of applications? Should I just show a small list of products and when the user clicks, go to a specific page of that product?

Improve this question
2
  • This is for view mode only, no editing or rearranging them right?
    – Alvaro
    Commented Jan 11, 2017 at 16:19
  • Yes, this is the view mode only. That is, what customers will see, not what the admin will see.
    – alessadro
    Commented Jan 11, 2017 at 16:20

2 Answers 2

Reset to default
3

I think this type of mobile menu would help your case? https://tympanus.net/Development/ResponsiveMultiLevelMenu/

Would prevent any scrolls or long section in your navigation menu and sure will enhance your user experience using your app, my concern about default dropdown if you have many child-menus is you must have a good padding for users to tap the menu, but if you are using this type of interaction, you can maximize the menu padding without worry about long of the menu section.

Improve this answer
2
  • 1
    This seems to be just what I need
    – alessadro
    Commented Jan 11, 2017 at 17:55
  • @Alessadro glad this help your problem!:)
    – Rob H. Yamin
    Commented Jan 12, 2017 at 1:54
3

As you are using Material design as a guide I recommend you check Navigation patterns. According to it Nested Navigation should only be used on desktop.

As far as I know there is no way to use such navigation on Mobile inside this guideline and the reason is probably to avoid complexity in the layout. The way I've seen it in Google Apps such as Play is combining the different methods such as tabs, bottom navigation, etc.

Improve this answer
5
  • I wonder, should I allow the user to have multiple subcategory levels or force them to a single level? For example, Amazon does not have as many sub-levels, it has maximum two
    – alessadro
    Commented Jan 11, 2017 at 17:21
  • Only children, not grandchildren
    – alessadro
    Commented Jan 11, 2017 at 17:21
  • 1
    @alessadro This will depend on the case. It might be better to combine a parent-children (only) with tags to simplify. But you might have a case where those grand children are necessary...
    – Alvaro
    Commented Jan 11, 2017 at 17:23
  • Could you show me some reference link where I can see examples of this? Please.
    – alessadro
    Commented Jan 11, 2017 at 17:26
  • 1
    @alessadro I just meant generally. I recommend you check Google apps as well as Material awards in case you find something similar to what you want to achieve.
    – Alvaro
    Commented Jan 11, 2017 at 17: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.