0

User fills out this page and hits Save. The page has multiple errors, some on Tab one, others on Tab two.

What's the best way to present a page-level error message explaining that user should correct errors within the two tabs?

Page with tabs

Normally I would simply insert my page-level error message under the header (as shown below). The page-level message directs the user to fix errors that might be below the fold. This approach does not seem ideal when tabs are involved.

enter image description here

Improve this question
4
  • 1
    Why are multiple tabs being used? How do the fields on each tab differ?
    – Andy
    Commented Dec 7, 2015 at 2:25
  • The widget object is divided into two parts, one for each tab. For this problem, it doesn't matter what is contained in the tabs.
    – Brian1850
    Commented Dec 7, 2015 at 4:02
  • I was dealing the similar problem, finally I abandon tabs with a single "Save" button in the header because our usability studies detects that user who is clicking "Save" isn't sure if the changes he made will be save for all edited tabs or maybe only for one tab.
    – steppenwolf
    Commented Dec 7, 2015 at 10:28
  • Sure, new users might not know how Save works, but they'll learn fast enough. This app is designed to be used frequently (daily?), so it is more likely that users will quickly understand that Save saves all data for the object, regardless of which tab it's in. And what's the alternative? We could put Save under each tab, but that's a lot more clicking for users. And it's not needed. Looking at the top, we see "X" to close the object and the "More actions" button, both of which pertain to the whole object. I think users will understand that Save applies to the whole object.
    – Brian1850
    Commented Dec 7, 2015 at 19:33

1 Answer 1

Reset to default
1

The possibility of there being errors in another tab complicates your interface. Therefore you could have a save button in every tab instead of a global save button. This would guarantee that invalid inputs are on the current tab.

mockup

Another approach would be to have warning icons in the tabs where errors were detected.

Also consider using real time validation as it might improve UX.

Improve this answer
2
  • 1
    In general, I would second @Larivact's suggestion about local (tab specific) Save and (if possible), dynamic, real time validation. However, if you can give more context around this interface (why tabs? why global save? etc) - it will be better.
    – Amit Jain
    Commented Dec 6, 2015 at 18:08
  • The problem stands as it is. I never said it would be easy to solve.
    – Brian1850
    Commented Dec 7, 2015 at 4:02

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.