Principios básicos de diseño para móviles

En este artículo vamos a explicar algunos de los principios que Google comenta en este pdf, Principles of mobile site design: delight users and drive conversions.

Diseño para móviles

Google and AnswerLab intentan responder qué es lo que hace que un sitio este bien diseñado para móviles. Y es que hoy en día, dada la cantidad de personas que navegan con móviles y tablets es algo que como diseñadores tenemos que averiguar.

Usabilidad

Optimiza todo el sitio

Los usuarios navegan más fácilmente por sitios optimizados que cuando intentan navegar en las versiones de escritorio.

Si ambas partes están mezcladas es incluso peor. Y según como esté realizado el diseño, puede que les parezcan webs diferentes.

Optimiza web para móviles

El zoom no es necesario

Los usuarios se sienten frustrados cuando al hacer zoom se pierden las llamadas a la acción o mensajes.

No zoom

Algunos sitios incluso deshabilitan el zoom en sus pantallas. Si la web está bien diseñada, los usuarios no necesitan hacer zoom.

Las fotos son importantes

Sobre todo en tiendas de ropa u hoteles, donde los detalles son importantes. Estas tienen que verse bien, y ser fáciles de visualizar. Osea que ojo con los diseños de galerías.

Vertical vs Horizontal

En el estudio los participantes suelen mantener el móvil en la misma posición hasta que algo les motiva a girarlos.

El diseño debe ser adaptado para que sea lo más optimo para una posición horizontal o vertical. Si hace falta, hay que indicarles que es mejor la otra vista.

Si les sugieres que cambien a una determinada orientación, asegúrate que las llamadas a la acción sean visibles aunque no la cambien.

Diseño y rotación en móviles

Siempre en la misma ventana del navegador

Cambiar entre ventanas en un smartphone puede ser complejo y algunos usuarios puede perderse, y no saber donde se ha metido la ventana que muestra tu web.

Diseño responsive

Hay que mantener a los usuarios en una misma ventana, evitando llamadas a la acción que salten a una nueva ventana, como por ejemplo, ofreciéndoles ofertas.

Evita que la web para escritorio parezca “más completa”

Cuando los usuarios ven una opción llamada “Web completa” vs “Versión móvil” asumen que el sitio móvil ofrece menos productos/servicios que la web completa y eligen la versión completa porque tiene “mucha más información”.

Diseño web para móvil

Usa términos como Escritorio mejor que Completa, para dar a entender que tanto la web móvil como la de escritorio ofrecen una versión completa.

Quiero saber donde estás

Los usuarios tienen que entender porque necesitas saber su ubicación.

No des por sentado qué quieren, por ejemplo, reservar una habitación en la ciudad en la que están, sino que deja el espacio en blanco y ofréceles un listado con destinos cercanos o con botones tipo “Cerca de mi”.

Geoposicionamiento

Diseño Home

Lo básico:

  • Menús cortos
  • El logotipo es un “botón” que lleva a la home

Mantener llamadas a la acción a la vista

El elemento de acción tiene que estar situado en la parte más importante del cuerpo de la pantalla (Mira este post si te interesa sabes más), con las tareas secundarias disponibles en menús o abajo.

Los CTA no tienen porque ser los mismos que en la versión de escritorio.

CTA en móviles

El protagonismo es para la acción principal.

Las promociones dificultan al usuario realizar la tarea principal. Las ofertas no pueden quitar la atención al CTA.

No poner pop-ups sino banners dentro de la página

Ofertas en la home

Caja de búsqueda

La caja de búsqueda es uno de los elementos más importantes para ayudar a los usuarios a encontrar rápidamente lo que necesitan. Sobre todo cuando en una pantalla pequeña hay menos espacio para desplegar y navegar por menús.

No la escondas

La caja tiene que estar en la parte superior de la página. Si es necesario que esté siempre a mano, en otras pantallas que accedan desde un botón más pequeño (Típico icono de Lupa).

Diseño caja de busqueda

Resultados relevantes

No sirve de nada que tu buscador les de miles de páginas de resultados. Tampoco esperes que introduzcan correctamente los parámetros de búsqueda, ni que sepan como buscar en según que comercios. Ayúdales a buscar con autocorrecciones y con suggests.
Suggest en el movil

Los filtros ayudan

Los usuarios quieren filtros que les ayuden a reducir el volumen de resultados.
Es importante mostrar el número de resultados que quedan antes de la aplicación de cada filtro.

Filtros

Mejores resultados

Si el catálogo de la web es muy extenso y se ofrecen muchos productos, una preselección puede ayudar.

Filtros ayudan

Por ejemplo, puedes guiar a los usuario para que obtengan mejores resultados, preguntándoles al inicio si desean:

  • Zapatos para mujeres
  • Zapatos para hombres
  • Zapatos para niños

Comercio

Normas de diseño básico

  • Permite a los usuarios usar la web sin registrarse
  • Ofrece la opción de compra sin registro

Permite compra sin registro

Rellenales los formularios

Los usuarios odian rellenar formularios y más desde el móvil. Si están registrados o tienes la información, dásela ya escrita.

No escondas el teléfono

En el proceso de compra, que haya visible un teléfono (y que al clicarlo les salte directamente la llamada, no olvidemos que están con un móvil en la mano) ayuda a los usuarios a llamar:

  • Si desconfían
  • Si necesitan más información
  • Antes de realizar una tarea compleja como rellenar un formulario complejo

Comercio electrónico

Ponles fácil la conversión

Ofréceles opciones para mandarse la información y que la puedan revisar/comprar más tarde:

  • Email
  • Guardar carrito
  • Redes sociales

Fácil conversión

Formularios

Pantallas con números

Si tienen que meter un número, muéstrales la pantalla con teclado numérico.
Y si ya han metido una información o la conoces, dásela rellenada.

Teclado numerico

Formato adecuado para cada campo

En los campos con múltiples opciones hay que elegir cual es el selector más adecuado, pensando además en el tamaño mínimo que se necesita para poder pulsarlo.

Formularios adecuados

Calendarios

Muéstrales un calendario visual cuando tengan que poner una fecha, para que no tengan que ir al calendario del smartphone.

Calendarios en los formularios

Para evitar confusiones el diseño debe mostrar de una manera sencilla cuando son las fechas de entrada y salida.

Minimiza errores

Valida los errores en tiempo real para que no tengan que darle dos veces a la tecla de Enviar.

Usabilidad errores formularios

Asegúrate que las etiquetas de los campos son visibles cuando están entrando la información.

Formularios eficientes

Indícales los pasos que se necesitan para completar el formulario para que los usuarios sepan donde están.

Como ya hemos comentado antes, no les hagas rellenar dos veces campos ya introducidos o que por ser usuarios registrados deberías conocer.

Diseños de formularios para móviles

Si quieres saber más sobre móviles te recomiendo que te leas este artículo de www.uxmatters.comInsights on Switching, Centering, and Gestures for Touchscreens.

Nota: Todas las imágenes están obtenidas del documento Principles of mobile site design: delight users and drive conversions.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *