Colour customisation
When getting set-up with Dia Browser, the customisable colours update the mock-ups dynamically.
Design Examples
Tooltip Design: Real UI Examples
See how companies like Spoil Me, Dia and Spotify use tooltips and live previews, including self-hiding onboarding tips and mock-ups that show what a setting changes.
Real world examples:
Updated: 23/09/2026, view all 1,482 examples
Examples on Built for Mars include
Spoil Me auto-hides tooltips to save clicks
Spotify previews zoom sizes before you pick
Play's onboarding lets you try real controls
Drag and drop onboarding
Play is a drag-and-drop design app. The components they show as examples during onboarding are interactive, and you can use them to modify the onboarding itself.
Demonstrating template sizes
When changing the zoom level on Spotify, they’ll use mock-up images to demonstrated what the layout will look like.
Dynamic preferences on Shop
When setting your preferences, you'll see a selection of items that dynamically highlight (or get more opaque) depending on your choices.
A unique colour selection process
Timepage offers a unique way to choose your theme colour by dropping animated balls on the screen.
Zero-click onboarding
Subscribe to unlock this example
Plans start from £8 per month
Figma's interactive hero
Subscribe to unlock this example
Plans start from £8 per month
There are more than 1400 UX Bites like this
Subscribe to BFM+
If features can be coded in minutes, thoughtful design is what wins
- Unlock the entire library
- Create custom UX courses
- Access our AI tools
£8/monthbilled annually
or, wait for the free stuff
Join the free newsletter
Get the free content when it's released, straight to your inbox, no account required
"An exceptional resource for learning how to build habit-forming products that people love."
"I’d never met anybody who looks at usability and UX the way I do until I met Peter. Only he’s smarter."
"The completest view of the psychological underpinnings of human behaviour that I’ve ever seen."
"What a nice idea! Christopher Alexander would be proud to see patterns collected like this."
FAQs
When should an onboarding tooltip hide itself automatically?
Auto-hiding removes the click needed to dismiss each tooltip, so onboarding moves faster. It only suits short, easy-to-understand messages. With longer or more complex tooltips, people may not finish reading before the tip disappears.
How do you show what a setting will change before someone applies it?
A mock-up that updates in real time explains the effect better than a text label. For example, Dia's theme picker recolours the buttons and chats in its set-up mock-up, so people see exactly which elements a colour will affect.
Why use preview images for layout or size options?
Previews let people decide instantly, rather than applying each option and waiting for it to load. For instance, Spotify's Dense, Default and Spacious thumbnails make it obvious when a zoom level would be far too small.
Does a dynamic preview need to show real content?
Not always. As an example, Shop highlights a set of items as people choose their preferences, but they aren't real, clickable products. The goal is to make the choice feel heard, which can matter more than functional accuracy.
Can a playful selection interaction hurt usability?
It can. For instance, Timepage has people choose a theme colour by dropping animated balls onto the screen, which is memorable but arguably an inefficient way to pick a colour. Novelty works best when it doesn't slow down the task itself.