Default
Hover
Disabled
Active
Only use tabs when users don’t need to see content from multiple tabs simultaneously.
Tabs should be arranged in a logical order that makes sense to the user. The default tab should be first and contain the most important/frequently-read information. The following tabs should be arranged in order of importance or logic.¹ Tabs also remain in a consistent order regardless of which tab is selected.² If tabs are not organized in a logical way it increases the users' cognitive load.³
Do
Don't
Write short, clear labels, one or two words max in most cases. Use parallel construction--every item should be a noun or a verb. Avoid repeating words if possible.
Use sentence case. Never use ALL CAPS in tab labels because it’s harder for the user to read.²
The tab heading should clearly describe how the tabs are related.
Do
Don't
“8 Tips to Get Tabs Right in Web Design.” Justinmind, www.justinmind.com/blog/8-tips-to-get-tabs-right-in-web-design/.
World Leaders in Research-Based User Experience. “Tabs, Used Right.” Nielsen Norman Group, www.nngroup.com/articles/tabs-used-right/.
World Leaders in Research-Based User Experience. “Minimize Cognitive Load to Maximize Usability.” Nielsen Norman Group, www.nngroup.com/articles/minimize-cognitive-load/.
