Ask How can I successfully integrate pop-ups with Minimalist UI?

[Brajet]

Hi everyone. Over the last 6 months, I've built a pretty good UI using Minimalist. I have been making improvements using the decluttering card and lovelace-gen to build templates for floors/rooms/devices/etc.

Recently, I've been using Bubble Cards to improve the aesthetics of my cards, and have begun looking into how I can use Pop-Ups to improve the usability. I've watched a couple videos and used the UI to create some simple Pop-Ups successfully. Now that I'm ready to try and migrate my code to use Pop-Ups, I've noticed that my "paths" for my pages are not playing nice with the Pop-Up hashtags.

For example, if I'm on my /home page and I click on a Nav to my main floor, the page becomes /floor_main. However, if I click on a hashtag Nav called "popup", it goes to /home#popup instead of /#popup.

 

[Anthony Joshua]

In my experience, timing and placement matter a lot. For Minimalist UI, I prefer pop-ups that appear only when necessary, like after a user scrolls halfway or tries to leave. You don't want a huge box covering the content. A small, clean pop-up in a corner or center works best, with minimal text and one button. The less it interferes, the better it feels with the Minimalist style, and users are more likely to interact with it.

 

[Felix😎]

To integrate pop-ups with a Minimalist UI, keep the design clean and simple. Use plenty of white space, a clear and concise message, and one strong call-to-action (CTA). Avoid flashy colors or animations that clash with the minimalist theme. Also, make the pop-up small and non-intrusive, and ensure it's easy to close. Timing matters too—trigger the pop-up at the right moment, like after some scrolling or when the user is about to exit.