Los mejores consejos de diseño de página de destino móvil que no encontrará en ningún otro lugar

Hay muchos recursos en línea que abordan los diseños de páginas de destino posteriores al clic para dispositivos móviles, pero no hay muchas instrucciones de diseño específicas sobre cómo crear una página de alta conversión.

¿Qué diseño de estructura se recomienda para la visualización móvil? ¿Cuántos píxeles deben tener los botones? ¿Cuántos píxeles deben separar los elementos? ¿Debería utilizar el efecto "hover"? ¿Las etiquetas de los formularios deben estar adentro o afuera?

Mi nombre es Cosmin Serban, Director de Servicios de Diseño de Instapage. Es posible que se pregunte: ¿Qué hace que Cosmin esté calificado para escribir sobre el diseño de la página de destino post-clic para dispositivos móviles?

He estado educando a los clientes sobre las mejores prácticas para diseñar y estructurar sus páginas de destino posteriores al clic para mejorar sus tasas de conversión. También tengo:

• Se revisaron más de 1,000 páginas de destino posteriores al clic.
• Se asoció con los clientes para garantizar que su mensaje se transmita y que sus visitantes tengan una buena experiencia que eventualmente conduzca a una conversión.

Además, formé parte del equipo que ha desarrollado más de 200 plantillas optimizadas que se utilizan para crear y lanzar más de 200.000 páginas de destino posteriores al clic. Puede encontrar las plantillas aquí.

Diseño de la página de destino posterior al clic para dispositivos móviles: lo que debe saber antes de comenzar

Algunos conceptos de este artículo se desarrollaron internamente al crear nuestra biblioteca de plantillas. Eso no significa necesariamente que todos estos consejos deban aplicarse a cada una de las páginas de destino posteriores al clic que cree. Cada página de destino posterior al clic tiene su propio conjunto único de desafíos, pero comprender estas nociones básicas definitivamente debería ayudarlo a brindar una mejor experiencia a cualquiera que lo visite desde su dispositivo móvil.

Comencemos con las diferencias más importantes entre la experiencia de escritorio y móvil.

Estructura

Aunque no lo parezca al comienzo de su proyecto, tener una estructura en el lugar donde entregue el grupo correcto de elementos en el momento adecuado es más crítico de lo que cree.

Lo primero que me viene a la mente es la forma completamente diferente en que nuestros visitantes escanean el contenido en las páginas móviles. Todos hemos oído hablar del patrón F o el patrón Z en las páginas de destino posteriores al clic de las computadoras de escritorio, pero ¿cómo se llama el patrón para dispositivos móviles? No necesariamente le daremos un nombre, pero lo más probable es que sea muy lineal. Desplazarse hacia arriba y hacia abajo es la única forma de comprender lo que ofrece esa página de destino posterior al clic:

Dado que esa es una de las limitaciones más importantes en la forma en que los visitantes interactúan con una página de destino posterior al clic, le sugerimos que se ciña a un diseño de una columna en lugar de intentar abarrotar una gran cantidad de contenido horizontalmente. (A nadie le gusta pellizcar y hacer zoom).

En el escritorio, la mayoría de las veces los especialistas en marketing digital piensan en la ubicación de cada elemento individual y el impacto que tiene. En dispositivos móviles, es mejor hacer un cambio y pensar en grupos de elementos y cómo los apila uno encima del otro para lograr el máximo impacto.

Esta comparación en paralelo muestra cómo está estructurada una página de escritorio frente a una página móvil:

Recomendamos ir de izquierda a derecha y colocar cada grupo de elementos uno debajo del otro. Tomemos, por ejemplo, el área del encabezado (en la mitad superior de la página). Tendremos el logotipo en la parte superior, seguido del grupo formado por el título principal y el título de apoyo, luego tendremos el grupo de cuadro de formulario completo debajo.

La capacidad de agrupar elementos crea un conjunto de objetos de respuesta móvil de forma nativa. Alternativamente, los grupos se pueden configurar para bloquear la relación de aspecto de arreglos complejos para mantener sus proporciones exactas cuando se convierten a la versión móvil de su página.

El bloqueo de relación de aspecto móvil mantiene juntas sus agrupaciones en capas y bloquea la relación de aspecto, ya sea en un escritorio o en un diseño móvil.

