Contextual Help - Create examples + guidance

[vavalos5]

Gina and Diane have been working on a broad exploration of this topic.

Deliverables

• [ ] evaluate what Gina and Diane are working on to determine what enhancements or changes to the design system might be needed
• [ ] provide any feedback from a design system perspective
• [ ] create additional tickets as needed to cover any further work, especially noting where having Bill evaluate accessibility might be helpful

-- original -- We used to have this ticket in the backlog and somehow it disappeared. Just found it.. #1481

Here's some work that Keeth has started in the past: https://www.figma.com/file/9TbVvlBaU1z8aqDNd7LDNk/Research-on-how-to-support-contextual-help-%231481?node-id=139%3A5

We need to create examples and provide guidance on how to show contextual help within form fields

[KennyAtHPE]

Currently collecting use cases from GLC, CCS, Storage (coming in next week), and Ezmeral, Use cases can be found here: https://www.figma.com/file/9TbVvlBaU1z8aqDNd7LDNk/Research-on-how-to-support-contextual-help-%231481?node-id=814%3A1183

Moving this hot topic issue back into the To Do list for reprioritization

[KennyAtHPE]

GLCP use cases

[vavalos5]

Copy and Pasting on behalf of Scott.

Please reach out to Gina T. as work on this pattern starts..

She provided a list of folks that are working on this effort from the global HFS level. I can provide additional background info too.

Additional contact info for those that are currently focused to provide:

• Ross Shepherd, Mark Davis - DCE working on a repo to replace TCaaS Zoomin
• Catherine Lyman, Clai Duvall, Emily Wilton - Tech content on GLC
• Josh Johnson (ezmeral docs)
• Michael Johnson (compute docs)
• Katherine Lyman is the content , technical writer from GLC, PointNext is rewriting their own content repository to replace the TCAS ZoomIn Repository.. use ours, repo in the background.

DCE will be coding this new content repository

• Open question regarding all the different interactions and behaviors we'd want across the platform. Might be able to get screen caps from @ecircenis
• How is contextual help implemented in GLC? Clicking a contextual help icon opens a drawer, as of now. Is that what we really want to be doing?

Storage Use Cases From a Mar 17, 2022 mtg discussing 'In Product Doc for DSC in GreenLake'

Attached slide deck screen caps -

Provides a means to have a contextual help ‘articles’ widget up while the user is interacting with the underlying page.

The user can move the widget around

[vavalos5]

Examples of how Oracle shows these behaviors

[SOjaHPE]

I had a sync up meeting with Gina T. and she mentioned that @dianeumoh will be owning and driving the strategy work with Contextual Help. I'd recommended that we set up a review meeting with Diane to find out dates and scope of the project. The desired outcome is to see how we could collaborate to deliver some of the low hanging fruits that the Design System team can put together guidance around with out much duplicated effort while avoiding unnecessary research and reinventing the wheel. There are common patterns within HPE and across major design systems that will meet the needs of our customers while simplifying our UI's and helping to improve our overall User Experience providing the means to progressive disclosure of help content.

Success in this first round would be the validation, testing and delivery of simple patterns with usage and behavior guidance and supporting components in figma available to general use:

• field level contextual help - (i) or (?) icon after input labels, inline sub-titles, etc.
• term definition help - supporting help text in the middle of text paragraphs, or parts of the UI that are already busy and don't necessary have real estate for adding another (i) or (?) icon. e.g. table column header labels. Term definitions could be denoted by the visual affordance of a simple dotted underlined text strings
• static inline help text - what is the guidance or decision tree to make recommendations to designers which pattern is best to be used
• tool tip guidance?
• avoiding duplication of content across input inline description text, info message text, error message text, input labels, contextual help contents. Need to make sure there is a clear need for additional help text. This guidance might have us revisit some of our form guidance as we identify better means/patterns to support our customers.

Additional questions and areas that need covered in guidance:

• Behaviors
• are they launched by hover events, or onClick?
• are they rendered in modal or non-modal popup containers?
• need a display algorithm that will render the content in a manner to avoid covering up the help text's screen element
• add carats to popups for better context?
• how do they work in responsive use cases?
• can we embed cross links to additional support articles?
• can we embed actions, images, videos?
• is all this accessible?
• what would be the recommendations around max content length?
• approach when it comes to rolling up complex domain help, aggregating it contextually to scope of the relationship to; content section level, page level, wizard step level, dialogs, side panels, where would we have icon placement. What are the best containers if there is a need for complex help, pinning it in a right inline panel?

Diane will be owning the contextual help framework from the common Platform functionality level. A majority of the unknowns focus is the feasibility behind the scenes, how the content is stored, who owns the repository, can the technical documentation writers and content strategists have easy access to edit copy as necessary.

[vavalos5]

Adding a use case to this ticket that I came across and have been chatting with Betty on

Video:

https://user-images.githubusercontent.com/62117454/206042576-2baa130d-6703-4f99-9993-64e6fa554e06.mov

Explorations they're leaning towards:

The button would be available in every GLCP page. For now it holds contextual information from the User Guide dependent on what is on the page.

[ericsoderberghp]

The GLCP contextual help PI design sprint underway by Gina T. & Betty D.

• [ ] keep track of the design direction, hopefully around a meeting a week
• [ ] provide development integration

[vavalos5]

1/18/23 Notes sent from Gina through an e-mail on the workshop they had:

In this Concepting workshop we reviewed industry standards and UX best practices for Contextual Help, followed by Creative Matrix and Prioritization exercises. We used “How Might We…” statements based on problems from the Alignment workshops and created stickies for possible solutions (both near- and long-term). We then voted on the ideas and moved them to a Prioritization bullseye. We also moved some that should be high priority, but to the side as they are not in scope for this work, but equally important to get on the roadmap.

Please use the below links, as some of the previous links had access issues. All of these are set to “anyone at HPE with the link”. You should not need to request access.

Slide Deck Mural

Concept workshop links: Part 1 recording Part 2 recording

Alignment Workshop links: ​ Part 1 recording Part 2 recording

They're coming together again on 2/06/23 where a user testing session will be conducted. A group of people will be observing the testing session and will be taking notes.

[SOjaHPE]

Adding a link to @GinaTaylor figma file where the [contextual help designs] (https://www.figma.com/file/lO9SS8xsx1uS42mUw2lLyJ/In-App-Contextual-Help?t=onsBpE2EYXu5oQgZ-0) will be located once they begin to firm up.

@chesleyratliff this is an older ticket the Design System has used to track the Contextual Help pattern discussion/work and tie stakeholders together.

[chesleyratliff]

Thanks for the context @SOjaHPE

[vavalos5]

Mural board where notes are being taken during the testing phase.

Testing will be finalized this Friday, Feb. 3rd.

[GinaTaylor]

Here is all of the work I have been doing for Contextual Help. There is a page for research - which includes external examples, internal HPE examples, and best practices/standards. There are individual pages for each of the contextual help patterns with guidance and documentation recommendations (all WIP): General guidance (when to use which pattern, etc), Tips, Inline instruction + Forms, Onboarding/walkthroughs/Tours, Embedded Help panel. Pages and notes from testing during the design sprint are within this file as well. There are also pages at the top for specs currently being implemented for the new 'embedded help panel' and response page designs for GLCP that Mike and Chiranjib have been working on. While I am out, Sherry Mead will lead this work (for implementation of patterns, etc within GLCP for Glasgow/Helsinki).

[GinaTaylor]

Here is the strategy deck that was shared from the Design Sprint earlier this year.

[GinaTaylor]

THere is also work underway with Alyssa to perform a UX audit of all layers within GLCP - modals, drawers, wizards - since these are out of scope for Glasgow/Helsinki for embedded help panel. She will be reviewing if any of these task flows need to change from modal to wizard, etc, or if any need additional guidance in form of a tip, inline instruction, link to user guide, and so on. She will be working with Joy Boyle and the docs team.

[GinaTaylor]

Here is the UXR report for the 2 contextual help studies done earlier this year with Lauren.

[halocline]

Closing since this work has been completed:

• https://github.com/grommet/hpe-design-system/issues/3361
• Implementation within GLCP https://github.com/grommet/hpe-design-system/issues/3345