Website updates: Tags

[CathPag]

@cjyabraham, as discussed over Slack, ideally, we'd want three different tag styles:

• Fundamentals or advanced
• Tech/concept/property
• The rest

Each tag type tells us a little bit about that word. We could use the style we have now + a lighter version of the same pink + a ghost button style. Generally, it would go from bold to ghost but I feel that the latter category tag should be the full-colored one. Maybe you can ask your UX expert what the best approach is.

Also, it'd be great to have all tags at the top so people could filter by category (e.g., I want to see all architecture-related terms"). Here again, a UX perspective might be valuable. Should there be three lines?

• Fundamentals, advanced tags on top
• Tech/concept/property tags in the middle
• Other tags at the bottom?

I can ask for UX advice if no one is available on your end.

[cjyabraham]

hi @CathPag, We've put our heads together over here and come up with the following as a possible design for listing these various tags. Let us know your thoughts:

[CathPag]

Not a big fan, sorry 🙈 Takes up too much space and ends up being distracting. One narrow, subtle line with one "ghost-style" tag for level in one pink tone, another "ghost-style" tag for category in another pink tone, and then the full colored tags the rest. There will probably only be one full-colored tag per term, so each term would have only three tags.

Also, on top, we'll want to have the filters at all times. I suggest something like this but pretty (this is a Google Slides based mockup)

[cjyabraham]

Hi @CathPag, we considered what you are suggesting here but feel it can be misunderstood as "Architecture" being selected while the other two tags are not. Also, the "Fundamental" and "Technology" tags seem ambiguous without any context. We thought the "Level:" and "Category:" helped make what they were referring to more clear. We can look for an alternate solution if you think our solution takes up too much space.

Regarding the dropdowns, I will split that into a new issue here so we can tackle that separately. From your mockup where you have the dropdowns at the top of the article, I'm not sure quite how you want them to work. Can you explain? The Kubernetes search UI made more sense to me.

[CathPag]

True. If we color code the dropdown like the tags, it would make that clear. Thoughts?

[cjyabraham]

@CathPag are you asking whether styling the dropdowns to be the same style as the respective tags would help provide context to the tags themselves? I think that would help that particular problem, however, we're still confused why there are dropdowns on the page itself and what they do. Are those to filter the list of terms in the sidebar? Would it help to have a call to discuss?

[CathPag]

We want people to be able to filter terms. People may want to see all fundamental terms if they are just getting started and read those first. E.g,. abstraction, cluster, container, nodes. You need to understand those concepts before reading the rest...we may need an intermediate category for this to be really useful.

Same thing for the tags. Maybe I want to learn about architecture and read all related terms to that to get a better sense of it.

For technology, concept, property there is no strong case. It would rather be for consistency. But for level and tags, it does make a lot of sense.

[cjyabraham]

Makes sense. I've added these use-cases to the issue along with some other ideas.

[cjyabraham]

Here's another design we considered for fitting in the 3 taxonomies. We do prefer the first one I presented, since it gives the tags appropriate context, however, this one has the advantage that it would take up less space if that's a priority:

[CathPag]

I really like the Kubernetes example and the tag filter behavior discussed in #1188. How would that be compatible with this?

[cjyabraham]

My thought was that under the search input we have "Advanced Search..." which takes people to the Kubernetes-like power-user mode. We can also have each tag link to that page with the appropriate tag selected in the filter.

[CathPag]

We just had our maintainer meeting and thought it might be best if we simplify it. Let's mimic what Kubernetes does (all tags selectable at the top, not hidden under advanced). We'll add fundamental and property to the tags from the third category and remove advanced, concept, and technology. What do you think?

[cjyabraham]

Ok. Are you referring to this Kubernetes page?

[CathPag]

Correct

[cjyabraham]

Ok. Can you share a design of how you want this to look and work? I'm having trouble envisioning how the Kubernetes UI will integrate with our current design without being overwhelming.

