Tabs with long labels in constrained space

Question

One of the pages in our enterprise desktop application, (Refer Attached Image) is divided into two sections, the right one occupies 30% of the real estate. Users are overwhelmed with information on current left section and also there is too much visual clutter, as the left one has tabbed view where tabs can be added or removed from a drop down. Average number of tabs in 4 with variable length label names. Each tab contains specific information about a business entity. Since showing them all at once overpowers user with too much information, We are showing only default tab when user lands on this page. User can pull new tabs to view from the drop down button on right with a counter that tells how much more tabs are to view. As the number of tabs can go upto 18 and tab labels are configurable, also length can be sometimes more than 20 characters, when user keeps on adding the tabs, at one point the space can no longer display full label names and labels and also tab size has to reduce or truncate.

What's the recommended way to let users perform this action? We've considered a few options:

1. Keep number of tabs fixed and if user wants to add a new tab, replace it with the last tab.
2. As the label names eventually get truncated as user keeps adding more tabs to view additional information, Keep the truncation of label till the first word of each label.

Other approaches? I saw other questions with a great discussion on How best utilise tabbed views, but in this case, I'm more interested in the right place to put them.

Thanks!

Answer 1

If the maximum is only 18, maybe a master-detail option would work better, as it seems that the tabs are not a good solution in this particular instance, especially with long tab captions.

Maybe split the main view vertically, so you have a list of the 18 "tabs" on the left and the details on the right (middle of the screen, in your case). Something like Outlook, Explorer, etc, or this one from SAP.

This is likely easier to use and easier to make responsive, to adapt to mobile, etc. It also allows you to be more expressive with the "tab" item, like the SAP example shows, if you need to show more than just the title.

Answer 2

Chunking the data into portions is a good approach. But using the tabs in a way you have described isn't so good from the usability point of view.

• Effectiveness (Mistakes). Most tabs are hidden initially. Users should understand the way to reach the full list. Some users will just miss it in your design and fail the task.
• Efficiency (Time). Adding the tabs, searching for the right one and switching between the tabs requires a lot of time and cognitive efforts. And it's very annoying for user.

My suggestions are:

• Make it obvious, the business entity has many data chunks (increase effectiveness)
• Make it easy to read and easy to switch/reach (increase efficiency)

A good example is Chrome settings screen. As a bonus it contains search option across all the data and splits the chunks into Basic and Advanced ones. Though hiding the options under hamburger menu isn't good in your case.