Dos o más elementos que estén estrechamente relacionados o complementarios entre sí siempre deben permanecer juntos. En esta situación, no tendría sentido tener el cuadro del formulario justo en la parte superior de la página, por lo que el concepto de tener el formulario en el área superior no es ideal. Darle al visitante el contexto de lo que está registrando primero es más importante que simplemente darles una forma de actuar lo más rápido posible.

Tiempo de carga

Independientemente del dispositivo que utilicen sus visitantes, la velocidad de carga de la página es muy importante. Tenga en cuenta que la mayoría de sus visitantes usarán sus limitaciones de datos móviles e incurrirán en costos para ver su página, así que tenga cuidado con el tipo de gráficos o elementos que agrega a las páginas. Imagínese acceder a una página y reproducir un video automáticamente.

Si necesita muchas animaciones para el contenido de apoyo, le sugerimos que se quede con imágenes simples para dispositivos móviles. Por simple, quiero decir que necesitará crear imágenes de fondo personalizadas para una sección en particular. Usar un software de edición de fotos para ajustar el tamaño o el diseño de la foto puede valer la pena el tiempo adicional requerido cuando significa que puede acelerar sus páginas.

Lo mismo ocurre con las imágenes de fondo, ya que no necesita una imagen de 2000 píxeles de ancho que tenga 300 kb para cargar en su sección, le sugiero que solicite a un diseñador que cree una imagen personalizada que pueda establecer como fondo de su sección:

La mayoría de las veces, mantener la página móvil lo más simple posible es siempre una buena idea. Por ejemplo, si tiene varios elementos gráficos que transmiten el mismo mensaje, simplemente muestre uno en el dispositivo móvil.

Dado que la mayoría de los teléfonos móviles se adaptarán al tamaño del área de contenido proporcionada en el generador de dispositivos móviles, una buena regla general es tener una imagen de al menos 400 píxeles de ancho para asegurarse de que no haya espacios vacíos en los lados.

Cree una página de destino post-clic de AMP

Crear una página de destino post-clic positiva en el móvil es esencial, ya que la página de destino post-clic es donde ocurren las conversiones. Si su página se carga demasiado lentamente o crea una experiencia inconexa desde el anuncio hasta el post-clic, los visitantes rebotarán.

Luego, considere que Google considera la experiencia de la página de destino posterior al clic como un factor para determinar el ranking del anuncio, lo que en última instancia contribuye a su tasa de clics. Sume todo eso y las marcas tienen un problema importante en sus manos. Afortunadamente, existe el marco AMP.

Las páginas de AMP en particular son atractivas para los anunciantes porque permiten experiencias de usuario móvil más atractivas a través de tiempos de carga casi instantáneos y un desplazamiento suave, al mismo tiempo que admiten cierta personalización de estilo y marca. Dado que AMP restringe HTML / CSS y JavaScript, permite una representación más rápida de la página de destino posterior al clic. A diferencia de las páginas móviles tradicionales, Google AMP Cache almacena automáticamente en caché las páginas AMP para agilizar los tiempos de carga en Google.

Los beneficios del marco AMP realmente superan sus limitaciones:

• Velocidad de carga de página más rápida en dispositivos móviles
• Mejor experiencia de usuario para la navegación móvil
• El uso de páginas AMP puede ayudarlo a aumentar su Nivel de calidad
• Google favorecerá las páginas que usan AMP

A partir de junio de 2018, Instapage ofrece páginas de destino AMP post-clic donde los especialistas en marketing digital pueden crear páginas compatibles con AMP dentro de la aplicación sin un desarrollador. Porque, al final, si la carga de la página no es instantánea, no es lo suficientemente rápida.

Diseñar para tocar

Uno de sus mayores desafíos con el diseño de la página de destino posterior al clic para dispositivos móviles es asegurarse de que sea lo más fácil posible para los visitantes tomar medidas. Esa acción podría ser el envío de un formulario o un simple toque en un botón. Es de esperar que la mayoría de la gente haga algunos ajustes, pero no siempre es así.

