Relabel navigation and help buttons/icons to improve accessibility

[JeffHuss]

Is your feature request related to a problem? Please describe.

The OpenSearch Dashboards web interface uses buttons that are ambiguous to users, which makes it unclear how to document processes that include interactions with these UI elements:

Describe the solution you'd like

In order to improve usability, accessibility, and in order to facilitate product documentation, these icon-buttons should be either labeled or replaced with icons that include text that can be referenced.

For example, according to a member of the UX team the weird icon in the top-right corner is called the "Help" icon. How on earth is anyone going to interpret that aside from relying on arbitrary past experiences that might make us look at the top right corner? This type of behavior shouldn't be so ambiguous.

Some websites even argue that the menu icon should be in the top-right. See https://uxpickle.com/hamburger-menu-icon-should-it-be-on-the-left-or-right/

Describe alternatives you've considered

Establishing a dictionary of icons used in the OSD UI so that there's a secret decoder ring built into the product.

Additional context

The lack of defined terms for these UI elements is resulting in inconsistent documentation.

[joshuarrrr]

@kgcreative @KrooshalUX to review

[KrooshalUX]

@JeffH-AWS Thanks for the issue - a few things of note:

• The menu indicator (three horizontal lines in the upper left corner) is fairly prevalent across web and mobile applications, however I noticed that the appropriate browser tooltip is missing and I will create an issue for that. At this point in time, we will be keeping it on the left.
• The UX team is currently redesigning many of the icons within OUI in order to bring clarity to items such as "help" which is currently visually explained using a "life bouy" which is an outdated UI practice. We are specifically tracking that issue here: [Glyph/Icon] Replace HELP Glyph ux#11 . Noted that the tooltip for Help is also missing and will add it to the issue for header tooltips.
• You can refer to the icon names here: https://oui.opensearch.org/1.0/#/display/icons
• The Design System team is working on a design specific documentation website, and it will include guidance for how/when to use iconography and that will be provided via a documentation website in the near future. Until then, please feel free to reach out for clarification to myself or any UX partner.
• In regards to the "home" indicator - that one is somewhat ambiguous, but labelled correctly for accessibility / usability. It is also under review for redesign as part of our theming efforts.

[JeffHuss]

@KrooshalUX wow that is awesome! Thanks for the detailed context and references!! I'll make sure to follow progress and leverage that awesome icon name reference while I write.

[KrooshalUX]

@JeffH-AWS happy to help. Closing this in favor of #3573 and our continued icon redesign efforts.

[joshuarrrr]

@KrooshalUX Note that the home button was added as part of the header changes, but only exists in the the expanded menu view (with the full size logo above). See 2:54 in this feature review demo: #1583 (comment)

You're likely more familiar with the condensed, single row header which we will make the default in #1834, where we have the OpenSearch logo as the home link/loading indicator.