[CathPag]

Ok, let me do that tomorrow.

[CathPag]

How about something like this?

You can then select the tags, and it will show a list with terms below.

When you click on a term, you still see the tags on top, and you filter by tags again.

What do you think?

[CathPag]

...I didn't do that in the mockup, but tags should probably be in alphabetical order.

[cjyabraham]

So when you click on a tag filter, does it generate a new list of terms below it or does it filter the list of terms on the left pane? And do you see these filters showing up so prominently on every page of the site? I saw this feature as more just for power users so not something you'd want to be front and center...

[CathPag]

The selection would mimic the k8s docs behavior:

• "ghost" tags on top
• selected tabs full color
• List of terms meeting that criteria below (left nav bar doesn't change)

You click on the term you want to read, which automatically deselects all tags. The user can now start a new filter. To keep the selected list, users would have to right-click and open a new tab.

How does that sound?

[cjyabraham]

I see. I did not see this use-case to be important enough to warrant these filters present on every page of the site. Also, as you add more filters in the future, it will continue to take up more real estate. I saw these filters more as something you'd want on an "Advanced Search" page or something.

If your team is united, though, on the interface you've described, then I can implement it that way.

[cjyabraham]

I had a few more thoughts on my alternative proposal for consideration. The proposed filter-by-tag screen would be similar to that on the Kubernetes site and would allow for permalinking with tags in the querystring, like https://kubernetes.io/docs/reference/glossary/?fundamental=true.

People would access that page either by clicking on a tag (which would then load the page with that tag set to filter) or by clicking "Advanced search..." below the search bar in the left column. This might alternatively be labeled "Filter by tag..."

This would give people multiple obvious ways to access the tool without needing it to take up space on every page.

[CathPag]

Hmm...I wouldn't hide it in advanced search. It's always visible in the Kubernetes glossary, and that's great. People don't have to figure out that they can filter by tags, they see it right on the screen.

I really see it as two ways to navigate the page:

1. per term (left nav bar)
2. per category ( top tags)

[iamNoah1]

@CathPag @cjyabraham I have no strong opinion here. Having it as close to the Kubernetes page as possible makes most sense for me.

[jihoon-seo]

• K8s glossary page:
  • the page lists the terms with a short description of each term.
  • there is no dedicated pages for each term.
  • selecting and deselecting tags updates the list of terms in responsive way.
• CNCF Glossary website:
  • each page is for showing term definition or some information (e.g. home page, how to contribute, contributor ladder, style guide).

Considering above, @CathPag could you draw another design proposal figure for the case:
from this,

when a user clicks one of the tags above?

[cjyabraham]

@CathPag while we're waiting on this, would you like me to proceed with the second part of this issue, that is, listing all tags equally below the title of the term, instead of having "Technology", "Concept", and "Property" above it?

[CathPag]

So sorry, @cjyabraham! We had our meeting last week (or the previous one), but I totally blanked. We would like to proceed with the mockup above with one slight change. The deselected tags are gray and become pink if selected by staying above. So, no tags below the term. Instead, the two active tags are pink above, while the rest is gray.

When people select the tags initially, a list of all available terms with those tags will be listed below. Just like in the Kubernetes glossary. Do you know what I mean?

[cjyabraham]

@CathPag can you respond to @jihoon-seo comment above? It'd be good to see the mockup he's requesting as I'm still having trouble envisioning the workflow. As he has outlined, there are significant differences to the k8s glossary and our site so simply copying over the same UX for this search-by-tag workflow would likely not work.

Could you also differentiate between a tag that is selected due to the article below it being tagged with it, a tag that is selected for the purposes of listing all terms tagged with it, and a tag that is unselected?

[CathPag]

Ooff...I don't have any of the mockups anymore. That means I have to recreate them. Really busy this week. I'll need more time.

[andreuxxxx]

Alternatively, many docs and references use the right side of the screen to make discoverability easier. We can have a proper filtering tool there or in any other appropriate location. I can definitely help you to find the most elegant and efficient solution for that, but I would need some more time. Let me know if that works for you all.

[andreuxxxx]

Do you have an example showing chips used for a double-purpose like this: both to indicate a piece of content is tagged with a particular tag and to operate a filterable list?

As for an example, this is a different UI pattern and these categories don't cross, but it's using chips as descriptive tags and on the second click as tabs that divide content associated with them.

[cjyabraham]

@andreuxxxx I think it works in your example since the filter controls are in a different location from the content tags. I think some treatment like that could work better for the Glossary rather than having filter controls and tags in the same place. Perhaps using the sidebar could be a good option as you suggest. I'd be interested to see you develop this further.

[jihoon-seo]

@jihoon-seo do these screenshots help you evaluate the proposal against #1006 (comment) which maintains the current tagging UI on term pages and offers a filtering-by-tag interface on the regular terms-of-tag page?

IMO:

• @cjyabraham's suggestion:
  • This option unavoidably introduces one more click.
  • nevertheless, this option seems feasible and implementable, and makes sense in terms of UI/UX for me.
• @CathPag's suggestion:
  • I couldn't see other sites that have chips used for a double-purpose.
    In above @andreuxxxx introduced Google Finance,
    but it seems that these chips are not used for a double-purpose (e.g., I cannot multi-select those chips),
    but to provide links to each page ('Indexes', 'Most active', 'Gainers', 'Losers', ...).
    Please let me know if someone finds one, then I might be able to get some hints by seeing the working example.
  • Suppose that a user is seeing the 'Abstraction' page:
    
    I guess that starting to toggle any chip will display the filtered term list like this:
    
    If we proceed with this option, my opinions on this are:
    • I think that it might be not appropriate in terms of UI/UX if the filtered term list appearing 1) pushes the term title ('Abstraction') and description downwards, or 2) eliminates the term title and description's visibility.
      Displaying the filtered term list should be undo-able.
    • Instead, we might use in-page hover popup, which is similar to macOS's Spotlight Search popup:
      
      In this figure, the black box is the in-page hover popup which has appeared because the user started to toggle chips,
      and if user clicks "X" on the right-top corner then the popup disappears and user goes back to the term 'Abstraction' page with only the tags of the term 'Abtraction' (which is 'Architecture' and 'Fundamental' in this example) selected.

