Built in user guides

Question

I want my web application to be self-explanatory. There are input fields and whole pages which need some paragraphs of explanation. How to integrate these user guides to my application? How to make them visible and not disturbing?

Answer 1

I would consider revealing the help gradually:

If you set a standard where each field has a tooltip, you can avoid any special icon - the user will immediately know mouse over will result in a tooltip.

Each tooltip should have a link in it (or alternatively the whole tooltip is press-able) to expand it for a more in depth explanation. This explanation can simply open in place or on another page).

Answer 2

I find the Twitter signup page to do a pretty good job at this:

---

---

They even use this for validation / feedback:

---

---

It does require a few hundred pixels next to your input field, though. It does, however, leave you the freedom to just provide a short help text followed by a "more..." link.

Answer 3

We took the approach that 1st time vistors to our site (making use of cookies) get an alert bar (similar to if you visit SE for the first time) pointing them to the web-help, and a video on how to use the site.

This alert bar would not show up for subsequent visits and thus avoid distracting the user again.
(More info on this blog post.)

For our site, we preferred the non-modal alert bar approach.
However, another approach we were looking at, is a modal alert box on 1st visit, and this would pop up every time, until they clicked the 'Do not show again' tickbox before clicking OK.

Answer 4

You can write up a small explanation in the sidebar the like they do in the SO login page.

another option is to put little icons next to the fields and include a hovering tool-tip next to each field.