Fix left sidebar sub-menu to allow navigation to next activity

[zee-moz]

Hi @gvn there's something a bit quirky about the left sidebar sub-menu for navigating from lesson to lesson. In lessons with lots of sub-sections, such as this one. Inside the lesson, when the sub menu is displayed, users have no way of clicking on the next lesson-- it's not possible to scroll down past the sub-menu to access it.

You have to click out of the lesson by clicking on overview, and then you can see the full list of lessons. What are ways that we can make lesson-to-lesson navigation easier?

cc @anmechung

[gvn]

@sabrinang Any ideas on improving this UX?

[sabrinang]

@zee-moz To improve this UX we need to address how the content is organized. I didn’t expect the template itself to house all the curriculum since that what the page on the main site is for: https://foundation.mozilla.org/opportunity/web-literacy/core-curriculum/. It serves as an entry point and provides context to each curriculum activity and these github templates serves to house each individually.

From a user's perspective, I think the foundation core curriculum page and https://mozilla.github.io/web-lit-core/ should be the same content or should have the same goal to provide context before jumping into curriculum. Both are quite lengthy to read already so let's consider how it can be simplified as it is a bit confusing why are they separate?

I assumed the flow for users was to find activities through the main foundation site and we can link back to it (not discovering others through an individual curriculum activity itself).

[zee-moz]

@sabrinang I see your point. However, it's a bit clumsy to have people jump between the foundation site and the GH pages site just to move on to the next activity in a series, or to find another activity they might like to facilitate. GH pages is the place where they're using the material. And we have multiple activities, so I guess if we wanted to make each a separate GH site we'd have 12 or 14 repos, one for each activity? For contributors to the entire core curriculum project, that would be confusing.

This is a larger problem I think we're going to have with curriculum generally and the foundation site. The curriculum is best on GitHub because it allows for contribution, forking, remixing. The home page on the foundation site provides great intro context, but once you've read it you probably don't need to revisit it that often. The GH pages site is probably your go-to as a facilitator. So navigation btwn elements within the GH pages site is helpful. I know this isn't ideal-- but as long as the CMS doesn't allow for contribution, it seems like we're stuck with the separation.

@xmatthewx @anmechung thoughts?

[anmechung]

+1 to zee-moz

[xmatthewx]

It seems like we have two issues:

1. long sidebar menus that won't scroll
2. strategic question about how to organize content best for users.

For (1) we should file a separate ticket to fix that. In the mean time, you can add links at the bottom of a section to the next section. Or a little table of contents so visitors can jump anywhere they want.

(forgive the super long answer)

For (2) I still think the site should be used for all info that isn't an activity. Users jump into an activity and over to github, and then jump back out when they're ready for the next thing. The gh pages should have a prominent button to weblit core (also via the main logo), so that serves as your table of contents. Currently, there is no pathway back the site, so gh pages has to repeat context and navigation that the site pages already provide.

Why? As currently set up, any teacher who gets a link to the curriculum from another teacher is unlikely to ever see the foundation site, won't learn about the global sprint or mozfest, won't see the news about fellows or our campaigns. We're dropping them in a bucket, blind to other work in our orbit. We're giving people a textbook when we could invite them onto campus.

Also, the way I suggest, instructors can link directly to a chapter or activity on the site without overwhelming learners, each module stands more strongly on its own. I don't think this requires a lot of work, moving some of he overview info from GH to the site. Adding a button from top and bottom of an chapter/activity to go to Web Lit Core home. Bottom of each chapter/activity could also include a button to next, making the linear experience smooth. We should optimize first for learners and teachers. The curriculum developers who might remix this will find their way to get what they need.

I won't force this, but I think we're missing an opportunity for best user experience and fullest connection with all that MoFo offers.

[anmechung]

@xmatthewx That was truly poetic. Really well said. It's a great frame that should be shared with others. I agree with all your suggestions, and all the tweaks seem to be reasonable. If @zee-moz agrees too, I will start working on the changes I can make, ad file issues for those that require @sabrinang or @gvn expertise.

[xmatthewx]

Thanks @anmechung. As a positive example, when a campaign like Aadhaar or Equifax hits the site, they come in batches of 10 thousand people. A non-trivial number of people then poke around at the site. And soon, we can help them stumble onto global sprint and web-lit things. Less silo, yields more wins.

[anmechung]

@xmatthewx @sabrinang @alanmoo @gvn. @zee-moz and I did some thinking together, and here is what we think makes the most sense and will give users of the curriculum on GH and website the most flexibility.

We'd like to keep the entire index of the activities in the GH pages sidebar. We want people to be able to access the full range of activities from both the foundation pages and the GH pages site. If the website should change in the future, people can still access the curriculum in GH assuming its still relevant then.

Given this a few outstanding tasks (I can add as issues if that's the proper way to do this)

• add button on each GH page that sends you back to the Foundation site.
  • add button for the next activity at the bottom of each activity.
  • In addition, fix the scrolling functionally on sidebar.

Finally, I know you all are thinking about this already and we've discussed a bit, but do you know yet how will people be driven from learning.mozilla.org to new Foundation site and on to the GH pages site and vice versa? Most if not all of our current traffic is to that site, and people will want to continue accessing content from the site too (i.e. web lit map, activities)

[anmechung]

@gvn - as part of this issue, can you fix the left sidebar sub-menu to allow navigation to next activity? I'll file another issue for the the buttons. Thx!

[sabrinang]

@anmechung I've iterated on your suggestions based on recent feedback/decisions you mentioned in slack:

Instead of listing all the individual curriculum, we can link back to See Core Curriculum (or See Read Curriculum if you want it more specific to the activity) so people can find the rest and the wordmark above can link back to Web Literacy.

We can connect the curriculum in sequence by providing previous/next links when people are finished with the current curriculum at the bottom. Links provide more flexibility for long titles than buttons and even though it is at the bottom it appears after people have finished the current activity so they can choose what to do next (feels a bit obtrusive to be directed elsewhere before they start the main activity they intended to visit).

[anmechung]

@sabrinang Looks great! Let's go with your mock-up. @gvn - I "think" I can make edits myself to the sidebar and create a link back to website, but will reach out if I need help. However, we will need your help in creating the "buttons" at the bottom of each activity.

cc: @zee-moz

[anmechung]

@gvn - revising sidebar to create a link back to website is more complicated than my limited coding knowledge can handle. Can you help? If you can create whatever ever code is necessary for the sidebar and button navigations, I'll make the edits in each activity as needed. thx!

[anmechung]

@gvn - navigation buttons look great! Can you help with revising sidebar to create link back to website as per @sabrinang mock-up?

[anmechung]

@alanmoo @gvn - the buttons at the bottom of each activity page look great, but they are linked to the wrong activities. They should be in this order (or what's in the side bar at the moment): Web and You
Map The Web Making Friends With Your Browser Search Party Web Detective Design On The Web Tagging 101 Building Basic Pages Web Apps And Build With Thimble Web Builders Safety First All The Stickerz Crowdsourcing On The Web

[anmechung]

@xmatthewx where on the website can people find this core curriculum? Is there an opportunity section? can a link be made to the core curriculum from the networks projects page? https://foundation.mozilla.org/projects/ and get involved page where trainings are listed? https://foundation.mozilla.org/get-involved/

[alanmoo]

Please note that as soon as the patch I submitted last night lands, this issue will be automatically closed. I'd suggest opening separate issues for other bugs with tangible "how this issue gets closed" actions so they can easily be tracked.

[xmatthewx]

You can post the curriculum to pulse and it will be accessible via the projects page.

In the plans...

• We will also add more info on IH health and 5 issues as a path to curriculum.
• We will also add a top level training/leadership development page.

This content has been mapped, but will obviously take some time to develop.

[anmechung]

@alanmoo @xmatthewx Thx!