Mobile UI design: filtering by category

[u0206397]

Would like to hear some comments from fellow developers.

I am designing the UI for a mobile site/app. Essentially, the data I need to present in the main interface is a list of items arranged vertically if assuming portrait orientation. Let's just imagine it is a simple ordered list of products for sale similar to the below.

Each of these item can be categorised with a single category, e.g. Books, Apps, or Movies etc.

Now I want to let the user easily and quickly filter by category. There are several ways to do so.

1. Have a drop down list in the navigation bar at the top of the page (similar to a search box)
2. Have a icon/button at the navigation bar at the top right that opens up a dialog/action sheet to choose the category
3. Use segmented buttons or a button row
4. Use chips (rounded text labels) to toggle categories on/off
5. Use tabs
6. Use a sidebar/drawer panel that slides in from the left/right when needed

Which sounds like a better or more standardized choice that most users would find intuitive?

Method 1: Drop down list. When selected, the navigation bar title will reflect the selected category.

Method 2: dialog/action sheet from a navigation bar Filter button

(Left) Method 3 segmented buttons and (right) method 2 dialog/action sheet method

Method 3: Segmented buttons/bar

Method 4: Use chips (rounded labels) to toggle like Google Play

(Left) Method 5 Tabs and (right) method 6 sidebar/drawer

 

[davidktw]

It would not be an effective poll to just unbiasedly ask for opinions in this manner.

You have to consider how many different choices of filtering to you have ? 3 vs 20 ?
You also have to consider if your filtering have multi-tier, such as if you choose A, under A, there are sub-categories A1, A2, ..., A5, and if B, only B1 and B2.
Then you also have to consider if your filter only need to deal with one type of filter at a time, such as if you filter by age, gender, etc all in one page for easy access, or you only have Genre alone and nothing else to filter.

These are the choices in UI design and you have to think about how often do your users need to filter, or the filtering is just secondary feature. Do they need to apply the filter everything, or it will be stored with their profiles.

The intuitiveness of the UI has to consider more in UX, not just how they are presented on the screen. The first from Amazon looks clean and simple and attractive, but very secondary, as oppose to the need of a hotel app which the users largely depends on the filtering as a way to make the first attempt to find a hotel.

In my opinion, the UX is where it matters more in this case.

 

[u0206397]

It would not be an effective poll to just unbiasedly ask for opinions in this manner.

You have to consider how many different choices of filtering to you have ? 3 vs 20 ?

Between 8 to 12 max.

You also have to consider if your filtering have multi-tier, such as if you choose A, under A, there are sub-categories A1, A2, ..., A5, and if B, only B1 and B2.

Not multi-tier for my case. Only 1 level category.

Then you also have to consider if your filter only need to deal with one type of filter at a time, such as if you filter by age, gender, etc all in one page for easy access, or you only have Genre alone and nothing else to filter.

Currently, only 1 type: category.

 

[davidktw]

Between 8 to 12 max.

Then a drop own list, or a screen that allow choosing makes more sense.
If it is something that need to be frequently use, consider saving the choices made, and a reset button to reset the filter.

Other options that lay out everything on the screen together with other contents would take up too much screen assets and causes unnecessary scrolling on mobile devices.

Not multi-tier for my case. Only 1 level category.

Then the amazon approach would works nicely.

Currently, only 1 type: category.

Noted. The amazon approach would works nicely.

 

[u0206397]

Then a drop own list, or a screen that allow choosing makes more sense.
If it is something that need to be frequently use, consider saving the choices made, and a reset button to reset the filter.

Other options that lay out everything on the screen together with other contents would take up too much screen assets and causes unnecessary scrolling on mobile devices.


Then the amazon approach would works nicely.


Noted. The amazon approach would works nicely.

Thank you very much. I see your reasoning.

 

[kuma-mon]

Hi TS,

I'm interested in applying for UI/UX engineer because I do have an eye for UI design, but the issue is I have no experience. I can somehow showcase my finished products during interview, but perhaps they might want me to show storyboards, wireframes etc which I never create before.

I'm assuming you are one since you created this thread. I would like to ask how the interview process is, and want do you have to do daily? Is programming skills required?