alternative to scrollable tab bar for mobile

Question

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

pros:

• navigating easily between sections by scrolling without pressing back button

cons:

• 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

pros:

• 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

cons:

• 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)

Cheers!

Answer 1

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.

Answer 2

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: