0

I'm working on improving error visibility on our form. We display errors next to the field and highlight the tab containing errors. Which works well on desktops above a certain resolution. But on mobile or small laptops errors aren't always visible.

This screen shot below of the form contains errors but are only visible when scrolling up.

Mobile View

mobile view


Actual Page

enter image description here

Should I display errors beside the save/submit button or scroll to the area/tab that needs correction?

3

enter image description here

  • Make sure that all the fields in your accordion are closed upon error check (on SAVE button press I assume)
  • Display a contextual error message next to the SAVE button
  • [OPTIONAL] Disable the SAVE button unless all the errors are fixed
  • This is great because it makes errors clear enough without eating screen real state. – Luciano Nov 6 at 14:04
2

I think it would be more intuitive to just scroll to the area/tab that needs correction. Since it is for mobile and the users would want to complete filling the form as soon as they can, they would want to just fix the errors as preferred to seeing a list of errors first.

If there are multiple errors and there is a 'complete action' for each information the user fills, once the user has corrected an error and the system detects the 'complete action', it could automatically scroll to the next error.

  • However take into account situation when there is more than one error. – Ada Nov 6 at 10:34
0

You can use toast notifications for smaller screens. Bootstrap has some amazing examples, https://getbootstrap.com/docs/4.2/components/toasts/

  • Toast notifications look great (thanks for the link). But that is a solution to a different problem. I don't want to use more screen realestate on mobile with a notification which can be dismissed. Need to figure out the best way to alert the use to invalid input. – Lex Nov 6 at 5:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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