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?
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).
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.
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.