1

I'm working on a web application that has two similar data grids in a page. User should be able to switch between these two data grids within the same page.

I have used segmented buttons to navigate between these two grids. But I feel this component visually becomes a toggle, and the current state of the toggle becomes ambiguous.

As of now I’m solely relying on the color / hue to show the selected state but I feel it's kinda unclear which state is selected.

Is there a better approach to solve this problem?

Segmented buttons circled in red enter image description here

Sooraj MV
  • 3,609
  • 2
  • 18
  • 37
  • 1
    You have used a darker colour to indicate active states throughout your application, so if you stick to the same convention it should not be too difficult for the users I think. – Michael Lai Sep 12 '19 at 05:20
  • 1
    Related: https://ux.stackexchange.com/questions/1318/should-a-toggle-button-show-its-current-state-or-the-state-to-which-it-will-chan – locationunknown Sep 12 '19 at 06:58
  • What does the search do? Is it searching on both users and modules? Or the selected data grid? – Mike M Sep 12 '19 at 12:40
  • Search is applicable for the selected data grid, in this case Modules is selected so it would search within that. – Sooraj MV Sep 12 '19 at 12:58

3 Answers3

3

You can try removing the background color of the button to indicate inactive state. Having color on both the states is confusing because they both stand out equally. To further improve, use bold typeface for the active state.

enter image description here

Ren
  • 3,196
  • 1
  • 8
  • 30
2

It seems you may have two issues: which segment is selected, and what can the user search on, especially if the user comes with an immediate intention to search.

In your mock, you have two different data sets, but you're using a control placement way to the right of the data, so to see at a glance which is selected, my eyes have to look right.

The search field to the left is well placed to search the grid, but there's really two different search fields in this case.

A tradeoff: vertical space for clarity, tabs for delineation.

Segmented controls are often used above a table as a filter, not to delineate between two distinct data sets. One option is to use tabs.

With either control, you can shift them to the left, so they're more visible if you scan the page vertically, and the selected state more obvious.

By placing the search directly below, you can have a more direct communication about which data set is selected, and the search capabilities.

enter image description here

Even if you stick with a segmented control, you might want to consider the placement so it's easy to find without looking all the way to the right.

Community
  • 1
Mike M
  • 24,650
  • 1
  • 57
  • 65
  • Excellent Answer, Thank you very much. :) I will accept this soon if there is no other perspective. (Probably none) Just one question though, You have shifted everything to the left side, So is it ok to have that white space / emptiness on the right side above the data grid? Thank you again! – Sooraj MV Sep 12 '19 at 14:35
  • The white space is fine IMO. You could also use it in the future for other filters, if applicable. – Mike M Sep 12 '19 at 14:41
  • Got it. thanks again! – Sooraj MV Sep 12 '19 at 15:09
1

It's definitely a challenge with toggle buttons. We had to use them in one of our projects and we assumed that indicating the active state by changing the background to the primary colour would be enough.

However, user interviews showed us that we were wrong. Whenever we had a collection of three toggle buttons, the user did not seem to be confused. When it came to two options only, users were wondering which one was the active one.

We improved the component by adding some more visual cues to emphasise on what the active state was.

  • changed the font weight to bold
  • added a contrasting border
  • changed the non-active button's border colour to lighter
  • changed the non-active button's label colour to lighter

...as follows:

Bilen Mujdaba
  • 11
  • 1