0

Long story short: I need some mandatory date picker component (for an expiration date of a certificate) which can be made optional by an active click from the user (if the certificate is valid permanently). What may be a good design for this such that

  1. the dichotomy between "pick an expiration date" and "select "No expiration date" is clear,
  2. by default, we assume that the user will pick an expiration date (i.e. if not, he has to do an active click),
  3. no custom date picker is required.

enter image description here

More detailed description:

  • Left picture: In my webapp, a user can create a profile of himself - for this, he can also choose a certificate he has and assign it with its profile. In order to do this, he has to choose the certificate from a list and then enter the issue date, the expiration date and upload a reference. All of these input fields are mandatory.
  • Middle and right picture: Now there are also certificates without expiration date, so the user should have also the option to mark some (lifelong) certificate with "No expiration date". Some day the design for this has been chosen like this (middle/right picture).

However, this implementation looks a little unattractive: a positive entry (activate checkbox) leads to a negative action (date picker is deactivated).

I am therefore looking for a better solution.One idea would be to replace the "Expiry date" label above the corresponding date picker with a checkbox with label but I'm unsure if this solution misuses a checkbox as a label.

What alternative designs are there for this purpose, to make the date picker for the expiration date "on request" optional?

It is very important to minimize the risk that a temporary certificate is inadvertently created as permanent, hence simply making the expiration date field optional is out of the question - the user must actively deactivate it in some way (and must not simply forget it under any circumstances). Additionally I'd prefer to use the native browser date picker and avoid manually creating my own input component that accepts both inputs (date or "no expiration date").

2
  • 2
    A text that is too long for something that could easily be summarized with a simple mockup and a brief explanation.
    – Danielillo
    Commented Aug 9 at 20:56
  • 1
    @Danielillo you're absolutely right, i didn't see the wood for the trees. I now made it more concise and added a mockup.
    – ATW
    Commented Aug 9 at 21:37

1 Answer 1

0

Actually, what you did is the best solution.

About this:

a positive entry (activate checkbox) leads to a negative action (date picker is deactivated).

This can be interpreted differently: there are no additional requests.

The problem is that you consider the checkbox activation as positive when it has no inherent value, neither negative nor positive. Imagine a scenario where the label for a checkbox is "No": checking the box would imply a negative value, and that would be correct.

However, if you remove the concept of negative/positive value, checking that box could simply mean "Done! No more tasks to do!" which is incredibly positive.

4
  • Thank you very much! Sounds plausible… but what about the position? For me, it gives a feeling of a fourth input field which is not the case as it is the "second half" of the expiring date picker…
    – ATW
    Commented Aug 9 at 23:01
  • In fact, the "positive/negative-problem" is actually based on a different problem: How the selection of the checkbox will be saved in the corresponding entity. Either I can save it just as it is, i.e. as boolean flag isNotExpiring – as negated boolean value which may be very confusing (reading something like isNotExpiring=false). The alternative is to use an attribute isExpiring and to invert the selection before saving it – what also seems suboptimal and non-robust for me. That’s the actual problem why I put this positive/negative behaviour to discussion.
    – ATW
    Commented Aug 9 at 23:28
  • I‘m anyway no designer but a developer, so my thought does not come from "users won’t understand this design" but rather from like "such a design will cause problems and bugs for us as developer". It seems wrong to me to write "true" to the database when a user selects some "no"-option like "no expiring date".
    – ATW
    Commented Aug 9 at 23:32
  • @ATW Is this a programming issue? If it is, you should ask for ideas on the stackoverflow forum. This forum is focused only on UX-related questions. Here we debate the UI that real users can see, not how developers built it.
    – Morco
    Commented Aug 10 at 9:57

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.