Horizontal Selector

[edilege]

Problem statement

In order to engage the customer and educate them on the added value that they are getting, we would like to create a component to associate the action with the outcome.

Recommendation

• slider component in order to increase engagement and facilitate understanding of the value the customer is getting

Design intent

for AAL page, clearly show the saving amount based on the number of people that customers will add on to their account.

Describe the value of the new feature from the customer's POV.

As a customer
I want to clearly how much I save when I add a family member to my account ahead of time
So that I can make an inform decision and clearly see the value of adding a family member.

Narrative

[Optional] Longer form description of the feature to add additional context to how this feature fits into the overall product.
-->

(This space is intentionally left blank. The motivation and design intent go here.)

Designs

• Screenshots
• Sketch file
• InVision links

Acceptance criteria

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:

Scenario: Displaying the component

Given text is provided
Then the text is displayed as a child
And the text size matches core-text medium

Out of scope

(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)

Meta

• Include component name and version: vX.Y.Z
• Willing to design solution: Yes
• Willing to develop solution: Yes
• Has workaround: No
• Do any similar components already exist in TDS (core or community): No
• Which teams/applications do you think would use this improvement?: outcome teams, Mobility, Home solution, Business
• High impact: Yes

[varunj90]

thanks for opening the issue @edilege! you're on the agenda for Monday!

[lynnepeacock]

@edilege some notes :)

Feedback and discussions

• Colour of the dot / visibility with the bar
• Does the bar change colour to illustrate an increase/decrease? (No)
• Is there a label associated with the component? (Visual and accessible)
• Investigate accessibility

Mobile

• Opportunity to switch the order of the content to ensure a customer can interact with the values

Later discussion

• Usage requirements of how the bar affects other areas on the page

[Christina-Lo]

@edilege Not sure if you've been able to go to an accessibility office hour with this, but here are a few notes for considerations that came up with sliders when @owestinTelus @donnavitan and I chatted about it

• Are screen readers announcing amount of ducks being seen? People with sight issues will just see blurs growing and minimizing
• Should be built like radio buttons; buttons (where the numbers are) trigger actions required from a user and there’s no relationship between the buttons and an action
• With the context of image and price changing, how valuable is this experience to the user/customer? Let's test it!
• General rule of thumb, content that changes should be very close to what they are interacting with. Can connect with Home solutions to see how they’ve solved for something similar (not slider, but jumping content)
• Need to take into account a situation where the slider will need to offer way more choices, than the 4. How would we do that? (the first pass of the slider will need to write limitations of maximum items but keep in mind that this will need to be iterated on if another team needs more items)
• Will there be different states on the slider controller as an indication that a user is interacting with it? (ex. https://material.io/components/sliders/#continuous-slider)

Accessibility checklist that needs to be considered:

Desktop:

• Keyboard alone
• Text Resize 200% (browser text setting)
• Colour Contrast
• Windows High Contrast Mode
• *Reduce Motion
• Screen reader

Mobile Web:

• Switch access/control
• Pinch Zoom
• Colour Contrast
• Inverse Colour/Grayscale
• *Reduce Motion
• Screen reader

Consider these notes from https://www.nngroup.com/articles/gui-slider-controls/

[varunj90]

hey @edilege are there any updates to this ticket? can you share the link for the final design of this component?

[edilege]

hey @varunj90 here are the updated screenshot- I've also met with Oskar . I am just in the middle of documenting those.

[varunj90]

perfect let us know once you're ready for the final dpa review @edilege

[edilege]

Accessibility notes:
-The suggested name of the component is a clickable slider.

• The slider component will be using radio buttons for the variables and the variables will have labels for the screen reader.
  -Maximum variables will be 4 (to accommodate mobile view)
  -Clickable slider should have a name explaining the variables
  -Generated content and the clickable slider should be used together
  -The image that is being used to support the slider should have alt text.
  -The mobile view should not have a supporting image to avoid distraction.

@varunj90 I believe the component is ready for the final review, thanks!

[varunj90]

reached out to @lynnepeacock and @affansajid on slack to complete story writing and acceptance criteria for this ticket.

[donnavitan]

Hello all,

Just an update, as per @varunj90's comment. I'll be reaching out to @lynnepeacock to help with story writing on the design side.

As for future considerations/enhancements, I'm including a few links and comments that were discussed for future posterity.

https://fi.google.com/about/plans/
https://telusdigital.slack.com/archives/CDQ6P8VNU/p1573053212030800?thread_ts=1573053212.030800

[twirlingsky]

We're working on a contextual state toggle that is similar to this function (inspired by fi.google.com - link above) Early stages, but perhaps it's useful to peek at https://telus.invisionapp.com/share/2GUZ29M5EKY#/394811837_XL_-_1200px_--_Filters_-_V01-0-0_-_05