8 ejemplos de páginas de aterrizaje móviles para inspirarte

En el tercer trimestre de 2021, el 30% de la población mundial con acceso a Internet compró bienes a través de un dispositivo móvil.

A medida que más y más personas eligen usar sus teléfonos inteligentes para comprar en línea, es fundamental crear una experiencia móvil perfecta para que pueda convertir una mayor parte de ese tráfico móvil en ventas.

Pero crear una página de destino móvil de alta conversión requiere un enfoque, habilidades y tácticas de diseño diferentes a las que usaría para su versión de escritorio.

Entonces, ¿cómo optimiza una página de destino móvil y qué debe recordar al crear la suya?

Para ahorrarle tiempo, hemos revisado cientos de sitios web para encontrar los mejores ejemplos de páginas de destino móviles de alto rendimiento. Verá qué los hace geniales y aprenderá qué puede hacer para replicar su éxito.

Comencemos por ver algunos ejemplos de excelentes páginas de destino para dispositivos móviles.

Verá que hemos incluido su vista previa móvil y, en algunos casos, hemos agregado capturas de pantalla de apoyo de la versión de escritorio para ilustrar diferencias importantes entre los diseños.

1. Simply Chocolate: rendimiento de diseño impresionante

Simply Chocolate es una marca de comercio electrónico que vende productos de chocolate de primera calidad.

Lo que lo hace genial:

• Un diseño complejo que funciona bien en dispositivos móviles: este proyecto de diseño gráfico es una obra maestra. Incluye animación, imágenes de alta calidad y algunos elementos interactivos. Estos son los elementos que esperaría para disminuir su velocidad de carga, pero Simply Chocolate ha logrado introducir el diseño de una manera que mantiene alta la velocidad de carga sin comprometer la calidad.
• Un puntero visual : cuando haces clic, ves una vista previa del producto. A continuación, puede ver el chocolate como si acabara de desenvolverlo y darle un mordisco. ¡Eso es suficiente para convencerlo de agregar algunas barras a su carrito de compras!
• La idea de exhibir productos para inspirar la compra: el objetivo principal de esta página de destino es lograr que se interese en una variedad de productos. Una vez que haga clic en "Comprar ahora", será dirigido a una tienda en línea donde podrá agregar productos a su carrito. Mostrar productos primero para inspirar la compra es una excelente manera de destacarse cuando miles de otras marcas venden productos similares.

2. Curología: un CTA que hace su trabajo

Curology es una marca que ofrece cosmética personalizada y consultas con dermatólogos. Esta marca utiliza cuestionarios para recopilar información sobre las condiciones de la piel y ofrecer un producto personalizado.

Lo que lo hace genial:

• Una llamada a la acción directa que comunica un beneficio: puede usar Curology sin cargo durante los primeros 30 días y pagar solo $ 4.95 en costos de envío.
• Título dinámico : el título comunica diferentes problemas que tienen las personas: tono de piel desigual, puntos blancos, brotes, arrugas. Eso hace que el título resuene en todos.
• Texto breve y sucinto: Mantienen su texto breve, reduciéndolo a unas pocas líneas de texto. De esta manera, el visitante capta rápidamente qué servicios ofrecen y cuál es su propuesta de valor única.

3. Rover: sustitución de filtros con un botón

Rover es un mercado que conecta a los dueños de mascotas con los cuidadores de mascotas que buscan trabajo.

Lo que lo hace genial:

• Sustitución de filtros con un botón: en la versión de escritorio de su sitio web, verá filtros que lo ayudarán a definir sus criterios para un cuidador de mascotas. Al ver el sitio web en una pantalla pequeña, los usuarios enfrentarían una sobrecarga de información si vieran un diseño similar. Rover elimina los filtros en su versión móvil para centrar la atención del usuario en su propuesta de valor. Los filtros se muestran después de hacer clic en el CTA principal.
• Mover las opciones de búsqueda a una página separada : una vez que haces clic en su CTA principal, se te redirige a una página separada donde puedes aplicar tus criterios. Esta es una buena solución ya que el formulario ocupa bastante espacio.
• Un CTA claro : su CTA es muy específico y destaca el resultado exacto que un usuario puede esperar después de hacer clic en el botón. Evitan utilizar un lenguaje genérico.

4. Canva: eliminando elementos complejos

Canva es una herramienta en línea que te ayuda a crear diseños profesionales sin ningún conocimiento de diseño gráfico.

Lo que lo hace genial:

• Mantener la versión móvil simple: si compara las versiones de escritorio y móvil del sitio web de Canva, notará rápidamente que la versión móvil carece del carrusel de plantillas y la barra de búsqueda. Esto se debe a que mantener estos elementos en una versión móvil haría que la página se abarrotara y distraería a los usuarios del objetivo principal de Canva: lograr que nuevos usuarios creen una cuenta.
• Destacar la llamada a la acción principal : Al resaltar el botón en un color diferente, se destaca del resto del contenido.
• Uso eficaz de los espacios en blanco: Canva introduce más espacios en blanco verticales, lo que ayuda a centrar la atención de los usuarios en la llamada a la acción.

5. Mixpanel: establecer confianza de inmediato

Mixpanel es una herramienta de análisis de productos que ayuda a las empresas a comprender el comportamiento de los usuarios mediante el seguimiento de las interacciones de los usuarios en la web y los dispositivos móviles .

Lo que lo hace genial:

• Mover los logotipos de los clientes de alto perfil más arriba en la página: en su versión móvil, Mixpanel decidió mostrar estos logotipos, para que los usuarios que acaban de ingresar a la página obtengan un impulso instantáneo de confianza para seguir explorando Mixpanel.
• Abandonar la animación compleja en dispositivos móviles : la versión de escritorio de Mixpanel es más rica en animación. Algunos de los elementos animados son difíciles de transferir a la versión móvil y probablemente aumentarían su velocidad de carga, por lo que se han reducido al mínimo.

6. Ballsy: un uso creativo de las ventanas emergentes móviles

Ballsy es una marca de comercio electrónico que vende productos de aseo para "piezas de hombres". En su tienda online puedes encontrar gel de baño, recortadores, desodorantes y otros productos para la higiene masculina.

Lo que lo hace genial:

• Uso de ventanas emergentes móviles: Ballsy usa ventanas emergentes para recopilar direcciones de correo electrónico y números de teléfono de los visitantes primerizos. Es de varios pasos: primero, al usuario se le ofrece un 10 % de descuento por ingresar una dirección de correo electrónico y, a continuación, se le da la opción de ingresar un número de teléfono de EE. UU. para obtener un descuento aún mayor del 15 %.
• Usar un incentivo : Algunas marcas todavía piden una dirección de correo electrónico sin ofrecer nada a cambio. Como puede suponer, la tasa de conversión de estas ventanas emergentes es relativamente baja. Por el contrario, al ofrecer descuentos en productos a cambio de información personal, Ballsy se asegura de que sus ventanas emergentes tengan una mejor tasa de conversión.
• Obtener acceso al código de inmediato: no tiene que revisar su correo electrónico o confirmar su suscripción para acceder a su código de descuento; Ballsy muestra el código inmediatamente después de ingresar su correo electrónico o número de teléfono para que pueda continuar comprando de inmediato.

7. MVMT: menú móvil visual

MVMT es una marca de comercio electrónico que vende relojes, anteojos y accesorios de primera calidad.

Lo que lo hace genial:

• Menú visual: agregan elementos visuales a su menú, lo que significa que los usuarios saben en qué enlace hacer clic de inmediato, sin pensar.
• Geolocalización : los usuarios pueden ajustar su país de envío según la ubicación y comprar en su moneda local.

8. RingCentral: pantallas de servicios intuitivos

RingCentral es una de las soluciones de comunicaciones unificadas más conocidas , que ayuda a los equipos a comunicarse a través de cualquier dispositivo, incluidas computadoras y teléfonos inteligentes. Es un sustituto de los teléfonos fijos tradicionales.

Lo que lo hace genial:

• Simplificación de las pantallas de servicios: han cambiado los botones que muestran los servicios y se han ido con un menú desplegable. Este es un truco común que ayuda a optimizar la experiencia móvil de sus usuarios . De esta forma, los usuarios pueden navegar por los servicios en sus dispositivos móviles con la misma comodidad que en un sitio web de escritorio.
• Buen uso de los enlaces de pie de página : el menú de pie de página de su escritorio contiene muchos enlaces que conducen a páginas de productos clave. En dispositivos móviles, incluir todos esos enlaces de pie de página haría que la página fuera demasiado larga. Resuelven esto ocultando esos enlaces en un menú desplegable en las categorías principales.

Ahora que ha visto algunos excelentes ejemplos, es hora de comenzar a pensar en sus propias páginas de destino para dispositivos móviles. Hemos recopilado algunos consejos y mejores prácticas para crear páginas de destino móviles que puede comenzar a seguir hoy.

