UI Design: Tabs or Submenu?

Ever wonder about the differences between tabs and submenu? They are more similar than we think.

Both represent multiple pieces of information, both are ways to conceptually organize and categorize information, and both have often similar use cases. When a submenu is placed vertically as a sidebar, it’s almost the same as the tab equivalent.

When you create tabs for a UI, try to answer this: why it’s not a submenu? Or vice versa. Occasionally it’s not so easy to give a definitive answer.

One criterion we can use is how much a user needs to be aware of all the pieces of information, especially when the user is trying to complete a major task in the respective system:

  • If that awareness is critical for the users to complete primary tasks (which often implies the entries to all the pieces should be constantly present), then tabs is usually the better choice.
  • Compared to tabs, submenus are often more indirect and usually take more effort (time and cognitive load) to get to.
  • Tabs usually contain all the pieces of information that are critical for the user to complete primary tasks – without being aware of and having access to those pieces, the user may not be able to complete a primary task. While in the case of submenu, the user doesn’t have to be aware of all the available sections under a menu item in order to complete her primary tasks.

Therefore, like many other design decisions, the choice between tabs and submenu comes down to statistical significance, much more than any other superficial considerations.

UI design decisions are often less about UI itself, and much more about the usage and the result. Less about art, and more about science.

{END}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s