New UI: Move the Help button up in the Navigation

[snugent]

This idea has been developed and deployed to Canvas

In the new UI the help button displays at the very bottom of the global navigation. I asked people what they thought about this in the User Group: New UI group. Everyone who posted agreed. In beta it is covered up by the pink beta banner so you can't even see it. I think most people will not see it. I would prefer it was right next to the account button (see yellow outline below). Also it seems weird to me to have the admin button in the middle of the other options.

[garth]

We will be transitioning to the new UI during this winter break.

Users have learned to look to the top right corner of the window to find "Help".

Now it's in the bottom left?

Before reading this article, due to the beta/test banner covering the "Help" option, I was wondering why "Help" had been removed.

The first place I looked for "Help" was from right to left across the top of the page.

Next, thinking about the login page where "Help" is a link at the bottom, along with links to Privacy Policy, Term of Service, etc., I looked to the bottom of the page.  When looking at the bottom of the page these links scrolled up with the page and became visible, but "Help" was not there like it is in the login window.

I honestly did not notice that the left nav bar did not scroll, and started to think "Help" had been removed.

If "Help" can't exist where users currently know to find it (i.e. at the top of the page), would putting it at the top left make it any easier for users to find it?

From an every day users perspective, "Help" is an important feature. 

With respect to the "Admin" button, admin's should be savvy enough, I think it could easily fall to the bottom.  If it's a real estate issue, would switching the position of "Help" and "Admin" would be possible solution?

[edit] - After further experimentation, it seems like a good idea to place the "Help" link next to the other links at the bottom of the page (i.e. with the Privacy and Terms links).  Why?  Because these links DO scroll up with the page, while the nav bar does not scroll.

Non-scrolling nav bar becomes an issue if the user has a low res setting and a small display.

One scenario I just tested, opening Canvas in a browser on my Samsung Edge, I can scroll down, but do not see the "Help" button in the nav bar, but I am able to see the "User Research" / "Privacy Policy" / etc. links.  If the "Help" link were placed here, I could find it.

I am also considering that users who know to find the "Help" link in this area of the login will look to these links on a page as well.

[Renee_Carney]

Thank You for taking the time and energy to submit and discuss your idea. Your feedback helps our product teams prioritize feature development so we can build a product you will love. Unfortunately, this idea has been archived because it did not meet the 100-vote threshold within the 3-month voting period. Learn more at: How does the voting process work for feature ideas?

Can archived ideas still become a feature?  Potentially. Archived ideas can be resubmitted by Community members. As people’s needs change, previously submitted ideas may gain additional traction. All feature ideas are evaluated as a whole and may influence product direction.

Panda-Cat: A mythical creature that we dreamed up to catch your attention, make you laugh, and encourage you to stay invested in Feature Ideas process of making Canvas better!

[Renee_Carney]

This idea has resurfaced at .

[cesbrandt]

Edit (5/26/2016): We decided that we wanted the icon to be a little more "eye-popping" than the default image. I thought I'd post our solution to it up, also.

Disappointingly, this isn't as simple setting a background-image via the CSS. Instead, you need to actually replace the image loaded by default with a new one. Here's the code we're using:

  // Help Icon Background
window.onload = (function() {
  var helpIcon = ''; // URL or data of new help image
  if(document.getElementsByClassName('ic-app-header__secondary-navigation').length !== 0) {
    // Remove 8/16/2016 for more dynamic detection
//    var oldIcon = document.getElementsByClassName('ic-app-header__secondary-navigation')[0].getElementsByClassName('support_url')[0].getElementsByTagName('svg')[0];
    // Added 8/16/2016 for more dynamic detection
    var menu = document.getElementsByClassName('ic-app-header__secondary-navigation')[0].getElementsByClassName('ic-app-header__menu-list-item');
    for(var i = 0; i < menu.length; i++) {
      if(menu[i].getElementsByClassName('menu-item__text')[0].innerText == 'Help') {
        var oldIcon = menu[i].getElementsByTagName('svg')[0];
      }
    }
    var newIcon = document.createElement('img');
    newIcon.setAttribute('src', helpIcon);
    newIcon.setAttribute('style', 'width: 38.7px; height: 38.7px;');
    oldIcon.parentNode.appendChild(newIcon);
    oldIcon.parentNode.removeChild(oldIcon);
  }
})();

We're using an image built with a simple 1:1 ratio and have it loaded as base64-encoded data, to keep it consolidated in a single location, but a URL to the image stored on your institution-owned servers would also work. Just remember to tweak line 8 to get a ratio/size that fits what you want.

Original

I know this isn't ideal for most, but here's a little snippet that can be added to your global custom CSS that will do exactly this:

.ic-app-header__main-navigation {
     -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto;
}

For us, we wanted to bring it up, but still make it stand out a little, so we added:

.ic-app-header__secondary-navigation {
     padding-top: 50px;
}

A little tweaking and the icon and be positioned at whatever distance you want from the rest of the main navigation.

[canvas_admin]

Thank you for this, cesbrandt​.  It works perfectly for us!

[johnv1]

Thanks Christopher, this worked perfectly.

[mikeo]

This saved our bacon!  Thanks!

[cesbrandt]

I'm glad that this has been able to help everyone!

I just want to make sure everyone knows that I've modified my post to include a JavaScript snippet for replacing the icon with a different image.

[cesbrandt]

I want to let everyone know that, while the Help icon has been moved (https://community.canvaslms.com/ideas/5478#comment-56953), these little snippets are still valid for the purposes of adding a gap between the Help icon and the main navigation and changing the icon to a completely customized image.

The JavaScript for the icon replacement has been updated, though. I made its detection a little more dynamic to allow for the addition of icons to that "secondary navigation".

[Renee_Carney]

This idea has been developed and deployed to Canvas 

We were just reviewing a few older ideas in Cold Storage‌ and discovered this one and realized it was completed!  https://community.canvaslms.com/docs/DOC-8132-canvas-production-release-notes-2016-08-27