0

I've got a somewhat irregular case: I need a user to fill in two values in a placeholder text. On the screen, there are a total of 4 placeholder texts. two of them are required, two of them are not. How do show which ones are required and which ones are not without compromising in design?

  • Using placeholders for labels is almost certainly a bad idea. – Kit Grose Jul 16 '14 at 23:54
  • I'm not using a placeholder for a label but for a button as placeholder text. Basically a 'fill in the blanks' exercise as you'd get in highschool, but with some predefined generic words to give the user a sense of what should be in there. – bdv Jul 16 '14 at 23:59
  • So it's a madlibs style form? How does that work with optional inputs at all? – Kit Grose Jul 17 '14 at 5:25
  • @KitGrose yes, that's exactly the case – bdv Jul 17 '14 at 12:53
1

I have a couple of ideas.

One possibility is to embolden the placeholder text of the required ones. That may not be very intuitive but it should at least indicate that there is a difference and they may be able to then infer from the fields that those are required and the other aren't. Likewise, you could italicize optional fields.

Another is to add "(required)" after the placeholder text that is currently there. More straight-forward but possibly less "pleasing" depending on who you ask.

  • We actually went with the first idea, and animated a 'proceed' button after the first two fields were filled in. – bdv Jul 29 '14 at 9:47
1

Here's one alternative option (obviously the actual madlibs form design will be different in your case, but hopefully you can see how you might allow the user to optionally add or remove a "sentence" of form controls):

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I like the thinking! :) I don't really like that users have to opt-in before performing another action, as it might add more difficulty to the task. In the end we went with displaying the required arguments with a bolder color and the non-required ones with some opacity. I'd upvote your answer but havn't got enough rep yet, but it will come ;) – bdv Jul 29 '14 at 9:45
0

If inputs has border then You can play with border color for example required a bordered black and additional in gray color. Or use * sign for placeholder text and label

  • It doesn't have a border, and the * sign just feels really out of place as we are using a rather minimal design. – bdv Jul 16 '14 at 14:18
  • Is it possible to see the design? – nightning Jul 16 '14 at 16:31
  • @nightning No, I would like to post it here, but I'd rather to keep this confidential for now. Please see my comment on the question to get a bit more sense of what the design might look like. – bdv Jul 17 '14 at 0:04
  • 1
    @bdv Okay so is it safe to say there's a line underneath each text input. Consider using a different color for the line (say some shade of red since that's typically the color used for required *). I hope you also have validation on the form... it ought to be enough of an indicator along with validation notices that those 2 fields are required. – nightning Jul 17 '14 at 22:13
0

The most succinct - and generally most commonly used - way to distinguish a required field in forms is to use an asterisk next to the label (*). This way a user can easily distinguish which fields are required and which are not. So for example this pattern could look like:

Label *
[ input with placeholder/code hint text]

If you think this could potentially be confusing you could add a footnote at the bottom of the form explaining * = required but even on sites such as Smashing Mag, all they use is the symbol as it is very commonly used.

In cases where all the fields would be required perhaps the asterisk isn't completely necessary, but you'd have to make sure what information is present in these forms is obviously necessary in some way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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