[andreuxxxx]

Hello! I can do a full UX assessment with Card sorting and checking the existing IA, that's the only way we can create the best tool. I am happy to help with it. I will have some time until next week, though. If you are OK waiting a little bit, I am happy to invest the time to really do something that works. This would include some usability testing and we can validate our ideas before executing. Let me know if this is an option!

[jihoon-seo]

@andreuxxxx For me, it sounds great. Thanks for your work!

[andreuxxxx]

Hello everyone, unfortunately, I won't have time to look deeper into this in the immediate term. That being said, Catherine's suggestion works well from a UX perspective. While there might be more elegant solutions, it's intuitive and will work very well for the user. I recommend implementing her suggestions.
I would love to put more time an effort into this, as it's really exciting for me to collaborate with CNCF but I know I will only have availability after November. I think it's is best to get something done now.

[GarethAcidWorks]

Hi all, as mentioned I bumped into Catherine in Detroit we discussed the above. So lending a hand to hopefully push this through. I have re-created the filters / tags in Figma, linked and pasted below.

The additions / recommendations I have given are:
• Small title to add some context to the filters / tags on the glossary home page
• Back button included when required
• Colours and sizing to be optimised

Let me know if i can do anything more to help here, thanks

https://www.figma.com/file/lz5s64a0DAO6s13fzd2ViQ/CNCF_Glossary?node-id=202%3A439

[CathPag]

Awesome, thank you, @GarethAcidWorks! A proper mockup for the one below is missing. I guess @cjyabraham can defer it from the two above: All filters are shown + the selected ones active which are gray on your second mockup, right?

