Displaying large category menu on a mobile device?

Question

I've looked into this question, and this one as well; I didn't get an accurate answer.

I have a fairly large category menu that I want to display for touch mobile devices with relatively small screens. I've came up with few solutions, but non of them is good enough for my requirements.

The categories menu looks like this:

• Category1
  • Sub category
  • Sub category
  • Sub category
• Category2
  • Sub category
  • Sub category
  • Sub category
• Category3
  • Sub category
  • Sub category
  • Sub category

.... And the list goes for 6-8 more categories.

So, I've been trying to figure out a way to make it easy for my users to find categories. I tried laying them vertically, but it turned out to be extremely long(~size of 3 pages) Which - IMO - is far from being effective nor simple.

Is there any way to display such categories for touch mobile devices in a simple and effective way?

My current thought is to encapsulate each group of sub categories inside an expandable list, so a user looks for his targeted category, clicks on it, then he gets prompted with the category's sub-categories. Worst case scenario the user has to search 10-13 categories to find his destination and AT LEAST click three times. Initial User Interface size is relatively small (+).

Just for clarification, the categories I'm working can be mathematically sorted; which means the first category represents level 1, the second category represents level 2, the third category represents level 3, and so on. Therefore I believe the user will automatically scroll down quickly to the level he's reaching for.

Answer 1

What is usually done in mobile is to break down tasks into atomic steps. In categories, it is very common to have a main menu, and then in each item to drill-down to a submenu that shows in a new screen. A nice example is the Setting menu in iOS. You can also check a similar answer I gave here.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

The problem definition is critical for a good solution. I would siggest thinking about it not as how to represent this structure, but think about how do you allow the user to find the right subcategory.

This will open up some new possibilities, so for example, you might display "Popular" or "Recently accessed" as a way to navigate the list if that applies in your scenario.

I don't think 3 pages is that long on a mobile device as people are more comfortable scrolling (swiping). Expandable list is a good idea as the transistion is much simpler than 2 pages of lists.

If you can share more details on the context, it'll help come up with more solutions.

Answer 3

I think your best option is to try and use a slide-in side menu for the main categories, and present the sub categories for each menu on the main screen. Even though you can't see the full structure (it is difficult to do this currently anyway), at least the navigation will be quicker and easier for the user.