i am designing an application for android. an important part of it is designing a page to allow users to select stuff (i.e add to cart) from a categorized list of items.

the IA is such that most categories have between 5-25 items in them. However, there are a few categories which have a huge list of items and have hence been divided into sub-categories, each consisting of 10-20 items each. also the categories are not consistent throughout the app but depend a lot on the store.

few general notes: the users would frequently use this app to buy items (say, 2-5 times a week). one order would generally consist of 2-6 items across various categories with possibly multiple quantities of items. the app should be fun to use and interactive

The current method of navigating this is by using scrollable tabs (e.g. like the ones in playstore) i.e. layout #1


download bmml source – Wireframes created with Balsamiq Mockups

note: say category4 has a subcategory, then the list view is replaced by an accordion view


  • navigating easily between sections by scrolling without pressing back button


  • user research revealed that there is a very mixed response to the scrollable tabs. tech savvy users are familiar and comfortable with it but quite a lot of my user base is also unfamiliar with the scrollable tabs and find it inconvenient
  • a common issue with both user bases is that they've to scroll through all the tabs to know which categories are present (since categorization depends on store and is not consistent)
  • the UI for this is somewhat unattractive and utilarian

I have thought to replace this with a two page interface as follows (layout2)


download bmml source

note: the navigation between subcategories (when they exist) is done by swiping gestures


  • user can see all the categories and subcategories in a single glance without performing additional actions
  • the UI can be made visually attractive by using the trendy cards style design theme


  • switching between categories is difficult as user has to repeatedly go to the first screen and then back again (this is a major issue and possibly the only thing stopping me from going ahead with this design)

Feedback on this problem is highly appreciated. Feel free to suggest options apart from these two as neither of these are perfect. I would love to see all the various approaches (though please use alternatives to the scrollable tab bar as, although the scrollable tab bar seems like a good option, a significant number of my users have an aversion to it)



Its good that you've done user research - and an interesting finding that some of your audience are unfamiliar with the scrolling tabs.

Once you're within a category, an alternative idea might be to show all the other categories in a dropdown box. This could solve both problems you have identified:

  • Users who are unfamiliar with the scrolling tabs would likely find a dropdown box more recognisable, as it is more prevalent in the wild

  • It also makes jumping to other categories easier, in that it saves a trip back to the main category overview screen as per layout #2

Some more info about this navigation style here (although it applies to responsive sites, so not all of the points are relevant): http://codepen.io/bradfrost/full/hkuzA

Depending on the type of user research you are doing, it would be useful to test this new approach against the approaches you have already identified to determine the best one. Split your users into three groups of equal size, and give each group a simple task to do - ie 'Order 4 products from category x' while showing each group a different version of the interface. Hopefully, this will identify which is the version that is easiest to use for your audience.

  • thanks for the input. surely taking it into account too. although dropdowns often don't merge well with many UIs and leave little room for a custom design. also a clarification, the 'can't see all categories at once is a bigger grouch' than 'not familiar with scrollable tabs' – BatlaDanny May 29 '14 at 9:41
  • Fair enough. Depending on how the master navigation of your app is handled, could you use a 'left-flyout' category menu? This menu could either contain all the top level categories, just the subcategories of the current category, or an accordion menu. Try this link for an example (resize the browser so the nav collapses) - codepen.io/bradfrost/full/IEBrz – Paj May 29 '14 at 13:00

In your case it's better to use Layout #2, as the categories are not consistent across the stores. So a user sees all the categories for selected store and:

  • Create mental representation of the assortiment of the store
  • Makes the choice: either dive to some category or exits the store

The main advantage here is discoverability of the all categories.

The real-world analogy here is a book and its table of contents. ToC is placed in the beginning of a book to allow reader generate overall mental representation of the content and make conscious choice.

For advanced users you could also implement "exploring navigation" model with swipping gesture. This navigation allows to move forvard across the categories and is less annoying than forth-and-back interaction style with Back link:

enter image description here

  • i am keeping the scroll action for navigating between the subcategories (in cases where they exist) and hence can't use this for changing the categories. sorry is that wasn't clear in the mockup – BatlaDanny May 29 '14 at 11:24
  • So why make the difference in subcategories nav and between-categories nav? If swipe is known gesture for nav, just generalize it for all the categories: Cat1->Cat2.sub1->Cat2.sub2->Cat3->Cat4, etc. – Alexey Kolchenko May 29 '14 at 11:49
  • because, as i have mentioned, the problem is not with swiping but with a scrollable tabs (when a large number of categories are present). the subcategories won't be more than 4-5 while categories may go upto 12-13 – BatlaDanny May 29 '14 at 12:10

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.