Clarifying default values

Design Thinking
#1

Hello everyone. I am new to this forum, so correct me if this is not the correct category for this topic.

I am building a configuration editing tool where the user can browse and edit potentially huge configuration sets.
In this context, it is important to show really clearly if a configuration value is set, not set, mandatory or set to the default value.

Most of these cases are trivial.
value is not set -> value field is empty
value is set -> value field shows the value
value is mandatory -> value field marked with *

But what about when the value is set to the default value. As I mentioned before, it is really important that this differs from when the value is set to another value. Here are some of the approaches i tried:

Value is set to default value -> value marked with *.
cons: Conflicts with mandatory indicator

Value is set to default value -> value greyed out.
cons: Conflicts with ā€˜placeholderā€™ value in input field. Also reads as the input field is disabled.

Value is set to default value -> value is in parentheses.
cons: Non standard (?) indication of default value.

What are your thoughts? Do you know of proven ways to indicate default values?

2 Likes
#2

Can you give us a wireframe or something visual to work off of? Iā€™m having a hard time envisioning what youā€™re trying to explain.

The only advice I can give you from what you said is to avoid using color alone to convey meaning, even if that means graying out a value. Itā€™s an accessibility liability, and one that needs to be abandoned.

1 Like
#3

Fair enough. Lets see if I can clarify. Look at these input fields.

The top value is 20. The middle value is empty, but the placeholder is used to show the range of values that are valid for this field. The third value is mandatory, and that is indicated by an asterisk by the name of the field.

(To be continued in the next post since I am only allowed to upload one image per postā€¦)

#4

(ā€¦post continued)

It so happens, that 20 is the default value for ā€˜conect-timeoutā€™, and I need a way to make this clear to the user. Here are are a few solutions on how to do that.

Now, as mentioned in the original post, there are conflicts with using lighter color or an asterisk so my suggestion would be to use the parenthesis.

What are your thoughts on this. Is there a better solution?

#5

hi @jakob_jc_cederquist

in my opinion, you should solve two problems here:

  1. display a straightforward UI to allow users to quickly understand what is read-only and what is editable
  2. deliver a UX pattern to help users to understand the connection(s) between data

1204Ɨ837 30.8 KB

I strongly suggest using the ā€œplaceholderā€ input attribute according to HTML semantic
From W3C:
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.)

2 Likes
#6

Iā€™ve got a couple ideas:

  1. What if you showed the default value, and valid range, or other useful information in a tooltip kind of interface. If its touchscreen, I think other there are ways to implement the hover-over tooltips, depending on your platform.

  2. At the very top, you have a toggle that switches between show or hide details (like defaults & valid ranges).

What is your platform? web/desktop/tablet/native phones??

3 Likes
#7

Thank you @dopamino for your input.
I am using a UX pattern for editable/read only that i think is working.

My problem is specifically with default values. I want the user to be aware that the currently set value is the default value. And doing so at a glance, without explanatory text.

I will go with the parenthesis approach for now and then try to get some user feedback.

#8

Thank you @debvorndran for your input.
The tooltip is already used for additional info on each field. It could of course include the default values there, but I want the indication of a set value being the default value to be non-cluttering, and without explanatory text.

#9

My suggestion would be using the same formatting type as user entered text.
But add a line below the text field saying "The default value has been entered for x."
If it is a editable field, then add ā€œThis value can be modifiedā€.

1 Like
#10

Thank you @Sridhar for your suggestion.
I will try to find a solution that doesnā€™t need descriptive text. But if nothing else worksā€¦