What is the best way to implement tabs for filtering on a responsive dashboard?

Question

I am developing a web application that tracks Machinery performance in a Factory environment. There is a hierarchical structure to the customer's setup in the form of....

Factory 1
  - Production Line 1
     - Machine 1
     - Machine 2
     - Machine 3
  - Production Line 2 
     ...
Factory 2
     ...
(etc.)

So basically - 3 levels. Between 1-5 Factories, between 1-10 Production Lines and potentially hundreds of Machines.

I only need to filter by Factory and Production Line (where only one of each can be selected at a time), and will need to 'sort' by at least 2 other variables. I am considering using some form of tabs on the dashboard to achieve this - Here is a quick mockup.

However, it is important this dashboard is responsive and >5 tabs on mobile screens with relatively long names starts looking ugly. After some research I believe the most appropriate solution for mobile devices would be something like the following mockup, where the tabs change to a drop-down at a certain screen width.

Regardless of screen size, I want to make sure the user knows straight away which Factory and which production line he is looking at, and if there are other selections available.

Is what I have outlined above a relatively standard and acceptable solution to this problem? Has anyone designed or used a responsive tabbed/filtered solution that would be more suited to the application above?

Answer 1

I am not a hudge fan of dropdown menu for mobile apps because :

• you don't see all the available options

• you need at least 2 click/tap to change

I am also working on an industrial web app and I have learnt that the users uses dashboard as a "report tool" and check each production line one after the other. They rarely go directly to one specific machine of one specific production line of one specific factory.

If it is the same for yours, you should add link to the next line/factory like a pagination. And if you click on the name, it shows a list of the available options just as a regular dropdown menu

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

Answer 2

Your solution should work. I've also encountered apps with tab filters if there aren't many filters to display. A couple examples are below. The first example has tab filters + sub/scrollable categories which might work for the production lines. The second screenshot has both a tab filter as well as dropdown which is similar to what you're suggesting.