TB: New accessible way highlight the status of an item in a list

lynnepeacock commented 5 years ago

Related to #275

Problem Statement

As a customer making a change to my list of services, I would like to be able to quickly scan and see what is new, so that I can see what has changed.

Recommendation

Description of the proposed solution

Design intent

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

Designs

For the context of how this looks in the journey itself, please see Invision links below, or log in to a Telus test account and start a Rate Plan Change.

Invision links Desktop: https://telus.invisionapp.com/share/SGRT4RHQ8BC#/356593186_XL_RCP-StickyComparison_Box-Open

Mobile: https://telus.invisionapp.com/share/SGRT4RHQ8BC#/364553932_XS_RCP-MultiSub--StickyComparison_Box-Open

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: Sketch

When I open the TDS-Community DSM library Then I will see the Highlight folder And it will have 2 different variants; default and alternative

When I see the default variant Then I will see that it is filled And the colour is Raven grey (#71757B) And it is 20px height, with 8px padding on left and right of text

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

Willing to design solution: Yes/No
Willing to develop solution: Yes/No
Has workaround: Yes/No
Do any similar components already exist in TDS (core or community): Yes/No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
High impact: Yes/No

Christina-Lo commented 5 years ago

Meeting notes:

identify terms that potentially could be used: improved (ie. camera) new, etc
text style vs. highlight text as an icon
used as a comparison: between 2 plans
used as a callout? it is more of a mini-sash; lower priority than ribbon
this is a visible tag, not interacted with
read only tag
assistive tech would read it in line with rest of content
interactive? can it be used next to a link ie. new support article
accessibility; read the new as part of hyperlink
potential names: highlight
How do you make this discernible from interactive elements such as Buttons or Filters?
CSS padding and background colour; considerations

Action items:

Home solutions would need something similar; purple wouldn't work (@lynnepeacock and @twirlingsky )
visual design of highlight would need more padding (left and right) @lynnepeacock
explore text sizes that this will be allowed in @lynnepeacock

varunj90 commented 5 years ago

hey @lynnepeacock @twirlingsky have you connected on this yet?

please keep the github ticket updated, thanks!

twirlingsky commented 5 years ago

WIP: Home Solutions is working on an alternate design to highlight a term length so we don't have to use the ribbon.

lynnepeacock commented 5 years ago

Last week Lauren and I discussed the use of the label/tag for her use case and I took this ticket away to explore.

Exploration to date:

Rounded corners to 4px to match TDS
Extended the width of the background
Tried out some different colors

Looking for more use cases for this label and checking that we don't have conflicting designs for - Filters, Tabs, Buttons, and Ribbons

theetrain commented 5 years ago

From DPA meeting: Tentative usage guidelines for highlights vs ribbons (to be iterated as we continue to discover)

Ribbons

Must be used outside of a card
Copy to incite interest (what does that mean?)

Highlights

Can be used within card or list (tentative)
Copy to promote specific features

twirlingsky commented 5 years ago

A few more use cases for this came up today in My Telus - highlight of words: Not activated or activated. Suggested use of raja for Not activated and green for Activated. This is for TV streaming services like Amazon Prime, Hayu, Netflix, etc.

Separate links are provided in the activation description making these words are not interactive.

lynnepeacock commented 4 years ago

A few more use cases for this came up today in My Telus - highlight of words: Not activated or activated. Suggested use of raja for Not activated and green for Activated. This is for TV streaming services like Amazon Prime, Hayu, Netflix, etc.

Separate links are provided in the activation description making these words are not interactive.

hi @twirlingsky, was there a final design for the above use case? This also reminds me of Catherine's recent use case to highlight store availability. Do you think the two could be aligned in some way?

I am working on making a final invision file for the highlight ticket, which I'd like everyone to add their own examples to

twirlingsky commented 4 years ago

Here is the highlight being used in content on a comparison card to indicate a 2 year term.

lynnepeacock commented 4 years ago

Thanks @twirlingsky Can you confirm the spacing that is being used? I think it might be slightly different to what I have

twirlingsky commented 4 years ago

lynnepeacock commented 4 years ago

Good morning @twirlingsky,

Apologies I missed your image response above. Thanks for sharing your example.

I have adjusted my spacing to snap to the edges of the text fields (When I started highlights I was designing flush to everything!)

padding: 4px, 8px margins: to be determined by the designer.

For example, I have used different margins on the RPC example compared to the card example.

--

To note: the overall card design is different in your example. Perhaps you can send me the latest and I can update my file?

Planning to meet with Steph and incorporate her example from catalog pages today

lynnepeacock commented 4 years ago

@twirlingsky could you also let me know if the instance with TV channels is still being explored?

lynnepeacock commented 4 years ago

@Christina-Lo I have collated my notes into a similar format to our discussion and your reference: https://docs.google.com/document/d/1rlp_XzQ77UDy5GpHEJakJ9Ks9A7-YFKPBsHLYTCZMv4/edit# Anyone can make comments and editions 💃

Design I have added in an example from the catalog from Steph Lao (example below) I have changed the font style to "Regular" at Gary's request

Next steps

Discuss the documentation
Review the designs
- Steph mentioned there was talk of an outline highlight. I would like to hear the rationale for this use can and discuss with the team (example below)

-- Lastly, I'd like to include Elena's use case here, however, I can't tag her here so I will pick up in person next week.

twirlingsky commented 4 years ago

@lynnepeacock The highlight term will be used on all plan cards and on PDPs. It won't be on TV cards at all. Hope that answers your question.

lynnepeacock commented 4 years ago

@twirlingsky I was referring to this example that you mentioned Sept 20th. Sorry I am not sure how to link to the comment above

lynnepeacock commented 4 years ago

Update 31st January

Lynne met with Gary to finalize designs
Lynne met with Christina to work on the requirements doc and finalize the sketch file

--

2 types of highlight will exist: These will be for specific instances, listed in the requirements doc

--

Takeaways

Due to the height of "small" text, alignment is not perfect inside. Could add 2px of height to fix this, but then alignment with the text a highlight is next to becomes an issue
@Christina-Lo to meet with Gary and talk about where the border should sit for the outline version. Inside or outside
Lynne to work on "do's and don'ts"
@twirlingsky I believe one of the devs on your team will be picking these up?

twirlingsky commented 4 years ago

@lynnepeacock Can you send the requirements doc, sketch file and InVision link? I'll set up a dev ticket.

telus / tds-community