25 imprescindibles de diseño web para móviles: Seduce y convierte

El mes pasado Google lanzó un estudio acerca de diseño web para móviles. Han realizado 119 horas de tests con usuarios para descubrir las mejores prácticas en diseño y desarrollo para móviles. El documento no es demasiado largo, (42 páginas), y si vas corto de tiempo, por aquí lo resumimos.

Diseño web para móviles

Estas son las 5 áreas que aborda el estudio:

1.- Página de inicio y navegación

Página de inicio y navegación

1.1.- Mantén las llamadas a la acción (CTAs) visibles y centradas

Lo habitual es que el usuario no esté prestando toda su atención cuando visita tu web, puede empezar a hacer scroll y no llegar a ver ni el menú. Así que el mejor lugar para una llamada a la acción es en el centro y lo más arriba posible.

1.2.- Menús cortos y fáciles

Los menús largos no funcionan bien en móviles, así que es una buena idea reducirlos categorizándolos por secciones. Por ejemplo, secciones como “nosotros”, “visión”, “misión”, “historia de la empresa”, etc, pueden ir todos juntos en una categoría que se llame “empresa”, o “quienes somos”. Al reducir el número de opciones, puede localizarse más rápidamente el contenido que se está buscando.

1.3.- Facilita la vuelta a la home

Si nos perdemos en un sitio web, o queremos comenzar a buscar otro contenido, es habitual querer volver a la home para comenzar desde ahí. Está comprobado que los usuarios esperan que al pulsar sobre el logo, en la cabecera, funcione como enlace de vuelta a la home. No los defraudes.

1.4.- Que las promociones no acaparen el protagonismo

Las promociones y anuncios pueden eclipsar el contenido que tienen alrededor, haciendo la realización de tareas más complicada al usuario. Esto es incluso más grave si está cerca de elementos de navegación. Sin ir mas lejos, la semana pasada ví a una persona pulsar tres veces un anuncio, mientras buscaba el menú de navegación. Si además la publicidad mostrada es de terceros, no sólo no controlas lo que se va a ver, sino que puede aumentar la confusión en la interfaz, así que hay que señalar claramente qué es publicidad.

2.- Búsqueda en el sitio

Búsqueda en el sitio

2.1.- Haz la búsqueda del sitio visible

No sólo hay que incluir una caja de búsqueda, sino hacerla visible y lo más arriba posible. Es donde primero la buscará cualquier visitante de la web. Recuerda que en muchos casos, la caja de búsqueda se pone en un lateral, y a veces en el móvil ese lateral queda debajo del contenido, por lo que la caja de búsqueda no estaría donde la espera el usuario.

2.2- Asegúrate de que los resultados de búsqueda son relevantes

Igual que ocurre con las búsquedas de Google, los usuarios rara vez revisarán la segunda o tercera página de resultados, así que es importante que los resultados relevantes aparezcan los primeros. Si además, tu caja de búsqueda dispone de autocompletar y corrección ortográfica, facilitarás la vida al usuario de móvil, que se equivoca mucho más al teclear que desde un ordenador de escritorio.

2.3.- Implementa filtros para facilitar la búsqueda

Mientras más material se pueda buscar, más necesarios son estos filtros. Los usuarios de dispositivos móviles los utilizan, pero es importante no permitir opciones de filtrado que arrojen cero resultados. Si el usuario percibe que la herramienta no funciona como debe, no la volverá a utilizar.

Guía a los usuarios a los mejores resultados de búsqueda

Para sitios web que venden a diferentes tipos de clientes, hay que ayudarles a que encuentren los resultados que les interesan cuanto antes. Por ejemplo, si tienes una tienda de ropa, preguntar la talla antes de hacer la búsqueda evitará mostrar productos que no sean para ellos.

3.- Comercio y Conversiones

Comercio y conversiones

3.1.- Deja explorar antes de convertir

Pedir el registro antes de ofrecer nada usualmente empeora las conversiones. Es importante mostrar todo lo posible al usuario no registrado, especialmente si la marca no es conocida. Tus visitas quieren saber lo que se ofrece antes de dejar sus valiosos datos personales.

3.2.- Permite las compras sin registro

La opción de comprar como invitado debe estar presente siempre. La mayoría de las veces se prefiere en una primera compra. Si repiten, probablemente saldrá de ellos realizar el registro. Es necesario dar buenos motivos o beneficios para hacer el registro. En ocasiones, un simple descuento puede funcionar.

3.3.- Utiliza la información disponible para maximizar la comodidad

Especialmente en el caso de usuarios registrados, es conveniente autorrellenar todos los campos de formulario posibles con la información que ya tenemos. Hay que dar la opción de cambiar cualquier dato (que tengamos la dirección guardada no significa que todos los pedidos vayan a ir al mismo sitio).

3.4.- Ofrece la opción de llamar directamente

En muchos casos es preferible llamar y hablar con alguien, especialmente para tareas complejas o formularios largos. Es muy fácil convertir un número de teléfono en un enlace que permita hacer una llamada directa desde el móvil. Sólo hay que convertirlo en enlace, añadir el prefijo “tel” (como el mailto para emails directos), y recordar añadir el prefijo del país. Por ejemplo, si quiero que mi teléfono 555 66 77 sea un enlace para llamar desde el móvil, el código sería:

<a href=”tel:+345556677″>555 66 77</a>

En este ejemplo utilizamos el código internacional para llamar a España, infórmate en cada caso del código telefónico para tu país. Como puedes ver en el ejemplo, no es necesario añadir el doble cero de llamadas internacionales.

3.5.- Facilita la conversión desde otro dispositivo

Es frecuente que un usuario navegue por tu sitio web desde su móvil, pero a la hora de comprar y rellenar un formulario prefiera hacerlo desde un ordenador convencional. Por esto es interesante dar opciones para guardar el progreso (por ejemplo, los artículos que están en el carro de la compra), o enviar algún producto directamente a su email, para que puedan completar la tarea más tarde.

4.- Formularios

Formularios

4.1.- Agiliza la entrada de datos

Los usuarios agradecen los formularios en los que el teclado se adapta en función del tipo de datos de entrada, apareciendo un teclado numérico para los números de teléfono, otro con una @ para emails, etc. También es importante dar la opción de avanzar a través de los campos del formulario, para evitar tener que ir pulsándolos con el dedo.

4.2.- Elige el campo de formulario óptimo para cada caso

No todos los campos de formulario deben ser de texto. Utiliza el resto de opciones de formulario disponibles, para un usuario de pantalla táctil es más fácil elegir entre varias opciones que teclear. Hay que comprobar el tamaño de estas opciones para asegurarnos de que son fáciles de seleccionar con el dedo.

4.3.- Calendario visual para fechas

Es difícil saber qué día empieza el próximo fin de semana, y aún más complicado si es dentro de unos meses. Un calendario visual evitará que se consulte un calendario en otro sitio, y distraer al usuario. Si hay que definir fechas de entrada y de salida, es importante que se etiqueten claramente. También hay que evitar que se seleccionen fechas imposibles (como hacer una reserva para el mes pasado, por ejemplo).

4.4.- Soluciona los errores en tiempo real

Validar en tiempo real hace que el usuario no tenga que buscar a posteriori qué campo rellenó mal. Debe poder distinguir el error rápidamente (por ejemplo, contorneando el campo en rojo), y los mensajes de error deben ser fáciles de entender y breves.

4.5.- Diseña formularios eficientes

Introduce el menor número de campos necesarios, y autocompleta los que puedas si el usuario está identificado y tenemos los datos. Si el formulario consta de varias pantallas, informar al usuario de donde está en cada momento con una barra de progreso arriba del todo.

5.- Usabilidad

Usabilidad

5.1.- Optimiza toda la web para móviles

Cambiar la optimización de una web a móvil por partes no es una opción. Los usuarios se sienten más perdidos en una web en las que algunas partes están optimizadas y otras no, que en una web completamente creada para equipos de escritorio.

5.2.- Evita que sea necesario el zoom

La necesidad de hacer zoom puede hacer que nos perdamos partes importantes de la web, por lo que hay que evitarla. Se puede deshabilitar la opción de hacer zoom, pero si la web está bien optimizada para móviles el usuario no necesitará intentarlo.

5.3.- Haz las imágenes de producto ampliables

El cliente necesita ver lo que compra. Normalmente esperan que las imágenes de producto puedan verse a alta resolución para poder apreciar los detalles. Otras ayudas, como vistas en las que se pueda rotar el producto, también son apreciadas.

5.4.- Explica qué orientación de pantalla es mejor

Comunica qué orientación de pantalla funciona mejor, pero asegúrate de que las tareas se pueden completar incluso si no lo hacen como se les indica.

5.5.- Mantén al usuario en la misma ventana del navegador

Evita abrir pestañas nuevas porque desde el móvil es más complicado moverse entre ellas, y puede perderse el foco de lo que se estaba haciendo. A veces, antes de realizar una compra se buscan cupones descuento en otra pestaña, considera incluir algún descuento o cupón desde la web.

5.6.- Evita llamar “Vista completa” o “vista clásica” a la versión de escritorio

Si la web tiene otra versión para equipos de escritorio, evita estos nombres porque los visitantes pueden pensar que en la versión móvil hay menos información, y saltarán a la versión de escritorio.

5.7.- Explica claramente por qué necesitas geolocalizar

El usuario debe entender siempre para qué se le quiere localizar. Resulta confuso buscar un hotel en otra zona y que en la búsqueda aparezcan opciones en nuestra zona. Utilizar sólo cuando sea necesario.

Bonus track:
Los anuncios también deben adaptarse: No sólo visualmente, debemos asegurarnos de que envian la visita a la versión móvil de la web.
Orden de carga lógico: si la página es pesada, un buen orden de carga permitirá interactuar con ella aunque no haya descargado toda la información.
Haz que cargue rápido: minimiza la cantidad de datos a descargar, y el número de paquetes. Hay técnicas, como el diseño “mobile first” y la compresión Gzip, que ahorran tiempo y recursos a los visitantes desde smartphones. La mayoría tiene una tarifa de datos limitada, así que ahorrarles tiempo es una ventaja, y mejora los resultados en buscadores.
Prueba en diferentes dispositivos: No se trata de Android o Iphone, las diferentes versiones no funcionan exactamente igual, y los diferentes tamaños de pantalla pueden dar problemas. Hay que probar en todos los dispositivos posibles.
Analiza el tráfico: Asegúrate de que haces seguimiento aparte para las visitas desde móvil. Su comportamiento es diferente y analizarlos por separado da información útil.

Descarga el documento original de Google (en inglés, PDF)

Suscribete a Dispersium

2 Comentarios

  1. Profesor de SEO

    Realmente interesante todos los puntos.
    Gracias por el Check List.

  2. Eduardo

    Algunos son obvios pero a veces lo obvio también se nos pasa por alto… Gracias a tí por tu comentario.

Trackbacks/Pingbacks

  1. Mobile | Pearltrees - […] 25 imprescindibles de diseño web para móviles: Seduce y convierte - Dispersium […]
  2. Mobile first: errores a evitar - Dispersium 2015 - […] saber más: 25 imprescindibles de diseño web para móviles: Seduce y convierte – Dispersium Mobile first, el…
curso Divi actualizado y en español