Landing Pages para Móviles (Explicadas en 5 minutos)

¿Tienes 5 minutos? ¡Perfecto! Porque ese es el tiempo que te va a llevar leer este post y aprender las reglas básicas para saber cómo montar una buena Landing page para móviles. ¿No te lo crees? Pues ¡Cronometra porque empezamos! Ready, Steady, ¡Go!

Primera Toma de Contacto

Así es como debes presentar tu landing page mobile a tus usuarios. Recuerda que estamos hablando de una página de aterrizaje, lo que significa que debes enfocar todo tu contenido a un único objetivo. En este caso, la imagen, el texto, y el CTA van enfocados a una sola meta “Get a Quote”. Observa:

En esta primera toma de contacto nos jugamos mucho porque de ella depende que el usuario siga o no siga visitando nuestra landing. Por eso debemos exprimir por completo nuestra creatividad y utilizar un texto verdaderamente convincente y persuasivo que consiga que el usuario permanezca en un estado activo y quiera continuar escudriñando la landing.

El Scroll va a ser el principal protagonista 

El scroll va a tener un protagonismo enorme en nuestra Landing Page para mobile. Por norma general, a medida que vamos haciendo scroll la atención e interés del visitante desciende. Nuestro trabajo en mobile es que eso no ocurra. ¿Cómo lo conseguimos? Aliviando mucho la carga de contenido de nuestra landing y presentando recursos gráficos que entretengan al usuario y lo animen a seguir bajando. Mira:

Como ves, todo muy despejado en cuanto al contenido textual se refiere. Párrafos cortos para no ralentizar la lectura y puntos de color y dinamismo de la mano de atractivos iconos y efectos como los que puedes ver en esta demo.

Uno de los efectos que más se utiliza en responsive (actualmente) es el efecto de “desplazamiento” de elementos al hacer click sobre un botón, icono,etc. Lo más común es ver este comportamiento para mostrar y ocultar el menú de navegación, por eso a continuación te dejamos un interesante tutorial en el que puedes ver cómo conseguir ese efecto.

Páginas con mucho Scroll

A pesar de tener un contenido muy liviano y de haberlo distribuido correctamente para que el usuario no se canse de interactuar con tu landing page, si ésta es kilométrica, llegados a un punto concreto tus usuarios se van a cansar de leerte. ¿Como solucionamos esto? Muy fácil, añadiendo puntos de anclaje que redireccionan a los visitantes hacia el punto de la landing que les interesa.

En esta versión mobile se puede ver un ejemplo de esos enlaces de ancla.

Podéis acceder a la versión responsive  o podéis verlo también desde la versión desktop:

Formularios claros y concisos

Para tu versión responsive no sirven los formularios a los que estás acostumbrado. Necesitamos algo mucho más claro y conciso para que, además de acoplarse completamente al espacio del que disponemos, también pueda resultar fácil y rápido de completar para nuestros usuarios. Para ello necesitamos:

• Número reducido de datos a rellenar
• Campos de texto grandes y fáciles de completar
• Elementos clickables grandes y visibles (Ejemplo: Botón)

Y ya que hablamos de botones, en tu landing no puede falta un clásico de las páginas de aterrizaje para móviles, el botón de “Click to call”. Aunque está bastante claro para qué es, aquí te dejamos su definición para que puedas ampliar info si lo deseas.

Navegación Horizontal

Algunos expertos en diseño y usabilidad acuñan la navegación con scroll horizontal como algo todavía desconocido y “antinatural” para los usuarios. Sin embargo, y bajo mi opinión, el scroll horizontal permite una navegación secuencial que, aunque diferente, es perfectamente asumible y entendible por los usuarios.

Veamos un ejemplo con esta versión responsive. En ella al activar el menú, las opciones se despliegan hacia la derecha, desplazando el foco de la pantalla hacia ese lugar. Para volver a la pantalla inicial el usuario debe desplazar de nuevo el foco hacia la pantalla principal (ubicada a la izquierda de la línea de scroll).

Y hasta aquí nuestro post sobre landing page móviles en 5 minutos. Sabemos que todavía falta mucha chicha por incluir aquí así que en futuros posts seguiremos profundizando en el apasionante mundo de la conversión en móvil. Te recomendamos que no te los pierdas.

Si tienes más tips que aportar, aquí debajo nos puedes dejar tu comentario.

¡Hasta la próxima!