Karol Lewandowski d8e83b57ea
UI Guidelines (#1308)
* Add UI Guidelines to  SDK docs

* Add UI Guidelines to  SDK docs

* Fixing build errors

* optimize PNGs

* add UI guidelines landing page placeholder

* IJ SDK Docs <-> UI guidelines crosslinks updated

* split_button.md: remove reference to removed setting

* use <ui-path>

* use MD instead of <note>

* use %gh-ic% links

* drop_down.md: fix <control>

* code samples: fix most obvious issues

* remove obsolete `_defaults.md`

* ijs.tree: UI cleanup

* Delete "under construction" pages

* Fix headers

* Add link-summary

* Remove invalid links

* Delete unused files

* Remove ''@2x' from image file names

* Use Markdown syntax for some images and tables

* Rename non-unique files to unique

* Remove alpha in images where content is unreadable

* align quotation marks

* Controls: cleanup/fixes, add code links, edit

* tooltip.md: fix HTML

* misc fixes

* typography.md: fix table contents

* typography.md: fix table header

* UI guidelines landing page + TOC fixes

* remove unused icons_list.md

* Normalize image paths

* validation_errors.md: Fix broken tab

* "correct"/"incorrect" labels styling

* Resize images to 50%

* button.topic: fixes

* grammar, spelling, minor edits

* remove '&nbsp;'

* fix 99px

* cleanup

* UI_kit.md: minor

* Fix "MRK058: Large image in paragraph rendered as a block element by default."

* button.topic: Add img[alt]

* mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack

* split_button.md: Use ui-path

* UI landing: add feedback snippet

* Improve code snippets formatting and naming

* Fix code samples

* Fix code samples

* Add Kotlin variants for code samples

* Add icons_list.md

* crosslinks

* Change external link to https://intellij-icons.jetbrains.design/

* icons list -> https://intellij-icons.jetbrains.design

* Hide info about reducing split button to simple action button (now it is available through the registry only)

* reformat

* icons_style.md: Images in new line

---------

Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com>
Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
2024-05-16 13:51:56 +02:00

2.9 KiB

Mnemonics

Guidelines on using mnemonics.

A mnemonic is an alphanumeric character, which indicates the key to press to activate a command or navigate to a component.

There are regular and numeric mnemonics.

  • Regular mnemonics are used inside the text. The mnemonic is underlined in this case to be distinguishable.

    In a control:

    {width=264}

    In a menu:

    {width=288}

    Activate the control by pressing the mnemonic with:

    • Alt modifier key on Windows/Linux

    • Ctrl+Alt modifier keys on macOS.

  • Numeric mnemonics are used as the first numeric character of an action in a popup:

    {width=373 style=block} Invoke the action by pressing the corresponding number key.

When to use

Specify mnemonics wherever possible in menus and controls. Mnemonics make the functionality more usable for power users who interact through the keyboard. Moreover, mnemonics make the functionality accessible for users with disabilities.

If there are many actions and/or controls, and it is not possible to assign mnemonics for all of them:

  • Provide mnemonics for the most frequently used actions/controls.

  • Provide mnemonics for group headers for quick navigation to the first element of the group.

Note: The rules for using numeric mnemonics in popups are under discussion. Contact us if you have questions.

How to use

{width=555}

Make mnemonics in the label discoverable, they must be easy to find:

  • Use letters at the beginning of the first or second word of the label.

  • Use letters with wide widths, such as w, m, and capital letters.

  • Avoid using letters that are difficult to see when they are assigned to underlined keys. These letters include:

    • Letters with descenders, such as g, j, p, q, or y.

    • Letters next to a letter with a descender.

    • Letters that are only one pixel wide, such as i or l.

Make it easy to remember for the most frequently used actions:

  • Use standard Windows mnemonic if any. For example, Properties, Rename, Delete, Cut, Copy, Paste, Exit, etc. Note that Windows users are more likely to form habits for mnemonics as mnemonics are not that common on macOS or Linux.

  • Do not use silent letters. For example, Design, Column, etc.

Do not assign mnemonics to the default or Cancel buttons. The default button is typically assigned to the ENTER key, and Cancel is assigned to the ESC key.

Do not use the same mnemonic letter twice in the same window; duplicated mnemonics confuse users. If you need to assign a new mnemonic in an existing context, check that it's not already taken. If it is, prioritize the mnemonic for the more frequently used action.