Standardize expandable items icons

[dimadavid]

Our collapsable nav with arrow on the right to expand is pointing right when collapsed.
To my knowledge the widely adopted practice is to follow the following logic:

Arrow on right - shows action
[expandable item:collapsed] ▼
[expandable item:expanded] ▲

Arrow on left - shows status
▶︎ [expandable item:collapsed]
▼ [expandable item:expanded]

In most cases, the arrow on right pointing right indicates there will be a next step, navigation to new section and etc, which is not the case with expandable items(eg: side nav)

[elizabetdev]

For me, it makes sense to replace the arrowRight icon with arrowDown. It seems more intuitive indicating that it is going to collapse down.

I tried to find if there was any reason to use the arrowRight. Basically searched the PRs comments when this component was introduced #3019. But couldn't find any reason.

So if we're all in agreement let's open an issue to track the update. 😄

[cchaos]

There actually is a lot of history behind this including referencing this research article: https://www.nngroup.com/articles/accordion-icons/

Originally, the collapsible navigation drawer adhered to the article's final guidance:

• Do not have icons and text labels link to different actions.
• Decide if your menu items will either open a submenu accordion or go directly to a category-overview page.

Unfortunately, our own research contradicted the findings here that people were mostly expecting the text part of the link to actually navigate and most people were immediately un-collapsing the accordion. Therefore we shifted the collapse functionality to the icon-only and the text navigates.

My concern with switching to a down facing arrow is that this is the pattern we use for indicating popovers. Also, the article very specifically also says:

If you choose to have your menu items link directly to a landing page, do not use a right-aligned icon.

I think originally having the arrow on the right conflicted with the solution logo that is also on the right. If we can find a good visual balance and better indicator of what part of the accordion header does what, I'd opt for the opposite and actually use our default accordion style of right facing arrow on the left side.

[dimadavid]

thanks for the context, Caroline.
yes, either on left as right and down or on right as up and down.

[cchaos]

Yeah I'm saying on the right as up and down option can conflict with our popovers and may, in practice, be the wrong solution based on the article's findings.

[dimadavid]

I am not aware of how it'd conflict with popovers. I'll take a look.

The article is not in favor of the right arrow but for caret(down, up)tho. the summary states the following:

Summary: The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page.

[elizabetdev]

In the summary at the end of the page:

Use a caret icon to designate an accordion, whether on desktop or mobile — our study found that of the standard set of icons used in this context, only the caret performed better than either no icon or a nonsense icon at indicating that than it was an accordion.

IMO the icons don't make too much difference. I personally prefer the caret (arrow down). Found it more intuitive, but this is just how my brain works. We were using the arrow right for months and it never caught my attention to make me think this is wrong. But if I had to vote I would pick the caret.

So we need to make a decision here. @cchaos because you worked on the collapsible nav group and put so much effort here, do you want to take the final decision? Should we maintain the arrow right or change it to the arrow down?

[cchaos]

I think the real course of action is to gather all the similar patterns like EuiAccordion and EuiSideNav and evaluate how to handle all these similarly instead of micro-adjustments to just this one component (EuiCollapsibleNavGroup).

[dimadavid]

100% @cchaos, this should be addressed across eui and then audit the app for custom implementations to align with eui.
I went through the eui components and found these that I suggest updating(please add if I missed anything).

• side nav: Nested item options: Children only, no link
• accordion
• Collapsible nav

If you think there should be another approach or you'd suggest that we should not update these, up to you. I don't have a good grasp of all of eui as you do.

[cchaos]

I noticed today that Slack has an interesting pattern we could consider, specifically for our EuiCollapsibleNavGroup where they swap the logo/icon for the arrow on hover:

The difference there though, is that the whole item is just the collapse/uncollapse action. So it may make a collapsed group less discoverable to uncollapse. Then again, usually once the user has gone to that solution, they no longer need the main nav to navigate within (uses the side nav instead). With the exception of the Analytics group.

But it's something we could test out.