Todos hemos experimentado páginas en las que es muy difícil hacer clic en algo o la experiencia no está adaptada a los usuarios de dispositivos móviles. Especialmente los enlaces de texto: ajustar el tamaño de cualquier elemento de texto que tenga un hipervínculo es muy útil. Su visitante no debería tener que acercarse para realizar la acción deseada.

Botones

Pero el mayor problema que hemos notado es el tamaño de los botones en las páginas de destino posteriores al clic. Nuestro equipo recomienda diseñar botones que tengan al menos 70 píxeles de altura y no tenga miedo de hacerlos lo más anchos posible, pero nunca los estire al ancho completo (400 píxeles) ya que podrían confundirse con una sección pequeña.

El efecto de desplazamiento es un buen toque para las páginas de escritorio porque le indica al visitante que puede tomar medidas en ese elemento en particular. En dispositivos móviles, los efectos de desplazamiento son redundantes.

Márgenes

Para los márgenes recomendamos mantener una zona segura de al menos 20 píxeles libres verticalmente a cada lado y evitar cualquier tensión visual que pueda aparecer con elementos demasiado cerca de los lados de la pantalla del teléfono.

El espacio en blanco es algo tan importante para las páginas móviles como para las páginas de escritorio. Los conceptos básicos aún se aplican, solo intente espaciar todo y no tener elementos realmente cercanos entre sí. Hacer esto te ayudará a evitar la tensión visual.

Tener márgenes consistentes definitivamente conducirá a una mejor experiencia de usuario. Nuestro equipo generalmente se asegura de tener al menos 20 a 40 píxeles entre cada elemento. Lo que decida depende de usted, ya que cada bloque puede tener una estructura de elementos única.

Es bastante subjetivo, pero una vez que establezcas una regla, intenta replicarla en toda la página y eso le dará un aspecto más moderno:

Legibilidad

Pensarías que poder leer claramente el contenido es un hecho, pero muchas veces hemos visto páginas de destino posteriores al clic en las que el texto es demasiado pequeño o demasiado grande. Encontrar un buen equilibrio es bastante fácil, una buena regla general para el tamaño de fuente utilizado para elementos particulares es:

• Título principal: 28 píxeles
• Subtítulo: 22 píxeles
• Párrafos: 17 píxeles
• Otros detalles: 15 píxeles

Por supuesto, puede ajustar esos tamaños, ya que no hay un tamaño que se adapte a todas las necesidades. Sin embargo, debería servir como una buena línea de base en el futuro con el diseño de una página de destino post-clic para dispositivos móviles.

Otro elemento que vale la pena mencionar es la altura de la línea con elementos de texto.

En ciertas situaciones en el escritorio, tiene sentido tener 1.0 o incluso 1.2, cuando construya su página de destino post-clic para dispositivos móviles, asegúrese de que la altura de la línea para los elementos de texto sea al menos 1.4.

En pocas palabras: cuanto menor sea el tamaño de la fuente, mayor será la altura de la línea.

Formularios

Dado que los formularios son la parte más importante de la mayoría de las páginas de destino posteriores al clic, es fundamental facilitar que las personas envíen su información.

A lo largo de nuestras páginas móviles, generalmente estiramos los campos de formulario tanto como sea posible horizontalmente y evitamos situaciones como tener un campo de formulario y el botón en la misma línea. Eso es solo una mala experiencia:

Otra cosa que surge muy a menudo es lidiar con formularios que tienen muchos campos.

La mejor práctica que descubrió nuestro equipo es que siempre que una página tiene más de 2 campos de formulario para establecer la posición de la etiqueta en el exterior, lo que facilita a los visitantes saber qué información se necesita en lugar de tratar de recordar qué ingresar:

Aumente sus conversiones móviles a partir de hoy

Al igual que las páginas de escritorio, el diseño de la página de destino posterior al clic para dispositivos móviles tiene que ver primero con la experiencia del usuario y lo que persuadirá a las personas a participar y realizar conversiones. Sin tener en cuenta las sugerencias anteriores, es probable que su tasa de conversión móvil se vea afectada y la gente rebote.

Considere implementar las recomendaciones y vea cómo sus páginas de destino posteriores al clic se transforman en activos de conversión altamente optimizados. Obtenga una demostración de Instapage AMP hoy.