Move the Navigation Save button to the space between what is shown and what is disabled

(2)

I know this is fiddly, but it's a recurring pain point for people at institutions where admins have added a bajillion additional buttons to the course-level nav. 

Please move the location of the Save button for the course Navigation tab in the Course Settings to the space between the list of things that are shown and the list of things that are disabled. 

When there are enough items in the Navigation list, the Save button disappears off the page. Because people don't use this interface all the time, it's easy to forget that there's a Save button. It's one of those weep-worthy things when you've just clicked to disable 20 things from the list to make it actually usable, and then you forget to scroll to the bottom and click Save. Putting the button in that middle space will make it more visible and memorable, even though it makes the placement inconsistent. 

Here's a screenshot from an institution that has almost nothing additional added, and even then, the button is getting close to disappearing. 

screen shot of Navigation settings menu with callout showing the proposed location of the Save button

Here's an illustration of what it's like when you have more buttons to contend with: 

huge navigation list

15 Comments
arovner
Community Contributor

This may be a bit fiddly but it is SO TRUE that faculty miss it all the time!  I always make a big deal about dramatically showing them to scroll ALL THE WAY DOWN to find the Save button.  

Thanks  @tom_gibbons ‌ for proposing!

Amy

caitlin_carle
Community Member

Fiddly as it may be, this would be an incredibly helpful change, especially if you're navigating with a trackpad as you drag things around. The save button would add even more of a visual/cursory-look delineation between what's enabled and disabled.

ericwerth
Community Explorer

I've ran into this as well  @tom_gibbons , and would certainly like to see some way to prevent someone from leaving a page without saving whether it be moving the save button to make it more visible as you suggested or prompting someone that they have not saved their change if they don't see the button and try to leave the page.

James
Community Champion

I think putting the control in the middle of the page and making people drag/drop across it is bad design. There have been other requests, like automatically saving the navigation, that have been proposed before, but I don't like those either. Eric's idea to ask for confirmation is better than moving the button, but I'm not a big fan of needless confirmations.

In the meantime, if you have a wide enough screen available to you, two quick changes to the CSS styling can float these side by side. It's not perfect, but it may fit the bill.

#nav_enabled_list { float: left; }
#nav_disabled_list { float: right; }

Here's some JavaScript that you could open the browser's console and paste that would do it as needed if you don't want to make it permanent.

document.getElementById('nav_enabled_list').style.float='left';
document.getElementById('nav_disabled_list').style.float='right';

Here's the wasted space on the right the way it is right now.

258707_pastedImage_1.png

And after changing the floats it becomes this.

258708_pastedImage_2.png

As you can see, that also has the benefit of reducing the amount of dragging that is necessary.

Another quick solution is to press Ctrl-End to jump to the bottom of the page where the Save button is.

janet_hinson
Community Novice

100% agree this small change would have big impact!

925024864
Community Champion

Thanks Tom!  This is an awesome 'simple' little request that would make a big difference, so you've got my vote!

tom_gibbons
Community Contributor

Yeah, I don't think it's great design to drag across the confirmation button, either. But I also think the current implementation is kind of terrible for end users. 

Your solution is great for people who have access to the code. Which percentage of end users who experience difficulty with the design approaches zero. It's also fine for people who can convince their admins to implement it. But, again, that's a tiny percentage of people. 

I also need to say that the tone of your response is kind of tone deaf. Just recode the page? Really? Is that really the right response, here? This reminds me of the episode of Star Trek: TNG where Q advises Geordi to just change the gravitational constant of the universe. And advising someone to just hit Ctrl+End to jump to the bottom is great advice, if the problem were actually scrolling to the bottom of the page (never mind that not every interface device has those keys). Scrolling isn't the problem. The problem is *remembering* to do it when you've just dinked around for the last minute shuffling unnecessary buttons. 

Something like your approach may be the solution. But the current design has been one of those tiny annoyances that just sits there and buzzes. There are clearly simple ways to fix it. 

MLentini
Community Participant

Never mind faculty missing it all the time. *I* miss it all the time. If in between the two sections doesn't work, then putting it at the top of the page (or duplicating it there) would work too. I know, I know, 'but button gravity!' But forgetting to click save is not awesome.  

skhagen
Community Contributor

I had an instructor request this just today!  If I had a nickel for every time I say "And then scroll all the way down and click save" . . .

cholling
Community Champion

I've missed that so many times -- I wish I had paid MYSELF a nickel each time. You'd think after having to reorder things a second time, I'd remember to Save it. For some reason, I just assume that after I reorder something, it's going to STICK -- which would be cooler than than a rolling panda.     Rolling Panda gify

James
Community Champion

Modifying the styling on the page is available to almost everyone using a browser through browser extensions like Tampermonkey or Stylish. In some places, the institution's IT department may have locked down the ability for a user to add extensions, but you may be able to get an exception if you can demonstrate the need.

My suggestions are not intended as a long-term solution, they are intended as a quick fix that people who are extremely bothered by this can implement right now while they wait on a better solution from Canvas. They also recommend what I think is a better solution for some than what this feature request is for.

A perfect example of that is the Permissions page that admins have been complaining about for a long time (that feature request was in October 2015). The original request was to freeze the columns at the top when you scroll down the list and some people showed their low-tech solution of putting tape on their monitor to highlight the columns they were working with. As the discussion ensued, it became that there were other problems with that approach, especially when there were lots of roles. At the end of September 2017, I wrote some code that was a quick fix, it just moved whichever column you clicked on to the front so you could work with it. It wasn't pretty, but it was functional and it made life easier for those who have to work with permissions. I did this even though I don't work with permissions very often. It was just something that I saw where I could offer an improvement over what was there now. Canvas is now showing designs and getting feedback of what they've been working on and it is an elegant, clean, far superior solution that blows anything I could have ever imagined out of the water. I was trying to patch the existing system and they did a complete rewrite. But it's November 2017 and they haven't implemented it yet, they're just asking what people think. I don't know when it will make it into production, but in the meantime, admins still have to deal with permissions.

Rather than people waiting for a long time, and possibly never getting this fixed, I gave some things that people can do right now rather than just filing feature requests and letting Canvas know how much it bothers them. You are free to use them or not use them; they may work for some people and not for others. Other people are welcome to come along and suggest alternatives, provide their code, or just contribute to the discussion.

I still think that putting it in-between the lists is a bad design. I believe other people have asked for this to be auto-saved before (I can't find that thread right now, but I remember writing how I like to cancel if I mess something up). I don't like asking people to confirm every action that they want to do is bad; having to keep clicking the confirmation button when I ask to remove an item from my modules is very annoying, as would be confirming that you really intended to hide that navigation item in case there was an auto-save feature.

I acknowledge that there are times you put a lot of work into something and legitimately forget to save the changes. Canvas attempts to make things awesome, not just suck less, and in other places, Canvas has chosen to go the route of asking for a confirmation when people are about to move off of a page without saving their pages and that might be a workable solution here. It may be more difficult since the navigation menu is on a tab not on a separate page and people could move to another settings tab and come back to the navigation one without leaving the page that holds the tabs, but it could probably be done if that was determined to be the solution.

For people using a non-mobile browser, the code I provided may work. I think it's a better solution than having the button in the middle as it allows me to minimize scrolling. Other people might want to put both lists inside of something with a vertical scrollbar so that they didn't have to do any page scrolling, could see both lists at the same time as well as the save button. If someone really wanted the long single column of items with the button in the middle so that they had to do more scrolling in the interim just to not have to remember to scroll down to save at the end, it should be able to accomplish that with just a few lines of JavaScript. Disclaimer: that's not flushed out on my end and it may take mutation observers if they refresh the page and it involves watching the code every three weeks to see when something breaks. I've been providing code to reduce Canvas annoyances for a couple of years now and their changes have only broken my things a few times.

As a final note, when I say "wide screen", I'm talking about normal desktop browser. The two columns fit side-by-side (if the course menu is collapsed) if the screen is about 960 pixels wide, which isn't extremely wide screen, but it probably would not be a good fit for a mobile browser.

tom_gibbons
Community Contributor

Browser extensions are not something that a typical end user will engage with. At least, not at any of the colleges where I've worked. 

Your reassertion that you still think the button in the middle is bad design is an unnecessary reassertion, since I already ceded that point. You're quite right. 

I appreciate you offering alternative solutions to help people manage this problem. But your solutions are too involved or technical for the average end user. So, they're good for a small subsection of end users, but not for most. 

AND, they take a significant amount of time investment for what is, ultimately, a small problem. 

BUT this is a small problem of the type whose annoyance accretes over time. It's not something that most people would spend time fixing, because it would take significantly more time to invest in a DIY solution than simply redoing the thing that you screwed up. And then we think, "Oh, I'll remember this next time." And then we don't. And then we kick ourselves the next time we forget, because, "God Bless It! WHY can't I remember to click that freaking button?! And why is it down there, anyway?"

Given the number of times that I'm stopped when trying to navigate away from a page with unsaved changes elsewhere, it seems like a practical joke to *not* have the system prevent a user from leaving this page without at least prompting them to save their changes (if not relocating the button). 

tobe_baeyens
Community Contributor

I agree. The system should prevent a user from leaving this page without at least prompting them to save their changes. This happens on other pages and not having it in settings is a usability bug.

kmeeusen
Community Champion

Wait, we can get paid for everytime we say this?

I am gonna be rich! Maybe even rich enough to retire before my 75th birthday!

Woo Hoo! Life is good!

ProductPanda
Instructure
Instructure
Status changed to: Archived
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.