Customizing the slider component

[chrischan-twilio]

Background

We are building A/B experimentation into Segment's Broadcasts feature. This allows marketers to run experiments on different variants of their campaigns that are distributed to their test recipients, so they can validate which variant performs the best.

For this functionality, we need a component that allows users to configure their test sample size. When I am configuring my experiment in Broadcasts, I want to choose the percentage of total audience that will be allocated to each test variant, so that I can have a specific number of recipients that will receive each test version.

The current proposal for configuring a test sample size is a slider that allows for:

1. Setting the percentage of users that are part of the test vs. the users that receive the winning variant, with an estimate of users in each group
2. Ability to click and drag to the desired selection for the test sample
3. Dynamically reflect the number of variants (up to 3 or 4 variants) in the test. For example, if a variant is added or removed, the slider should dynamically reflect the current variants. The percentages are automatically rebalanced to be equal across variants.

Feedback

How might we best go about implementing a slider that is functional and accessible?

Stage of design

Exploration, high-fidelity

Research

Experimentation foundational research

Relevant links

Test sample slider concepts

Are you looking for visual design support?

• Yes

Additional Information

No response

[chrischan-twilio]

Recapping our last office hours convo – we've aligned towards not customizing the slider component to include slider "segments" since it has an impact on accessibility and scaleability.

We will plan on using the slider component as is. However, we'd appreciate any additional feedback you might have around how we show estimated recipients underneath the slider. These estimates will dynamically update as the slider (or input values) are changed.

Is there a preference towards one approach here over the others?

[serifluous]

Hey @chrischan-twilio ! The 2nd and 3rd approaches are probably your best bet. The number inputs will definitely allow customers to select granular values more easily if that's important at all (and it could make for an interesting user insight to see whether customers actually prefer one interaction pattern over the other).

A few other suggestion:

1. We're going to update the Slider component in a few weeks so that the min and max values appear underneath the slider bar instead of above. Either way, you might want to keep in mind that where you have the "Test %" and "Winner %" text right now could be confused for the min and max values of the Slider. You could try an exploration where the values follow the slider knob.
2. If you're ok with customers not being able to interact with a Slider to select values, you could try using a Meter just as a visual representation of the values, and have customers interact only with the number input fields to change values.

[serifluous]

Thanks for coming to office hours! Here's the recording: https://twilio.zoom.us/rec/share/APhhuOP0V-V4XCIguVpqMhuQfppNuJbhTz4HGVu9FCBhXRP_FOCsZV9QVRQIaOk.14YO9Yyx8oQtZfI_ You can find the password in #help-design-system