Overview

SAP Web Assistant is an add-on framework for integrating help content into the application UI. Embedding user assistance, learning and support into the user interaction experience helps customers understand and use our software with ease.

Web Assistant is mandatory for SAP software and is part of the UA-060: Intuitive User Interface requirement in SAP Product Standard for User Assistance.

Different help modes in Web Assistant (SAC)

You can use Web Assistant to provide the following help modes in Database, Data Management & Analytics applications:

information

Disclaimer:

  • The above example is a UX vision from SAC, and not all these modes have been implemented (or needed) in our products that have integrated Web Assistant.
  • Use this article as a general guide. The UI choices and content can be different for each product, contact Web Assistant product team for particular use cases or requests if needed.
  • Details that noted as a part of the vision will be updated regularly.

Note:

To integrate Web Assistant, certain technical requirements need to be fulfilled by the UI technology of the application and by the Development team. For full information see: SAP Enable Now Info Center:Web Assistant. You can also find relevant information from the Fiori Guidelines. ()

Usage

Web Assistant Interface

The basic UI components and used terms as shown below. You can use them as needed, but it's not required to use all the elements.

1.1 Hotspot

An indicator on the screen highlighting a UI element with available content for the contextual help. The Hotspot can be a rectangular or circular shape.

1.2 Popover

Container for displaying the content of a UI element, an area in the screen or a help topic. Popovers are often used under Guided Tours, Help Topics, and What's New.

There are two types of popover: Contextual popover and Panel-side popover. The Contextual popover (Bubble) is best for displaying brief information about a UI element. The Panel-side popover can display longer content.

1.3 Laser

Visualizes the connection between a tile and a hotspot.

1.4 Help Panel

An interactive menu displaying available help content for help topics, learning, guided tours, product updates, and additional support resources.

1.5 Help Button

Allows users to open or close Web Assistant.

Allows users to search for help content. Depending on the product, the search scope can be local (search within the topics included in the contextual help) or global (cross-search functionality that searches from all help resources such as SAP Help Portal and SAP Knowledge Base).

Allows users to switch between different help modes based on their intension and needs.

2.3 Tile

The minimum unit of the panel to display content. You may use them under different modes as Help Content tile, Learning tile, and Guided Tour tile etc.

Tiles can have multiple variations:

2.4 Minimize

Minimizes the panel. Only the tabbed sidebar will be shown, the content will be collapsed.

2.5 Action Button

Buttons can link to an important help resource or active a help-related in-app action, such as creating a support ticket or sending user feedback.

A dialog-like container for displaying detailed content. Lightbox is great for accommodating long-form content, and it can be movable and resizable.

Help Modes

Help Topics

UA-developer-created Contextual Help - Viewed in a popover (implemented)

Help Topics is a standard Web Assistant help mode, it provides context-specific help content, such as general information about the page or areas of the page, descriptive and supplemental information about UI elements, and detailed instructions on tasks or workflows. Help Topics can help users have a general understanding of the user interface and the workflows available on the current page of the application.

You can include help topics from various resources to enable self-service support for users: Help topics are represented as tiles in the help panel, and the content can be viewed in a

Multi-source Contextual Help - Viewed in a lightbox (vision)

In addition, a search functionality (local scope) can help users to find the information needed from the list of contextual help quickly. As part of the UX vision, users may search across multiple resources (global scope) for instructions on non-linear/cross-module workflows or error scenarios. This cross-search experience provides easy access to all relevant help content when the contextual help is not sufficient.

Best Practices

How to Display

Note:

Keep the content viewing experience/interactions as consistent as possible. If you mix content types, for example help content, video, text descriptions and links, use icons to indicate the different content types.

How to Write

<div> <div>Text type</div> <div>Web Assistant component</div> <div>Writing best practice</div> </div> <div> <div>Title</div> <div> <p>• Tile</p> <p>• Popover (Bubble)</p> </div> <div> <p>• Use title case with no period at the end of the title</p> <p>• The first word must be a call to action (i.e., an imperative verb). For example, “Get”, “Deploy”, “Create”</p> <p>• 20 characters maximum, including spaces</p> </div> </div> <div> <div>Short description</div> <div>Tile, displayed under the Title</div> <div> <p>• Two sentences maximum</p> <p>• 70 characters maximum, including spaces</p> </div> </div> <div> <div>Body text</div> <div> <p>• Popover (Bubble)</p> <p>• Lightbox</p> </div> <div>• Use lists for enumerating important information</div> </div> <div> <div>Videos & Images</div> <div>Displayed as part of Body Text</div> <div>• You can include videos and images into Help topics. We advise using animated gifs instead of videos to demo short user interaction flows.</div> </div> <div> <div>Links</div> <div>Displayed as part of Body Text</div> <div> <p>• If more details would be useful for the user, you can include a link to:</p> <ul> <li>The relevant information on the SAP Help Portal</li> <li>Reliable information on other SAP digital properties, such as SAP Community, SAP Support information, SAP videos published on official SAP channels</li> </ul> <p>Be sure to check these resources are up to date.</p> <p>• Use a new line for each link.</p> <p>• Add “See also:” before the list of links.</p> </div> </div>
2
help topics-dos.png
do
false

• Choose one format (title-only, title&description, Icon&title, or icon&title&description) for tiles if possible.

• Always put the standalone tiles (such as About This Screen tile) at the top of your help topics. Put the link tiles at the bottom of your help topics.

