ui patterns
Tabs
Tabs slice one area of the screen into parallel panels and show just one at a time. They keep a page short by hiding all but the panel you've picked - which is the whole trick, and the whole risk.
The demo
A product page with four sections. Read it as tabs, then switch it to one long page - and notice how much the tabs were keeping out of sight.
Overview
The Allotment kettle: a 1.7-litre stainless flask with a quiet boil and a hinged lid. Pour-stop spout, cool-touch handle, hides its cable in the base.
Specs
- Capacity: 1.7 litres
- Power: 3000W
- Weight: 1.1kg empty
- Warranty: 2 years
Reviews
"Boils fast and the handle stays cool." - 4.5 out of 5 from 212 buyers. The recurring gripe: it's louder than the listing lets on.
Delivery
Standard delivery is £4.95 and takes 3-5 working days. Returns are accepted for 14 days, but you pay the return postage.
Tabs mode: three of the four panels are hidden right now - including the delivery cost and the returns terms.
What this demo shows (text version)
The same product information - overview, specs, reviews and delivery - is shown in two layouts. In tabs mode you see one section at a time and click a tab to swap to another, so three of the four are always hidden. In one-long-page mode every section is stacked and visible together.
The point is the trade. Tabs keep the page short and scannable, but they bury everything you didn't pick - and people often never click past the first tab, so a detail like the £4.95 delivery charge can go unseen right up to checkout. A long page shows everything at the cost of length. Tabs suit parallel content you rarely need to compare; they hurt when the decision depends on facts spread across several panels.
Flip to "one long page" and everything you just had to click for is suddenly there at once. That's the tab bargain laid bare: tabs buy you a tidy, scannable surface by burying every panel you didn't choose behind a click you might never make.
Tabs are for content that's genuinely parallel and rarely compared - pick one view, ignore the rest. The moment people need to hold two panels in their head at once (specs against reviews, this plan against that one) tabs turn into a memory test, because you can only ever see one side of the comparison.
My rule: never hide anything load-bearing in a non-default tab. If a detail decides the sale - the delivery cost, the cancellation terms - it shouldn't live behind a click most people won't make. Tabs tidy the page; they don't excuse hiding the thing the page is for.