Module Tabs Design pattern

Problem summary

The user needs to browse through a series of tabs without refreshing the page

Example

ModuleTabs

Usage

  • Use when there is not enough space on the website to show all of the content inside all tabs – or if such a listing is irrelevant.
  • Use when there are more than 2 sections
  • Use when there less than 8-10 sections depending on the length of each section name.
  • Use when section names are relatively short
  • Use when the content of each tab can be viewed separate from each other, and not in context of each other.
  • Use when the content for each tab has similar structure
  • Use when you need to show what tab is currently being viewed
  • Do not use when the content inside each pane would function just as well in its own separate page.

Solution

  • Present the content of one tab inside a box (content area)
  • Place a horizontal bar on top of the content area with links representing tabs
  • Refrain from having more than one line of links in the top horizontal tab bar
  • Use color coding or other visual support to indicate what tab is currently being viewed
  • Present the content of each tab in the same content area
  • Only one content area should be visible at a time
  • Maintain the same structure of the top horizontal tab bar after a new tab has been clicked
  • Only the content area of the tabs and the horizontal tab bar should be changed when a user clicks a new tab
  • If possible, the page is not refreshed when a tab is clicked.
  • A new page is not loaded when a tab is clicked

Rationale

  • Navigation tabs lends itself from the physical metaphor of a folderes in a file-cabinet and is thus familiar to the user.
  • Module Tabs provide an easy way to show large amounts of similar structured data parted by categories
  • Tabs place the content area of the tabs into a context as the selected tab has been highlighted.

More example images of the 'Module Tabs' pattern

  • ModuleTabs

    From canon.com.

  • ModuleTabs

    From cbs.com.

  • ModuleTabs

    From intuit.com.

  • viget.com

    You can choose to either search for your content at viget or browse the content by category or by chronological order presented in module tabs.

9 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 83 votes, 67.47% like this one.

Example images

  • ModuleTabs
  • ModuleTabs
  • ModuleTabs
  • viget.com
  • foodnetwork.com
  • www.jorgerigabert.com

Related links

See it in action

Related articles