Tree

[cindyebi]

Documenting @nikiforosk discussions on Slack a couple of months ago:

Following our clinic yesterday, I had the chance to read the NN article on signifiers for accordions more carefully which makes the following recommendations:
Nielsen Norman Group
Accordion Icons: Which Signifiers Work Best?

1. If using accordions in your mobile menus, the caret (downward arrow) appears to be the safest icon choice. In vf-tree we're using the left-arrow, which is OK but not as clear as the caret according to their study. Also we're using the caret as a signifier for collapsing the expanded menu (i.e the reverse action of the left-arrow), which is actually a bit counterintuitive (in one of their examples NN show the Ferrari site which uses the upward arrow to reverse the left-arrow).

2. Do not have icons and text labels link to different actions (i.e. label directly to page, icon opening an accordion). Our study findings further support our previous recommendations that you should not use split buttons for accordions. Our study showed that users tapped fairly equally on both the text label and the icon and did not expect them to do different things.
   This is a problem for us, as we're using this component for the navigation menu of the online tutorial, e.g. in https://www.ebi.ac.uk/training-beta/online/courses/bioinformatics-terrified/what-bioinformatics/

Does the whole menu rely on the split button where clicking on the signifier shows subsections and clicking on the label takes you to the page, e.g. What makes a good bioinformatics database?

If we are to implement this guideline we'd have to replace the whole row with a single link which would take people to the page and show the subsections, which is what happens if you click on the label now (but you wouldn't be able to look at subsections of pages that you're not in)

One interesting issue from our feedback is that we also saw people trying to click on the space between the label and the icon. Apparently, this happened relatively infrequently in NN's study (5–8% of taps) but I suspect that was because their labels were carefully controlled whereas ours are the actual titles of the pages which can take the whole length of the row (so the size of the target varies significantly per row).

To be honest, given that you actually need to click on each arrow to see what is underneath this section, and the next section and the next section, and the sections within the next section etc, is the gain from staying on the same page (assuming e.g. a slow internet connection) worth the complexity introduced by the split button?

Especially given that when you actually click on a link the accordion collapses and if you wanted to go back to another section or subsection you need to click the arrow again...

Indeed accordions in desktop suffer from various major usability issues, but what makes our case more complicated is that the accordion is within a navigation side menu (instead of the actual page)...

[nikiforosk]

Some notes on what actually motivated this component as a navigation mechanism for an online tutorial:

1. We know from the analytics that lots of people google a concept such as "next generation sequencing" and may enter the online tutorial on the page called "What is next generation DNA sequencing?"", which is ranked highly by google.

In this context we wanted people to recognise that this page is part of an online tutorial, have an overview of the other pages in the tutorial and go to one of these pages from this page if they want to. This is the primary purpose of this component.

2. As you move through the tutorial you'd want to know which page on the hierarchy you're currently at. This is shown with a green label on the navigation menu. You also want to know which pages you have visited (which are shown as slightly lighter labels) and which ones you haven't visited yet (which are slightly darker albeit both are on a gray background so quite hard to distinguish).

We'd like to be able to show these three states but we can consider other options for highlighting the displayed page as well as visited vs unvisited links that are more compatible with the VF.

3. Pages are nested up to 3 levels: see e.g. https://www.ebi.ac.uk/training/online/courses/functional-genomics-ii-common-technologies-and-data-analysis-methods/rna-sequencing/performing-a-rna-seq-experiment/laboratory-performance/

There are some additional mouseover effects depending on which level of the hierarchy you point the mouse (change in the background for top levels, underlying for pages at levels 2 & 3) as well as a change in the gray background when a category is expanded.

We decided to only show pages at level 2 & 3 on demand because otherwise the navigator becomes too long and may end up going way beyond the end of the actual text on the page. The split button was motivated by the idea that one may want to preview what's under e.g. "RNA sequencing" before actually visiting this page (otherwise the navigation menu would behave exactly as an accordion).