• Make sure that the Documentation button is always on top of the other buttons.

• Use a conversational style as though you’re speaking helpful advice to a colleague in a friendly manner. For more information, see People Centric Approach guidelines.

help topics-don&#39;ts.png
dont
false

• Keep text to a minimum:

  1. No more than 6 steps or bullets. Avoid unnecessary words and phrases "DWC lets you/helps you...", "Click here to...", etc.).
  2. Avoid sub-headings, sections, tables (unless very short), long procedures/lists

• Don’t refer to the next higher page (users should already be familiar with this page) unless there is a good reason to. Maybe there are connections you want to explain, or a UI element has switched position.

Learning

Depending on the product, various learning resources can be accessed from the Learning mode. For example, the learning materials in SAP Analytics Cloud are mainly from the HANA Journey website: the HANA Journey learning center provides complete onboarding and in-depth learning modules for all Database, Data Management & Analytics products, learning tracks help the user to jump-start a common workflow or learn a selected topic, and Webinars can be both on-demand or live for hands-on learning. You can also include product-specific learning resources, such as HANA’s developer tutorials under the Learning Tab.

Best Practices

How to display

How to Write

<div> <div>Text type</div> <div>Web Assistant component</div> <div>Writing best practice</div> </div> <div> <div>Title</div> <div>Tile</div> <div> <p>• Use title case with no period at the end of the title</p> <p>• The first word must be a call to action (i.e., an imperative verb). For example, “Get”, “Deploy”, “Create”</p> <p>• 20 characters maximum, including spaces</p> </div> </div> <div> <div>Short description</div> <div>Tile, displayed under the Title</div> <div> <p>• Summarize each learning resource with two sentences maximum</p> <p>• 70 characters maximum, including spaces</p> </div> </div>
2
learning-dos.png
do
false

• Provide most critical learning resources as Title and description tile.

• Motivate and encourage the user to enter the learning resource with your wording ("Learn how to, Try it yourself, Find out" etc.)

• Use a conversational style as though you’re speaking helpful advice to a colleague in a friendly manner. For more information, see People Centric Approach guidelines.

learning-don&#39;ts.png
dont
false
• Don’t overcrowd the panel with too many individual learning topics. Group the relevant learning materials and use tiles or buttons to direct users to the learning resources.

Guided Tours

A guided tour provides step-by-step guidance to directly instruct users about how to use a specific part of the product. Guided tours are also context-specific, the topics and content are defined and created by the UA developer.

Each guided step is represented by a popover that contains instructions and useful information, and it is placed next to the target UI. You may also use lightbox for a guided tour if the guidance is cross-module or not associated with any particular UI element on the current screen. Users can easily follow the instructions and complete their tasks/processes accordingly. Guided Tours are beneficial for onboarding new users or introducing product features.

Best Practices

How to Display

How to Write

<div> <div>Text type</div> <div>Web Assistant component</div> <div>Writing best practice</div> </div> <div> <div>Title</div> <div>Tile</div> <div> <p>• Use title case with no period at the end of the title</p> <p>• The first word must be a call to action (i.e., an imperative verb). For example, “Get”, “Deploy”, “Create”</p> <p>• Use words that describe a specific use case, such as “To publish a story…” or “To train a model…”</p> <p>• Don’t use general statements like “Basic features include…”</p> <p>• If you are creating an overview tour, start your text with “An overview of…”</p> <p>• 20 characters maximum, including spaces</p> </div> </div> <div> <div>Short description</div> <div>Tile, displayed under the Title</div> <div> <p>• Summarize each learning resource with two sentences maximum</p> <p>• 70 characters maximum, including spaces</p> </div> </div>

What’s New

Release notes viewed in a panel-side popover

What’s new is a standard Web Assistant help mode, it keeps users updated with the latest product releases, you can include product updates created by UA developers, release notes, and/or release highlights (for some products) as tiles. The release notes (abstract) will be viewed in a popover, and release heights will be viewed in a feature dialog (if applicable).

Best Practices

How to Display

How to Write

• Include the release version in the title-only tile.

• Make sure you use official SAP naming convention for the version tile.

• Provide a “Read More” link to the What’s New guide on the SAP Help portal, if there are too many new features to include in the What’s New pane.

2
what&#39;s new-dos.png
do
false

• Keep information short. Add a maximum of 5 important updates in the bubble.

• Categorize What’s New highlights according to the various modules or areas in the product. For example, “Data Modeling” or “Connections.”

• Explain the benefit of the new feature, how it helps the user.

what&#39;s new-don&#39;ts.png
dont
false
• Don’t overload the popover with too much release information and details. Instead, mention only critical ones and provide a link to the complete What’s New guide on the SAP Help Portal.

Support & Contact

Support & Contact mode provides additional support from SAP such as creating ticket or support users. In addition, you can also include ways for sharing user voice, such as sending feedback and submitting ideas. The resources under this mode may vary from products to products.

Best Practices

How to Display

How to Write

<div> <div>Text type</div> <div>Web Assistant component</div> <div>Writing best practice</div> </div> <div> <div>Title</div> <div> <ul> <li>Tile</li> <li>Button</li> </ul> </div> <div> <p>• Use title case with no period at the end of the title</p> <p>• The first word must be a call to action (i.e., an imperative verb). For example, “Get”, “Deploy”, “Create”</p> <p>• 20 characters maximum, including spaces</p> </div> </div>

Content Source

For our Database, Data Management & Analytics products, there are two content types: