...
Basic date format: dd/mm/yyyy. For example 03/08/2017.
For the current day and the day before that, the default is Today and Yesterday.
Basic time format: 00:00 PM/AM. For example 05:55 AM.For
The combined date and time the default uses the word at. For examples: should be connected using either a comma or the word ‘at’, where relevant. For example:
03/08/2017, 00:55 AM and Yesterday, 12:55 PM.
03/08/2017 at 00:55 AM
and Yesterday at 12:55 PM.
All applications built for Verint should allow the above defaults to be automatically changed based on the users specified browser locale (or by a manual setting, if the application allows it). Details of conventions for specific countries and regions are available here.
...
Despite being the conventional standard (and the LUX default), Great Britain and the United States are two of the few places in the world that use a period to indicate the decimal place. Many other countries use a comma instead. Likewise, while the UK and US often use a comma to separate groups of thousands, many other countries use a period instead, and some countries separate groups of thousands with a thin space.
Region | Format |
|---|---|
Most English-speaking countries | 1,275.28 |
Many European countries | 1.275,28 |
Canada and some European countries | 1 275,28 |
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 by a manual setting, if an application allows it). Details of conventions for specific countries and regions are available here.
Large Numbers
In LUX, large numbers may be represented using K for thousands and M for millions, which is the common practice in most countries.
The number | May be represented as |
|---|---|
1,380 | 1.38K |
2,040,296 | 2.04M |
Text Expansion
Always design with text expansion in mind. When English text gets translated into another language, the translated text can be as much as 3x longer. Make UI components expandable whenever possible. Do not assign a fixed width or height to your UI component unless you have a good reason to.
...
The general rule for text expansion is: “the shorter the English text, the longer the translated text is likely to be”. The following table shows the average text expansion rate for different English text lengths:
English Text Length | Expansion |
|---|---|
1 - 10 | 100 - 200% |
11 - 20 | 80 - 100% |
21 - 30 | 60 - 80% |
31 - 50 | 40 - 60% |
51 - 70 | 50 - 70% |
71+ | 30% |
...
Language expansion
...
In addition to English text length, the target language also has an impact upon the amount of expansion. The following table shows the expansion factor for the English text “Share” into various languages:
Language | “Share” | Expansion Factor |
|---|---|---|
English | Share | 1.0 |
German | Freigeben | 1.8 |
French | Partager | 1.5 |
Spanish | Compartir | 1.8 |
Italian | Condividi | 1.7 |
Japanese | 共有 | 0.8 |
Chinese | 共享 | 0.8 |
Korean | 공유 | 0.7 |
Expansion factor for the English word “Share”
In general, Asian languages use less space as they tend to be more compact than European languages.
...
In LUX, all headers should be the same size as its corresponding section text using the matrix below. Headers one stop higher (two at most) than the section text may be used when no exact match or extra emphasis is required for that specific section. For example, if your section copy text is set at 12px, use the small, medium or large header depending on how much emphasis is needed. If your section copy text is set at 14px, only the medium or large headers should be used.
Header | rem | px | ||
|---|---|---|---|---|
| 2 rem | 32 px | ||
| 1.5 rem | 24 px | ||
| 1 rem | 16 px | ||
| 0.75 rem | 12 px | ||
| 0.5 rem | 8 px |
Accessibility
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
For accessible header, you should also follow these additional requirements:
...
Not skip HTML heading hierarchy levels in order to comply with screen reader guidelines.
...
Labels
Effective form labelling helps users to understand which information to enter into a form input.
A common method of space saving is using placeholder text as a label. However, this is not recommended because it hides context and can present accessibility issues. The use of placeholder labels should be restricted to forms where the field purpose is a universal standard, and where accessibility can be guaranteed, e.g. login forms.
Provide a text label, above or next to its associated field and left aligned to its associated field. Checkboxes and Radio Buttons are exceptions to this rule.
In situations where horizontal UI space is limited, or responsive design is used, render the label above its associated field.
Ensure that all labels and associated fields are vertically aligned as columns in a table.
...
Required fields
All required fields should be marked with an asterisk in close proximity to its associated label.
Provide a star (asterisk) symbol positioned in superscript.
Use the Verint error color with the star symbol to identify its necessity.
...
Accessibility
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
...
Use the appropriate HTML <label> element and label for attribute.
Labels must remain visible when an input is focused.
Labels must be announced to the screen reader on focus.
Ensure the help text which appears underneath an input is read when an assistive technology user stops at an input using ARIA.
Use sentence case capitalization (see the Capitalization section below under Text Formats).
Capitalization
We use different capitalization styles for different types of content to improve scannability, organize information, and guide users to key actions.
When building new LUX applications, also align capitalization practices with platform conventions to match user expectations (e.g. specific iOS conventions).
...
LUX uses two capitalization styles:
Description | Use for… | |
|---|---|---|
Title Case |
|
|
| ||
Sentence Case |
| Anything else, including:
|
|---|
Examples
...
Form | Message popup |
|---|---|
 |  |