Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better distinguish References and Guides #3486

Closed
dvranga opened this issue Apr 10, 2021 · 4 comments
Closed

Better distinguish References and Guides #3486

dvranga opened this issue Apr 10, 2021 · 4 comments
Labels
🧑‍🤝‍🧑 community contributions by our wonderful community 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. idle p3 We don't have visibility when this will be addressed. ux make the user experience awesome

Comments

@dvranga
Copy link

dvranga commented Apr 10, 2021

I was confused about where I am landing after clicking the javascript tutorials because there is no proper routing and clear description the tutorials please make to navigate the links and context is very bad to understand and I am not getting a clear idea about the context of javascript tutorials my idea is any new user if landed on this page it should be easy to understand the context of tutorials but getting the confusion. every time it is showing the link about web development or front end development it is diverting the user's interest i,e if I clink on javascript tutorials why it is showing web development docs or some other docs instead of javascript.

@peterbe
Copy link
Contributor

peterbe commented Apr 12, 2021

@schalkneethling @chrisdavidmills It's a never-ending and near-impossible problem for MDN to ever solve perfectly. The content is just too big and potentially broad. But I think the point is that you're easily confused as you surf between "tutorial-like pages" and "reference pages". Us who know the content so well can spot it almost immediately, but for a novice it's much harder to see where you are.

One not-good solution is that all tutorial-like pages have pink background and all reference-like pages have brown background. Then it might be more obvious that you've landing in a very different "area" of the site.
Another solution would to (ab)use the top navbar to highlight which one you're on. For example, if you're on a tutorial page like this the "Reference & Guides" navbar is "highlighted" in some strong way. And when you click into a reference page like this the "Technologies" navbar is highlighted.

Another solution would be some sort of dynamic widget that suddenly appears if you change from a reference page to a learning/guide page and vice versa. We can record what page you're on with a sessionStorage and then a thing can appear near the top that says "Click to go back to Getting started with CSS".

Solving this would be a huge improvement for a large number of MDN users who hop between reference lookups to reading long-form articles.

@chrisdavidmills
Copy link
Contributor

This is a really tough problem to solve. I think a combination of approaches would work, including using your wayfinder link type idea (the "click to go back to..."), and some kind of subtle styling to give you an idea of what part of MDN you're in (even just some kind of a nice badge at the top of the page saying "Reference", or "Learn Web Development"...)

@peterbe
Copy link
Contributor

peterbe commented Apr 13, 2021

@schalkneethling What do you think about highlighting the "References & Guides" if you're on a page whose slug prefix is one of those within that "tab"?

@github-actions github-actions bot added the 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. label Nov 26, 2021
@schalkneethling schalkneethling added the 🧑‍🤝‍🧑 community contributions by our wonderful community label Apr 5, 2022
Repository owner moved this from Backlog to Done in Yari Platform Engineering May 27, 2022
@caugner caugner added ux make the user experience awesome p3 We don't have visibility when this will be addressed. labels Nov 15, 2022
@caugner caugner changed the title Routing Make simple Better distinguish References and Guides Nov 15, 2022
@github-actions github-actions bot added the idle label Dec 21, 2022
@caugner
Copy link
Contributor

caugner commented Jun 24, 2024

This has been implemented in #9940, and there is #11061 to further improve the design, so I'm closing this as done.

@caugner caugner closed this as completed Jun 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧑‍🤝‍🧑 community contributions by our wonderful community 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. idle p3 We don't have visibility when this will be addressed. ux make the user experience awesome
Projects
Development

No branches or pull requests

5 participants