.png)
Understanding UI Elements Through Everyday Objects
Radio Button
In old radios, you could press only one button at a time — pushing a new one would pop the previous out. That’s exactly how radio buttons work in UI: only one option can be selected within a group.
Purpose: Perfect for mutually exclusive choices, like selecting gender or payment type.
Snackbar
A snackbar is a small pop-up message that gives users a quick update — like “Item added to cart” or “Message sent.” It’s called a snackbar because it offers a small bite of information that disappears automatically.
Purpose: To give non-intrusive feedback without interrupting the user’s flow.
Toast
Ever seen a message pop up from the bottom of your screen saying “Message sent”? That’s a toast notification — it “pops up” just like a slice of toast from a toaster.
Purpose: To provide short, temporary feedback without requiring action.
Chips
The Bento grid layout takes inspiration from Japanese bento lunch boxes — perfectly organized compartments, each serving a specific item. In design, it’s used to display different types of content in a visually balanced way.
Purpose: To highlight diverse information in a structured yet dynamic grid.
Tabs
Tabs divide content neatly — much like colored tabs in a filing folder that help you quickly switch between categories.
Purpose: To allow seamless navigation between different sections within the same view.
Bento Grid
The Bento grid layout takes inspiration from Japanese bento lunch boxes — perfectly organized compartments, each serving a specific item. In design, it’s used to display different types of content in a visually balanced way.
Purpose: To highlight diverse information in a structured yet dynamic grid.
Breadcrumbs
Just like Hansel and Gretel left a trail of breadcrumbs to find their way home, breadcrumbs in UI show your path within an app or website — helping you navigate back easily.
Purpose: To enhance navigation and reduce confusion in deep page hierarchies.