2

While designing the front-end for a responsive website project I came upon an issue dealing with displaying validation on mobile. In past un-responsive practices, if an input was required a little flag would appear informing the user to fill in the field.

enter image description here

While on mobile i'm not sure which is the best pattern to follow user experience-wise. How should validation be designed for mobile using best practices?

Are there any resources available on the subject?

enter image description here

Improve this question
3
  • Do you mean how are the hints displayed before any content is entered, or when the form fails and then the errors are displayed against the fields?
    – JonW ♦
    Commented Feb 27, 2014 at 16:10
  • When the form fails and errors are then displayed. I wanted to include if a user skipped an input within the given order, for example if a user skips select industry and clicks region first they are prompted an error but i'm not sure if that can be done or if it would be within best practice.
    – Courtney Jordan-Herb
    Commented Feb 27, 2014 at 16:19
  • Have you looked at HTML form validation? Not sure what support is like for that on mobile browsers. dev.opera.com/articles/view/new-form-features-in-html5
    – cimmanon
    Commented Feb 27, 2014 at 19:38

2 Answers 2

Reset to default
2

I often find it useful to experience validation on sites as in my example below. I also use this method in my own projects.

Instead of displaying the errors as a flag, I place them below the field to validate. When there's an error, I highlight the field and toggle the validation error below the field.

Validation error example

Improve this answer
0

I agree with Jeroenem.

there are plenty of results out there to help you with your query, too. Especially in ways of plugins and j-query validation. But in my opinion none really bear Jeroenem's answer.

http://blogs.telerik.com/appbuilder/posts/14-01-16/four-options-for-mobile-form-validation - great article with a few examples here.

The only thing I'll add is there are plenty of "best practice" tips for form validation. I have read somewhere that "red" as a colour is off-putting and is a harsh warning to the user, and orange is recommended. If anyone pulls me up on this I'll try and dig out the source.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.