How to identify UI patterns in a screenshot
To name an unfamiliar UI element, do not rely on its shape alone. Check where it sits, what contains it, which state is visible, what action it appears to support, and whether it changes the current view or opens a new surface.
A five-signal method
1. Placement
Is the element fixed to the top or bottom edge, floating over content, embedded in a form, or attached to another control?
2. Containment
Does it belong to the page, a card, a dialog, a sheet, or a navigation region? Containers often narrow the possible name.
3. Hierarchy
Does it switch top-level destinations, filter one view, reveal detail, or trigger a single high-priority action?
4. State
Look for selection, expansion, progress, loading, validation, disabled controls, or a temporary notification.
5. Interaction purpose
Ask what a user would expect after clicking, tapping, dragging, typing, or dismissing it.
Common look-alikes
The same rounded rectangle can be a button, tab, chip, field, or status label. Context separates them:
| What you see | Likely pattern | How to tell |
|---|---|---|
| A persistent row at the bottom of a mobile screen | Bottom navigation / tab bar | It switches between a small set of top-level destinations and keeps one destination selected. |
| A compact row of mutually exclusive choices | Segmented control | It changes a local view or filter without navigating to a different top-level area. |
| A panel attached to the bottom edge | Bottom sheet | It appears above the current screen as a temporary surface and is often dismissible by swiping or tapping outside. |
| A small message that disappears on its own | Toast | It provides brief feedback without demanding a decision or interrupting the current task. |
| A round, visually dominant action over content | Floating action button | It floats above the layout and represents the screen's primary action. |
| Gray placeholder blocks before content appears | Skeleton screen | The placeholders approximate the final layout while data is loading. |
How to use a screenshot responsibly
- Crop only when context is still clear. An overly tight crop can hide the placement and container that determine the name.
- Remove sensitive information. Redact personal messages, account details, customer data, and private project content before uploading.
- Ask for several candidates when uncertain. A visual label should be supported by multiple signals, not one decorative detail.
- Verify the definition. Compare the suggested name with a curated catalog entry and the interaction you observed in the actual product.
Frequently asked questions
How can I identify a UI element from a screenshot?
Check its placement, containment, visible state, apparent behavior, and interaction purpose together. Then compare those signals with a UI pattern catalog instead of naming it from appearance alone.
What is the bar at the bottom of a mobile app called?
A persistent bar that switches between top-level destinations is usually bottom navigation or a tab bar. A row of context-specific actions is more likely a toolbar or action bar.
What is a panel that slides up from the bottom called?
A temporary surface attached to the bottom edge is commonly called a bottom sheet. If it blocks the page until the user responds, it may behave like a modal bottom sheet.
Can AI identify UI components in screenshots?
AI can suggest names for visible interface patterns, but the result is probabilistic. Check each label against the element's context and a curated definition before treating it as authoritative.
Try the method
CatchUI is a bilingual vocabulary and learning tool. It identifies recognizable UI patterns in screenshots, links them to curated definitions, and lets users keep useful examples. It does not generate code or clone an uploaded interface.
Published and last reviewed: 2026-08-03.