2

I've got a combined input field "Geo Hierarchy". This field itself isn't mandatory. It contains 4 inputs: "Region", "SubRegion", "Area", "SubArea". Then the user starts filling this input only the first 3 inputs are mandatory, the last one is optional. Could it be shown visually that the last input is optional?

enter image description here

Now we're marking fields as mandatory using dots inside the field.

enter image description here

Proposal: to add mandatory markers to the appropriate fields. The proposal was rejected for this reason: Fields don't have mandatory markers that stand near their titles and if the field is mandatory this dot will be shown immediately (like in the example of Distance Catalogue Input). But discussed field Geo Hierarchy isn't mandatory itself.

enter image description here

Improve this question
11
  • 1
    Are the fields labeled as above? If you're labelling each individual field then you can just put (optional) as part of the label of the last field. If you're not labelling them then it's going to be a bit unclear to users what data the fields need anyway.
    – JonW ♦
    Feb 28, 2020 at 9:59
  • No, they are labeled together with one label only.
    – Vera Shutsikava
    Feb 28, 2020 at 10:02
  • Tha lack of space is always an issue in the system. So very often it's not a priority 1 to provide everything in a more clear way ((
    – Vera Shutsikava
    Feb 28, 2020 at 10:04
  • Why don't you use gestalt principles and color the 3 squares with one colour and 4th squares with another one ? Or you could put the three squares in a rectangle filled with color X, and then you put a label "Mandatory fields" written with color X, in this way you help the user to associate label to "mandatory fields"
    – Fedeco
    Feb 28, 2020 at 10:37
  • 1
    @bracco23 I added the reason for the rejection
    – Vera Shutsikava
    Feb 28, 2020 at 14:00

1 Answer 1

Reset to default
1

You will need some javascript for this situation.

As I understand that ANY 3 fields are required if the user starts to fill the Geo Hier... I would like to do as in the example:

  • Explain what should be filled with light grey and italic
  • Give extra information under the field
  • When the user starts to fill highlight the required advise
  • When move for any other input, or just after click on submit the form, check if is right or wrong and give the alert

About the required fields, I only understood that Distance Catalogue is a required field because you told me. As a user, I will never observe it. Please make the user life easier and don't reinvent the wheel. just use the traditional *. See the example.

P.S.: Any formulary is so boring. As UX Designers is our duty keep simple, clear and fast. And every information you can autofill using default information, please, do it.

enter image description here

Improve this answer
5
  • Thanks for the feedback. I have this improvement ticket in my list - to have a mandatory marker near the label, not inside the field (that looks more like a part of the value, as for me). But now we have that we have. Guess that they use this dot inside the field because of that complex fields that could contain mandatory inputs and non-mandatory.
    – Vera Shutsikava
    Mar 3, 2020 at 7:05
  • In this case, exactly the first 3 inputs are required, not any 3 of the group. Placeholders are a good idea, but we haven't got them in the system now as it's really professional and difficult tool that peoples are familiar with. Another issue is the lack of space. Usually, there are too many fields on each screen that's why each field is limited by its max value. This Geo Hierarchy has 2-4 characters in each input. So it's not too easy to put placeholders here.
    – Vera Shutsikava
    Mar 3, 2020 at 7:05
  • Oh, you have a lot of limitations. I suggest you try to get close to my suggestions and what is not possible you can think of an alternative. And if you can't add a placeholder and the field is quite complex, please, use some text under the field to explain or add a (?) aside the field to give all information that user needs. And considering that the first 3 is required, you should just add * in each field and save time not doing all these suggested interactions.
    – Rafael Perozin
    Mar 3, 2020 at 8:35
  • About required fields warning (*) you can use a circle inside the field, but make it red and add a notice at the end of the form.
    – Rafael Perozin
    Mar 3, 2020 at 8:44
  • I'm trying to make things more obvious here in the project :) So @BraDev many thanks for your recommendations. Hope, I could push the topic forward
    – Vera Shutsikava
    Mar 3, 2020 at 11:18

Your Answer

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

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