Is there a specific name to the control that is shown to users of web sites/apps that is usually a modal window or lightbox that generally displays content like:

  • Tips
  • Guided walkthroughs
  • Important messages relevant to the user since last time they logged in
  • What's New

Is there a specific name for this control or pattern?

Also, are there recommended libraries to implement this control/experience in a web application?

Here's an example from the web site for AppDynamics: example whats new lightbox from AppDynamics

It seems to me that you may be attempting to combine several types of functionality, normally reserved for multiple controls, into a single control.

The first control would be for Help and it would include: - Tips - Guided walkthroughs - What's new

You can look at a good implementation on this very website. https://ux.stackexchange.com

The second control seems more like a notifications control:

  • Important messages relevant to the user since last time they logged in

While your particular example is a bit overblown and extreme, I think you're referring to what is known as Splash Page (or Splash Screen).

Splash screens are typically used by particularly large applications to notify the user that the program is in the process of loading. They provide feedback that a lengthy process is underway. Occasionally, a progress bar within the splash screen indicates the loading progress. A splash screen disappears when the application's main window appears.

Splash screens typically serve to enhance the look and feel of an application or web site, hence they are often visually appealing. They may also have animations, graphics, and sound.

The Java programming language has a specific class for creating splash screens, called java.awt.SplashScreen [3] that handles standard splash screen functions, e.g. display an image centered on screen then disappears when the first program window opens.

On the Web, a splash screen is a page of a web site that acts as a front page prior to displaying the home page. Designers may use splash pages:

  • to direct users to the appropriate website for their country or language preference
  • to direct users to a low-bandwidth site or one more accessible to disabled users
  • as an additional form of advertising
  • to restrict access to content such as pornography, alcohol advertising or sales, or gambling
  • as an aesthetic complement to the main page
  • To grab someone's attention to take them to a page with more details usually for a product that they are selling.

The control is a modal or popup. The pattern is called user onboarding. These modals are meant to educate the user about the product experience, either as part of the first use experience or as a long term strategy of updating users on new product features.

Product Tour is the general name for the UI pattern you are describing (a UI pattern is a proven, reusable solution to a commonly encountered design problem).

The references below explain some different ways to implement product tours, while also pointing out pitfalls to avoid.

References:

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.