Tabs (core team is developing)

jackreeves commented 6 years ago

Problem Statement

We currently have multiple visual treatments for tabs with different functionality throughout TELUS.com. I would like to create a TDS approved community component for tabs, that only has one function for an overall better UX experience. (See Donna's detailed audit here: https://docs.google.com/presentation/d/1rxgXYgXVVA7VJc-hvctoHs3hIwj0_cchDa96Iuv0fYE/edit#slide=id.g57086ce1ca_1_0)

Story, acceptance criteria, appendix

All Tabs-related working files and documentation can be found in the Tabs Google Doc (available for internal use).

Design intent

InVision files: https://telus.invisionapp.com/d/main#/console/13491097/412305657/preview
Sketch file: https://telus.invisionapp.com/d/main#/loading?folderID=35356594

Outcome

Defined tab designs for desktop, tabs and mobile. This will be available to all as a core component.

Meta

Willing to design solution: Yes
Willing to develop a solution: No

varunj90 commented 5 years ago

Issue reopened as Halo/BRC team will be building this as a community component. thank you @elenaverling and @Andrew-K-Lam for taking this on, looking forward to working together

varunj90 commented 5 years ago

There is a design jam scheduled for July 30: Design Jam: Tabs, Filters, Other Navigation

Prerequisite: Go over https://docs.google.com/presentation/d/1rxgXYgXVVA7VJc-hvctoHs3hIwj0_cchDa96Iuv0fYE/edit#slide=id.p4

Outcomes • Defining the differences amongst these components • Looking into Elena’s ask (so we unblock her) • Action items to update individual community tickets

twirlingsky commented 5 years ago

Here are the XL & XS design Home Solutions implemented sub-navigation. [XL] https://telus.invisionapp.com/d/main#/console/17553495/370407325/preview [XS] https://telus.invisionapp.com/d/main#/console/17602419/370408129/preview

And the sketch file can be downloaded from the InVision project assets section.

DanGenuardi commented 5 years ago

Here is what we are doing within the Usage page on My TELUS. This is a selection tab to toggle through different plans within a single BAN. This is a view for 6 or less selections.

xl - usage default xs - usage default_Multi-BAN Copy

varunj90 commented 5 years ago

@elenaverling and @DanGenuardi to jam on the mobile version for tabs. sweet!

lynnepeacock commented 5 years ago

@elenaverling Could you let me know what the expected interaction should be for labeling the tab content when it's in the dropdown format?

For example: We are showing a label outside of the drop-down container in Usage, below

1) Where we say "Select a plan", would this be the default label for the drop-down? 2) When a selection has been made and the drop-down is closed, what does this label show? Is it now the selected value? Will a customer remember what the drop-down contains/represents in this state. I'd like to see these states in action if that's possible?

DanGenuardi commented 5 years ago

So from our discussion for the tab selection. It will always default to the first selection on the tab list. Then the user will manually need to select the other tabs to view within the page. The selected state will always appear on the list for mobile dropdown view.

theetrain commented 4 years ago

DPA discussion, let's consider:

Not providing a fixed width for each individual tab (provide a max-width, and have it fit its contents)
Explore truncation; when it should occur, and how
Technical implementation: should it accept <br />?
Should designers be allowed to include icons in tabs?
How many tabs is too many? As much as the viewport can handle?

cc @DanGenuardi for user testing insights

varunj90 commented 4 years ago

ticket update

design is done, Elena and Lynne have added context to the interaction storywriting
Halo team has deprioritized the work w.r.t this component
a dev and an interaction designer need to take this forward

twirlingsky commented 4 years ago

Ivan Correces is picking up the IxD needed on this ticket. I will figure out how to add him.

varunj90 commented 4 years ago

@gkychow has done some visual design updates, and Ivan is picking it from an iXD perspective.

twirlingsky commented 4 years ago

InVision project: https://telus.invisionapp.com/d/main#/projects/prototypes/18077659HA IxD guidelines: https://telus.invisionapp.com/share/2RTC6CAZVKE#/393996282_TDS_Tabs_Usage-Guidelines HS Catalogue Ticket: https://telusdigital.atlassian.net/browse/CATA-1892

twirlingsky commented 4 years ago

screencapture-telus-invisionapp-d-main-2019-11-18-14_38_03

donnavitan commented 4 years ago

Is the main description updated with the latest story writing acceptance criteria? I noticed that the updated designs fixed width which is counter to the best practices and initial recommendation. What's the rationale for providing fixed width? Won't this further limit the flexibility of having more or less menu items? As well make the user travel further along the x-axis more than necessary, especially if you're a zoomed-in user.
From what I understand, the design is meant to expand 100% of the viewport (horizontal line with Athens Grey background) with the tabs horizontally centered? Or does it left-align to the content width?
Is there a recommended limit of how many items should be in the menu while using the "chevron" to navigate? If MyTELUS is/will use this component for the purpose of navigating between accounts then you can test the usability of having to navigate through that? Is that the use case this component should allow?
Is the tabs component meant to expand all the way to the bottom of the page (footer not included)? It will never be used to switch between content in a small area of the page and have other content below it that is not part of the active tab? It does not act like the ExpandCollapse component in a contained way?
What is the difference between this component and an in-page navigation other than being used further down the page? As per Pik TV example. This usage seems counter to best practices and recommendation.

twirlingsky commented 4 years ago

For #2. Gary designed the tabs to fill the content width with an inset spacing of level 4. (So regular 16px margin, level 4 space, then the tabs.

The Pik TV catalogue example isn't in-page navigation - it calls the offer base and then displays certain offers depending on the desired catalogue state. (So essentially breaking the catalogue into 3 different states here).

Tabs don't work like expand/collapse...

Ivan wrote up all the guidelines in the InVision doc. In there is recommended best practice for #of tabs per breakpoint and fixed widths: https://telus.invisionapp.com/share/2RTC6CAZVKE#/screens/393996282_TDS_Tabs_Usage-Guidelines

lynnepeacock commented 4 years ago

Hi @twirlingsky (can't seem to tag Ivan),

Thanks so much for sharing! Exciting to see the progress of the tabs. I have made a couple of comments in invision about some visual elements that I noticed.

I have an additional question that I thought should be posted here, as there may be other people who were involved in the decision.

I noticed that the sub-copy / phone number underneath the name does not pass accessibility contrast checks for AA. Was this a conscious decision?

I would also like to know the rules around the grey background on the tabs and when it should or shouldn't extend to the edges of the page.

And thirdly, what is the difference between the focus blue state, and the dark grey?

Thanks :D

twirlingsky commented 4 years ago

I believe @gkychow set the tabs to be Shuttle grey on a gainsboro grey background (not Raven's grey text). I'll double-check the file when he uploads his latest sketch file to the InVision project. Screen Shot 2019-11-19 at 09 40 52

The gainsboro grey background only extends to where the tabs are - no further extension.

The focus state is indicated in the InVision project. Gary has been working on design patterns for these so that we can move away from the blue.

Christina-Lo commented 4 years ago

Made an update to the ticket with the latest story (in google doc) and design files

telus / tds-community