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

UI introducing a help sidebar to provide more context #5612

thebigmoosey opened this issue Jun 7, 2019 · 2 comments


Copy link

commented Jun 7, 2019


Thanks to the community's feedback, we learned that customers were struggling to connect-the-dots on various Octopus concepts, from deployment targets and lifecycles, to packaging, tenants and even variables.

Our design has reached capacity for displaying help text, and we needed a way to show addition help text per page. We also wanted to introduce conceptual images to help customers better understand some of the key concepts of Octopus, such as targets, roles etc., so we needed room to display these images without adding noise to our existing layouts.

The Goal

Internally, we explored conceptual images to better explain some of these concepts and decided on supporting summary text. Our goal was to help nudge users in the right direction, without creating too much noise to the existing UX.

We decided on a sidebar of help information that is both readily available and easily dismissible. This sidebar provides a quick summary of concepts related to the page you're viewing, as well as links to our documentation and additional helpful resources for people beginning their journey with Octopus.

The help text and concept images should be short, concise and to-the-point. It gives you a hint (or a push in the right direction), and if you need more information, it gives you an easy jump to our documentation. This should be helpful to both new and existing customers alike.

What this is

  • A way for customers to find help & support when they're looking for it, in a consistent/repeatable way.
  • A bridge between the app and our documentation ... it should help customers to "connect the dots" for a given page.
  • A bridge for customers who do not have internet access / access to docs, to give them a little bit of in-app help that may help them understand a concept.

What this isn't

  • This is not a substitute for docs. The information in this sidebar is designed to be a short/concise description of a concept.
  • It's not something we want to sync with docs, nor something we want to control externally. Think about summary/note text for a given feature on a screen that's currently baked-in. This is just like that, but extended to describe the whole page.

Known limitations/issues

  • No mobile support. We felt that a left menu + main layout + another sidebar was too many things to stack in mobile view. So there's no change for mobile users.

Why two help icons?

When you go looking for help, you should be able to find these help icons easily, no matter where you're looking. Similar to the "Configure Features" functionality of steps, we chose to display the help icons in 2 easily accessible areas: in the area title up top/right, and in the page layout's section title. So no matter where you're looking, you should be able to find it easily.


A right hand sidebar now complements the layout and, when open, balances the design against our left sidebar menus.

2019-06-03 09_32_55-Window


This comment has been minimized.

Copy link

commented Jun 11, 2019

Release Note: UI introducing a help sidebar to provide more context


This comment has been minimized.

Copy link

commented Sep 9, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. If you think you've found a related issue, please contact our support team so we can triage your issue, and make sure it's handled appropriately.

@lock lock bot locked as resolved and limited conversation to collaborators Sep 9, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
2 participants
You can’t perform that action at this time.