Walk the user through initial data entry after the first login

Question

Are there any guidelines or set of best practices on how to implement the initial data entry after the user has logged in for the first time? For example, I'm thinking of a web application for maintaining food recipes, which requires a lot of user data to actually become useful.

I've seen that the trend among the popular web applications is to display empty pages with a dimmed screenshot on the background picturing how the page will look like once it's filled with data.

Example 1 (FreshBooks):

Another approach I've seen being used is to design a special flow which guides user to insert the data after they've logged in for the first time.

Example 2 (Facebook):

Have you come across any books, articles, posts or any other resources dealing with this topic?

How do you deal with this in your applications?

UPDATE: I added some screenshots to better describe the issue. I also found an article from 37signals that describes the problem I'm trying to solve and actually offers some solutions: The Blank Slate.

Answer 1

There are a number of general methods that can be used, but they all fall into one of three categories.

1. Reward them in some way for filling out the information. This site does it by giving you the Autobiographer badge, but you could do it by rewarding your customers in any way that is appropriate.
2. Punish them by withholding some feature or ability until they fill it out. Some forums only allow people that have filled in a minimum of information to see images. This is not the same as.
3. Nag them to do it by constantly reminding them. This you can imagine is the least effective as it provides little direct benefit and also gives a wore experience, so I would avoid it.

Overall I would suggest that option 1 of rewarding them it the most effective and one that brings the most positive experience to your customers.

Answer 2

I attended a seminar on this subject in regards to developing mobile apps: http://www.uie.com/events/virtual_seminars/buttons_a_hack/

Josh suggested employing techniques used in gaming.

Specifically, coaching and level up concepts.

Coaching essentially is a guiding a sequence of behaviors. "Click here to add a user"... once they create one, ""you have your first user, you can assign them a role here"... and so on.

Level up is another cool concept. In gaming it's when you have achieved a goal that unlocks new powers.

In my hypothetical example, you have created a user and made them an author. A new UI element appears with an indicator that says, "You now have an author. This dropdown is your authors box, you can do this and that here."

They draw from the psychological concepts JohnGB suggested.

I find them effective but they require a high engineering LOE since I haven't seen how to sequence these approaches in any modular way.

Hope that helps.

Answer 3

If I, as a user, need to go through a presentation to understand how to put data in a form, you might be going for the wrong direction. Hints is the best way to teach the user how to fill out a form. Because they can look at the hints as they filling it out, as for your dimmed screenshot solution, the problem is that they can't reference it if they forgot what to do. Also you should spend more effort on the information architecture of your form for a more coherent structure, because I think you are going after the symptom and not the actual problem.

But you can make form hints in a intuitive way that it actually feels like the user is being guided on a tour, such as focusing on a field will show a corresponding hint. This is the exact same thing as another answer mentioned "coaching," but I think people just call it "tutorial." This is better than giving an entire presentation, and then have them fill out the form, because you are doing it in segments(good) as opposed to a contiguous(bad) manner.

So, to keep it simple, just use form hints.

If you can provide some sample data fields for your recipe form, I can give a more custom solution.