Anyone seen good embedded help in a web application?

Question

I have a pretty simple app on the web (written in Flex) which is very straightforward to use once it has data inside it. The steps to get data inside it are themselves also pretty simple, but not at all obvious to my audience when they first log into my app.

I have been wrestling with how to communicate the data setup process to my users without referring them to a separate help. I also don't want to clog my lovely, elegant UI (which has uniformly been praised for its clarity from my current users and matches their processes very well) with wizards, or worse still an annoying animated paperclip.

I have a very rich set of tools available for the web UI but I am looking for inspiration and wondered if anyone had experienced good web-based, intuitive, unobtrusive, genuinely helpful process/usage instructions embedded in an application and could point me to a link so I can take a look for myself.

Failing that anyone got any bright ideas? There are about 5 steps involved each one visiting a different page of the existing app to enter/upload data.

Answer 1

Have you taken a look at: http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html

I believe there is a jquery or prototype or mootools or whatever framework that goes a couple steps beyond the above and walks a user through what to do. My google-fu isn't coming through right now so I can't seem to find it.

Answer 2

You could display the links to the data setup pages in a small strip on your main page like this (pardon the ugliness - this is just a usability idea):

alt text http://www.freeimagehosting.net/uploads/052b13acb7.jpg

The steps they've already completed are greyed out (I assume they don't have to complete these steps in sequence). When they mouse over a step they get a brief description, and then full details when they click through to the actual step page. You could have descriptive icons for each step instead of hyperlinks, of course.