2

I'm looking for a clean expandable solution to have many tabs (that end up being in multiple rows), but UI is not necessarily my strong suit.

I'm planning a rewrite of an old application that is used extensively in a manufacturing environment. Currently the top of the application looks like this. Where the tabs are stacked, taking up space, and jump around.

Tabs

This application basically provides statistics of each piece of machinery or part of the process.

I've read over this solution Is it ever okay to have multiple rows of tabs?. I don't believe this will work for me though.

  • I would prefer not to use any of my side to side spacing on my UI. I need to maximize the width for charting purposes. So if possible keep everything at the top.

  • All options need to be visible at all times. For the best user experience (especially the guys on the floor) I don't believe it would the best solution to have a "More" tab that would drop down additional options to choose from.

  • It needs to be a solution where more options can be added without cluttering up the UI. There is going to be a good chance that more options will be added.

I'm open to any ideas as this will be a fresh start.

Improve this question
4
  • How are the users using the current tabs? Do they cycle through them, always select one or two specific ones, …? Do workers differ in the tabs they need? How are the tabs labeled? Can they be grouped logically? Does the number of open tabs change frequently?
    – Crissov
    Jul 19, 2018 at 14:42
  • It wouldn't have everything visible all at once, but what I have done in the past is make the tab row scrollable horizontally either by a scrollbar or a custom button on the end that would scroll it via javascript.
    – BlueCaret
    Jul 19, 2018 at 16:20
  • @Crissov It truly depends on the user. Some, such as management and supervisors will hop from tab to tab, fairly quickly just to get a quick brief overview of what's going on. They'll scan all 16 tabs in a matter of minutes. Others will sit on a tab, or switch between two or three tabs depending what they are doing at that point in time. They are all labeled with about two or three words each. I'm trying to avoid any pin point clicking or scrolling. This is called up on ruggadized touch screens on the floor, and in the winter bulky gloves are worn.
    – Timmy
    Jul 19, 2018 at 17:10
  • That sounds like you have should have an overview with direct access to every view as in Tin Man's answer, but in every view/tab you should also have horizontal arrow navigation to flick to the next or previous view.
    – Crissov
    Jul 26, 2018 at 10:07

3 Answers 3

Reset to default
2

If you look for a fast solution, here it is: enter image description here Just turn the tabs. But I think that you have more than one problem here. You need better information architecture = There is to many tabs, so your user can have a problem with finding his way in it. It requires a user to go over a long list when he looks for an option. It would be better to group them in some way. For that you can try card sorting, it doesn't require from you any of UX-researcher skills and give you quite good data. The best is to do it on the actual users. Then the interface can look something like that: enter image description here the options are grouped into topics. When you click a topic you see the most popular action on the screen and the rest of the actions are displayed under the topic. So basically it works like an accordion menu.

Improve this answer
2

"All options need to be visible at all times"—what is this need motivated by? Is it because the engineers need to be able to switch quickly between any two pairs while doing their job? Are there perhaps combinations of pairs that need to be switched between often? Perhaps you could group those together to create a more managable two-level hierarchy.

I'd recommend first writing down the employees' needs and workflows and working from those. Perhaps you might end up finding that a view for each distinct workflow is best, even if some of the info might be duplicated between views.

Anyway, if I assume that fast switching is a need, yet you need to present all options, perhaps a separate page listing the options would fulfil your need:

enter image description here

Even though it's two clicks instead of one click, it could actually be faster to use. As the text can be bigger, icons help identify each page, and each element has a fixed position, finding a specific item could be much faster cognitively. (No scanning through two rows of same-looking text, with tabs rearranging with every window resize, to find the right tab.)

If that doesn't fulfill your need, perhaps a single-row scrollable tab bar might do the job. Firefox does this.

Or the UI could work more like a browser, allowing people to open and close new tabs, choosing a section to visit for each tab.

Or you could use a hamburger menu activated on hover.

Or try something non-standard and go with a two-level pie menu.

Really, there's a ton of options. To figure out which is best, write down your target audience's real needs. Not "all options visible at all times," but rather things like "when a manufacturing worker is figuring out where an error might be, they need to check all machine data for outliers". What do they need while doing that? What don't they need? And then you might come to the conclusion that an "Outlier" page with only the relevant data might be useful rather than just one tab per machine.

Oh, and conduct user testing on your concept with the target audience afterwards.

Improve this answer
0

Would an accordion layout work? A vertical list of headers, each expandable to show its contents.

enter image description here

Improve this answer
2
  • I've given this option some thought too, but with 16+ sections of the accordion could this make for some dramatic shifts of sections. I haven't had time to play with the idea yet, but I will definitely explore the option.
    – Timmy
    Jul 19, 2018 at 14:18
  • Accordions make me shudder... The problem with those is they are only useful if the information within them is short. Get it to long, and the UX of switching between sections becomes a giant pain of scrolling up and down constantly, especially if the user isn't sure what section they need yet.
    – BlueCaret
    Jul 19, 2018 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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