Uso de SmartTips

Evaluación de varios tipos de SmartTips

Objective

After completing this lesson, you will be able to explique la diferencia entre Guía y SmartTips de validación.

Escenario SmartTips de orientación

Veamos lo que debemos hacer para crear SmartTips de orientación mediante un escenario.

El equipo de soporte de Eddie's Depot ha notado que muchas preguntas de los clientes se centran en las áreas de la página del carrito. La frustración principal está determinada a ser causada por una falta de comprensión de las siguientes áreas:

  • Información de entrega: los usuarios finales están confundidos con respecto a las opciones de entrega.
  • Introducción de un código promocional: los usuarios finales no están seguros de cuántos códigos promocionales se pueden utilizar con un pedido.
La imagen muestra Eddie's Depot: Carrito Página

En este escenario, utilizaremos Guidance SmartTips para resaltar de forma proactiva las áreas problemáticas identificadas y proporcionar información para ayudar a los clientes a medida que realicen sus pedidos. Revise la guía paso a paso y, a continuación, pruébela con la simulación.

Pasos para crear SmartTips de guía

Paso 1: Crear un conjunto SmartTips

En el Editor, haga clic en el icono +, seleccione SmartTips Set y asígnele un nombre: CheckOut Page SmartTips.

Vea el video para saber más. Tenga en cuenta que el vídeo no admite audio.

Paso 2: Establecer las condiciones de visualización

Para un conjunto SmartTips, tenemos que definir inmediatamente dónde y cómo juegan. Estos SmartTips solo deben aparecer en la página de confirmación de compra, por lo que dejaremos seleccionada la opción predeterminada: Mostrar conjunto solo en una página específica.

  • Nombre de la condición: URL Condición
  • Tipo de regla = URL actual | Operador = Contiene | Valor = /cart-page

  • Haga clic en Listo para continuar

Se ha fijado Visualizar condiciones.
Paso 3: Seleccione el elemento para el primer SmartTip

De nuevo en el editor, haga clic en el botón + en la parte superior del editor para añadir el primer SmartTip al conjunto.

En este paso, deberá seleccionar el elemento al que desea adjuntar SmartTip; en este caso, será el elemento de texto Entrega.

Se ha seleccionado el elemento para el primer SmartTip.
Paso 4: Configurar el SmartTip "Entrega"
  • En la parte superior, observe diferentes opciones para el tipo de SmartTip. Para este escenario, lo dejaremos fijado en el tipo Guía predeterminado.
  • Introduzca el texto de la guía: El envío es estándar 5-7 días de envío por tierra. Si desea acelerar su pedido, póngase en contacto con help@eddiesdepot.com.
  • Queremos que aparezca un icono junto al elemento Delivery, por lo que seleccionaremos Con icono y lo situaremos a la derecha del elemento utilizando la brújula.
  • Haga clic en Siguiente SmartTip para agregar nuestro próximo SmartTip para Ingresar un código promocional.
El SmartTip Entrega está configurado.
Paso 5: Configurar el SmartTip "Ingresar un código promocional"

Repita el proceso para seleccionar el elemento para la opción Introducir un código promocional. Introduciremos el mensaje de orientación como de costumbre, pero queremos que los usuarios vean SmartTip tan pronto como pasen el cursor sobre Introducir un código promocional.

  • Introduzca el texto de SmartTip: Solo puede aplicar un código promocional a la vez. Actualmente no podemos aceptar más de uno.

  • Seleccione Con icono. El texto de SmartTip se mostrará cuando el usuario pase el ratón por encima o entre en el icono.

  • Haga clic en Completado y, a continuación, en el Editor, haga clic en Guardar en la parte inferior derecha.

El SmartTip Introducir un código promocional está configurado.
Paso 6: Vea su página de pago SmartTips

Por último, queremos ver nuestros SmartTips en acción. En la parte inferior de tu Editor puedes pulsar el botón de reproducción para ver ambos SmartTips reproducidos en la pantalla al mismo tiempo.

Vea el video para saber más. Tenga en cuenta que el vídeo no admite audio.

Ejercicio: Crear guía SmartTips

A continuación se muestra una simulación de software que le guiará a través de cómo crear Guidance SmartTips para este escenario. La simulación replicará lo que experimentará cuando cree en su propio editor.

ExerciseStart Exercise

