2

I have an app with basic user profile fields editing functionality. Each field presents the field name, the field value, and an edit button (e.g a pencil).

My question regards what I display on those fields when they haven't been filled in yet. I don't care about the exact text inside, but I do care whether this text will be specific for each field or generic.

Example (specific empty field captions):

Name:    No name specified yet     ✎
Age:     No age specified yet      ✎
Address: No address specified yet  ✎

Example (generic empty field captions):

Name:    Not specified yet         ✎
Age:     Not specified yet         ✎
Address: Not specified yet         ✎

Which one is preferable and why?

Improve this question
1

4 Answers 4

Reset to default
4

Regarding "No ... Not ..." – The human brain doesn't get negative messages that good. Example: Don't think of tasty ice cream! Yes, YOU in front of the display: Don't think of
TASTY ICE CREAM NOW!
(personal address, repetition, markup and immediacy intensify :)

Be positive and guide your users what to do, e.g.:

  • Name: Your name goes here ...     ✏️ – if it's the user's name (personal address!)
  • Name: Your name ...     ✏️ – for brevity
  • Name: Customer's name goes here ...     ✏️ - be as specific as you can
  • Name: Customer's name ...     ✏️
  • Name: Supplier's Firstname Lastname ...     ✏️ – be even more specific than you can ;)

These are better than, e.g.:

  • Enter name here ...

because:

  1. the essential is at the very beginning and such users don't even have to read the rest (mentally),
  2. everybody familiar with a computer knows that text fields are there to enter something, so why repeating it over and over again (at the beginning)? That's just unnecessary word repetition.

I second @Jos van Weesel's answer and @bloodyknuckles comment.

Improve this answer
2

Specific empty field captions

Pro: Having placeholders that relate back to the label quickly tells the user what this field is for, which means that the user doesn't necessarily has to read the label, which in some cases can increase the speed and ease of use of filling in a form.

Reminder to not replace labels with placeholders. Placeholders should only serve as a hint/guidance, not as the label itself.

Con: There is a concern that having so many different placeholder texts could lead to confusion as to which fields have been filled in or not. If every placeholder reads the same (example: "Select..") then it is fairly easy by comparison to find the fields that haven't been filled in yet. Consistency makes everything easier.

So try to make the difference between filled in and not-filled in fields clear, for example by making placeholder texts lighter than selected options or giving the filled-in fields a green border or checkmark icon.

It might also be a good idea to A/B test your question with your specific user base and see what works best based on those results. In this case you wouldn't necessarily be testing conversion, but speed of completion.

Read more about placeholders here

Improve this answer
2

Building off of @MarcoTatta 's answer, you can add the labels inside the input field and then have that label append to the top of the input box when the user enters in some information. Something like this:

Label overlaying border dynamically

See also an animated example for a new post at Adobe:

New Post - Adobe

Improve this answer
3
  • Mmh, I'd like to see how such changing click/enter targets look in real. Also, such "captions overlaying border" are known from classical groups of controls.
    – Gerold Broser
    Mar 6 at 22:44
  • @GeroldBroser I'm not quite sure how to show this in real on stackexchange. It is a format I am familiar with as it is used in our products however, and I can attest the animation looks smooth. I found an example here: xd.adobe.com/ideas/wp-content/uploads/2020/01/new-post.gif Additionally, here are some form design practices you might be able to find inspiration from OP. I found this article very helpful when designing my forms: xd.adobe.com/ideas/principles/web-design/…
    – Gene Lee
    Mar 6 at 23:37
  • The (animated) GIF is exactly what I had in mind. Apart from the caption being really small (think of visually impaired) it looks good, much better than I expected. Thanks for the links, both ... +1.
    – Gerold Broser
    Mar 6 at 23:49
0

a third solution is to include the required information into the field captions and not use the labels. More elegant. Be sure to use a color code to facilitate the idea of "not filled" and "filled". The grey VS black model is something common.

enter image description here

Improve this answer
6
  • 1
    "...not use the labels." The problem with embedding a labels or example in the text box itself is once the input is activated the support is gone. If the user is distracted there's no reminder what the task was. "More elegant." please elaborate. Less on the page, or possibly cleaner, yes. But "less" doesn't mean "elegant".
    – bloodyKnuckles
    Nov 6, 2022 at 19:10
  • 1
    @bloodyKnuckles In defense of this design, you can have the labels embedded on top once the user enters in an input. I put a reference image in a different comment
    – Gene Lee
    Mar 6 at 21:45
  • 1
    @GeneLee xd.adobe.com/ideas/wp-content/uploads/2020/01/new-post.gif Thanks for sharing the transitioning label example. Question...what is the user benefit of starting with an inline label and replacing it with a top label when the field is activated? ...compared to simply using a top label.
    – bloodyKnuckles
    Mar 7 at 2:26
  • @bloodyKnuckles I would say the inline label can be larger and easier to read than just a top label. Honestly, to me there is not a HUGE difference in going from inline -> top label vs just top label, but I think with both having very similar advantages (labels take up less space), the inline-> top label is just a better UI design and looks better to the user.
    – Gene Lee
    Mar 7 at 18:02
  • @GeneLee However, the article you shared links to a NNG article giving 7 reasons not to use inline (placeholder) labels
    – bloodyKnuckles
    Mar 7 at 23:29

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.