1. Aumentar la velocidad de carga de la página

¿Cuánto tiempo esperarán los usuarios a que se cargue una página? Aquí hay una pista: no se quedarán por más de cinco segundos. A nadie le gustan las páginas lentas y perjudican su tasa de conversión. Entonces, ¿cómo puedes mejorar la velocidad de carga en el móvil?

Primero, verifique el estado general de su página de destino con Google PageSpeed ​​Insights .

Una vez que agregue su URL, obtendrá un informe sobre todos los problemas críticos que experimentan los usuarios de dispositivos móviles. Querrá trabajar para eliminarlos y aumentar el puntaje de salud de su página.

También puede usar este escáner de dominio para ayudarlo a identificar más problemas técnicos relacionados con los registros DMARC, SPF, DKIM y BIMI.

2. Sea breve

En pantallas móviles más pequeñas, incluir mucho texto puede hacer que su página sea demasiado larga.

Recuerde que la capacidad de atención de los usuarios puede ser menor cuando consultan su sitio web sobre la marcha, como durante su viaje al trabajo o cuando están fuera de casa. Por eso es importante usar una copia sucinta.

¡Y recuerde, su versión de escritorio también puede beneficiarse de mantener las cosas concisas!

Aquí hay algunos pasos a seguir:

• Describa su propuesta de valor en el título de la página.
• Escribe párrafos cortos que sean fáciles de entender. Deshazte de la jerga de la industria y escribe como si le estuvieras contando una historia a un niño de diez años.
• Se específico.
• Escribe oraciones cortas o divide oraciones más largas en otras más cortas.

3. Cree un diseño separado para dispositivos móviles

Cuando trabaje con un diseñador gráfico en su UX y UI, asegúrese de agregar una copia móvil al resumen. Crear un diseño receptivo no requiere mucho tiempo ni es costoso, pero requiere conocimientos de UX y UI para tener en cuenta todos los detalles.

Las mejores herramientas de diseño gráfico ayudan a ajustar las versiones web a las móviles y tienen las capacidades necesarias para cambiar a la interfaz de usuario móvil.

En algunos casos, su versión móvil necesitará una solución de diseño diferente. En otros, solo necesitaría simplificar sus elementos de animación o reducir la complejidad de los gráficos cuando sea necesario.

4. Evita el lenguaje genérico en tu CTA

¿En qué botón haría clic: "Registrarse" u "Obtenga su acceso gratuito"? Existe una alta probabilidad de que hagas clic en un CTA que comunica algún valor porque (como todos) te preguntas: "¿Qué hay para mí?"

Las llamadas a la acción más genéricas como "Registrarse" o "Comenzar ahora" no comunican mucho valor a un usuario y lo más probable es que tengan una tasa de conversión más baja en comparación con el botón que es más específico.

Evite el lenguaje genérico en el texto del botón y, en su lugar, concéntrese en comunicar los beneficios que obtendrá un usuario si realiza la acción deseada. Eso es exactamente lo que hace Curology en su página de destino móvil:

5. Usa ventanas emergentes móviles

Si ya usa ventanas emergentes para su versión de escritorio, vea cómo se verán en el móvil. Asegúrese de que respondan y sea fácil interactuar con ellos en pantallas más pequeñas. Mantenga el texto al mínimo.

“Recuerde que siempre puede crear dos opciones diferentes de ventanas emergentes, tanto para la versión web como para la versión móvil, para que pueda tener en cuenta el tamaño de las pantallas. Como resultado, tanto los usuarios web como los móviles no encontrarán problemas al ingresar información en los campos emergentes”, dice Farnam Elyasof, fundador de Flex Suits .

Por ejemplo, en OptiMonk, puede seleccionar fácilmente en qué dispositivos desea que se muestren sus ventanas emergentes.

Además, todas las ventanas emergentes de OptiMonk son compatibles con dispositivos móviles. Echa un vistazo a esta ventana emergente móvil de BlendJet que se creó con OptiMonk:

6. Usa formularios cortos

Completar información en una pantalla pequeña puede volverse bastante frustrante. Por eso, pedir demasiada información en tus formularios online es una forma segura de perder un cliente.

Si ya está utilizando formularios de contacto para generar clientes potenciales , es posible que esté buscando formas de aumentar su eficiencia y tasa de conversión. Comience por acortar sus formularios y solicite solo la información más importante.

