Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

Desktop Width

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.

mobile 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?

share|improve this question

2 Answers 2

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.

enter image description here enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.