Sorry if this sounds silly, but have you all ever faced a scenario where one of the tabs needed to be mandatory (picture below), and the user can't submit the form without addressing that particular tab?
1
-
1Not silly; I remember a software program years ago that had a pop-up dialog, and a mandatory field on Tab2, with no indication on the tab. If you clicked OK on the first tab, it didn't give much feedback other than .. the dialog just sitting there, until you started clicking on other tabs! And worst scenario, in some cases depending on input on Tab1, sometimes a field on Tab4 was required...– Mark StewartJun 7, 2021 at 18:37
Add a comment
|
4 Answers
Try using a stepper instead of a form. Tabs are often used as a UI space tradeoff for complex details, and don't imply any actions or sequence.
I might not have the details of your use case, but it seems if it's a form, you want to suggest there's component parts of a total entity.
Using a material stepper is one option, and you can number the steps as an option as well. I'm not sure if your form has lots of optional elements, so in that case you might not need a 'done' checkmark for a section.
-
5these are effectively tabs but the next one doesn't activate until all mandatory things are filled in in all previous tabs Jun 7, 2021 at 12:09
-
5@ratchetfreak in that case, you can use prev / next buttons in steppers, that only activate once the required fields have been completed.– Mike MJun 7, 2021 at 14:09
-
1If you have a lot of tabs, you might want to go with a vertical list rather than horizontal - generally to the left side of the form content. (Whether you choose to force them all to be done in order or not is up to you.) Jun 7, 2021 at 18:26
-
-
3This is a bad solution - whenever I am forced to use these and I need to return to a previous step, I never know if the data that I have entered into the subsequent steps will be saved. With tabs, the user is led to assume that clicking on a different tab will not erase their data because the page doesn't change and because tabs imply that they are filling out a single form, not a series of different forms. Also, it is never clear if the numbered circles are links to previous pages, buttons on the current page, or non-clickable; I just don't know what is going to happen if I click them.– kloddantJun 8, 2021 at 14:43
This is often the compromise between a developer (hopefully not a designer) wanting some flexibility for the user to provide input but still needing to make sure that a lot of information can be submitted without error.
Otherwise they could either create a wizard/progress workflow and simply not allow the user to continue without completing the previous section or break the input down into smaller sections so it doesn't need to be grouped into a tab.
The 'mandatory' tab, or rather a form of 'input group' validation can be a rather unsightly UI pattern but not impossible to understand for the user. I think it also depends on how the content in the tab is designed but unfortunately it is not as unusual as you think it might be :p
answered Jun 6, 2021 at 23:36
-
2A useful tweak to the approach would be to--rather than indicating which tabs are mandatory--indicate which tabs do not presently contain valid content. It may be helpful (or perhaps confusing) to have icons which distinguish tabs whose contents are not valid, with tabs whose content is inconsistent with other tabs (e.g. one tab might control settings that may or may not be relevant, based upon the contents of other tabs).– supercatJun 7, 2021 at 17:23
-
@supercat do you have examples of this design pattern? Would be good to include in a separate answer :)– Michael Lai ♦Jun 8, 2021 at 3:07
-
1@supercat I don't know what it's called, but I've seen a proof of concept doing this 2-4 years ago. 8 or so tabs that turned green when they were done, yellow when mandatory information was missing, red when invalid and grey when not completely filled (but the missing information wasn't mandatory). The final tab had the completion step requiring all other steps.– MastJun 8, 2021 at 12:49
Why using a tab? Use instead a single page with some *mandatory fileds. Or as correctly indicated a stepper
-
1Underrated answer. A simple scrollable form with visually separated sections handles a very large amount of data in an intuitive way. Jun 8, 2021 at 18:58
-
1Showing a large form will decrease conversion rates. Breaking it into digestible chunks / independent parts of a long process can help keep the user engaged just enough for them to complete the task, without overwhelming them with a single wall of inputs. Smaller chunks also let the UI show the invalid entries more clearly (no need for scrolling as much).– friJun 9, 2021 at 9:57
When I faced a similar issue, we created a "General" tab that had everything that was essential to fill out. The other tabs were options they could select if they wanted to. This was for the "Edit Assignment" dialog of a course management system, so the general tab had the name, description, due date, and points. Other tabs were "Scoring" for adding more complicated scoring issues, "Online Submission" for assignments that had online submission and had some options, etc. The point is that everything that is essential to creating an assignment was visible from the "General" tab, but the more complicated options were in other tabs.
If all of the "essentials" do not fit on one tab, I suggest a stepper like other answers.
