Related Pages:
| Table of Contents |
|---|
Description
...
Types (Full page)
Type | Usage | Image |
|---|---|---|
Success | Actions that were completed successfully. |  |
Info | General information related to the task. |  |
Warning | System warnings or actions that may cause a problem. |  |
Error | System errors or actions that have failed to complete. |  |
Types (Task flow related)
Type | Usage | Image |
|---|---|---|
Success | Actions that were completed successfully. |  |
Info | General information related to the task. |  |
Warning | System warnings or actions that may cause a problem. |  |
Error | System errors or actions that have failed to complete. |  |
Usage & Behavior
General guidelines
Message bar is triggered by the system (e.g. a task error/warning).
Full page message bar appear from the top of the screen below the VerinTop.
Message bar stay on the screen until the user actively closes them or until the warning/error fixed by the user.
If there is no close icon button in message bar will disappear automatically after a few seconds with a fade effect except in warning and error message bars.
The user can always close a message bar manually, even if it will automatically close.
Structure
Status Icon - In the left side center have the icon for it has the type of message bar. Eg: success, info, warning or error.
Text - Show the message to the user about the status.
Learn more link - User can click the link to get more details about the message.
Close icon - In the right corner there is a close icon to close the message bar. You can remove it if you need to keep the message until the task is completed.
Placement and Positioning
Full page - :
A full-page message bar will be placed under the VerinTop with full width.
...
Task related - :
...
Success
...
Info
...
Warning
...
Error
...
Interaction
<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>
Validations and Errors
<<Show images for Errors and warnings. See example: Radio button validations and errors>>
Transitions
<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>
Best Practices
<Whenever a recommendation (not a must) is provided>>
Use:
<…>
<…>
Don’t use
<…>
<…>
General
<…>
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
- <…>
You can place the message bar anywhere in the page where it is relevant.
...
Default State
<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>
Content
<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>
Internal Logic
<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>
States
<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>
...
State
...
Image
...
Comment
Message bar height depends on the amount of text it contains.
...
Interaction
Mouseover a Message will keep it visible, even after exceeding the time limit before it disappears.
Clicking the closing button (x) closes the message bar with a short fade effect.
Best Practices
Use:
to display application-level messages, warnings, and errors.
when you need a relatively unobtrusive way to show messages, and to keep the rest of the page interactive.
Don’t use:
????
General
Keep the text short and informative.
For warning or error message bar
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Focus management
...
Text field
...
Drop-down
...
<<Images with Focus>>
...
<<Images with Focus>>
...
Tab
...
<<Description >>
...
Space
...
Enter
...
Esc
...
Arrows
<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924198/Copy+of+Combo+Box+Temporary#Focus-management , https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924759856/Copy+of+Numeric+Stepper+Temporary#Focus-management >>
Responsive Design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
Responsive Guidelines
< Guidelines for the responsive behavior of the pattern or component, down to tablet (960px) width >
Focus Regions
1st level regions
<<Image>>
...
1st level
...
2nd level
...
3rd level
<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924444/Copy+of+Dual+List+Selector+Temporary#Focus-regions >>
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...