Evaluating Various Types of SmartTips

Objective

After completing this lesson, you will be able to explain the difference between Guidance and Validation SmartTips.

Guidance SmartTips Scenario

Let's look at what we need to do to create Guidance SmartTips by using a scenario.

The support team at Eddie's Depot has noticed that a lot of customer questions are focused on areas of the cart page. The primary frustration is determined to be caused by a lack of understanding of the following areas:

  • Delivery Information: End users are confused about delivery options.
  • Entering a Promo Code: End users are unsure about how many promo codes can be used with one order.
The image shows the Eddie's Depot: Cart Page

In this scenario, we will use Guidance SmartTips to proactively highlight the identified problem areas and provide information to support customers as they proceed with their orders. Review the step by step guide, then try it yourself with the simulation.

Steps for Creating Guidance SmartTips

Step 1: Create a SmartTips Set

In the Editor, click on the + icon, and select SmartTips Set and give it a name: CheckOut Page SmartTips.

Watch the video to know more. Note that the video does not support audio.

Step 2: Set the Display Conditions

For a SmartTips Set, we need to immediately define where and how they play. These SmartTips should only appear on the checkout page, so we'll leave the default option selected: Display Set only on a specific page.

  • Name the Condition: URL Condition
  • Rule Type = Current URL | Operator = Contains | Value = /cart-page

  • Click Done to proceed

Display Conditions is set.
Step 3: Select the element for the first SmartTip

Back in the Editor, click on the + button at the top of the Editor to add the first SmartTip to the set.

In this step, you'll need to select the Element that you want to attach the SmartTip to; in this case it will be the Delivery text element.

element for the first SmartTip is selected.
Step 4: Configure the "Delivery" SmartTip
  • At the top, notice different options for the type of SmartTip. For this scenario, we'll leave it set to the default Guidance type.
  • Enter Guidance Text: Shipping is standard 5-7 days ground shipping. If you'd like to expedite your order, please reach out to help@eddiesdepot.com.
  • We want an icon to appear beside the Delivery element, so we will select With Icon and position this to the right of the element using the compass.
  • Click Next SmartTip to add our next SmartTip for Enter a Promo Code.
The Delivery SmartTip is configured.
Step 5: Configure the "Enter a Promo Code" SmartTip

Repeat the process for selecting the element for the Enter a Promo Code option. We'll enter the guidance message as usual, but we want users to see the SmartTip as soon as they hover over Enter a promo code.

  • Enter SmartTip Text: You may only apply one promo code at a time! We currently cannot accept more than one.

  • Select With Icon. The SmartTip text will display when the user hovers or enters the selected element.

  • Click Done and then in the Editor click Save at the bottom right hand side.

The Enter a Promo Code SmartTip is configured.
Step 6: View your Checkout Page SmartTips

Finally, we want to see our SmartTips in action. At the bottom of your Editor you can push the play button to see both of the SmartTips play on the screen at the same time.

Watch the video to know more. Note that the video does not support audio.

Exercise: Create Guidance SmartTips

Below is a software simulation that will guide you through how to build Guidance SmartTips for this scenario. The simulation will replicate what you will experience when you build in your own Editor.

ExerciseStart Exercise

Hopefully you're now comfortable building Guidance SmartTips. Let's move on and look at Validation SmartTips.

Validation SmartTips

Validation SmartTips allow us to check user input in a text field to ensure that the information given meets the requirements of the field.

Watch the video to understand Validation SmartTips.

Key Takeaways
  • Validation SmartTips display a red error if the information given is invalid, and can also display a green success message.
  • Validation SmartTips use the Condition Builder to create the validation logic.
Building Validations

Let's look at the steps needed to build a Validation SmartTip.

The image shows an email input field initially containing user@mailcom on the left, which gets corrected on the right with an error message above it stating Please use the format.
Step 1: Select your Element

We first want to select our SmartTips element. This will be where the validation will appear so it is important that our selection is on the element itself.

SmartTips element selected.
Step 2: Selecting Validation

Once the SmartTip element has been selected, we must have validation chosen as the option. If we choose guidance, we won't have the ability to choose a validation type.

If we choose both, then we will have the option to setup guidance text as well as validation. It is generally recommended to have one or the other, but there are some use cases that need both.

Validation is chosen as the option.
Step 3: Setting up Validation Rules

Finally, the last step is to choose the validation rules. There are a number of pre-set validation rules that we can choose from, such as: mandatory field, numeric field, and date format.

If the validation rule evaluates as false (incorrect input into a field) then the SmartTip will display your validation message.

Watch the video to know more. Note that the video does not support audio.

All set!
Validation SmartTips verify that a user has added valid content into fields. They verify field inputs by checking against validation rules. Be sure to use these types of SmartTips whenever you have similar scenarios in your platform.
Divider

Our validation rules will trigger the SmartTip action based on their evaluation. If the validation rule evaluates as false (incorrect input into a field), then the SmartTip will display your validation message.

Using the Condition Builder, we have the option to modify any of the preset rules by selecting Define Valid Entries to the right of the rules dropdown.

The image shows common preset validation rules that can be selected in the SmartTip Options Interaction tab.
Divider

Similarly to Guidance SmartTips, you can choose if you want your Validation SmartTips to display with or without an icon.

With an Icon

Here we have an icon on a phone number field that will display a red error icon and message if an incorrect entry is made. It will show a green success icon once the mistake is corrected.

There is also the option to instead have the error message and icon disappear when the mistake is corrected without the success indication.

The top example shows a validation rule evaluating as false and displaying a validation message with an icon. The bottom example shows the rule evaluating as true and displaying the success icon.

Without an Icon

This will display a red highlight around the field if the validation rule evaluates as false.

Here, once the phone number is corrected, the error message and highlight disappears.

You also have the option to enable a success indication that will display a green success highlight and/or a success message to the user.

The top example shows a validation rule evaluating as false and displaying a validation message and highlight. The bottom example shows the rule evaluating as true and no longer displaying the validation message.

Note

Validation rules are only evaluated when the user enters content into a field and then focuses (clicks or tabs) out of the field.

In the next lesson we'll briefly look at SmartTip Customization & Element Behaviour

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn