movil1r

¬Ņ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:

Kontiki

 

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:

dish-1   kontiki2

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.

trip Planner

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.

lmental1

 

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

ejemplo-anclas

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)

formulario

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.

 

callus

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).

menu-dish

 

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!