I saw several applications that explain functions to the user when they first use it, or bring new features to their attention after the update. Such documentation is displayed directly in the application and in the middle of the user stream, for example. laying a speech bubble over a user interface that points to a button or any other element. Usually it appears once and never again.
Unfortunately, I don’t know what to call this approach, which makes Google difficult even about this. This is apparently a fairly modern UX approach.
I am wondering what architecture or design patterns are used or if there are any well-known libraries for their implementation. The problem I'm trying to solve is that it is a cross-cutting thing that crawls anywhere and anytime in the workflows - and yet you want it all to relate to the “actual” functionality.
For example, a user may request a page in an MVC web application. The controller retrieves data, performs actions, and serves the view. This view has a new tab. The user has never seen this, and you want to display the friendly message "click here to ...". This means that in some place, probably in the controller, you should find that this function has not yet been explained to the user - you download the message from the kit and send it to the view. The view displays a speech bubble in addition to the tab. This logic has nothing to do with actual functionality. Ideally, you can leave it outside the controller, as well as for presentation.
I was wondering if the Aspect-Oriented approach could help.
Is there a blog, library, installed templates?
Please note: I am not asking how to make a speech bubble. My concern is that I do not want the logic to decide when to display it ("did the user ever see the message? Did they choose" do not show again? "), What to display and where to display it - for distribution throughout the entire source code of the application. Ideally, it can be packaged in its own package or project.
Similar considerations can be used to collect statistics on the use of functions or to add a user feedback channel in different places.
Update: I finally got a response to what I was looking for. Since finding a term for it was the main problem, I add some keywords found in Shahrokh’s answer to help future readers find this Q & A: this thing can be called an introduction, a step-by-step guide, a page guide or a guided tour on the site for first-time users; The answer contains the functions intro.js, aSimpleTourPlugin, pageguide.js, joyride, Codrops, Bootstro.js, jQuery SiteTour, jQuery Tourbus, Trip.js and Crumble.