Success state
Los estados de éxito indican que el flujo que inició la persona ha sido completado. Se muestran al finalizar una serie de pasos y celebran que la persona está más cerca de conseguir un gran objetivo.
Informativos
Reducir la incertidumbre acerca de la acción que se realizó y los próximos pasos.
Promocionales
Impulsar oportunidades de negocio comunicando productos o servicios satélite.
Memorables
Hacer que los momentos de la experiencia transmitan un sentimiento positivo.
No confundirlos con otras tipologías
Los estados de éxito deben utilizarse sólo cuando la tarea está terminada y no para instancias intermedias como validaciones o resúmenes.
Usarlos con moderación
Los states son una pausa en la experiencia. Si aparecen repetidamente en el flujo, considerar utilizar otro componente.
Comunicar la tarea completada
El mensaje debe ser coherente con el objetivo del flujo
No comunicar múltiples tareas
Un state es el final de un objetivo, si el flujo está cargado de muchas tareas considera repartirlos.
1
Header
Focalizado en la tarea realizada recientemente
2
Detalles
Simplifica la información, esta disponible para desplegar
3
Próximo paso (opcional)
Promueve el siguiente paso del proceso
4
Recomendados (opcional)
Espacio destinado para Cross Selling y Upselling
1
Done
No demuestran entusiasmo. Se utilizan al finalizar reclamos, quejas. Ej: reportar un problema con el auto o solicitar un reembolso
2
Congrats
Expresan felicidad. Se utilizan al finalizar una sucesión de pasos. Ej: pagar el apartado de un vehículo o agendar un servicio de mantenimiento
3
Celebrate
Manifiestan emoción y festejo. Reservada únicamente para el fin de un recorrido de tareas que culminan en un logro mayor. Ej: el resultado de firmar el contrato del auto o pagar el auto
Header
1
Navigation
Acción de salida
2
Color (fijo)
Sirve para reforzar el significado del mensaje
3
Icono (según caso de uso)
Refuerza la emoción del mensaje
4
Título
Tarea recientemente realizada
Iconos
Confetti
Lo usamos en el Congrats state
Success
Lo usamos para el Done state
Próxima tarea
1
Título
Nombre del próximo paso
2
Bajada
Descripción y venta del próximo paso
3
Botón
Próximo paso
Cross selling
1
Recomendados (fijo)
El contenido se mantiene permanente siempre que aparezca el componente
2
Icono (según caso de uso)
Refuerza el mensaje
3
Propuesta de valor
Características del productos o beneficios
State Celebrate
1
Color (fijo)
Sintetiza el significado del mensaje predisponiendo y entusiasmando a la persona
2
Ilustración (según caso de uso)
Refuerza la emoción del mensaje
3
¡Título!
Frase metafórica sobre lo que acaba de conseguir
4
Bajada
Beneficio o presentación del próximo paso
Header
Estructura
Ejemplo
1
Título
Verbo en pretérito + artículo + sustantivo
2
Bajada
Detalle de la cita, pago realizado {fecha, hora, lugar} o breve resumen de la tarea.
3
Link
Amplia la información
Próxima tarea
Estructura
Ejemplo
1
Título
Sustantivo propio o verbo en infinitivo + sustantivo
2
Bajada
Verbo en imperativo + Detalle del próximo paso o value prop
3
Botón
Tarea a realizar
Cross selling
Estructura
Ejemplo
1
Separador
Recomendados (contenido fijo)
2
Propuesta de valor
Transmitir de manera objetiva y directa las ventajas del producto
3
Botón
Acción a realizar
Evitar ser literales
No somos técnicos, buscamos explicar qué sucedió con palabras cotidianas.
Título consistente con la tarea del CTA
Utilizamos la acción (verbo) que viene del CTA anterior.
Uso de pronombre posesivo “Tu”
Si utilizamos tu en el titulo, no lo volvemos a utilizar en la bajada.
No utilizar el botón continuar
Los success terminan una tarea y presentan la siguiente.
Evitar ser redundante
La información del título no debería repetirse en la bajada.
Puntuación
Usamos siempre punto final en las bajadas.