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?
4
-
Using placeholders for labels is almost certainly a bad idea.– Kit GroseJul 16, 2014 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.– bdvJul 16, 2014 at 23:59
-
So it's a madlibs style form? How does that work with optional inputs at all?– Kit GroseJul 17, 2014 at 5:25
-
@KitGrose yes, that's exactly the case– bdvJul 17, 2014 at 12:53
Add a comment
|
4 Answers
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.– bdvJul 29, 2014 at 9:47
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):
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 ;)– bdvJul 29, 2014 at 9:45
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.– bdvJul 16, 2014 at 14:18
-
-
@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.– bdvJul 17, 2014 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. Jul 17, 2014 at 22:13
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.
answered Jul 17, 2014 at 11:32
