Sync Slicers

One of the problems with multiple pages report before releasing this feature was that users were not able to transfer their selected filters on a specific page to other pages in their report. They had to create same filters on each page and select same filter each time they navigate through different pages.

This feature helped them to solve this issue by creating filters that are synced in entire pages of their report and each they select a filter in one page, it carries through all other pages without doing same action over and over again.

shrug

What Was the Problem?

Users were not able to apply their report filters to all pages, they had to add filters to every single page which was very time consuming and not efficient.
designer

What did I do?

I started with rapid prototyping on pen and paper and after reviewing it with other team members I design high fidelity concepts in affinity designer and we did some user research based on those concepts.
brainstorm

Who Did I Work With?

In this project I was user experience designer and worked with our product manager, developers and researches. We had design reviews with other design team members during this project as well.

Design Process

We designed 3 different concept for this scenario and tested them with users.

Global Slicer Switch in Property Pane
Advanced Slicer Management Pane
Simple Slicer Management Pane

One Of The Top Requests From Power BI Community

 

Couple of iteration that happened during this project

Concept 1 – Global Slicer Switch In Property Pane

In this concept we tried to put controls of sync slicers inside property pane of visual.

Designs
Description

1. User needs to select a slicer on report page

2. Then needs to enable global slicer option in property pane

User Feedback

Property pane is not really visible and right now they have lots of problems with this pane’s design, adding more UX complexity won’t help them.

3. User needs to create a group name for this new sync slicer

4. This option allows them to show this slicer on all pages of report

After creating a new group, adding more groups inside the group selection drop down was challenging and ended up adding more UX problems.

Since any change that made on property is live, having an input box without save button changes the pattern in property pane.

5. User can select this option to show slicer on a new page

This concept might be good for one single group, but after adding more groups it gets complicated since there is no central UI to manage and view these groups.

6. By clicking on this link user can unlick this slicer

Concept 2 – Advanced Slicer Management Pane

In this concept we tried to put controls of sync slicers inside a sidebar pane.

Designs
Description

1. User can access this pane by selecting sync slicer item from ribbon

User Feedback

2. User can select Create a new group or add to existing group from selections. When they select new group, they see new option for entering group name

3. After saving group name, they see their report structure that shows the slicers they have in each of the pages of their report. By clicking on sync icon they can sync any slicer in any page with selected slicer (if they are compatible). They can control the visibility of slicers by clicking on eye icon

Icons for sync and visibility are not intuitive and not clear the what are the related actions.

 

4. If user selects another page, canvas switches to that page to help user select the proper slicer from the list.

5. Also if any of the slicers in the page are incompatible with selected slicer, the error icon appear on its row to notify user about incompatibility

Showing slicers that are incompatible with user selected slicer in this pane would add to user confusion.

 

6. Users can add selected slicer to the pages that don’t have any slicer by clicking on add icon

7. Users also can add a slicer to existing group by selecting this option

Group management layer in the pane seems complicated and confusing, it might be a good idea to start without grouping functionality to teach users how to use this feature first then we can introduce management capability.

 

8. They can select the slicer that they want to add to existing group by clicking on slicer drop down

Some users have lots of slicers and pages in their report and this UI doesn’t handle those cases very well.

9. Then they select the group from group drop down menu and click on sync icon for this slicer

Overall users were overwhelmed by this UI and thought it is very confusing.

Concept 3 – Simple Slicer Management Pane

Since users preferred the pane design we decided to iterate on it and make it simpler based on user feedback.

Designs
Description

1. Clicking on Sync Slicer on ribbon shows up this pane, user needs to select a slicer to start the process.

User Feedback

Message on pane was clear and helped users to understand how they should start the process.

2. User needs to select a slicer to see table of available pages

3. After selecting a slicer, we show a table that has all pages in report and options to add/hide selected slicer on those pages.

4. From here user can select the page from table or by clicking on pagination on canvas and add/hide slicers to pages. (By clicking on page row in table, report page changes to that selected page). Title will change based on selected slicer.

 

After selecting a slicer almost all users were able to sync the slicers with other pages in their report.

Some Users Feedback

Power BI Official Announcement