Versions Compared

Version Old Version 11 New Version 12
Changes made by

Asaf Ben-Oved

Asaf Ben-Oved

Saved on

Key

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


Expand
titleExpand for table of Content
orderupdate
Table of Contents
outlinetrue
stylesquare

Description

Status
colourYellow
titleOngoing
 

Field Validations are a way of talking to our users. It is designed to make the user understand a mistake and the ways to correct it.  

Example:


Types

TypeUsage

 Field validation error 

Alerting the user on actions that will not allow him to complete the task.

 Field validation warning

Alerting the user on actions that might contain a mistake or a non fatal error.

Usage & Behaviour

Internal Logic

On fields, triggering Triggering the validation can occur before or after submitting the formbe by 2 types:

  • Syntax validation - validation should be displayed while typing. For example:
    • illegal character was typed  (e.g. numbers instead of alpha-betic)
    • exceed the number of characters (e.g. user input 3 digit number where only 2 digit is allowed)
  • Logical validation - any validation that is set on the required value (e.g. Max. input of 100)
    • In most cases the validation will occur after the user left the field
    • If the field value is connected to another value in the system, on top of the behaviour described above, as soon as the user try's to leave the field, a pop up message will appear with the options of
      • Cancel - returns the focus to the field with the last used input 
      • Revert - returns the focus to the field with the latest valid input (the one before the user changed it)
        <<TBD - picture of pop-up>>

If a user started editing a field which had a validation indication, the indication will be removed When starting to edit a field with a validation indication on it, the current indication will be hidden (i.e. it will be treated as if the user had edited the field for the 1st time).
<<TBD animation - show with at spinner field for ease of creating>>

If user had entered a form/page/screen for the first time (fields are empty), logical validation should not be enabled. However, syntax validation should be enabled.

in In cases where user enters a page that already had input, the warning validation should be displayed (e.g. the user enters a page already edited with warnings in it).

For connected fields (where different fields are connected for input), on top of the behaviour described above, as soon as the user try's to leave the field, a pop up message will appear with the options of

  • Back - returns the focus to the field with the last used input 
  • Revert - returns the focus to the field with the latest valid input (the one before the user changed it)
    <<TBD - Create an example of the of pop-up - Value un applicable "The value entered in the field is not applicable as it affects other fields. You can go back to change it or revert to the previous one?>>



Structure

The field validation consists of:

  • Color frame or  & a Small  icon on the top right corner - marks the validation type
  • A  validation message appears upon hover
  • A descriptive message next to the submit button
    • Error messages have a higher priority than warning. Therefore,  Error message will appear first and only of In case the error was removedfixed, the warning will be displayed)validation should be presented.
    • In some cases of limited space or a short form, no descriptive message will appear


Examples:

Components


ErrorWarning

Text field

Image RemovedImage Added

Text area

Image RemovedImage Added

Combo button box (free text field)

Image Removed

Image Added

Dropdown menu

Image Added



Spinner (free text field)

Image RemovedImage Added

Date Picker (free text field)

Image RemovedImage Added

Time Picker (free text field)

Image Removed

<<TBD>>

Image Added

Search fieldNA

Image RemovedImage Added

Toggle

NA

Image RemovedImage Added

Slider

NA

Single checkbox

Image RemovedImage Added

NA

Checkbox group

Image RemovedImage Added

Grid table cell

Image RemovedImage Added

Tab (question)<<TBD - Add in LUX>><<TBD - Add in LUX>><<TBD - Add in LUX>>

Call To Action with short text





Image Modified

(warning) on Error validation button is disabled



Image Modified

Call To Action with mixed errors

(warning) error takes priority


Call to action with long text.

(warning) Pop-up size might need to expand in height


Image Modified

*or any other controls that require user input and needs to be validated. 

Inputs with no validation:

  • inputs that have default selection only (e.g. radio buttons or some dropdown menus)
    • inputs that does not have text entry option, (when selection is done from a dropdown for example, we need to limit his selectable options to be only the valid ones)

     *  Unlike "field validation error" the warning version can appear on top of controls that does not have a text field, since a warning can appear when there is a conflict between 2 controls. 



    Text

    • Descriptive text near the CTA (e.g. Submit)
      • If only 1 field didn't pass validation, the text near the CTA should be the same as the tooltip <<(question) or should it be a counter>>
      • If multiple fields didn't pass validation of the same type, the text near the CTA should be "X warnings found" <<TBD with Docs.>>
        For example:
      • If both Warning and Error are found, the text should address the Error
    • In some cases the text might be different from the tooltip to further explainIn general
      • Specify why field info was not accepted - your validation messages should tell users exactly why their information got rejected or may have some risk
      • If the values entered may impact some other part of the system, briefly explain what may be impacted
    • Keep it short!


    Rephrasing examples (taken from Verint's Suite):


    Before

    After

    Percentage must be an integer

    Please enter only numbers (e.g 48)

    Max number of bids allowed (8) for this auction exceeded

    		You have reached (11) the maximum bids allowed (8) for this auction. Please remove 3 bids.

    <<#found an error message - add it here>>



    Interaction - validation tooltips

    • Any field/tab that has validation indication will also have a tooltip
    • The validation tooltip takes priority over a any other tooltip (if exists)
    • Location of tooltip is by default on right of the field except when there is no space
    • Text should be kept short and up to 2 rows (question)
    • Tooltip timing should be - Tooltips (see interaction section) 
    • Warning and Error has the same tooltip interaction

    Tooltips positioning examples:

    typeContentExamplesComments
    1 row textor more rows of text right to the icon of validaton

    Image Removed

    Image Removed

    		2 row text

    Image Removed


    Partial coverage of control

    		User can still click the control
    Left position






    ...

    Best Practices

    Content Guidelines

    • 2 options for content of the error message:
      • Pre-definedGeneric 
        The content of the message is written in advance and there is no need to refer to the specific text that the user typed, for EX: "not a valid zip code" 
      • Input based ( (warning) Preferred option where applicable)
        The content of the message can dynamically change based on the input of the user, use it to clarify to the user where the error is coming from.
        (e.g. zip code cannot contain the spacial character: "%"
    • For complicated fields an example in the text of the tooltip can help
    • Try to avoid negative words
      • (e.g. "Password does not meet requirements" or "Invalid Password" → could be turned into→ "Password must contain 8 alphanumeric characters")

    •        


    Accessibility compliance

    ...

    Current appearances in our products


    Expand
    titleWFM specific use-cases




    Edge case

    In case the form submit button is away from the form and so there is no way to place a message next to the submit button in order to indicate why it is disabled (EX: the save button is in the ribbon and the fields are in the right pane), you can use the pre-calculated field method:

    1. The user inputs invalid value and a tooltip + red frame appears immediately.
    2. If the user does not correct the value in the field, and he clicks on anything that changes the focus from that field, a pop up will appear that will state the error in the same way it was written in the short message above the form + the sentence:"Restored last valid value". in this case he will have 2 buttons ok and cancel (so the user won't lose all the data he inputed).
    Guy Hivroni (Unlicensed): can you please add a design of the pop up and also a screen that contains a right pane form with a save button  

    Edge case 2

    In case multiple values were pasted into multiple fields and some of them are invalid:

    1. Tool tips will appear next to each one of the error fields.
    2. As soon as the user changes the focus, a pop up will appear that will state the error in the same way it was written in the short message above the form + the sentence:"Restored last valid value". and all values even legal ones will be restored to their previous value.



    /panel