Style guide for including more help/info to a FOLIO app
Overview
FOLIO has several UX patterns that can be used to provide a FOLIO user help or additional information about a field, function, or an app. The following outlines the patterns and when to use them. It is encouraged that POs use these patterns to assist users understanding of FOLIO.
Tooltip component
Pattern: https://dev.folio.org/stripes-components/?path=/story/components-tooltip--basic-usage
When to use
Apply this component to a button, link, or an input field, especially when the field is disabled and can become enabled if an action is taken elsewhere on the page.
The tooltip text should be brief.
Example:
Infotip popover
Pattern: https://dev.folio.org/stripes-components/?path=/story/components-infopopover--basic-usage
When to use it:
Apply this component to an accordion, a page, a field label, or button (when tip is not brief)
If a feature/function is rather complex then please use this component to help a FOLIO user out.
Use this component when the tip is lengthy and/or links to help documentation.
The Learn more button should link to documentation that is on docs.folio.org
The link should go directly to the most relevant help documentation.
Clicking Learn more link should open documentation in a new tab/window.
Example:
Placeholder
When to use it:
Apply this pattern to date/time picker, select, text box, text area inputs to give user context on what to do/expect when using the input.
Examples:
App context menu
When to use it:
Apply this component to show a.) application documentation created by the product owner (ex. keyboard shortcuts, search tips), application relevant release notes documentation, and application relevant external URLs.
Example(s):
Help text on page
When to use it: Depending on data density, adding help text on a page is helpful to communicate functionality. A good area to place this information is Settings. This help text should not be a book but a couple of sentences.
Example(s): Settings > Mosaic integration