Provide user feedback when entering or leaving another module

[TimJensenUSC]

Problem: When navigating a module, the end user doesn't know when they are entering/leaving another module.

----------

The navigation (next/previous buttons) for the module item view (viewing content within a module) should provide the user feedback when they are about to enter or leave a module.

Canvas provides 'previous' and 'next' buttons for the module items, but provides no visual feedback for users to communicate that they are entering or leaving a module.

Suggested Solution: Adding some subtle visual indicators and text to clearly indicate that the user is about to 'enter/leave' another module [see mockup below]

---

---

Image Caption: The 'Next Module' would appear on the 'next button' text when you are about to move to the next module, and likewise on the 'previous button' text when you are moving to a 'previous module'.

I am a Designer and Developer within a learning support team.

..... @kmurfin , @James , @jared_reynolds , @kona ...what do you think of this idea?

[James]

@TimJensenUSC 

I personally don't see much merit to the idea, probably because leaving one of my modules has no significance and I don't care if students go into another module (or I would put prerequisites on the module). For my students, notifying them that they're leaving a module and entering another one doesn't seem to be a problem. Getting them into the modules (as opposed to just going to the assignment through the To Do list) is a bigger issue for my students.

Another potential concern is managing the language of the user; Next Module may work for English, but it's not what you should say if the user has Spanish set to their language.

My personal thoughts set aside, this sounds like something that I've already looked into. There was a thread about having an indicator between the previous and next indicators that would let the student know their progression within the module. I documented the research I did there: Module Progress Bar (amended)

After reviewing that, what you're wanting to do is a lot simpler. Canvas already puts "Next Module:" in as a tooltip. Hover over the next button and you'll see something like this:

This means that you don't need to do any API fetch to see if it's at the end of the module, you just need to check proper element. The good news about this is that you could take the text from the tooltip and make it the text of the button so that proper language is maintained.

Here is some code that might get you started down a workable path.

(function(){
  const nextButton = document.querySelector('#sequence_footer span.module-sequence-footer-button--next');
  if (nextButton) {
    const tooltip = nextButton.dataset.htmlTooltipTitle;
    const match = /^<strong[^>]+>([^:]+):<\/strong>/.exec(tooltip);
    if (match) {
      const anchor = nextButton.querySelector('a');
      if (anchor && anchor.childNodes[0].nodeName === '#text') {
        anchor.childNodes[0].textContent = ` ${match[1]}`;
      }
    }
  }
})();

Here's what it looks like when the next page is in a different module.

I've only tested this with Chrome on a PC. I've tested it on a page that has a Next button that points to a new module and one that doesn't, as well as a module that doesn't have a next button at all.

I also tested it in Spanish to confirm it respected the language.

The code for checking for Previous is left as an exercise for the reader. It is a little more challenging than simply changing --next to --previous. That's because the icon comes first and the text node that you need to replace after that. Relying on the position isn't browser safe, so you would want to scan for the first childNode with nodeName==='#text' and use it. But if you do that, then you could write a function that would take the querySelector and do the rest so that you don't have to repeat yourself.

[TimJensenUSC]

Thanks very much for your feedback @James , and for writing a code sample too.

Also thanks for the point on language - I hadn't considered this.

I can understand how it might not be necessarily be that needed in particular contexts.

Saying that, the fact that by definition this is a 'module view', because it is a collection of otherwise individual items grouped into a 'module', requires that sufficient navigation aids be provided to:

• Be able to navigate between module items (prev/next buttons)
• Know where you are - module title
• Know how many items in a module (1 of 10)
• Know when you are moving to a new collection of items, or new module (prev module, next module)

The module view is missing the last three navigation aids.

And a bonus:

• In page module navigation - show the Module items in a sidebar menu

[James]

I haven't seen that list of sufficient navigation aids before. Is that a W3C recommendation or a personal list?

In some of my classes, my modules don't have a sequence to them (rendering previous/next useless). Because assignments take multiple days, module items are more of an unordered list of things that need accomplished during the week than an ordered list to be followed in order. I don't want you waiting until Friday to start the project (students do that anyway because that's when the To Do list says it's due). However, Canvas doesn't have the option to remove the previous/next navigation buttons. In other places, I use sub-headers to create logical grouping (reading, quizzes, discussion, projects) and there may be a sequential progression within the subgroup, but not between subgroups (which is what previous/next would do).

Why would I do this? One reason is to be able to use the progression tracking that only tracks things that are module items. It also adds the ability to make students to check off readings and other content that needs viewed. When I surveyed them about changes to make things easier to find in the course, reducing the module clutter was the first thing and them liking the ability to check off things was second. Unfortunately, those are contradictory.

It's another case in Canvas where you have to accept certain nuisances to get benefits in other areas.

Since your suggestions don't align with the way I use modules, I guess it's a good thing that Canvas allows each institution to do custom theming and modify the way things look.

[TimJensenUSC]

hey @James , I made that list for the context of the Module section in Canvas— my conclusion would be that universal UI design patterns that are used in navigating a website/application are always useful

I would argue that an end user would rarely complain about too many navigation aids— its normally an problem of not enough, or they are poorly designed. Navigation aids should ensure a user can easily navigate between content and have context. In the Module view of Canvas this isn't the case, as mentioned in my list of missing navigation aids.

[ProductPanda]

Comments from Instructure

As part of the new Ideas & Themes process, all ideas in Idea Conversations were reviewed by the Product Team. Any Idea that was associated with an identified theme was moved to the new Idea & Themes space. Any Idea that was not part of the move is being marked as Archived. This will preserve the history of the conversations while also letting Community members know that Instructure will not explore the request at this time.