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....
- Production Line 1
- Machine 1
- Machine 2
- Machine 3
- Production Line 2
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?