Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Basic date format: dd-mmm-yyyy, for . For example 15-Aug-2020.

  • For the current day and the day before that you may use Today and Yesterday.

  • Basic time format: #0:00 PM/AM (for . For example 1:36 PM).

  • For combined date and time use the word at. For examples: 05-Mar-2020 at 7:27 AM or Yesterday at 12:16 PM.

All applications built for Verint should allow the above defaults to be automatically changed based on the users specified browser locale (or manual setting if an application allows it). Details of country and region specific conventions are available here.

...

As with Date and Time above, all applications built for Verint should allow the decimal character defaults to be automatically changed based on the users specified browser locale (or manual setting if an application allows it). Details of country and region specific conventions are available here.

Headers


Labels

Effective form labelling helps users understand what information to enter into a form Input. Using a placeholder text as a label is often applied as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.

  • Provide a text label left assigned to its associated field (Checkbox and Radio buttons are exceptions to this rule)

  • In situations when horizontal UI real estate is scarce or responsive design is used, render the label above it’s associated field.

  • Ensure that all labels and associated fields are vertically aligned as columns in a table

...

Required fields

It’s well known that users don’t read instructions, and they are particularly less likely to read instructions at the top of a form. Form fields seem self-sufficient and each field has a specific instruction — its label, hence all required fields should be marked in close proximity with its associated label.

  • Provide a star (asterisk) symbol position in superscript.

  • Use the Verint warning color with the star symbol to identify it’s necessity.

...

Accessibility

  • Use the appropriate HTML <label> element and label for attribute.

  • Labels must remain visible when an input gets focus.

  • Labels must be announced to the screen reader on focus.

  • Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.

  • Use sentence case capitalization (see Capitalization section below).

Capitalization

We use different capitalization styles for different types of content to improve scannability, organize information, and guide users to key actions.

...