Related Pages:
Description
Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow of the page.
Message bars display nonmodal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task.
Message Bar - Full page
Message Bar - Parts of page (Task related)
Types (Full page)
Type | Usage | Image |
|---|---|---|
Success |  | |
Info |  | |
Warning |  | |
Error |  |
Types (Task flow related)
Type | Usage | Image |
|---|---|---|
Success |  | |
Info |  | |
Warning |  | |
Error |  |
Usage & Behavior
General guidelines
Structure
Status Icon - In the left side center have the icon for 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 - 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 |
|---|---|---|
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>
<…>
<…>
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 |
|---|---|
 |
Code
