Tabs are used to show content that:

A.is not needed to be shown simultaneously and

B.has a relation with similar hierarchy (like different chapters of a book)

In the following case this web tool that I'm working on has the following function: A user creates a group of rules and then switches to another tab to get the numeric results that were formulated based on those rules.

So the two tabs have a cause and effect relation.

I'm trying to back up why this is not a good structure and find alternatives (navigation bar for example).

Thank you all in advance ! enter image description here

enter image description here

  • Is this a one step process or you can keep on changing results by adding new rules?
    – Sheraz
    Commented Jun 22, 2018 at 13:10
  • Alright. Do you think that it is necessary to show the results in the full view width wise?
    – Sheraz
    Commented Jun 22, 2018 at 13:17
  • Yes ,the results include a lot of data . Plus the rules list can become long . Commented Jun 22, 2018 at 13:19

1 Answer 1


First of all

I found a little misuse here. The "Create Rule" label describes an action. If I want to segment content I would prefer to use nouns which describes better the type of content to be found and anticipates more accurate expectations. If I use a verb I could expect to actually create something new that doesn't exist yet.

From what I can see on your wireframes you are displaying a list of existing rules so the relation between the tab label and the actual content is wrong.

This is in line with point 2 in NN Group's 12 guidelines for tab controls article:

Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this “mini-IA” problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.

Found in: Tabs, Used Right By NN Group

Cause/Effect Relation tabs

Now, particularly on Cause/Effect Relation tabs, we will need to have a broader perspective. What is the context of these rules? Is the information shown under "See Results" only related to the rules on the first tab? Or could we see other things? How is this used or expected to be used? are they constantly creating rules and checking results? is the same user creating and checking the results? or is there a case situation to create rules and another to review results?

For this case I would consider the first point in NN Group's 12 guidelines for tab controls article:

Use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place.

Let's Use an Example

Let's imagine this website is for a chatbot services company. In this website I can create and train my bot so, simply put, I will have a list of sentences (your list of rules) where I can create/add new ones. I will also have some results (your results) where I can review the performance of these sentences.

In the context of the creation and configuration of a chatbot, normally, we can collect and review different metrics other than sentences performance. Thus I could expect to have a place for that. We could call it "Bot Performance" page. On the other hand, I would have a place to train my bot. We could call it "Trainer" page.

Under the first one ("Bot Performance") we will find "Sentence Performance" tab/filter/page amongst other metrics. Under the other page ("Trainer") we could manage our sentences. You can create new sentences, edit existing ones, etc.

Bonus Feature

If we see that it is useful for the user, we can have a "View Sentences Performance" link/button as part of the actions that you can perform on your existing list of sentences under "Trainer" directing the user to the "Bot Metrics" page displaying "Sentence Performance".

As a Conclusion

In this example, I considered that there will be a first moment where you will be creating your bot. In this case, you haven't tested it in real life situations yet so you don't care about results (basically there are no results).

In a second stage (the bot has been in the real world for a while) you could be more interested in collecting results and draw some conclusions before going back to your list of sentences to edit or create new sentences (a third stage).

Also it may be that a Conversational Designer is in charge of the training and a Marketing Researcher is in charge of drawing conclusions by reviewing the bot performance.

To sum up I will rather use a navigation bar. Later I will continue iterating and I will try to understand better who is in charge of what and how they use it.

  • Hi Joel and thanks for the well thought answer. You are right about the titles , they are generic just to explain in the example what each section really does. Each user has to move back and fourth between the 2 sections and create with the help of rules a statistic sample that he wants. The "results" are basically stats he needs to formulate after creation and some adjustments. I was to thinking of a navigation bar. Thank you again for your time. Commented Jun 25, 2018 at 9:10

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.