Móvil: consejos, trucos y mejores prácticas para el diseño de campañas.

Es posible que te preguntes cómo optimizar la interfaz del usuario y la experiencia del usuario de tus campañas. Este artículo te enseñará sobre la ubicación óptima de los elementos y el estilo de la campaña.

WYSIWYG nuevo y mejorado (WalkMe Mobile SDK v1.13.1+)

Comprensión de elementos

Cada elemento bajo OBJETOS en el nuevo WYSIWYG corresponde a un objeto que actualmente se encuentra en la pantalla de vista previa del dispositivo:

Puedes seleccionar uno de estos objetos para su colocación y personalización, ya sea haciendo clic en él en el árbol de OBJETOS o en la pantalla de vista previa del dispositivo.

Puedes mover todos los elementos de la pantalla haciendo clic en Canvas en el árbol de OBJETOS y arrastrando la sección resaltada alrededor de la pantalla del dispositivo de vista previa.

Además, puedes mover cualquier objeto (incluido el lienzo) seleccionándolo de cualquiera de las formas mencionadas anteriormente y utilizando las teclas de flecha arriba/abajo/izquierda/derecha del teclado.

Consejos y trucos para el diseño de campañas

Mover elementos hacia adelante y hacia atrás

Algunos objetos se pueden mover hacia adelante y hacia atrás con respecto a otros elementos en la pantalla (similar al índice z en HTML). Puedes hacer esto de una de dos maneras:

1. Navega hasta la pestaña Tamaño y Posición del objeto y haz clic en uno de los iconos a la derecha de la sección Reordenar:
   
   • En orden de aparición, los iconos significan 1) pasa a la capa más frontal, 2) avanza una capa, 3) mover una capa hacia atrás y 4) pasa a la capa más atrás.
2. Haz clic con el botón derecho del ratón en el objeto o haz clic en su pestaña azul en la pantalla de vista previa del dispositivo y selecciona una de las opciones de orden de capas:
   

Crear varios objetos con el mismo diseño

Simplemente utiliza la opción "duplicar" que aparece a la derecha del objeto en el árbol de OBJETOS o cuando haces clic con el botón derecho del ratón en un objeto en la pantalla de vista previa del dispositivo.

Haz zoom para una mejor precisión

El zoom es útil cuando se trabaja en diseños grandes o pequeños. Si deseas realizar adiciones perfectas al contenido, acércate al lienzo:

Si estás trabajando en dispositivos de pantalla grande como tablets o iPads, aleja el zoom para obtener una perspectiva diferente:

Vista previa del contenido en los dispositivos de los usuarios finales

Una parte importante de la creación de contenido de la campaña es garantizar que ésta proporcione una interfaz de usuario agradable, independientemente del sistema operativo y el tamaño del dispositivo.

Vista previa, que se encuentra en el nuevo WYSIWYG, te permite simular la apariencia de la campaña en dispositivos Android e iOS pequeños, medianos y grandes, tanto en orientaciones de retrato como de paisaje:

Para cambiar entre las orientaciones de retrato y paisaje, haz clic en el botón de conmutación situado sobre la pantalla de vista previa del dispositivo:

Menú contextual

Las acciones rápidas y comunes están disponibles haciendo clic con el botón derecho del ratón en un objeto o haciendo clic en su etiqueta de borde azul:

Disposición de objetos en el lienzo

Crear campañas hermosas con un diseño preciso es más fácil que nunca utilizando las dos funciones de organización de objetos:

1. Alineación de objetos: alinea varios objetos entre sí horizontal o verticalmente.
2. Distribución de objetos: crea un espaciado igual entre los objetos distribuyéndolos horizontal o verticalmente.

Para seleccionar los objetos que deseas alinear o distribuir entre sí, mantén presionada la tecla Comando (Mac) o Ctrl (PC) y haz clic en los objetos con el mouse:

Además, cuando resaltas dos o más objetos, verás botones en la sección PROPIEDADES del WYSIWYG que te permitirán organizar los objetos:

Deshacer y rehacer

¡No hay necesidad de dudar antes de realizar cambios en el diseño de tus campañas! Cualquier cambio que realices durante la edición se puede deshacer haciendo clic en el Botón Deshacer o tecleando Comando + Z (Mac) o Ctrl + Z (PC).

Si lamentas haber deshecho algo, puedes volver a hacerlo haciendo clic en Rehacer o escribiendo Shift + Command + Z (Mac) o Shift + Ctrl + Z (PC).

Atajos de teclado y acciones

Ahora puedes utilizar las teclas de flecha del teclado para mover el lienzo y los objetos dentro de él con más sensibilidad que cuando utilizas el mouse.

Además, puedes utilizar todos estos atajos de teclado para ahorrar tiempo:

Preferencias guardadas para el dispositivo de vista previa

Tu selección de qué dispositivo quieres previsualizar tu campaña en el WYSIWYG se conservará para la próxima vez que abras la misma campaña. Esto solo funciona si abres la campaña en el mismo ordenador.

Creación de campañas con un lienzo de opacidad del 0%.

Si deseas crear una campaña transparente que evite que los usuarios interactúen con ciertos elementos de la interfaz de usuario al tiempo que les permite ver la aplicación que hay detrás, establece la opacidad del lienzo en 0%:

Creación de sombra

Si deseas simular un efecto de sombra en uno de los objetos de la campaña, sigue estos pasos:

1. Crea una forma negra con las mismas propiedades de tamaño y posición que el objeto:
   
   
2. Organiza la forma negra para que se encuentre detrás del objeto;
3. Mueve ligeramente la forma negra en la dirección donde deseas que aparezca la sombra.
4. Cambia la opacidad de la forma negra según el color de la sombra que deseas crear.
5. ¡Y aquí está el producto final!
   

Crear una imagen en la que se puede hacer clic

Si deseas añadir una imagen a tu campaña que realice una acción cuando se hace clic, sigue estos pasos:

1. Arrastra un objeto de botón al lienzo o haz clic en un objeto de botón que ya esté allí.
2. Activa un icono para el botón;
3. Asigna una imagen al icono:
   
   
4. En la sección FORMATO, selecciona la acción adecuada y cambia el tamaño del botón para que la imagen cubra toda su área:
   
   

Creación de un botón "x" con un diseño no predeterminado

Sigue los pasos de la sección anterior Crear una imagen clicable y utiliza como imagen las "x" que deseas que aparezcan en la campaña.

Tamaño/posición absoluto, relativo y personalizado

Los casos de uso para el dimensionamiento absoluto incluyen los siguientes:

1. Crear un botón que permanezca del mismo tamaño en todos los dispositivos (por ejemplo, un botón "x");
2. Añadir una imagen a la campaña que de otro modo se desplazaría en el modo panorámico o en pantallas de dispositivos más grandes.
3. Al añadir texto (generalmente siempre Absoluto);
4. Para los objetos de lista, dado que el texto dentro del objeto de lista también es Absoluto.

Los casos de uso para el dimensionamiento relativo incluyen los siguientes:

1. Permitir que el lienzo y los objetos de la campaña cambien de tamaño dependiendo de la orientación del dispositivo y/o el tamaño de la pantalla del dispositivo.
2. Crear una mejor experiencia de usuario al utilizar el widget del Carrusel en una campaña.
3. Dimensionar los objetos de la campaña en relación con los objetos nativos de la aplicación.

Los casos de uso para el dimensionamiento personalizado incluyen los siguientes:

El dimensionamiento personalizado es ideal cuando se combina el dimensionamiento relativo y absoluto, ya que esto te permite elegir entre estos modos en cada eje. Por ejemplo, si deseas que un botón mantenga la misma altura pero cambie de ancho (por ejemplo, para el modo paisajístico), elige Relativo para el ancho.Absoluto para la altura.

Consejo profesional: el movimiento entre las opciones de posición Absoluta, Relativa y Personalizada cambia la forma en que se encuentra el objeto en la pantalla. Utiliza las opciones Previsualización y Paisaje para ver cómo se reflejarán los cambios de posición en cualquier dispositivo.

Comprensión de la relación de aspecto del objeto

Cuando la relación de aspecto de una imagen está bloqueada, esto significa que la relación de aspecto de la imagen afectada seguirá siendo la misma, independientemente de cuán pequeña o grande se convierta en respuesta a los cambios en el tamaño de la pantalla. Para lograr esto, uno de los ejes de la imagen se bloquea en el modo Absoluto o Relativo (según tu preferencia) y el tamaño de la imagen a lo largo del otro eje se ajusta automáticamente para preservar la proporción del eje.

Para elegir qué eje está bloqueado, haz clic en la palabra "Auto" en el campo de entrada del eje deseado.

Al añadir una nueva imagen al lienzo, su relación de aspecto se "bloqueará automáticamente".

Trabajar con el árbol objetos

Cambiar el nombre de objetos

Ahora puedes cambiar el nombre de los objetos en el árbol OBJETOS para darles nombres significativos que faciliten su identificación:

Pasa el cursor sobre los objetos en el árbol.

Al pasar el cursor sobre los objetos en el árbol de objetos, ahora se resaltarán en el WYSIWYG, por lo que es más fácil encontrar cada objeto:

Prácticas recomendadas de diseño de campañas (tanto heredadas como nuevas WYSIWYG)

Al crear campañas en el Asistente de campañas, sigue estas prácticas recomendadas cuando corresponda:

• Modela tu campaña con el dispositivo o dispositivos más pequeños que utilizarán los usuarios finales.
  • Si no hay espacio suficiente en el dispositivo del usuario final, es posible que el contenido de WalkMe no sea completamente visible.
  • Considera la posibilidad de segmentar los usuarios finales de tus campañas por el tamaño de sus dispositivos.
• La ubicación más intuitiva y menos propensa a errores para las campañas en las pantallas de los dispositivos del usuario final es la alineada al centro o la anclada a un lado.
  • Si quieres que una campaña abarque todo el ancho o el alto de la pantalla del dispositivo del usuario final, estírala en el editor WYSIWYG hasta que el tamaño del elemento Canvas sea 100% a lo largo del eje sobre el que estás estirando.
• Si debes admitir el modo paisaje (además del modo retrato), realiza pruebas de calidad con frecuencia mientras diseñas, dimensionas y colocas los elementos de forma creativa con este objetivo en mente.
• Recuerda asignar una acción al objeto Capa de la campaña:
  
  • Algunos casos de uso comunes para asignar acciones a superposiciones incluyen los siguientes:
    • Si deseas que el usuario final solo descarte una campaña haciendo clic en un objeto de campaña, elige la acción "Ninguno", que cambia la superposición de pantalla para que no se pueda hacer clic.
    • Si estás utilizando una plantilla de menú u otro ShoutOut y deseas permitir a los usuarios que toquen en la superposición de pantalla para cerrar el ShoutOut y aumentar la facilidad de uso, establece la acción de superposición de pantalla en "Cerrar;".
    • Si deseas presentar una encuesta de comentarios a todos los usuarios que descartan un mensaje de ShoutOut, establece la acción de superposición de pantalla en "Campaña" y selecciona la encuesta deseada.
    • Lee más sobre las acciones aquí.
• Al añadir imágenes a las campañas, carga imágenes con los tamaños de archivo más pequeños posibles para acelerar el proceso de descarga de la campaña.

WYSIWYG heredado (WalkMe Mobile SDK v1.13.0 y anteriores)

Elementos relacionados con la comprensión

Cada elemento en CAMPAIGN ELEMENTS en el WYSIWYG corresponde a un elemento que actualmente se encuentra en la pantalla de la aplicación:

Puedes seleccionar uno de estos elementos para colocarlo y personalizarlo, ya sea haciendo clic en él en la sección CAMPAIGN ELEMENTS o en la pantalla de la aplicación.

Puedes mover todos los elementos de la pantalla haciendo clic en CANVAS en CAMPAIGN ELEMENTS y arrastrando la sección resaltada alrededor de la pantalla de la aplicación.

Consejos y trucos para el diseño de campañas

Elementos que se mueven hacia adelante y hacia atrás.

Algunos elementos se pueden mover hacia adelante y hacia atrás con respecto a otros elementos en la pantalla (similar al índice z en HTML). Puedes hacer esto de una de dos maneras:

1. Haz clic en el menú desplegable a la derecha del elemento y selecciona Mover hacia adelante o Mover hacia atrás; o
2. Haz clic con el botón derecho del ratón en la imagen en la pantalla de la aplicación y selecciona Mover hacia adelante o Mover hacia atrás:

Esto es útil en situaciones en las que se asigna un activador de CTA a un elemento que se encuentra en la misma ubicación en la pantalla de la aplicación que otro elemento (por ejemplo, una forma que se encuentra encima de una imagen).

Escalar y acoplar el lienzo.

Puedes redimensionar la mayoría de los elementos a voluntad, ya sea utilizando los campos de tamaño del panel de configuración, o haciendo clic en el borde del elemento en la pantalla de la aplicación y arrastrando manualmente para redimensionar.

Al diseñar para varios dispositivos y tamaños de dispositivos, debes localizar y establecer el tamaño de los elementos con esto en mente. Utiliza las líneas de orientación rojas en la pantalla de la aplicación para comprender cuándo los elementos están centrados y/o acoplados a los lados de la pantalla de la aplicación.

Por ejemplo, cuando un elemento (en la siguiente imagen, el elemento CANVAS) está centrado vertical y horizontalmente, verás dos líneas de orientación rojas que se intersecan:

Si un elemento se centra vertical y horizontalmente, aparecerá en el centro de la pantalla de la aplicación, independientemente del dispositivo que se seleccione en el panel de VISUALIZACIÓN PREVIA DEL DISPOSITIVO, pero puede haber un corte si el tamaño del contenido es demasiado grande para caber en la pantalla de un dispositivo determinado.

Vista previa del contenido en los dispositivos de los usuarios finales

Una parte importante de la creación de contenido de la campaña es garantizar que ésta proporcione una interfaz de usuario agradable, independientemente del sistema operativo y el tamaño del dispositivo.

LA VISUALIZACIÓN PREVIA DEL DISPOSITIVO te permite simular la apariencia de la campaña en dispositivos Android e iOS pequeños, medianos y grandes, tanto en orientaciones de retrato como de paisaje:

Personalización de la cubierta posterior de la campaña

Con la versión 1.7.0 del SDK para móviles y versiones superiores, puedes personalizar la cubierta posterior de la campaña (o el área que se encuentra detrás de la campaña mientras ésta se muestra).

Puedes designar el color de la cubierta posterior, la opacidad y el CTA asociado (este último solo para ShoutOuts):

Los valores predeterminados son los siguientes:

• Color: negro;
• Opacidad: 0,7;
• CTA: QUIZÁS.