d8e83b57ea
* 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 ' ' * 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>
3.2 KiB
Progress Text
UI guidelines on writing progress texts.
{width=632}
When to use
Follow the rules for progress indicators.
How to use
Process name
Use the progressive form of the verb which describes the process, for example:
{width=288}
Add an ellipsis at the end to show that an action is in progress.
Use sentence case for process names.
A process name remains unchanged while the process runs.
Do not animate the ellipsis, as it attracts too much attention. The progressive verb form, the text position and the style are enough to understand that this is an action in progress.
Details
Use sentence case for details.
Do not provide details that are meaningless for the user, for example, "Please wait":
Incorrect
{width=288}
Add time units if the remaining time can be predicted.
Round up the first time unit to one of the following numeric anchors: 1, 2, 3, 5, 10, 15, 20 and 30. For example, if there are 7 minutes and 50 seconds remaining, the progress text should read "About 10 minutes left". If less than 5 seconds are left, it should say "About 5 seconds left".
{width=288}
Use work units if the remaining time cannot be predicted, as they help the user understand why the process takes so long.
Work units: the current step, the currently processed file, the number of processed files/tde amount of information, the percentage of work completed, and so on:
{width=288}
The time passed if the user controls the process, for example, needs to stop it after a certain time:
{width=288}
Update the timer every second.
Cancellation action
If the process can be cancelled, add a link for the cancel action for an empty state:
{width=475}
Use title case for the cancel action.
Replace progress text with the loaded data or an empty state when the process has finished. Show another progress indicator, e.g., a loader as in the example below, if loading continues after some data has been displayed.
{width=708}
Trees
Do not show details or a link to cancel the operation for progress in trees and lists. Only show the process name since space is limited here.
Sizes and placement
Empty state
Center-align the first line of the progress text if it is no longer than 200px. If it is longer than 200px, center-align characters from the first 200px and put the rest of the characters to the right.
Left-align subsequent lines with the first line.
The minimum text width is 40 characters. If an area is too narrow to fit the minimum text width, show text using the whole width, including margins. If no space is left, hide the text under area borders.
Wrap text when the area’s width changes.
Fields and vertical spaces:
{width=757}
Tree
{width=261}
Style
Font color is the same as for Empty state text.