[GarethAcidWorks]

Hi Cath, I've initially tested the selected filter in gray to differentiate from page links. And to also not draw the users eye to much. We can refine it more... but that was my logic.

[CathPag]

Ok, great! Just wanted to be sure Chris knows what to do for this middle section. Thanks for your help! Can't wait to see this implemented!

[cjyabraham]

Thanks @GarethAcidWorks. Could you show a mockup of the tags assigned for an individual article? Currently we have them here:

[GarethAcidWorks]

So I've added in the Property tag and made some optimisations to the to the additional tagging up top.

The hierarchy of the page appears to flow and make sense. Let me know if you think this works

[cjyabraham]

From your screenshot, it's not clear to me that the Abstraction term is tagged with Architecture and Fundamental. They just look like separate nav elements above the article for browsing.

[GarethAcidWorks]

So to break it down, if we're going to introduce this system that needs to be fixed in it's position up top. Meaning:

a) Everything else needs to be moved down
or b) We blend the grey tag and the pink nav tag on the same line (please excuse my bad terms)

However, by putting them on the same line, and separating them shows they serve 2 purposes more clearly i feel. If it's impossible for one term to have a max number of tags... (for example 3) then this suggests we wont run into the issue of hz space issues. Although mobile may require some stacking.

[CathPag]

Hi there, so we don't need property, concept, and technology anymore. We'll only use the new "tags." In fact, property will be a tag now.

[GarethAcidWorks]

Clear, so these below seem to be the logical next step, here's my thoughts on each:

1. Pink option is familiar but they look like buttons which can be interacted with, if that is not the case... we should avoid that confusion

2. Blue option is a reference to the 'Glossary colour' and suggests that these selected tabs are different to pink buttons, therefore the user should not be confused if they try to click.

3. Grey option - This one is my personal preference as i feel they clearly show something has been selected but they are not clickable, more so they help keep the user's attention on the content below

[CathPag]

Gray works for me

[cjyabraham]

These screenshots seem to have reverted to where we were before, when I left this comment:
"From your screenshot, it's not clear to me that the Abstraction term is tagged with Architecture and Fundamental. They just look like separate nav elements above the article for browsing."

But now you say they are "not clickable", so I guess they don't work for browsing either?

I'm confused. @CathPag if your goal here is to get an interface where people can filter by tags, similar to the Kubernetes page, then let's just create a page where they can do that. Integrating the filter interface with the actual tags assigned to a term and having them present on every page of the site doesn't seem to work.

[CathPag]

Actually, it would be good if they were clickable (or selectable) so that users could see all, let's say, "architecture" related terms.

This has been going on for so long it's really difficult to keep track of what we agreed on. Can we please make a push and do something in the next few days? We can always adjust later on if something needs to be tweaked. Our current approach seems not to work, let's try to be more agile, please. We've been discussing this for months now...

Summary:

1. Get rid of "property," "concept," "technology"
2. Home view with selectable (clickable/selectable) "tags"

Behavior: as people select a tab, terms start appearing below (same behavior as Kubernetes Glossary)

3. View of all terms with those tags (with the right looking tags, of course)

Note: the term itself should also be clickable (didn't make it a hyperlink in the mockup)

4. View of selected term with "tags" on top

From here, the user can go back and view all terms with those two tags OR click on one tag only and view a selection of terms with that tag only.

What do you think? Should we just do that and see how it works?

[iamNoah1]

big plus one for just shipping something out and iterate from there, if necessary

[cjyabraham]

I have removed the "property," "concept," "technology" category from the single term pages. I have not touched the data in the front matter for each term in case you want to migrate them into a normal tag or just delete.

[cjyabraham]

This PR has achieved many of the ideas listed in this issue. I'll close it for now and if there are further ideas for a subsequent iteration on this then please open a new clean issue.