• 902 88 64 37
  • info@programaweb.com

Elementos claves de diseño web para móvil

diseño web para móvil

Elementos claves de diseño web para móvil

Comparte en ...

Si usted ha estado blogueando por un tiempo, probablemente esté familiarizado con páginas de destino (landing page), y que incluso han utilizado algunos de ellas para diferentes campañas.

Ya sea que esté tratando de llevar a la gente a suscribirse a su lista de correo, o para comprar un producto/servicio que usted está promoviendo, las páginas de destino pueden ayudarle a alcanzar sus objetivos de conversión.

¿Pero está su página de destino optimizada para los usuarios móviles? ¿Es capaz de conducir suficientes conversiones en el móvil?

Imagínese que usted está utilizando su teléfono inteligente para leer el blog de otra persona y hace clic en un enlace para aprender acerca de un determinado producto del post.

Pero termina en una página que es demasiado difícil de ver y navegar.

Si tiene dificultad para leer el contenido de la página, eso podría arruinar su experiencia, e incluso puede obligar a salir de la página.

¿El resultado? Para el blogger, significa que han perdido la oportunidad de convertir un clinente.

No cometa el mismo error. Cuando se está diseñando una página de destino, asegúrese de optimizarla para los usuarios móviles.

Elementos clave de diseño que pueden ayudarle a diseñar una página de destino móvil optimizada para conversiones.

Un título corto pero fuerte

El título de la página de destino siempre debe ser claro y conciso.

Para una página de destino móvil, su titular tiene que ser aún más corto, porque tiene mucho menos espacio.

No utilice más de cinco palabras, y describa lo que su sitio web trata, o lo que su producto hace.

Esto puede ser difícil, pero no es imposible.

Eche un vistazo a la Squarespace página de destino móvil, por ejemplo.

El titular: “Build it Beautiful”, es corto, pero la gente entiende claramente lo que el producto es aproximadamente.

Y “Beautiful” pone de relieve la ventaja de utilizar la plataforma.

Han logrado perfectamente resumir lo que hace su producto y que lo hace especial, en sólo tres palabras, con un título llamativo.

Un breve y persuasivo llamado a la acción

Usted conoce la importancia persuasive de la CTA, y cómo puede ayudar a las conversiones.

Con las páginas de destino para móviles, su CTA tiene que obligar a los usuarios a tomar medidas, y hay que hacerlo con sólo 2-3 palabras.

Algo así como “Comenzar”, “Comience su negocio” o “Construye tu sitio web”, puede ser ideal, ya que van directamente al grano en pocas palabras.

Por ejemplo, la página de destino móvil Shyp app tiene una clara llamada a la acción que insta a la gente a “Obtener la App.”

En primer lugar definir el objetivo de la página de destino. ¿Es para que la gente participe en un concurso, descargar un libro electrónico o suscribirse a su lista de correo?.

A continuación, escribir un breve CTA que le dice claramente a la gente lo que quiere que hagan, como, “Entrar y ganar”, o “Descargar”.

Un botón prominente del CTA

¿Cuál es el objetivo de una página de destino? Es para que la gente haga algo.

Entonces, ¿cuál es el punto de tener un botón de CTA en su página de destino móvil apenas visible?.

Si usted está tratando de conseguir que la gente tome una acción determinada, asegúrese de que se presente en forma destacada el botón de CTA.

Si es posible, elegir un color del botón que contrasta con el color principal página de modo que se destaque.

Mientras que la estética es una parte crucial del diseño de su página de destino, no se deben mezclar los elementos que oculten el botón de CTA.

La página destino móvil de New Balance  resalta el botón CTA en negro.

Y se puede ver que, si bien el botón contrasta claramente con el resto del diseño de la página, no compromete la estética general.

Si tiene varios objetivos, puede intentar la construcción de una página de destino diferente para cada objetivo.

Pero si es absolutamente necesario tener más de un botón de CTA en una página, asegúrese de destacar los principales llamada a la acción.

Por ejemplo, si el objetivo es conseguir que la gente descargue algo, el botón de CTA para la descarga debe ser el más prominente.

Botones CTA secundarios como “Más información”, o “Contacto”, deben ser menos visibles.

Un buen ejemplo es la página de destino Squarespace donde la principal llamada a la acción “Comienza,” es más prominente que la CTA secundaria, “aprender más”.

Lograr el desorden mínimo

Cuando usted se está dirigiendo a los usuarios móviles, debe tener en cuenta que hay espacio limitado de la pantalla para trabajar.

