Tabs, segmented controls, and filters can look similar, but they represent different interactions. Choosing the wrong pattern makes an interface harder to predict, especially when users cannot tell whether a selection changes the page, changes the presentation, or removes items from a list.
Use tabs to move between peer sections within the same context. A customer record might contain Overview, Activity, Invoices, and Files. Each tab represents a distinct content area, and the active tab should be reflected in the URL when users may bookmark, refresh, or share it.
Use a segmented control for a small number of closely related modes. Switching between Grid and List, Monthly and Yearly, or Preview and Code changes how the same information is shown. Segments work best with two to four short options. If the labels need explanation or the set keeps growing, another pattern will scale better.
Filters reduce a collection based on attributes such as status, author, date, or file type. Users should be able to combine filters when that matches the data. Show active filters clearly and provide an easy way to remove one or reset the entire set. A filtered result should not look like missing data.
The key question is what remains stable. Tabs change the current section. Segmented controls preserve the content but change its mode or view. Filters preserve the collection and narrow which items qualify. This distinction should also guide accessibility semantics, keyboard behavior, and browser history.
Avoid stacking all three patterns without a clear need. If a screen includes tabs, segments, filter chips, and a dropdown above the content, users must decode too many layers before reaching the information. Simplify the structure first, then choose the control whose behavior most closely matches the user’s intention.
