hxuanyu/intellij-sdk-code-samples
1
0
Fork 0
mirror of https://github.com/JetBrains/intellij-sdk-code-samples.git synced 2025-07-27 16:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

UX-2323 Update existing UI Guidelines: Inline text

Browse Source
This commit is contained in:
marianna.kononenko 2025-02-05 16:56:12 +01:00
parent 719f5867bd
commit aed3d2c732
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/ui/empty_state/empty_state_structure.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

BIN
images/ui/empty_state/empty_state_structure_dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

17
topics/ui/principles/context_help.md
View File

@ -9,29 +9,30 @@ Use context help to briefly explain how a functionality works if it is not clear
Context help can be shown as an [inline help text](inline_help_text.md), in a [help tooltip](tooltip.md), and in an [empty state](empty_state.md). Context help can be shown as an [inline help text](inline_help_text.md), in a [help tooltip](tooltip.md), and in an [empty state](empty_state.md).
## Inline help text ## Inline help text
Use an [inline help text](inline_help_text.md) in settings dialogs that are not constrained by space and are not frequently used. Since settings are rarely changed, users may forget their purpose, so displaying the information immediately makes sense.
<img src="context_help_inline_text.png" alt="Context help in an inline text" width="706"/> <img src="context_help_inline_text.png" alt="Context help in an inline text" width="706"/>
Use an [inline help text](inline_help_text.md) in settings dialogs that are not constrained by space and are not frequently used. Since settings are rarely changed, users may forget their purpose, so displaying the information immediately makes sense.
## Tooltip ## Tooltip
<img src="context_help_tooltip.png" alt="Context help in a tooltip" width="706"/>
Use a [tooltip](tooltip.md): Use a [tooltip](tooltip.md):
- If the space is not enough for showing the inline help text. - If the space is not enough for showing the inline help text.
- In frequently used dialogs, tool windows, or popups. The more often a person uses an interface, the more likely they are to remember what each option does. - In frequently used dialogs, tool windows, or popups. The more often a person uses an interface, the more likely they are to remember what each option does.
- For icons or other controls that do not have a label. - For icons or other controls that do not have a label.
## Empty state <img src="context_help_tooltip.png" alt="Context help in a tooltip" width="706"/>
<img src="empty_state_structure.png" alt="Empty state of a tool window" width="706"/>
## Empty state
Fill in [empty states](empty_state.md) of tool windows, tables, trees, and other containers with: Fill in [empty states](empty_state.md) of tool windows, tables, trees, and other containers with:
- a reason why the data is missing - a reason why the data is missing
- an action that can fix it - an action that can fix it
- a link to a corresponding article in the web help. - a link to a corresponding article in the web help.
<img src="empty_state_structure.png" alt="Empty state of a tool window" width="706"/>
## When to use ## When to use
Below you will find rules for [tooltips](tooltip.md) and [inline texts](inline_help_text.md). Below you will find rules for [tooltips](tooltip.md) and [inline texts](inline_help_text.md).
@ -96,6 +97,7 @@ Below you will find rules for [tooltips](tooltip.md) and [inline texts](inline_h
## When not to use ## When not to use
### Do not explain UI
Do not use context help to explain how the user interface works. If you need to explain that, consider redesigning the UI. Do not use context help to explain how the user interface works. If you need to explain that, consider redesigning the UI.
<table style="none" border="false" column-width="fixed"> <table style="none" border="false" column-width="fixed">
@ -111,6 +113,7 @@ Do not use context help to explain how the user interface works. If you need to
</tr> </tr>
</table> </table>
### Do not explain common actions
Do not explain common actions and entities. Show a regular tooltip with an action name and shortcut in this case. Do not explain common actions and entities. Show a regular tooltip with an action name and shortcut in this case.
<table style="none" border="false" column-width="fixed"> <table style="none" border="false" column-width="fixed">
<tr> <tr>
@ -125,6 +128,7 @@ Do not explain common actions and entities. Show a regular tooltip with an actio
</tr> </tr>
</table> </table>
### Do not clutter UI with context help
Do not explain each option. Too many help icons or too much inline text make a dialog cluttered and harder to navigate visually. Do not explain each option. Too many help icons or too much inline text make a dialog cluttered and harder to navigate visually.
If all options need to be explained, consider rewriting the labels to make them clearer. If all options need to be explained, consider rewriting the labels to make them clearer.
@ -140,6 +144,7 @@ If all options need to be explained, consider rewriting the labels to make them
</td> </td>
</tr> </tr>
</table> </table>
## How to use ## How to use
See [Inline help text](inline_help_text.md), [Tooltip](tooltip.md), and [](empty_state.md). See [Inline help text](inline_help_text.md), [Tooltip](tooltip.md), and [](empty_state.md).