UI Elements

UI Elements

A notification is a message you can display to the user outside of your application's normal UI. Data validation is the process of ensuring that computer input is clean, correct, and useful.

A notification is a message you can display to the user outside of your application's normal UI. Data validation is the process of ensuring that computer input is clean, correct, and useful.

4.10.1 Types

There are mainly four types of it

  • Success Message

    When user submit the validated data, the success message will appear.

  • Error Message

    When user submit the data which is not valid, the error message will appear. User cant proceed until he corrects the validation. This type of messages can not be ignored.

  • Warning Message

    When user submit the data which is even validated but if system wants to pass any warning for the user, the warning message will appear. This type of message can be ignored, user can perform the next actions.

  • Normal Message

    Any message which system/admin wants to share with users which is not success, error & warning message.

Validation Notifications
Fig 4.10.1 Different types of Validation Notifications

4.10.2 Guideline

Listed below are the guideline one shall consider while adopting for the actual design.

  • Each type of messages has defined color and icons which one should use while designing the respective messages which are as below.
    • Success: SeaGreen(#45b6b0)  
    • Error: Red(#ff0000)  
    • Warning: Orange(#feaa30)  
    • Normal: DarkGray(#5c5c5c)  .
  • Border for the placeholder will be 1px in respective color of the message type as defined. Background will be white. Placeholder font color will be DarkGray(#5c5c5c)   and size will be 12PX.

  • When using with any form element message will displayed as tooltip in respective color of the message type.

  • There is the close button inside the box which helps the users to close the notification after the acknowledgement.

  • Any validation which occurs at UI level(without submitting the data), the validation check will be done once after the user filled the information (or) tried skipping the criteria without filling. Then when once the user try going to next field – the validation check happens and notifies the user with the error or warning

  • User can’t submit the data without correcting the error message, but he can submit by ignoring the warning message.

  • Validation message can be displayed as tooltip but can also be displayed as dialog popup as described in the dialog section. When need to use popup, in such case if there is an error, modal popup can be used while in warning case non-modal popup should be used.

4.10.3 Behaviour

  • When there is any type of validation occurs, the element border will turn in respective color of the type of validation and respective icon will be placed at the right side of the element. Icon in case of textfield will be placed in the textfield element itself while in case of select dropdown menu, it will be in the right side but to the left of dropdown arrow of the select dropdown menu.
  • To see the details of the notification, the user opens the notification drawer by either clicking on the respective icon or by placing the cursor in the element. Tooltip message will appear and icon in the element will disappear & border of the elment will turn to its default value.
  • There is the close button inside the box which helps the users to close the notification after the acknowledgement or at the UI level validation when it can be closed by placing the cursor in the element again at this state until user fix the validation, the field will remain as its focus state.
Behaviour of UI side validation
Fig 4.10.3 Different behaviour of UI side validation.
Error Modal Warning Non-Modal
Fig 4.10.3a Different behaviour of validations when user triggered submit action.

4.10.3 Usage

  • Validation messages can appear in form element when the UI level validation occurs.
  • It can also appear when the data submitted and back- end level validation occurs. In such case if there is an error, modal popup can be used while in warning case non-modal popup should be used.