4. We have just implemented a wrapping of the text on the page to up to 90 chars per line. This is still WIP but you can preview the current state in wwwdev:
   https://wwwdev.ebi.ac.uk/training/online/courses/functional-genomics-ii-common-technologies-and-data-analysis-methods/rna-sequencing/performing-a-rna-seq-experiment/laboratory-performance/

This led to some discussions about the actual positioning of the navigation bar (far left or closer to the main text). I wasn't clear if the embl grid can help us with this.

Also one thing to note is that the headings of the pages are quite long so together with the indentation which is applied to show their level in the hierarchy they also often span over one line on the navigation menu.

[cindyebi]

Summarising @nikiforosk 's comments above, I think we could visualise the component's behavior as follows (ignore the UI at the moment as it hasn't changed from the current one):

[nikiforosk]

I think in the Proposed you mean that the navigation will "expand" instead of "collapse" when clicked.

Worth keeping in mind @nitinja's suggestion to gather some analytics about screen sizes and potentially how much and how this component is used for the re-design of this component.

I'm adding a link to the version in stable for cross-reference: https://stable.visual-framework.dev/components/vf-tree/

[cindyebi]

Yes, I was meant to write "expand" than "collapse".

Regarding the screen sizes and where to put this component on the page, I think it's “safe” to place the nav closer to the page content when there’s no data available, as it is the best practice for people on wide screens but it could also work with people with small screens, so it basically suits both. Example from what Prakash mocked up below:

@khawkins98 @sturobson would love to hear your input on the positioning of this component on the page.

[cindyebi]

Visually, I created a couple of mockups for the new tree component's visuals:
On both versions:

• use a downward-facing caret icon instead of the right-pointed arrow.
• we could remove the grey background and use a white background for better contrast with the texts and a cleaner look.
• increase the text size from 14px to 16px since 14px might be too small.
• add a grey line divider between each menu label to visually separate the menu items when expanded.
• add a grey background as the active or highlighted state for a selected label for better accessibility in showing where the user is on the book. Inspired by Carbon left nav menu attached below.

On v1:

• we could remove the vertical black lines entirely and use visual white space indentation to show hierarchy for a modern look.

On v2:

• preserve the 'branching/hierarchy' lines but visualise it slightly differently.

[cindyebi]

Adding @nikiforosk comment on Slack from Friday last week:

It looks good to me overall. I wouldn't use lines but try just spacing, indentation and underline on mouseover, to begin with. A blue line on the left might also be enough for the active state. The thing to keep in mind is that the labels can be quite long so some of them will unavoidably wrap especially if we increase the font size (which should be above our defined minimum nevertheless). Also, we need to distinguish between unvisited and visited links.

I would use our own style that is consistent with the Visual Framework rather than using the same style as what Carbon does (the blue line on the left isn't our VF library-style for an active state). Also, adding “visited and unvisited links” will add some complexity to the component. Gov.uk accordion component and Carbon left nav bar both don’t use the visited link colour. Only active state and hover effect.

Since this component is a high priority task to finish this week before I go on holiday, I will go ahead with the first version as I think we could already develop the minimum requirements for the component, instead of the “ideal” version of it, considering we just have less than a couple of weeks left (minus the holidays). We could improve this component along the way this year as we see fit.

[cindyebi]

Iterating the proposed v1 above, I created the active state in our interactive Blue colour:

@khawkins98 @sturobson let me know if you got any other feedback :)

[khawkins98]

Try to ignore the look of Carbon's tree, it's the UX of things either being an accordion OR link. That way trying to open a folder won't cause a page refresh/rebuild.

[cindyebi]

Agreed with @khawkins98 suggestions though I think it will require a content restructure from the training team to make it this way... how could we update the current component but still make it implementable to the training website?

[khawkins98]

I think it's the recommendation to not mix the folder UI action+link, but the vf-tree component would still need to support the mixed behaviour due to legacy content like training.

The Training team could then in the future revise their IA to support the better UX method.

[sturobson]

Just in case there is a misunderstanding

The text becoming bold, having a background and being indented is a bit weird?

I'm not sure creating a layout shift of the text is good.

relates to -

[cindyebi]

@sturobson is this about the visuals or the behaviour of the component?

[nikiforosk]

Trying to summarise this discussion so far in order to create an issue:

Best practices to apply to the update of the VF tree (which could be basis for the documentation of this component):

1. Use downward arrow when closed (to open) and upward arrow when open (to close) as recommended by NN: https://www.nngroup.com/articles/accordion-icons/

2. Do not have icons and text labels do different actions (e.g. label linking to page, icon opening an accordion). This is also known as a "split button" and should be avoided according to the same NN article: https://www.nngroup.com/articles/accordion-icons/

Ideally, the top level element should be a grouping folder and not a link as suggested by @khawkins98.

3. Increase text size from 14px to 16px and remove grey background for better readability.

4. Underline links on mouseover (based on the recommendations and design of navigation links in https://www.nngroup.com/articles/guidelines-for-visualizing-links/)

5. When it serves as a navigator (as is the case on the Training site), place it close to the page content as suggested by @cindyebi and shown in this mockup:
   https://user-images.githubusercontent.com/75834903/115848835-35961580-a41c-11eb-8ed9-e4c28c063e7a.png

The latest mockup of the Vf tree is this:
https://user-images.githubusercontent.com/75834903/116059297-97eb5200-a678-11eb-97ef-b82c44649967.png

The latest version of the online tutorial (with wrapped text and updated masthead) is in dev:
https://wwwdev.ebi.ac.uk/training/online/courses/functional-genomics-ii-common-technologies-and-data-analysis-methods/rna-sequencing/performing-a-rna-seq-experiment/laboratory-performance/

Comments:

1. By Stu

The text becoming bold, having a background and being indented is a bit weird?
I'm not sure creating a layout shift of the text is good.

I'm not sure why the label is indented in active state. Also, I'd start without the blue background (just use bold) and only add it if needed.

2. For the EBI Training site the top level element needs to be a link so we'll propose the behaviour in the image below:

https://user-images.githubusercontent.com/928100/116085976-a7ca5c80-a69f-11eb-9467-55b195c203e1.png

3. In the future we could consider showing unvisited links in blue and visited links in purple as in https://stable.visual-framework.dev//components/vf-link/index.html

This could be helpful for the navigator of the training site.

This is an example from NN: https://www.nngroup.com/articles/guidelines-for-visualizing-links/

[nitinja]

Do we want to show the mouse pointer ("hand" icon) on hover instead of a default mouse cursor? or may be its just a mockup oversight

[nikiforosk]

Good spot @nitinja! I suspect that it will actually be the "hand" but let's clarify with @cindyebi in our catch-up today!

[cindyebi]

@nitinja @nikiforosk whatever a hover icon on desktop looks like works for me. There won't be a VF catch-up today unfortunately, I have a last-minute design to do.

[nikiforosk]

@sturobson I turned the comment above into an issue as we just discussed. It didn't pickup Nitin's follow up comment about the cursor.

[khawkins98]

This is now being tracked at #1525

[khawkins98]

On @cindyebi 's mockup at #1498 (comment) it looks like all sections get a downward arrow ( 🔽 ). That feels non-helpful if a section doesn't have children?

How will this function if a tree entry doesn't have children? No arrow?

(aside: under the current implementation — with a right-facing arrow — this distinction of having children or not wasn't required)

[khawkins98]

It looks like in the current EBI Training implementation the arrows are hidden when there are no child sections.

https://www.ebi.ac.uk/training/online/courses/bioinformatics-terrified/get-help-and-support/

[nikiforosk]

Good spot, I'd assume that if there are no children in a section, there is no arrow.

Are we tracking this issue here or have we switched to #1525

[cindyebi]

@khawkins98 shall we close this discussion?