Validation - success


93
views
0
20 months ago by

Link to audit and desk research:
https://digital.westpacgroup.com.au/confluence/display/CPL/Validation+-+Success

1. Upload examples of what you've used for your project (and what worked/didn't work)
2. Comment on the patterns that are posted below (and why you think it works, doesn't work)

3 Answers


0
20 months ago by

The audit uncovered that there are two styles currently being used and this is one of them:

Field outline turns green after you've completed filling in the field.

It doesn't necessarily mean that what you've provided is correct, but more that it matches the required value of that specific field.

I believe that this may not be accessible, but need to confirm this.

0
20 months ago by

The second type of inline success validation seen in the audit was the tick:

 

Tick appears after you've completed the field and the focus goes off the field.

Similar to the above pattern, the tick confirms that the info provided was in the right format/value, but not that the info was actually correct.

0
20 months ago by

Can we combine both together perhaps. I like the top one where the outline turns green. But the green line means little to me alone. If the tick to the side also appeared on tabbing or click the next field, and then faded away to nothing. Leaving the green line. Id feel more reassured that i got something correct. The green line would be a reminder im on track.

1

Some nice examples here

https://dribbble.com/shots/3113894-TopVet-Sign-In
https://dribbble.com/shots/1393956-Sign-In-Animation
https://dribbble.com/shots/574567-Some-forms

 

This is nice too.
https://dribbble.com/shots/1059244-OnSite-Form-Validation-GIF

Where by the green arrow and green outline pulse and then fade to our border colour. So the forms don't end up looking too neapolitan icecream :)

written 20 months ago by Bradley Cho-Smith 
Thanks for the feedback! You may be interested to know about a couple of interesting points that came up in the desk research:

1) people can get confused about what the tick means eg. 'how do you know my postcode is correct when you don't know where I live?!'

2) just an idea: perhaps it's more effective (and less clutter) to reserve positive validation only for complex questions or values that need to match eg. confirm password



written 12 months ago by Amritah Pathak 
Please login to add an answer/comment or follow this question.

Similar posts:
Search »
  • Validation - errors
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Mobile Wallet (AKA Tap n' Pay)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Search pattern
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Off-canvas menu (AKA navigation drawer, hamburger, kebab, shelf menu)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Date input
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Expense splitter
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Next Best Action (NBAs)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Electronic verification
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Help text
    Link to audit and desk research: https://digital.westpacgroup.com.au/confluence/display/CPL/Help+...
  • Progress stepper
    Link to the audit of existing stepper patterns: https://digital.westpacgroup.com.au/confluence/di...