My team and I are currently working on developing an analytical system that employs a segment-based filtering mechanism. In essence, this system shares similarities with Google Analytics, where rectangular segments are used to represent different sets of data: Segments in Google Analytics

Initially, we experimented with using drop-downs for segment selection and employed tabs and a content switcher for changing the view between segments. However, this approach proved to be really unfriendly to our users (and for us, as well) due to a kind of duplication of elements (but we had to start from something, yeah): We had to start from something...

Consequently, we embarked on a journey to create a solution that could seamlessly combine the two fundamental functionalities – (1) selecting a segment to construct a report using its data and (2) choosing a segment to view the data contained within it. For now, our design allows users to select and work with up to five segments simultaneously.

Our primary source of inspiration for this design was Google Analytics. However, since Google Analytics lacked a segment choice option, we decided to enhance the concept, making it akin to a split-button. We've coined this element as the "segment card" or "segment button."

So there is a current version below. By clicking the chevron down, users can:

  1. Preview data from the segments in a relatively small pop-up.
  2. Choose from options like editing (leading to a scenario for creating a new segment) or removing (which resets a segment and excludes it from reporting). current solution

However, we've identified an issue through user session recordings: the clickability of the "segment button" is not intuitive. Users do not easily recognize that clicking the "button" serves as a content switcher.

To address this concern, we are considering implementing a tab-based approach similar to web browsers. However, we have some doubts about this potential approach (it appears to me that there is an opportunity to enhance the concept associated with the 'segment button'). So, I'd personally appreciate your input on the matter.

We welcome any ideas or expert opinions from the community. If anyone is aware of relevant references or solutions that have effectively tackled a similar challenge, we would greatly value your feedback and advice.

Overall, a user should be able to:

  1. Switch between chosen segments.
  2. Independently view data for each segment..
  3. Select an "View All" to see a data table that consolidates information from all segments simultaneously.

Thank you for your assistance and insights!

1 Answer 1


I would say something like the "UI of Django Admin permissions section" be modified to suit your need would perfectly fit your use case.

enter image description here

Instead of "available permissions" for your use case its "available segments". Also "Chosen permissions" => "Chosen Segments".

Provide a "and" / "or" checkbox that will display either "a union" / "intersection" of the chosen segments.

  • Thanks for your reply! Displaying segments is intended to be a part of an analytical report layout, similar to choosing websites in SEO tools (like SEMRush/Serpstat). There's no need to resolve the issue of segment choice that you provide. Imagine that you create a report about both google.com and bing.com simultaneously, but you can click on 'Bing' to display only Bing's data or click on 'Google' for Google's data. Additionally, you can view information about both of them at once.
    – Vee
    Commented Nov 8, 2023 at 16:50
  • So, the addressed issue is how to display the selected segments in the layout to make it clear and easy to switch between them.
    – Vee
    Commented Nov 8, 2023 at 16:50

Your Answer

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

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