I have made an ESP interface which contains a settings page for an ESP in which the user can change various settings.
I have developed both front and back ends.
I have divided the page into several forms, each corresponding to a functionality of the ESP.
I store the settings in a json file. Every setting has a default value.

Let's take the following form:

  • the Output tab is a separate form
  • the Reset button is explained further in the question


It has:

  • Input 1 IP Address and Port 1
  • Input 2 IP Address and Port 2
/* defaults */
    "input": {
        "ip_1": "Not Set",
        "port_1": "Not Set",
        "ip_2": "Not Set",
        "port_2": "Not Set"

Whenever the user presses Save a json similar to the one above is sent to the server. If an input is empty, say ip_1, it will be sent as: "ip_1": "" inside the input object alongside the other keys (port_1, ip_2, port_2). The server ignores received empty values. This is done so that the user can update/change each setting separately.

I want the user to be able to input new values, update/change the previous values and reset the value to nothing/default (let's say the user won't need to use the INPUT functionality) and be able to do any of the previously mentioned actions for each individual input (ip_1, port_1, ip_2, port_2).

But what if the user decides to stop using the Input functionality ? If the user hits Save with empty inputs, the values will not change.
This is why I have thought of a Reset button for each form, but after placing it in the form it looks veeeeeery ugly and most probably it will confuse the user.

Lower in the settings page I have a form called Factory Reset with two buttons:

  • Soft Reset : Reset settings but keep Network Configuration:
  • Factory Reset : Reset all settings:

But I can't let the user reset everything each time he doesn't want to use some functionality.

How should I handle this ?

  • 1
    If the user has previously set the values, why are they not pre-filled into the input fields? I'm thinking leaving the field empty should mean "Not set". Fundamentally, it seems to me (if I understood this right) that an empty input field can mean two different things, and I think that is the core issue of this design lies. If you can remove the ambiguity, you'll probably also solve the problem you're facing.
    – Chris
    Oct 21, 2021 at 18:29
  • I am having troubles removing this ambiguity. I can't figure a proper way to do it. Oct 21, 2021 at 21:58

1 Answer 1


What you're facing is more of a technical challenge than a design challenge. Ideally, your data structure should be such that it should be able to handle the differentiation between an empty state and a dirty state.

The solution that comes to my mind is maintaining a data structure akin to the Delta JSON structure that Quill JS uses.

While it doesn't align with your ask 1-to-1, given that the Delta is capable of handling changes to complex rich-text data, you should ideally be able to create a simplified version of the Delta data structure to address your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.