Embedded help in a modal or wizard

Design
#1

Are there any designs or recommendations for including help in the context of a modal or the wizard?

I was chatting with Andreas and Garrett on the Cockpit team, and one suggestion from Garrett was to include a help icon with popover in the modal header next to the Close button, which I thought made a lot of sense. Some of the benefits of this are that it’s always in a consistent location, and also is higher in the DOM order making it accessible by keyboard users and screen reader users before getting to the contents of the modal, instead of after the contents.

Also, one of the requirements we have is to provide a link to external documentation in some cases. So in the popover, we would include a Learn More link at the end of the contents that are included in the popover.

#2

Hi Jenn,

We used to do this exact thing in Red Hat Virtualization. We had fa-info-circle colored blue, left aligned next to the title in the header. All of our links were to access.redhat.com docs, but they could have been to anywhere. So, not a popover - click took you to new tab.

We didn’t measure usage, but I never got the feeling people used them a lot.

Best wishes,
Greg

#3

Thanks for the feedback, Greg! I would love to see a screen cap if you have one handy, but no worries if you don’t.

I skimmed the contents in the embedded assistance design document which talks about external links, and there are examples that show links with arrow icons like the example below, which I assume are for indicating external links. But I didn’t see anything explicitly calling out whether all external links should have this type of indication.

So I guess part 2 of my question is whether that icon is going to be a recommendation for all external links? And if so, what are the recommendations for incorporating that icon when providing embedded assistance in a modal?

image
image.png1067×423 19.8 KB

#4

Here’s a screenshot. Basically you click that icon and a new tab opens.

Selection_546_2
Selection_546_2.png1404×773 62.6 KB

#5

Thanks for sharing the example!!

#6

Just FYI, I updated the original post to ask for feedback about wizards, too.

:woman_mage: