1

What are some good examples of empty / half-filled out profile pages? Say the user filled out all the required fields, but not the optional ones. How do you handle these situations design-wise?

Also, what is a good wording for blank profile fields (like city or occupation)?

blank state on profile page fields

  • In my opinion leave the entire field off if they dont have it filled in. There is no use showing headers/placeholders with no helpful info in it. – DasBeasto Jul 7 '15 at 19:04
1

Well, if the fields are optional, then you're offering the user the option to NOT to fill some info. As a result, you have a zero data field. In this case, you face the issue of how to handle this.

While Adit Gupta's links are really nice and informative (and I recommend you to check them out for ideas, as well as this one), your case is very different. Unlike the links above where some action is expected to be performed, your scenario is one where the user is not required to do anything, thus he/she probably won't do it.

What to do here?

Well, here you have some ideas:

  • the usual approach is what you did in your mockup, and as you can see, is not very good, there's a lack of completeness and feels inadequate
  • another option is to simply hide those fields. After all, they're zero data fields, so why show them?
  • Another option is to avoid optional fields and make them all required. This may require some study: for example in your case, some people won't have a website
  • Another option is to keep the optional fields, but add a completion task feature. For example, a link reading: "Your profile is 60% complete, click to improve it!" and when clicked, the link will direct to the fields that need to be completed
  • Another option is to add a funny and playful message. For example, if user doesn't fill an address field, you could add something like "John is a mysterious guy that likes to hide in the shadows" linked to the field John needs to complete (NB: this is a very good technique if you want users to visit other profiles)
  • Finally, you could simply add an informational message telling "John has chosen not to share this info". While I don't recommend this approach, it could be a good one if your site deals with privacy (financial, social media and such) since you're basically telling the user: "John had the chance not to fill this info, and he chose not to do it. We respect John's and all our user's privacy choices"

Of course there are more choices, but right now, and keeping in mind your current mockup, I think you have quite some options to deal with your problem, hope this helps

0

I think one of the best ways to handle it is to provide a delightful message to the user along with encouraging him to take the next step. This article on Tympanus can give some more clarity on how to handle empty states. Also, check out this interesting page showcasing how apps and websites handle empty states - Empty States

0

First we should know what is the goal. You might want to encourage the user to fill in his profile but it's not the only posible case, either ways don't show empty fields to visitors. If it's beneficial only for the user but not you to fill it in, that case hide the empty fields in profile view and only show on edit page.

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.