u/verba_volant

Hi everyone,

// Also just to be clear, I had AI help me write this post, my technical english is not that good and I had trouble explaining exactly my issue, sorry if this feels too... formal...

I’m struggling with a UI/UX problem around mixing auto-saved controls and manually saved form fields on the same screen.

Here’s the use case:

A user profile has some basic fields like:

• First name
• Last name
• Location
• Other standard profile information

The same user also has a list of skills. Each skill is stored as a related database object, with a name and a value. In the UI, these skills are represented with sliders.

On the same screen, I’d like to display:

• The basic profile fields, which are only saved when the user clicks a button like “Save” or “Update”
• The skill sliders, which update directly in the database as soon as the user changes their value

My issue is: how do I make it clear to the user that some changes require clicking a save button, while others are saved instantly?

If everything is shown at the same visual level, I’m worried users will naturally click “Save” even after changing only sliders, even though that button has nothing to do with the sliders.

Things I’ve tried or considered:

1. Showing toast notifications after auto-saved slider changes This gets noisy very quickly, especially when the user changes multiple sliders in a row.
2. Splitting the page into tabs One tab for basic profile fields and one tab for skills. This is clearer conceptually, but the basic profile tab feels almost empty and visually awkward.
3. Using cards or separate sections I tried isolating the profile fields and skills into separate cards, but I still can’t find a layout that makes the behavior obvious enough.

So my questions are:

• Are there established UX patterns for mixing auto-save and manual-save interactions on the same screen?
• Should auto-saved controls and manually saved fields always be visually separated?
• Is it better to avoid mixing these two behaviors entirely?
• How would you structure this kind of page so users immediately understand what is saved automatically and what requires confirmation?
• Is there a generally recommended or “safe” pattern for this?

I’d love to hear how you would approach this from a UX/UI design perspective.