Pero, ¿qué sucede si tiene que recopilar más información sobre su cliente y no puede evitar usar más campos?

Luego divídalos en pantallas emergentes separadas o "pasos" y agregue una barra de progreso.

Al usar pantallas emergentes separadas, cada campo será lo suficientemente grande para ingresar información. Y al usar una barra de progreso, sus usuarios siempre sabrán qué tan cerca están de completar el formulario. Como resultado, su tasa de abandono en cada etapa debería disminuir.

7. No te olvides de la coherencia de la marca

Si su logotipo se ve demasiado grande en un dispositivo móvil o si es muy complejo, podría considerar crear otra versión para usar en pantallas más pequeñas.

Hay varias formas de adaptar logotipos que se vean bien en un escritorio para pantallas pequeñas, pero es importante recordar usar imágenes vectoriales porque son pequeñas, escalables y editables.

En la mayoría de los casos, querrá trabajar con un diseñador que revise la guía de estilo de su empresa y utilice sus habilidades para crear un logotipo que sea apropiado para el uso móvil.

Sin embargo, si esta no es una opción, aquí hay algunos consejos que pueden ayudar al hacer su logotipo sin conocimientos de diseño gráfico:

• Use logotipos horizontales: mueva los elementos visuales desde arriba del texto hacia la izquierda o hacia la derecha.
• Reduzca los detalles : aumente la legibilidad eliminando algunos elementos del logotipo menos importantes.
• Eliminar texto pequeño: elimine el texto pequeño en el logotipo que no será legible cuando se muestre en pantallas más pequeñas.

8. Usa fuentes compatibles con dispositivos móviles

Cuando se trata del contenido de la página en dispositivos móviles, todas las fuentes no son iguales . Si está utilizando una fuente que es difícil de leer, considere sustituirla por una opción más compatible con dispositivos móviles como:

• abrir sans
• roboto
• Montserrat
• Lato
• adobe garamond
• Baskerville
• computadora moderna
• Georgia
• catapulta

9. Elija una "zona de pulgar" segura

Intentar hacer clic en pequeños botones en un iPhone mini puede convertirse en una pesadilla. Puede evitar convertir su página de destino en una fuente de frustración para los usuarios si recuerda incorporar una "zona de pulgar" segura en las áreas donde espera que un usuario haga clic.

¿Qué es la zona del pulgar y por qué los diseñadores móviles están tan obsesionados con este término?

El término "zona del pulgar" fue acuñado por Steven Hoober en su libro de 2011, "Diseño de interfaces móviles". La zona del pulgar se definió como el área más cómoda para que un usuario haga clic cuando usa un teléfono con un dedo.

Aquí es donde se encuentra la zona del pulgar para diferentes usuarios:

Al diseñar su experiencia móvil, debe tener en cuenta que los elementos en los que desea que los usuarios hagan clic deben estar dentro del área "natural".

10. Usa espacios en blanco

El espacio en blanco a menudo se percibe como el lienzo en el que se pueden colocar texto, imágenes y otro contenido. Sin embargo, juega un papel muy importante en la forma en que los usuarios consumen contenido, especialmente en dispositivos móviles.

Entonces, ¿qué cuenta como espacio en blanco?

Estas son las áreas que se dejan vacías a propósito, como el espacio entre columnas, márgenes y rellenos.

Aquí hay algunos consejos a seguir al incorporar espacios en blanco:

• Agregue suficiente espacio en blanco entre los destinos de clic (p. ej., botones): el tamaño mínimo de un destino de clic debe ser de entre 30 y 40 píxeles. Facilite la interacción con ellos agregando una cantidad suficiente de espacio en blanco entre dos o más destinos de clic.
• Desplace el espacio en blanco verticalmente en dispositivos móviles: utilice el espacio en blanco para separar los elementos que siguen un flujo vertical. Esto es diferente que en el escritorio, donde el espacio en blanco se introduce tanto vertical como horizontalmente.

Al optimizar la experiencia móvil para sus usuarios, se asegurará de que los clientes disfruten usando su sitio web y aumente su tasa de conversión en dispositivos móviles.

Facilite a los usuarios el logro de sus objetivos, como navegar y comprar sus productos, suscribirse a sus ofertas o realizar otras acciones que los acerquen a la conversión.

Con suerte, los ejemplos y consejos que compartimos lo ayudarán a comprender lo que hace que una experiencia móvil sea buena y acelerar su progreso a medida que introduce cambios. ¡Ahora es el momento de poner en práctica todos esos nuevos conocimientos!