Un diseño de páginas ocupado con demasiados elementos puede ser desagradables a la vista, especialmente en las páginas de destino para móviles.

Es necesario simplificar el diseño de la página tanto como sea posible.

Esto significa que necesita eliminar cualquier desorden innecesario, y tener otros elementos ocultos, si es posible.

Mantener sólo los elementos más importantes.

Basta con echar un vistazo a la página de destino simple y elegante para Moto 360, por ejemplo.

La página contiene sólo unos pocos elementos: un título fuerte, el nombre del producto, información de precios, y un botón de llamada a la acción.

Ahora vamos a echar un vistazo a la versión de escritorio original de la página de destino.

Aquí, hay algunos cambios en el formato. A pesar de que el titular sigue siendo el mismo, esta versión tiene un pequeño subtítulo para describir el producto.

También se puede ver que la barra de navegación no se oculta al igual que en la versión móvil.

Para móviles, mantener sólo los elementos más importantes, y eliminar los elementos innecesarios que pueden estorbar la página.

La eliminación de desorden innecesario de su página de destino móvil no solo mejorar la estética de la página, sino que también reduce el tiempo de carga de la página.

Una página más rápida en su carga puede mejorar la experiencia del usuario y aumentar las conversiones.

Formularios simplificados

Lo que realmente necesita la gente para llenar 7 u 8 campos de formulario al registrarse en algo?

Demasiados campos en el formulario pueden saturar su página de destino, y frustrar a los usuarios.

Si quiere lograr más personas para convertir, es necesario simplificar el proceso de conversión.

La idea es conseguir que puedan completar la tarea antes de que tengan tiempo para cambiar de opinión.

Asegúrese de que todos los formularios de la página de destino móvil recogen sólo la información más importante.

Por ejemplo, es probable que tenga dirección de correo electrónico de un usuario para descargas de libros electrónicos, suscripciones a boletines, ensayos libres, vales de descuento, y casi todo lo demás. Sin embargo, es posible que no tenga que pedir su nombre, dirección o número de teléfono.

Copia legible

Los estilos de fuente y tamaños que usted elija para su uso pueden tener un gran impacto sobre la legibilidad de la página de destino móvil.

Recuerde, usted está trabajando en una pequeña pantalla; por lo que necesita asegurarse de que es fácil de leer, a pesar del reducido espacio.

La idea es asegurarse de que la gente no tiene que entrecerrar los ojos o acercar la imagen para leer el contenido de su página de destino.

El tamaño de la fuente ideal de acuerdo con Google es de 16 píxeles, pero siempre se puede personalizar el tamaño de acuerdo con el estilo de fuente elegido.

No se olviden de dejar un amplio espacio entre líneas de texto para mejorar la legibilidad.

He aquí el ejemplo de Gumroad. Como se puede ver el texto es claramente visible.

Es fácil de leer debido al tamaño de letra grande y de forma sencilla. También contrasta con el color principal de la página.

Elementos cuidadosamente organizados

Si una página de destino móvil tiene demasiadas cosas, el diseño puede convertirse fácilmente en una monstruosidad.

Tal vez hay demasiado texto, o el título y la descripción están demasiado cerca del botón CTA.

Elementos no organizados pueden confundir a sus lectores, y afectar negativamente a su experiencia.

Para un diseño de página de destino móvil que impulsa las conversiones, asegúrese de que todos los elementos están perfectamente organizados.

Debe haber una cantidad suficiente de espacio en blanco entre los elementos de manera que las personas pueden navegar por la página fácilmente, y encontrar lo que están buscando.

Esto también mejorará la visibilidad de su botón de CTA.

Conclusión

Una vez que ha optimizado su página de destino móvil con elementos anteriores, es necesario comprobar si están o no están trabajando para usted.

Unos pequeños ajustes pueden ser necesarios para maximizar su eficacia.

Asegúrese de ejecutar pruebas A/B para cada elemento, y hacer los ajustes o cambios que sean necesarios.

El objetivo es asegurarse de que su página:

  • Se carga rápidamente
  • Es estéticamente agradable
  • Es evidente que dirige a la gente hacia la acción deseada

Todos ellos juegan un papel en lo bien que usted es capaz de convertir una audiencia.

Ahora usted sabe los elementos clave que debe utilizar para diseñar una página de alta conversión de aterrizaje móvil.

Y si necesita cualquier ayuda optimizar su sitio web, blog, o páginas de aterrizaje para las conversiones, puede ponerse en contacto conmigo.

 

Comparte en ...

Programa Web