Esperemos que ahora se sienta cómodo construyendo Guidance SmartTips. Avancemos y veamos SmartTips de validación.

SmartTips de validación

Validación SmartTips nos permite verificar la entrada del usuario en un campo de texto para garantizar que la información proporcionada cumpla con los requisitos del campo.

Vea el vídeo para comprender SmartTips de validación.

Conclusiones clave
  • Validación SmartTips muestra un error rojo si la información proporcionada no es válida y también puede mostrar un mensaje de éxito verde.
  • SmartTips de validación utiliza el generador de condiciones para crear la lógica de validación.
Validaciones de creación

Veamos los pasos necesarios para crear un SmartTip de validación.

La imagen muestra un campo de entrada de correo electrónico que contiene inicialmente user@mailcom a la izquierda, que se corrige a la derecha con un mensaje de error encima que indica Utilice el formato.
Paso 1: Seleccione su elemento

Primero queremos seleccionar nuestro elemento SmartTips. Aquí será donde aparecerá la validación por lo que es importante que nuestra selección esté en el propio elemento.

Elemento SmartTips seleccionado.
Paso 2: Selección de validación

Una vez seleccionado el elemento SmartTip, debemos elegir la validación como opción. Si elegimos una guía, no podremos elegir un tipo de validación.

Si elegimos ambos, tendremos la opción de configurar texto de guía y validación. Por lo general, se recomienda tener uno u otro, pero hay algunos casos de uso que necesitan ambos.

Se selecciona Validación como opción.
Paso 3: Configuración de reglas de validación

Por último, el último paso es seleccionar las reglas de validación. Hay una serie de reglas de validación predefinidas entre las que podemos elegir, como: campo obligatorio, campo numérico y formato de fecha.

Si la regla de validación se evalúa como falsa (entrada incorrecta en un campo), SmartTip mostrará su mensaje de validación.

Vea el video para saber más. Tenga en cuenta que el vídeo no admite audio.

¡Todo listo!
SmartTips de validación verifica que un usuario haya añadido contenido válido a los campos. Verifican las entradas de campo comparándolas con las reglas de validación. Asegúrese de utilizar estos tipos de SmartTips siempre que tenga escenarios similares en su plataforma.
Divisor

Nuestras reglas de validación desencadenarán la acción SmartTip según su evaluación. Si la regla de validación se evalúa como falsa (entrada incorrecta en un campo), SmartTip mostrará su mensaje de validación.

Con el generador de condiciones, tenemos la opción de modificar cualquiera de las reglas predefinidas seleccionando Definir entradas válidas a la derecha de la lista desplegable de reglas.

La imagen muestra reglas de validación predefinidas comunes que se pueden seleccionar en la ficha Interacción Opciones de SmartTip.
Divisor

De forma similar a la Guía SmartTips, puede elegir si desea que se muestren los SmartTips de validación con o sin un icono.

Con un icono

Aquí tenemos un icono en un campo de número de teléfono que mostrará un icono de error rojo y un mensaje si se realiza una entrada incorrecta. Mostrará un icono verde de éxito una vez que se corrija el error.

También existe la opción de que el mensaje de error y el icono desaparezcan cuando se corrija el error sin la indicación de éxito.

El ejemplo superior muestra una regla de validación que evalúa como falsa y que muestra un mensaje de validación con un icono. El ejemplo inferior muestra la regla que evalúa como verdadera y muestra el icono de éxito.

Sin un icono

Esto mostrará un resaltado rojo alrededor del campo si la regla de validación se evalúa como falsa.

Aquí, una vez corregido el número de teléfono, desaparece el mensaje de error y el resaltado.

También tiene la opción de habilitar una indicación de éxito que mostrará un resaltado de éxito verde y/o un mensaje de éxito al usuario.

El ejemplo superior muestra una regla de validación que evalúa como falsa y que muestra un mensaje de validación y un resaltado. El ejemplo inferior muestra la regla que evalúa como verdadera y ya no muestra el mensaje de validación.

Nota

Las reglas de validación solo se evalúan cuando el usuario introduce contenido en un campo y luego se enfoca (clics o pestañas) fuera del campo.

En la siguiente lección, veremos brevemente la personalización de SmartTip y el comportamiento de los elementos

Learning

SAP FacebookSAP YoutubeSAP LinkedIn